Added tooltips and made location save dialog draggable

predict/css/tipsy.css

@@ -0,0 +1,7 @@
+.tipsy { padding: 5px; font-size: 10px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat;  background-image: url(../images/tipsy.gif); }
+  .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
+  .tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
+  .tipsy-north { background-position: top center; }
+  .tipsy-south { background-position: bottom center; }
+  .tipsy-east { background-position: right center; }
+  .tipsy-west { background-position: left center; }

predict/index.php

@@ -25,15 +25,17 @@ $time = time() + 3600;
 <script type="text/javascript" src="http://www.google.com/jsapi?key=<?php echo GMAPS_API_KEY; ?>">
 </script>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
-<link href="css/pred.css" type="text/css" rel="stylesheet">
+<link href="css/pred.css" type="text/css" rel="stylesheet" />
+<link rel="stylesheet" href="css/tipsy.css" type="text/css" />
 <link href="css/cupertino/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet">
 <script type="text/javascript">
-// load jquery and jqueryui before loading jquery.form.js later
+// Load jquery and jqueryui before loading jquery.form.js later
 google.load("jquery", "1.4.2");
 google.load("jqueryui", "1.8.1");
 </script>
 <script src="js/jquery.form.js" type="text/javascript"></script>
 <script src="js/jquery.jookie.js" type="text/javascript"></script>
+<script src="js/jquery.tipsy.js" type="text/javascript"></script>
 <script src="js/date.jsport.js" type="text/javascript"></script>
 <script src="js/pred.js" type="text/javascript"></script>
 <script type="text/javascript">
@@ -118,6 +120,7 @@ var hlTimeout = 5000; // high latency
 
 <!-- save location -->
 <div id="location_save" class="box ui-corner-all">
+    <img src="images/drag_handle.png" class="handle" />
     <h1>Save Launch Location</h1><br />
     <form name="location_save_form" id="location_save_form">
     <table name="req_table" id="req_table">
@@ -167,7 +170,7 @@ var hlTimeout = 5000; // high latency
                 <td>
                     Launch Site:
                     <span>
-                    <a id="cookieLocations">Custom</a>
+                    <a id="cookieLocations" class="tipsyLink" title="View your saved launch sites">Custom</a>
                     </span>
                 </td>
 		<td>
@@ -185,12 +188,12 @@ var hlTimeout = 5000; // high latency
     <tr>
     <td>
         <span>
-        <a id="setWithClick">Set With Map</a>
+        <a id="setWithClick" class="tipsyLink" title="Use the map to set your desired launch site">Set With Map</a>
         </span>
     </td>
     <td>
         <span>
-        <a id="req_open">Save Location</a>
+        <a id="req_open" class="tipsyLink" title="Save this location to a browser cookie">Save Location</a>
         </span>
     </td>
     </tr>

predict/js/jquery.tipsy.js

@@ -0,0 +1,104 @@
+(function($) {
+    $.fn.tipsy = function(options) {
+
+        options = $.extend({}, $.fn.tipsy.defaults, options);
+        
+        return this.each(function() {
+            
+            var opts = $.fn.tipsy.elementOptions(this, options);
+            
+            $(this).hover(function() {
+
+                $.data(this, 'cancel.tipsy', true);
+
+                var tip = $.data(this, 'active.tipsy');
+                if (!tip) {
+                    tip = $('<div class="tipsy"><div class="tipsy-inner"/></div>');
+                    tip.css({position: 'absolute', zIndex: 100000});
+                    $.data(this, 'active.tipsy', tip);
+                }
+
+                if ($(this).attr('title') || typeof($(this).attr('original-title')) != 'string') {
+                    $(this).attr('original-title', $(this).attr('title') || '').removeAttr('title');
+                }
+
+                var title;
+                if (typeof opts.title == 'string') {
+                    title = $(this).attr(opts.title == 'title' ? 'original-title' : opts.title);
+                } else if (typeof opts.title == 'function') {
+                    title = opts.title.call(this);
+                }
+
+                tip.find('.tipsy-inner')[opts.html ? 'html' : 'text'](title || opts.fallback);
+
+                var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height: this.offsetHeight});
+                tip.get(0).className = 'tipsy'; // reset classname in case of dynamic gravity
+                tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
+                var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight;
+                var gravity = (typeof opts.gravity == 'function') ? opts.gravity.call(this) : opts.gravity;
+
+                switch (gravity.charAt(0)) {
+                    case 'n':
+                        tip.css({top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-north');
+                        break;
+                    case 's':
+                        tip.css({top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-south');
+                        break;
+                    case 'e':
+                        tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}).addClass('tipsy-east');
+                        break;
+                    case 'w':
+                        tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}).addClass('tipsy-west');
+                        break;
+                }
+
+                if (opts.fade) {
+                    tip.css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: 0.8});
+                } else {
+                    tip.css({visibility: 'visible'});
+                }
+
+            }, function() {
+                $.data(this, 'cancel.tipsy', false);
+                var self = this;
+                setTimeout(function() {
+                    if ($.data(this, 'cancel.tipsy')) return;
+                    var tip = $.data(self, 'active.tipsy');
+                    if (opts.fade) {
+                        tip.stop().fadeOut(function() { $(this).remove(); });
+                    } else {
+                        tip.remove();
+                    }
+                }, 100);
+
+            });
+            
+        });
+        
+    };
+    
+    // Overwrite this method to provide options on a per-element basis.
+    // For example, you could store the gravity in a 'tipsy-gravity' attribute:
+    // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
+    // (remember - do not modify 'options' in place!)
+    $.fn.tipsy.elementOptions = function(ele, options) {
+        return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
+    };
+    
+    $.fn.tipsy.defaults = {
+        fade: false,
+        fallback: '',
+        gravity: 'n',
+        html: false,
+        title: 'title'
+    };
+    
+    $.fn.tipsy.autoNS = function() {
+        return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
+    };
+    
+    $.fn.tipsy.autoWE = function() {
+        return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
+    };
+    
+})(jQuery);

predict/js/pred.js

@@ -27,6 +27,7 @@ $(document).ready(function() {
     // make launch card draggable
     $("#input_form").draggable({containment: '#map_canvas', handle: 'img.handle', snap: '#map_canvas'});
     $("#scenario_info").draggable({containment: '#map_canvas', handle: 'img.handle', snap: '#map_canvas'});
+    $("#location_save").draggable({containment: '#map_canvas', handle: 'img.handle', snap: '#map_canvas'});
     $("#location_save_local").draggable({containment: '#map_canvas', handle: 'img.handle', snap: '#map_canvas'});
     $("#run_pred_btn").button();
     $("#req_sub_btn").button();
@@ -721,6 +722,7 @@ function setupEventHandlers() {
             $("#req_name").val("Unnamed");
             $("#location_save").fadeIn();
     });
+    $(".tipsyLink").tipsy({fade: true});
     google.maps.event.addListener(map, 'mousemove', function(event) {
         showMousePos(event.latLng);
     });