Added drag handles, windows snap to edges of screen

predict/css/pred.css

@@ -114,7 +114,8 @@ a { text-decoration: underline; color: #333; cursor: pointer; }
 }
 
 #input_form {
-    height:370px;
+    max-height:370px;
+    overflow: auto;
     width: 400px;
     padding: 5px;
     bottom: 0; right: 0;
@@ -124,12 +125,18 @@ a { text-decoration: underline; color: #333; cursor: pointer; }
     position: absolute;
     top: 25px;
     right: 0px;
-    border-right: none;
     width: 400px;
     text-align:center;
     padding: 10px;
 }
 
+img.handle {
+    position: relative;
+    float:left;
+    top:0px;
+    left:0px;
+    z-index:100;
+}
 
 td.right-td {
 	text-align: right;

predict/index.php

@@ -69,6 +69,7 @@ var clickMarker;
 
 <!-- scenario info -->
 <div id="scenario_info" class="box">
+<img src="images/drag_handle.png" class="handle" />
 <h1>Scenario Information</h1>
 <span id="cursor_info">Current mouse position: 
 Lat: <span id="cursor_lat">?</span> 
@@ -115,6 +116,7 @@ No guarantee is given for the accuracy, precision or reliability of the data pro
 </div>
 
 <div id="input_form" class="box"> 
+<img class="handle" src="images/drag_handle.png" />
 <form action="" id="modelForm" name="modelForm">
 <table>
 	<tr>

predict/js/pred.js

@@ -25,7 +25,8 @@ $(document).ready(function() {
     populateLaunchSite();
     setupEventHandlers();
     // make launch card draggable
-    $("#input_form").draggable({containment: '#map_canvas'});
+    $("#input_form").draggable({containment: '#map_canvas', handle: 'img.handle', snap: '#map_canvas'});
+    $("#scenario_info").draggable({containment: '#map_canvas', handle: 'img.handle', snap: '#map_canvas'});
 
     // see if we want an old prediction displayed
     if ( current_uuid != '0' ) {