Fullscreen updates.

1. Move fullscreen button to lower right.
2. Added new SVG images to indicate which action the button will perform.
3. Themed the buttons so they match the rest of viewer.

This isn't quite ready to be merged, but I wanted to get some feedback.  I'm not much for design, so I assume @emackey may want to tweak the SVGs.

Also, I'm considering pulling out this code into it's own widget, but I wasn't sure if that was overkill.  I'm leaning towards doing it (and also de-dojo-fying it in the process).  It will go along nicely with other things we're doing elsewhere (like the cesium-widget branch).

Source/Widgets/Dojo/CesiumViewerWidget.css

@@ -30,7 +30,7 @@
     position: absolute;
     bottom: 0;
     left: 169px;
-    right: 2px;
+    right: 29px;
     height: 27px;
     padding: 0;
     margin: 0;
@@ -44,7 +44,7 @@
     left: 0;
     padding: 0;
     width: 169px;
-    height: 112px;    
+    height: 112px;
 }
 
 .cw-cesiumLogo {
@@ -82,7 +82,24 @@
 }
 
 .cw-viewFullscreen {
-    background-position: -120px 0;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    border: solid 1px #E5F2FE;
+    background-color: #FFF;
+    background-image: url(../Images/enterFullscreen.svg);
+    background-size: 27px 27px;
+    width: 27px;
+    height: 27px;
+}
+
+.cw-exitFullscreen {
+    background-image: url(../Images/exitFullscreen.svg);
+}
+
+.cesium-darker .cw-viewFullscreen {
+    border: solid 1px #888;
+    background-color: #222;
 }
 
 .cw-viewButtons {
@@ -115,4 +132,4 @@
     background-position: center;
     background-repeat: no-repeat;
     background-image: url(../Images/ajax-loader.gif);
-}
+}

Source/Widgets/Dojo/CesiumViewerWidget.html

@@ -9,8 +9,6 @@
             data-dojo-props="iconClass: 'cw-viewIcon cw-view3D', showLabel: false, checked: true, label:'3D View'"></div>
         <div data-dojo-attach-point="viewColumbus" data-dojo-type="dijit.form.ToggleButton"
             data-dojo-props="iconClass: 'cw-viewIcon cw-viewColumbus', showLabel: false, label:'Columbus View'"></div>
-        <div data-dojo-attach-point="viewFullscreen" data-dojo-type="dijit.form.Button"
-            data-dojo-props="iconClass: 'cw-viewIcon cw-viewFullscreen', showLabel: false, label:'Toggle Full Screen'"></div>
         <div data-dojo-attach-point="imagery" data-dojo-type="dijit.form.DropDownButton"
             data-dojo-props="showLabel: true, label:'Imagery'">
             <div data-dojo-type="dijit.TooltipDialog">
@@ -28,5 +26,8 @@
     <div data-dojo-attach-point="timelineContainer" class="cw-timelineContainer"></div>
     <div data-dojo-attach-point="animationContainer" class="cw-animationContainer"></div>
     <a class="cw-cesiumLogo" data-dojo-attach-point="cesiumLogo" href="http://cesium.agi.com/" target="_blank"></a>
+    <div data-dojo-attach-point="viewFullscreen"
+        data-dojo-type="dijit.form.ToggleButton"
+        data-dojo-props="iconClass: 'cw-viewFullscreen', showLabel: false, label:'Toggle Full Screen'"></div>
     <div class="cw-loading" data-dojo-attach-point="loading"></div>
 </div>

Source/Widgets/Dojo/CesiumViewerWidget.js

@@ -790,8 +790,13 @@ define([
             viewColumbus.set('checked', false);
 
             if (Fullscreen.isFullscreenEnabled()) {
+                if (Fullscreen.isFullscreen()) {
+                    viewFullscreen.iconNode.classList.toggle('cw-exitFullscreen');
+                }
+
                 on(document, Fullscreen.getFullscreenChangeEventName(), function() {
                     widget.resize();
+                    viewFullscreen.iconNode.classList.toggle('cw-exitFullscreen');
                 });
 
                 on(viewFullscreen, 'Click', function() {