Merge pull request #7 from jsulak/master

Added control to make Google Map full-screen.

public_html/gmap.html

@@ -21,6 +21,7 @@
 		<div id="map_container">
 			<div id="map_canvas"></div>
 		</div>
+		<div id="grippie"></div>
 		<div id="sidebar_container">
 			<div id="sidebar_canvas">
 				<div id="timestamps" style="align: center">

public_html/script.js

@@ -618,4 +618,16 @@ function planeTRclick(hex) {
 	selectPlaneByHex(hex);
 	refreshTableInfo();
 	refreshSelected();
-}
+}
+
+// Bind grippie actions
+$(function() {
+	var handleClick = function(e) {
+		e.preventDefault();
+		$("#sidebar_container").toggle();
+		$("#map_canvas, #grippie").toggleClass("fullscreen");
+		google.maps.event.trigger(GoogleMap, "resize");		
+	};
+	
+	$("#grippie").click(handleClick);
+});

public_html/style.css

@@ -5,7 +5,15 @@ html, body {
 div#map_container     { float: left; width: 100%; height: 100%; }
 div#map_canvas        { height: 100%; margin-right: 420px; }
 
-div#sidebar_container { float: left; width: 410px; margin-left: -410px; height: 100%; overflow: auto; }
+div#sidebar_container { float: left; width: 400px; margin-left: -400px; height: 100%; overflow: auto; }
+
+div#grippie { border: 1px solid #ddd; border-width: 0 1px 1px; cursor: e-resize; width: 9px;
+			  overflow: hidden; background-color: #eee; background-image: url('grippie.png');
+			  background-repeat: no-repeat; background-position: 50% 50%;
+			  float: left; margin-left: -420px; height: 100%; }
+
+div#grippie.fullscreen { float: right; cursor: w-resize; }
+div#map_canvas.fullscreen { margin-right: 11px; }
 
 div#SpecialSquawkWarning { position: absolute; bottom: 25px; right: 430px; border: 2px solid red;
     background-color: #FFFFA3; opacity: 0.75; filter:alpha(opacity=75); padding: 5px;