From 382515d5b2f55a812152018941f47ca9045a7ffe Mon Sep 17 00:00:00 2001
From: Seth Call <sethcall@gmail.com>
Date: Wed, 11 Jun 2014 14:08:27 -0500
Subject: [PATCH] * VRFS-1777 - let unassigned tracks also show all text on
 hover

---
 .../javascripts/configureTracksHelper.js      | 53 ++++++++++++++-----
 1 file changed, 41 insertions(+), 12 deletions(-)

diff --git a/web/app/assets/javascripts/configureTracksHelper.js b/web/app/assets/javascripts/configureTracksHelper.js
index a1f8d2b85..1da45fab9 100644
--- a/web/app/assets/javascripts/configureTracksHelper.js
+++ b/web/app/assets/javascripts/configureTracksHelper.js
@@ -22,25 +22,30 @@
     var $instrumentsHolder        = null;
     var isDragging                = false;
 
+    function removeHoverer($hoverChannel) {
+      var $channel = $hoverChannel.data('original')
+      $channel.data('cloned', null);
+      $hoverChannel.remove();
+    }
+
     function hoverIn($channel) {
       if(isDragging) return;
 
-      $channel.css('color', 'white')
-
       var $container = $channel.closest('.target');
       var inTarget = $container.length > 0;
       if(!inTarget) {
         $container = $channel.closest('.channels-holder')
       }
 
-      $channel.data('container', $container)
-      $channel.addClass('hovering');
       var $inputs = $container.find('.ftue-input');
 
       var index = $inputs.index($channel);
-      $channel.css('background-color', '#333');
       //  $channel.css('padding', '0 5px');
       if(inTarget) {
+        $channel.data('container', $container)
+        $channel.addClass('hovering');
+        $channel.css('color', 'white')
+        $channel.css('background-color', '#333');
         $channel.css('border', '#333');
         $channel.css('border-radius', '2px');
         $channel.css('min-width', '49%');
@@ -49,10 +54,28 @@
         $container.css('overflow', 'visible');
       }
       else {
-     //   TODO: make the unassigned work
-     //   $channel.css('min-width', $channel.css('width'));
-     //   $channel.css('position', 'absolute');
-     //   $container.addClass('compensate');
+        var $offsetParent = $channel.offsetParent();
+        var parentOffset = $offsetParent.offset();
+
+        var hoverChannel = $(context._.template($templateAssignablePort.html(), {id: 'bogus', name: $channel.text()}, { variable: 'data' }));
+        hoverChannel
+          .css('position', 'absolute')
+          .css('color', 'white')
+          .css('left', $channel.position().left)
+          .css('top', $channel.position().top)
+          .css('background-color', '#333')
+          .css('min-width', $channel.width())
+          .css('min-height', $channel.height())
+          .css('z-index', 10000)
+          .data('original', $channel)
+
+        $channel.data('cloned', hoverChannel);
+        hoverChannel
+          .hover(function(e) {}, function() { removeHoverer($(this)); })
+          .mousedown(function(e) {
+            $channel.trigger(e)
+          })
+        hoverChannel.prependTo($offsetParent);
       }
 
       $channel.css('z-index', 10000)
@@ -69,6 +92,12 @@
     }
 
     function hoverOut($channel) {
+
+      var $cloned = $channel.data('cloned');
+      if($cloned) {
+        return; // let the cloned handle the rest of hover out logic when it's hovered-out
+      }
+
       $channel
         .removeClass('hovering')
         .css('color', '')
@@ -88,9 +117,9 @@
 
       //var $container = $channel.closest('.target');
       var $container = $channel.data('container');
-      $container.css('overflow', '')
-      $container.removeClass('compensate');
-
+      if($container) {
+        $container.css('overflow', '')
+      }
     }
 
     function fixClone($clone) {