diff -r 0c2f890486c0 -r 3ddbfa64f596 src/cm/media/js/client/c_toc.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/client/c_toc.js	Fri May 11 12:00:40 2012 +0200
@@ -0,0 +1,147 @@
+gToc = null ;
+
+instanciateToc = function() {
+  gToc = {
+      'position':[CY.WidgetPositionExt.TL, CY.WidgetPositionExt.TL],
+      'tocId':CY.guid(),
+      'tocTitleId':CY.guid(),
+      'closeBtnId':CY.guid()
+  } ;
+  
+  var overlayHtml = {};
+  overlayHtml['headerContent'] = '<div id="' + gToc['tocId'] + '"><h3 id="' + gToc['tocTitleId'] + '"></h3>';
+
+  var toBeTOCced = getElementsByTagNames('h2,h3,h4,h5,h6', document.getElementById('maincontainer'));
+  if (toBeTOCced.length < 2) return false;
+  
+  var content = document.createElement('div');
+  for (var i=0;i<toBeTOCced.length;i++) {
+		var tmp = document.createElement('a');
+		tmp.innerHTML = toBeTOCced[i].innerHTML;
+		tmp.className = 'page indent' + toBeTOCced[i].nodeName;
+		content.appendChild(tmp);
+		var headerId = toBeTOCced[i].id || 'link' + i;
+		tmp.href = '#' + headerId;
+		toBeTOCced[i].id = headerId;
+	}
+  overlayHtml['bodyContent'] = content.innerHTML;
+  
+  var width = gLayout.getTopICommentsWidth() ;
+  
+  var overlay = new CY.Overlay( {
+    zIndex :3,
+    shim :false, // until we really need it, no shim 
+    visible :false,
+    headerContent :overlayHtml['headerContent'],
+    bodyContent :overlayHtml['bodyContent'],
+    xy :[10,10],
+    width : width
+  });
+  overlay.get('contentBox').addClass("c-toc") ;
+  
+  // attach to DOM
+  overlay.render('#leftcolumn');
+  
+  CY.get("#"+gToc['tocTitleId']).set('innerHTML', gettext('Table of contents')) ;
+  
+  gToc['overlay'] = overlay ;
+  
+  var animationHide = null ;
+  animationHide = new CY.Anim({
+        node: overlay.get('boundingBox'),
+        duration: .3, //gPrefs['general']['animduration'],
+        easing: CY.Easing.easeOut
+    });   
+  gToc['animationHide'] = animationHide ; 
+  animationHide.set('to', { opacity: 0});// height : 0 doesn't work
+  gToc['animationHide-handle'] = animationHide.on('end', onTocHideAnimEnd, gToc);
+
+  var animationShow = null ;
+  animationShow = new CY.Anim({
+        node: overlay.get('boundingBox'),
+        duration: .3, //gPrefs['general']['animduration'],
+        easing: CY.Easing.easeOut
+    });   
+  gToc['animationShow'] = animationShow ; 
+  animationShow.set('to', { opacity: 1});
+  gToc['animationShow-handle'] = animationShow.on('end', onTocShowAnimEnd, gToc);
+  document.getElementsByClassName('c-toc')[0].style.width = width + 'px';
+}
+
+toggleTocFn = function() {
+  if (isTocVisible())
+    hideToc();
+  else
+    showToc();
+}
+
+hideToc = function() {
+  gToc['overlay'].hide();
+}
+
+onTocHideAnimEnd = function() {
+//  iComment['overlay'].blur() ;
+  this.overlay.hide() ;
+  gSync.resume() ;    
+}
+
+onTocShowAnimEnd = function() {
+  gSync.resume() ;    
+}
+
+showToc= function () {
+  removeFormErrMsg(gToc['tocId']) ;
+  gIComments.hide() ;
+  positionToc() ;
+  gToc['overlay'].show();
+}
+
+isTocVisible = function () {
+  if (gToc != null)
+    return gToc['overlay'].get('visible') ;
+  return false ;
+}
+
+positionToc = function () {
+  if (gToc != null) { 
+    var overlay = gToc['overlay'] ;
+    var boundingBox = overlay.get('boundingBox') ;
+
+    var commentFormHeight = boundingBox.get('offsetHeight') ;
+    var windowHeight = boundingBox.get('winHeight') ;
+
+    var pos = gToc['position'] ;
+    if (commentFormHeight > windowHeight) // trying to have save comment visible ... :
+      pos = [CY.WidgetPositionExt.BL, CY.WidgetPositionExt.BL] ;
+    
+    overlay.set("align", {points:pos});
+    if (commentFormHeight <= windowHeight)
+      overlay.set("y", overlay.get("y") + 30);
+    boundingBox.setX(boundingBox.getX() + gConf['iCommentLeftPadding']);
+  }
+}
+
+function getElementsByTagNames(list,obj) {
+	if (!obj) var obj = document;
+	var tagNames = list.split(',');
+	var resultArray = new Array();
+	for (var i=0;i<tagNames.length;i++) {
+		var tags = obj.getElementsByTagName(tagNames[i]);
+		for (var j=0;j<tags.length;j++) {
+			resultArray.push(tags[j]);
+		}
+	}
+	var testNode = resultArray[0];
+	if (!testNode) return [];
+	if (testNode.sourceIndex) {
+		resultArray.sort(function (a,b) {
+				return a.sourceIndex - b.sourceIndex;
+		});
+	}
+	else if (testNode.compareDocumentPosition) {
+		resultArray.sort(function (a,b) {
+				return 3 - (a.compareDocumentPosition(b) & 6);
+		});
+	}
+	return resultArray;
+}