segmenter.js: improve tagSelector behavior with segmenter

-tagselector appear closer to the user mouse
-tagSelector mousehover doesn't shrink the segmenter

browser/js/model.js

@@ -110,6 +110,11 @@ Model.prototype = {
         this.tagSelector.appendChild(this.tagSelectorList);
         
         document.body.appendChild(this.tagSelector);
+        $('.tagSelector').hover(function() { 
+          $(this).addClass('hovered');
+        }, function() {
+          $(this).removeClass('hovered');
+        });
     },
 
     /**
@@ -1728,12 +1733,13 @@ Model.prototype = {
      * open/build the tag/normalize menu for a clone
      * @param {integer} cloneID - clone index
      * */
-    openTagSelector: function (cloneID) {
+    openTagSelector: function (cloneID, e) {
         var self = this;
         cloneID = typeof cloneID !== 'undefined' ? cloneID : this.cloneID;
         this.tagSelectorList.innerHTML = "";
         this.cloneID=cloneID
         
+        
         for (var i = 0; i < this.tag.length; i++) {
             (function (i) {
                 var span1 = document.createElement('span');
@@ -1806,8 +1812,18 @@ Model.prototype = {
         
         
         if (cloneID[0] == "s") cloneID = cloneID.substr(3);
-        $(this.tagSelector).show("fast");
+        $(this.tagSelector).show();
         this.tagSelectorInfo.innerHTML = "tag for "+this.clone(cloneID).getName()+"("+cloneID+")"; 
+        
+        
+        //replace tagSeelector
+        var tagSelectorH = $(this.tagSelector).height()
+        var minTop = 40;
+        var maxTop = Math.max(40, $(window).height()-tagSelectorH);
+        var top = e.clientY - tagSelectorH/2;
+        if (top<minTop) top=minTop;
+        if (top>maxTop) top=maxTop;
+        this.tagSelector.style.top=top+"px";
     },
     
     /**

browser/js/segmenter.js

@@ -326,9 +326,13 @@ Segment.prototype = {
             $('#'+this.id)
                 .mouseleave(function(e){
                     if (e.relatedTarget != null && self.is_open){
-                        var seg = $(self.div_segmenter)
-                        seg.stop().animate({height: 100}, 250);
-                        self.is_open = false
+                        setTimeout(function(){
+                            if (!$(".tagSelector").hasClass("hovered")){
+                                var seg = $(self.div_segmenter)
+                                seg.stop().animate({height: 100}, 250);
+                                self.is_open = false
+                            }
+                         }, 200);
                     }
                 });
         } catch(err) {
@@ -515,8 +519,8 @@ Segment.prototype = {
         // Tag
         var svg_star = document.createElement('span')
         svg_star.setAttribute('class', 'starBox');
-        svg_star.onclick = function () {
-            self.m.openTagSelector(cloneID);
+        svg_star.onclick = function (e) {
+            self.m.openTagSelector(cloneID, e);
         }
         svg_star.appendChild(icon('icon-star-2', 'clone tag'))
         svg_star.setAttribute('id', 'color' + cloneID);