From 6ac0c831845ecb14e217ca769f0fdf0c5fbff4e8 Mon Sep 17 00:00:00 2001
From: Henrik Levkowetz <henrik@levkowetz.com>
Date: Sat, 26 Mar 2011 16:30:08 +0000
Subject: [PATCH] Merged [2963] from adam@nostrum.com: Meeting boxes now expand
 to reveal all text when users hover over them. Fixes ticket #602.  -
 Legacy-Id: 2972 Note: SVN reference [2963] has been migrated to Git commit
 f95ab9c1a4dc688adeab235f953ffa46f684394a

---
 ietf/templates/meeting/week-view.html | 105 +++++++++++++++++++++++++-
 1 file changed, 103 insertions(+), 2 deletions(-)

diff --git a/ietf/templates/meeting/week-view.html b/ietf/templates/meeting/week-view.html
index e60d3f7d1..e4e77bce2 100644
--- a/ietf/templates/meeting/week-view.html
+++ b/ietf/templates/meeting/week-view.html
@@ -44,10 +44,14 @@ var day = [
   'Friday'
 ];
 
+var divlist = [];
+
 var lastfrag;
 var lastheight;
 var lastwidth;
 
+setInterval("animate()",50);
+
 function draw_calendar()
 {
   window.setTimeout("draw_calendar()",1000);
@@ -123,6 +127,9 @@ function draw_calendar()
 
   for (i = 0; i < num_days; i++)
   {
+    //-----------------------------------------------------------------
+    // Draw weekday name
+    //-----------------------------------------------------------------
     var e = document.createElement("div");
 
     e.style.border="solid";
@@ -154,6 +161,8 @@ function draw_calendar()
     e.appendChild(div);
     body.appendChild(e);
 
+    //-----------------------------------------------------------------
+    // Draw weekday column border
     //-----------------------------------------------------------------
     e = document.createElement("div");
 
@@ -180,6 +189,11 @@ function draw_calendar()
     body.appendChild(e);
   }
 
+  //-----------------------------------------------------------------
+  // Draw a block for each meeting
+  //-----------------------------------------------------------------
+  var resize_func = function(div,t,l,w,h,to_fit)
+    { return function(){resize(div,t,l,w,h,to_fit);} }
 
   for (i = 0; i < items.length; i++)
   {
@@ -194,8 +208,8 @@ function draw_calendar()
       var sess_width = day_width / sessions[items[i].time_id];
       var sess_height = ((end_time - start_time) * minute_height) 
                         - 2 * (padding + border);
-      var sess_left = ((items[i].day - start_day) * day_width 
-                      + sess_width * used[items[i].time_id]);
+      var day_left = ((items[i].day - start_day) * day_width);
+      var sess_left = day_left + sess_width * used[items[i].time_id];
       var sess_top = ((start_time - day_start) * minute_height) + header_height;
 
       sess_width = sess_width - 2 * (padding + border);
@@ -230,6 +244,13 @@ function draw_calendar()
       e.style.padding=padding;
       e.style.fontFamily="sans-serif";
       e.style.fontSize="8pt";
+      e.id=i;
+
+      e.onmouseover=resize_func(e,sess_top,day_left,
+                                day_width-2*(padding+border),
+                                sess_height, true);
+
+      e.onmouseout=resize_func(e,sess_top,sess_left,sess_width,sess_height,false);
 
       var div = document.createElement("div");
       div.appendChild(document.createTextNode(items[i].time));
@@ -252,8 +273,11 @@ function draw_calendar()
       div.appendChild(italics);
 
       e.appendChild(div);
+
       body.appendChild(e);
 
+      e=undefined;
+
     }
   }
 
@@ -262,6 +286,83 @@ function draw_calendar()
   lastfrag = window.location.hash;
 }
 
+function resize(div,t2,l2,w2,h2,to_fit)
+{
+  // Move the element to the front
+  document.body.removeChild(div);
+  document.body.appendChild(div);
+
+  div.t2 = t2;
+  div.l2 = l2;
+  div.w2 = w2;
+  div.h2 = h2;
+  div.to_fit = to_fit;
+  div.percent = 0;
+  divlist.push(div);
+}
+
+function animate()
+{
+  var i;
+  for (i = divlist.length - 1; i >= 0; i--)
+  {
+    var div = divlist[i];
+    if (div.percent < 100)
+    {
+      div.percent += 5;
+      var t1 = parseFloat(div.style.top.replace("px",""));
+      var l1 = parseFloat(div.style.left.replace("px",""));
+      var w1 = parseFloat(div.style.width.replace("px",""));
+      var h1 = parseFloat(div.style.height.replace("px",""));
+
+      div.style.top = wavg(t1,div.t2,div.percent);
+      div.style.left = wavg(l1,div.l2,div.percent);
+      div.style.width = wavg(w1,div.w2,div.percent);
+      div.style.height = wavg(h1,div.h2,div.percent);
+
+      if (t1 == div.t2 && l1 == div.l2 &&
+          w1 == div.w2 && h1 == div.h2) { div.percent = 100; }
+
+    }
+    else
+    {
+      if (div.to_fit)
+      {
+        var tmp = div.style.height;
+        div.style.removeProperty("height");
+        if (div.h2 < div.clientHeight)
+        {
+          div.h2 = div.clientHeight;
+          div.percent = 0;
+        }
+        else
+        {
+          divlist.remove(i);
+        }
+        div.style.height = tmp;
+      }
+      else
+      {
+          divlist.remove(i);
+      }
+    }
+  }
+
+}
+
+function wavg(x1,x2,percent)
+{
+  var res = x2 * (percent / 100) + x1 * ((100 - percent) / 100);
+  return res;
+}
+
+// Array Remove - By John Resig (MIT Licensed)
+Array.prototype.remove = function(from, to) {
+  var rest = this.slice((to || from) + 1 || this.length);
+  this.length = from < 0 ? this.length + from : from;
+  return this.push.apply(this, rest);
+};
+
 </script>
 </head>
 <body onload="draw_calendar()" onresize="draw_calendar()" id="body">