From 62a0de4b00e4058d501fababc564e7def34563b8 Mon Sep 17 00:00:00 2001
From: riccardo <riccardo@parisson.com>
Date: Thu, 24 Feb 2011 18:31:29 +0100
Subject: [PATCH] Markers div and tab fixed (analysis and markers tabs).
 Adding, removing, moving and editing of markers fixed. Added two icons
 (edited in order to have transparent background). Pointer changed to fixed
 text "+" instead of the current pointer position (which hides the markers).
 Keeping the dynamical label of the current pointer position in a different
 place (so that it doesnt hide the markers) is too hard, given the current
 code.

---
 telemeta/htdocs/css/telemeta.css              |  36 +--
 telemeta/htdocs/images/download.png           | Bin 856 -> 870 bytes
 telemeta/htdocs/images/plots.png              | Bin 650 -> 632 bytes
 telemeta/htdocs/timeside/src/controller.js    |   9 +-
 telemeta/htdocs/timeside/src/markermap.js     |  66 ++---
 telemeta/htdocs/timeside/src/ruler.js         |  55 ++--
 .../telemeta_default/mediaitem_detail.html    | 246 +++++++++---------
 7 files changed, 196 insertions(+), 216 deletions(-)

diff --git a/telemeta/htdocs/css/telemeta.css b/telemeta/htdocs/css/telemeta.css
index c4dbdd31..de5ae009 100644
--- a/telemeta/htdocs/css/telemeta.css
+++ b/telemeta/htdocs/css/telemeta.css
@@ -127,9 +127,8 @@ a img { border: none; }
     background-color: #fff;
     color: #555;
     border: 1px solid #adadad;
-    width: 301px;
+    /*width: 301px;height: 17px;*/
     padding: 2px;
-    height: 17px;
     margin: 5px 0 0;
     font-size: 1em;
 }
@@ -751,40 +750,17 @@ a.image-link {
     padding: 1em;
 }
 
-/*
-code for tabs. See link http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/
-There is also a plugin jQuery UI, but is heavy, hard to understand (compared to implementing it on my own)
-and heavy for the page (the re are tons of files to download and include in the page)
-Example usage:
-    <ul class="tabs">
-        <li><a href="#tab1">Gallery</a></li>
-        <li><a href="#tab2">Submit</a></li>
-    </ul>
-
-    <div class="tab_container">
-        <div id="tab1" class="tab_content">
-            <!--Content-->
-        </div>
-        <div id="tab2" class="tab_content">
-           <!--Content-->
-        </div>
-    </div>
-*/
-
-
-
-
-
-
 .tab_unselected {
-    background-color: #999999;
-    color: #666666;
-    border: 1px solid #999999;
+    background-color: #cccccc;
+    font-weight: normal;
+    color: #333333;
+    border: 1px solid #cccccc;
     z-index: 0;
 }
 .tab_selected {
     background-color: #ffffff;
     color: #000000;
+    font-weight: bold;
     border-top: 1px solid #999999;
     border-right: 1px solid #999999;
     border-left: 1px solid #999999;
diff --git a/telemeta/htdocs/images/download.png b/telemeta/htdocs/images/download.png
index 7b969e9a4b81ed50c26e3cf71889a0761f55b34c..163ac879536bef516f1612d267558cb345f7a9bd 100644
GIT binary patch
delta 801
zcmV++1K#}D2IdBkBnkm@Qb$4nuFf3kkufrV7!U$7y@&cP0008!Nkl<ZNXOll&udgy
z7>1uSqwzXzC`996MzO_Uq7FiWLP!|UScEPzi$E5w1geNSdudl@Q@Y4Xa5Lr)5D^4r
z7Fh^J)I~~-#egEInn;^gha_Wkyw1!$KRy@1F-fU2G0s8{oW(sH?sMMvJKuY+5)o>D
zIYQKUtXaPBeEI<ouAY<Z#3<o94{;V13bX6b37Qj!)k*<su|>N0iu1=d%D#i!iEjN0
zYaA-15GRaXpQNq-B2DoF>Vp-CHK>rHF;-7Q^ou1MBlUIoxqnt^Q7D9nP%3D|x$?5L
z4yzsEwchG$u%N`^tSLV`>kx4tr^pC@IOlN2E(6F%0szihtXZr;5GSkagQxdzaO>Pj
ziS9gz)dpvlP8}E~M=x>v!fEm6rdNJVubufpqF;^z(6~8*7kMX61ZJN41Vu}JJ|G-B
z%D(S^Q7i0Z!8uFQwg_wMz#3DY&KfpsT1RxtdU7)bQa}AlS67$x^z_K^@Njj1fSrd<
zs5>{a{5$pXKlV6du-fp)t!MldwDIH5XX)tZAQp?!-`_8pOr|oRY4?7<J#|Ih9i3q|
z`+A82YYY?PIUc{-L+R@z)>_8K#)w2B^!4@8+uJMoe7<tnZEgFG%M%+I|80)fFH7aq
zPfzCg^WF;z(F9s+wAKLlzE5+1b2EuVf`NensVYtHKd<Mp+spXx^XR}Zmo0Md&I@wi
z9HFElWq@-IV+>kry1To{WHJm64oX#V{mk3LY_`Ochdxgp`D7cD_;pPLK~SE?7(|31
z2yo7kOeRUE)73RvpbdX-JI?&{U4nH{{Q4ab1WWdKp2x_@2%fi)Pw{wvoc8wi_s2Cr
zYip}?c6QRx&`|M?zqJY=91b%yG(@3LP!$zutqGQ$_<uW9ExgY;N3mF}&Z4))tH~$x
z^8uJeasBBju-0O&tqs8U{j!Rh0OIjDxm@mpENW?KsSHS^QYxKJ%hc4=iUFxqN>z-C
fPwwZp=72XHy1$j1@di2!00000NkvXXu0mjf4oQaU

delta 786
zcmV+t1MU3g2G|CWBn<>-K}|sb0I`n?{9y%=E;4@(4=f*%S3`LK00PxXL_t(Y$K96A
zOH@%9#(#IF>^3EVWkXI<k)+iiC<USnl!eg3SqLsFgo?;!AGOL&v~U%)8T|tyf}og%
ziy)&~7-gYggnej~eGKYkj<=b)=c|P{sZld(v#<kaaSsQ6=Xu`qKIdA-7()SvhXRi^
zix+>sjlJU4y)NRzeRzv(j8<44FZ-I>sR*51GQgT|kx0*Q<Lnj=9@&k*d=pA)ERTiJ
zhW-a5)U@5AEO>bN3XGCi9*fdIF(v*D3pV<Si*OR3R%nsOgE59oN?^3kE-R%`LgQU)
zue=7cN)%ej?6+1LWAwi%G6uBPXsH$f%s+nu09q-OoUg!Ov{_jne0lkh$6e>~?>&MN
z5-k@_;YvpOZu9KsWt_>erC-zg*G}Ny*atxAHXpX{mpEf!{ELH|RwSofyn!<uJbq=V
zoovurQMSX!+9FU=W~Ww?&0E*u-@cy2c#6oyt28t;(A?ZiPft&NfW1xaJbx7D^XPx{
zZ}w;@Q9|<K@mD^$HJrM1ow~X@0)YT+ZEeJ2vD|>N{f9Vu;VuJx<4nYVEKs1NWOy*a
zyP0Y-JHsfY=<n~x=kw9p+Dc1H3&~_Mci5HJ9OKULW(J>3@?$!aJ^k27lGj7uN%=zv
zArL|U;5ZHy6%~X+Av!ub@=Mc~-->^Erw=grbPC~0CgW*_o_{B?>ogh5mj!68ky0Xr
zps}%$SS&_oXJ>wK{nf5!BA(&>8;AFA9pa^7oT4&Z*Ue5TCB_(B*F|ehI2<M#jpo;A
zu8@4(agM360o-+doZ>y;x(oK$woPwuFSb3KPr+c2+S=N`$2CAzRTcI1^^|&)l;phQ
zb5;R(y<WPzyGf-|xfKW@a2K8UkDY2+vvHy|>2x|ji{^?~kSFv10mylAz4{a=rBF&0
z2H-eORz*Po!C;U?BC#xsDl02<10s<K(P)&>(a|LXB9Tb$s91GBzXb>U1Xr}Tl@T=e
Q2LJ#707*qoM6N<$f)jRkBLDyZ

diff --git a/telemeta/htdocs/images/plots.png b/telemeta/htdocs/images/plots.png
index 8cbf0ca47f13afdc21734a99142d4d7737a7328f..e8504dff03eddd02e05e3ade27694471cb84f89c 100644
GIT binary patch
delta 561
zcmV-10?z%41^5JzBnkm@Qb$4nuFf3kkufrV7!Uvx!`O)O0005_Nkl<ZILoz^y{h6+
z6opqNi6Iv?2#%eIMMSU(XeEe)g~hx^I>kb*eFJM>!A`50%0dva5kb&akr0E3V1n^K
zW(p@>f3FTWtINqc-&uQ~!zN7A#JlzF71Ls|fTn3reWTF`qA0eBXG!PtIr8~@8vu%b
z#bU(ea^3YUmrG<anKsL^;V+?Q!0_LtX{l85Fbs3yTd&thr_*f!VY}V_xO`31u7LpX
zJ(WuRy7pQ?03b>7K6J5IAe+rz11<d&Mezg{Me)XWQ@*BYUjbpIF%083fFBe^eeC!9
z(?5>mE}?gN_)ru@0RYZ{7L>9+R8@U{8F&wNaUcNbx{h2frvv!7Hn1#<!{LC<X7lpn
zr>vCMK$c|@2m}y~MzP!NP_0%mo6VjASF6=$`R5V@0ijR`1VNxuseq<wB$G+h>vbrK
zau;T^*}(HWd_Lb1YF(Ds>qR1wz;?Suuh&Dj+dXY+wOWYB<7hM*kY)L_&htEf1VMnq
z;ee{DU>N3j`?J{$&1TbdyWQw?I_UTN*lxEsY5aaaB9RCNg8@7q4}!rUrqd}TNrEiP
zkR<7|rzA;YGMS)Ot3lWGhy5B3hcFBSu~-a>qM%$ZLseC*R;!c8>2w~Gj>lsZ3Wc}K
zK#t>H8-4#}p8ktW(>(T+APCSLH2oGRP1E=T40z)0W%=So00000NkvXXu0mjfBJ>MY

delta 579
zcmV-J0=)hB1d0WaBn<>-K}|sb0I`n?{9y%=E;4@(4>JQu3=yaR00IX|L_t(I%dM16
z%Q0~j#;>{EL$g3?vXd-E%ErP<Nm=+TzJyQ0jI3rOvQcCqk_}3E*@!faNlY1e8L#s!
zbh~el!TmfryL0~6|JT(yr$cC(rs2);`5Vz{wZi#)hQ(resvD2Ts8lMip^L==i9`a2
z!vTNMXcRV^O;@+sY>-SQF`v)z@e0VYEc*RE27>{3p2u#tyVI$vic~5EK@eat7#>5H
z%O#S@BznExwbpDlk;~=ow7FakjYb0i9z$2F6<C%<r_;H6D-;SS7K_(BpU>aqx`SFS
zmx#yXHxB=fbUF>1rlG2;u5;q&N`3Y48SsDV=JVp`cs$<Jtyb%|Q$<n0aon$fda$4I
z0RZdu8XU)=+wI;7D2jr~Wcv5zR}|%LC=^A(?RFy&2;guyAe+rXmgSeg?RKlb{63!#
zUauDfK_HXKfFwyoA`z6!Wk`~w3o{yxU>F8Yr}F~+nw7)hKsX%6e!oYj(?Pr4zJ7nI
z*Xsy{La0`&5JmA?XBY-PpATlU8H%F7WHMc*FUvA&wHj!eMyu6Ax7)>jzrS<ia=GC5
z`!O62VYl1i@pv$s%^(N@L{Wqw2;V(57z~(Brzn+5Sg+R)`!yPka5|k33<e=d5_q16
zqA1vIw^xnDV!1e-OeToMVsANnR;w%Z`9b;Lcso?nv`bG3f&fX9Z-J5|i9ZFj`){~7
Rr6d3V002ovPDHLkV1mJi5d;7L

diff --git a/telemeta/htdocs/timeside/src/controller.js b/telemeta/htdocs/timeside/src/controller.js
index 287aa75c..70e7b56d 100644
--- a/telemeta/htdocs/timeside/src/controller.js
+++ b/telemeta/htdocs/timeside/src/controller.js
@@ -47,14 +47,16 @@ TimeSide(function($N) {
 
         _onMarkerMove: function(e, data) {
             if (this.cfg.map) {
+                selectMarkerTab(); //defined in mediaitem|_detail.html
                 this.cfg.map.move(this.cfg.map.byId(data.id), data.offset);
             }
         },
 
         _onMarkerAdd: function(e, data) {
             if (this.cfg.map) {
+                selectMarkerTab(); //defined in mediaitem|_detail.html
                 //this.refreshMarkersText(this.cfg.map);
-                this.cfg.map.addNew(data.offset, '');
+                this.cfg.map.addNew(data.offset);
             //this.updateMarkersDiv(this.cfg.map, data.offset);
 
             }
@@ -92,6 +94,11 @@ TimeSide(function($N) {
                                 };
                                 map.add(marker);
                             }
+                            //We call mediaitem_detail.setUpTabs from controller once all markers have been loaded
+                            //this because setLabelDescription, which sets the label text according to the div width,
+                            //needs to have all elements visible.
+                            setUpTabs(); //which hides the marker div. Call with argument 1 to set up marker div
+                            //as visible as startup
                         }
                         
                     }
diff --git a/telemeta/htdocs/timeside/src/markermap.js b/telemeta/htdocs/timeside/src/markermap.js
index e59671bf..6571e4e2 100644
--- a/telemeta/htdocs/timeside/src/markermap.js
+++ b/telemeta/htdocs/timeside/src/markermap.js
@@ -73,20 +73,20 @@ TimeSide(function($N, $J) {
         },
 
 
-        addNew: function(offset, description){
+        addNew: function(offset){
             var id = this.uniqid();
             var marker = {
                 id: id,
                 offset: offset,
-                desc: description,
+                desc: undefined,
                 isNew: true
             };
             this.add(marker, this.EDIT_MODE_EDIT_TEXT);
         },
 
-            //editMode is optional, in case it defaults to
-         //EDIT_MODE_SAVED:0
-         add: function(marker, editMode) {
+        //editMode is optional, in case it defaults to
+        //EDIT_MODE_SAVED:0
+        add: function(marker, editMode) {
             var idx = this.insertionIndex(marker);
             //adding the div
             marker.div = this.createDiv(marker,idx);
@@ -256,7 +256,7 @@ TimeSide(function($N, $J) {
                 //description label
                 descriptionLabel = $J('<span/>')
                 .attr("name",this.MHE_DESCRIPTION_LABEL)
-                .attr('title',marker.desc)
+                .attr('title',marker.desc ? marker.desc : "")
                 .css({
                     fontWeight:'bold',
                     marginRight:margin
@@ -287,6 +287,7 @@ TimeSide(function($N, $J) {
                 }))
                 .css({
                     float:'right',
+                    marginRight:margin
                 });
             
                 //add all elements to header:
@@ -300,11 +301,10 @@ TimeSide(function($N, $J) {
                 //description text
                 descriptionText = $J('<textarea/>')
                 .attr("name", this.MHE_DESCRIPTION_TEXT)
-                .val(marker.desc)
+                .val(marker.desc ? marker.desc : "")
                 .css({
                     margin:0,
                     padding:0,
-                    display: 'none',
                     width:'100%'
                 });
             
@@ -329,6 +329,8 @@ TimeSide(function($N, $J) {
                 .css({
                     paddingBottom:'1em',
                     paddingTop:'1ex',
+                    paddingLeft:'1ex',
+                    paddingRight:'1ex',
                     //borderTop: '1px solid #666666',
                     borderBottom: '1px solid #999999'
                 });
@@ -341,8 +343,9 @@ TimeSide(function($N, $J) {
                 var editModeEditText = this.EDIT_MODE_EDIT_TEXT;
                 //action for edit
                 editButton.unbind('click').click( function(){
-                   func_fem.apply(klass,[marker,editModeEditText,editButton, descriptionText,
+                    func_fem.apply(klass,[marker,editModeEditText,editButton, descriptionText,
                         descriptionLabel, okButton]);
+                    return false; //avoid scrolling of the page on anchor click
                 });
 
                 //action for ok button
@@ -355,6 +358,7 @@ TimeSide(function($N, $J) {
                     }
                     func_fem.apply(klass,[marker,editModeSaved,editButton, descriptionText,
                         descriptionLabel, okButton]);
+                    return false; //avoid scrolling of the page on anchor click
                 });
 
                 //action for removing
@@ -363,7 +367,7 @@ TimeSide(function($N, $J) {
                 
                 closeButton.unbind('click').click( function(){
                     remove.apply(klass,[marker]);
-                //remove(klass, marker);
+                    return false; //avoid scrolling of the page on anchor click
                 });
 
                 //insert the new div created
@@ -396,8 +400,6 @@ TimeSide(function($N, $J) {
                 okButton = e(marker,this.MHE_OK_BUTTON);
             }
             var speed = 400; //fast is 200 slow is 600 (see jQuery help)
-//            var func_fem = this.fireEditMode;
-//            var func_send = this.sendHTTP;
             var klass = this;
             //var editModeSaved = this.EDIT_MODE_SAVED;
             if(editMode == this.EDIT_MODE_EDIT_TEXT){ //edit text
@@ -408,32 +410,21 @@ TimeSide(function($N, $J) {
                 });
                 okButton.show(speed);
 
-//                okButton.unbind('click').click( function(){
-//                    if(marker.desc !== descriptionText.val()){ //strict equality needed. See note below
-//                        marker.desc = descriptionText.val();
-//                        func_send(marker);
-//                    }
-//                    func_fem.apply(klass,[marker,editModeSaved,editButton, descriptionText,
-//                        descriptionLabel, okButton]);
-//                });
             }else if(editMode == this.EDIT_MODE_MARKER_MOVED){
-                editButton.show(speed, function(){
-                    descriptionLabel.show();
-                });
+                if(!descriptionText.is(':visible')){
+                    editButton.show(speed, function(){
+                        descriptionLabel.show();
+                    });
+                }
                 //if then a user types the edit button, this function is called with
                 //editMode=1 (this.EDIT_MODE_EDIT_TEXT). Which means (see okbutton click binding above) marker will be saved
                 //ONLY if text is different from marker.desc. However, as the offset has changed we want to
                 //save IN ANY CASE, so we set marker.desc undefined. This way, text will be always different and
                 //we will save the marker in any case
                 marker.desc = undefined;
-                descriptionText.hide(speed);
+                //descriptionText.hide(speed);
                 okButton.show(speed);
-//                okButton.unbind('click').click( function(){
-//                    func_send(marker);
-//                    func_fem.apply(klass,[marker,editModeSaved,editButton, descriptionText,
-//                        descriptionLabel, okButton]);
-//                });
-            }else if(editMode == this.EDIT_MODE_SAVED){
+            }else{
                 var function_sld = klass.setLabelDescription;
                 editButton.show(speed, function(){
                     function_sld.apply(klass,[marker]);
@@ -444,20 +435,13 @@ TimeSide(function($N, $J) {
             }
         },
 
-//        fireMarkerMoved: function(marker){
-//            marker.desc = descriptionText.val();
-//            editButton.hide('fast');
-//            descriptionText.show(400, function(){
-//                this.select();
-//            });
-//            descriptionLabel.hide(); //without arguments, otherwise alignement problems arise )in chrome)
-//            okbutton.show('fast');
-//        },
 
+        //sets the length of the label description. Note that all elements must be visible.
+        //Therefore, we call nediaitem_detail.setUpTabs from controller once all markers have been loaded
         setLabelDescription: function(marker){
             var mDiv = marker.div;
             var e = this.getHtmElm;
-            var space = mDiv.innerWidth()-e(marker, this.MHE_INDEX_LABEL).outerWidth(true)-e(marker, this.MHE_OFFSET_LABEL).outerWidth(true)-
+            var space = mDiv.width()-e(marker, this.MHE_INDEX_LABEL).outerWidth(true)-e(marker, this.MHE_OFFSET_LABEL).outerWidth(true)-
             e(marker, this.MHE_EDIT_BUTTON).outerWidth(true)-e(marker, this.MHE_DELETE_BUTTON).outerWidth(true);
             var labelDesc = e(marker, this.MHE_DESCRIPTION_LABEL);
             var str='';
@@ -510,7 +494,7 @@ TimeSide(function($N, $J) {
             var format = (hours<10 ? "0"+hours : hours )+":"+
             (minutes<10 ? "0"+minutes : minutes )+":"+
             (seconds<10 ? "0"+seconds : seconds )+"."+
-            msec;
+            (msec<10 ? "0"+msec : msec );
             return format;
         },
 
diff --git a/telemeta/htdocs/timeside/src/ruler.js b/telemeta/htdocs/timeside/src/ruler.js
index 7ed9e64f..796d7d3d 100644
--- a/telemeta/htdocs/timeside/src/ruler.js
+++ b/telemeta/htdocs/timeside/src/ruler.js
@@ -108,7 +108,7 @@ TimeSide(function($N, $J) {
             var section = $J('<div/>')
             .addClass($N.cssPrefix + 'section')
             .css({
-                fontSize: this.cfg.fontSize + 'px', 
+                fontSize: this.cfg.fontSize + 'px',
                 fontFamily: 'monospace',
                 width: pixelWidth,
                 overflow: 'hidden'
@@ -170,8 +170,9 @@ TimeSide(function($N, $J) {
                 return;
             }
             this.debug("draw ruler, duration: " + this.duration);
-            if (this.layout)
+            if (this.layout){
                 this.layout.remove();
+            }
             this.layout = $J('<div/>')
             .addClass($N.cssPrefix + 'layout')
             .css({
@@ -217,6 +218,18 @@ TimeSide(function($N, $J) {
             this._drawMarkers();
         },
 
+        _drawMarkers: function() {
+            if (this.cfg.map) {
+                $J(this.markers).each(function(i, m) {
+                    m.clear();
+                });
+                this.markers = new Array();
+                this.cfg.map.each(this.attach(function(i, m) {
+                    this.markers.push(this._drawMarker(m, i));
+                }));
+            }
+        },
+
         _createPointer: function() {
             if (this.pointer) {
                 this.pointer.clear();
@@ -226,36 +239,36 @@ TimeSide(function($N, $J) {
                 viewer: this.waveContainer,
                 fontSize: this.cfg.fontSize,
                 zIndex: 1000,
+                top:0,
                 className: 'pointer',
                 tooltip: 'Move head'
             });
+//            //create the label
+//            var tsMainLabel = $.find('.' + $N.cssPrefix + 'label');
+//            if(tsMainLabel){
+//                var label = tsMainLabel.find('#' + $N.cssPrefix + 'pointerOffset');
+//                if(!label){
+//                    label = $("<span/>").id('#' + $N.cssPrefix + 'pointerOffset').css('zIndex','10').appendTo(tsMainLabel);
+//                    this.pointer.label = label;
+//                }
+//            }
+
             this.pointer
-            .setText($N.Util.makeTimeLabel(0))
+            .setText("+")
+            //.setText($N.Util.makeTimeLabel(0))
             .observe('move', this.attach(this._onPointerMove));
         },
 
-        _drawMarkers: function() {
-            if (this.cfg.map) {
-                $J(this.markers).each(function(i, m) {
-                    m.clear();
-                });
-                this.markers = new Array();
-                this.cfg.map.each(this.attach(function(i, m) {
-                    this.markers.push(this._drawMarker(m, i));
-                }));
-            }
-        },
-
         _movePointer: function(offset) {
-            if (offset < 0)
+            if (offset < 0){
                 offset = 0;
-            else if (offset > this.duration)
+            }else if (offset > this.duration){
                 offset = this.duration;
-            
+            }
             pixelOffset = offset / this.duration * this.width;
             if (this.pointer) {
                 this.pointer.move(pixelOffset);
-                this.pointer.setText($N.Util.makeTimeLabel(offset));
+                //this.pointer.setText($N.Util.makeTimeLabel(offset));
             }
             this.pointerPos = offset;
         },
@@ -307,7 +320,7 @@ TimeSide(function($N, $J) {
             if(data.finish) {
                 this.fire('move', {
                     offset: this.pointerPos
-                    });
+                });
                 this.mouseDown = false;
             }
             return false;
@@ -326,7 +339,7 @@ TimeSide(function($N, $J) {
                 this.mouseDown = false;
                 this.fire('move', {
                     offset: this.pointerPos
-                    });
+                });
                 return false;
             }
         },
diff --git a/telemeta/templates/telemeta_default/mediaitem_detail.html b/telemeta/templates/telemeta_default/mediaitem_detail.html
index d20ea3a5..a6154bb8 100644
--- a/telemeta/templates/telemeta_default/mediaitem_detail.html
+++ b/telemeta/templates/telemeta_default/mediaitem_detail.html
@@ -28,91 +28,90 @@
 
 <!-- script for tabs-->
 <script type="text/javascript">
-    //    $(document).ready(function() {
-    //
-    //        //When page loads...
-    //        $(".tab_content").hide(); //Hide all content
-    //        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
-    //        $(".tab_content:first").show(); //Show first tab content
-    //
-    //        //On Click Event
-    //        $("ul.tabs li").click(function() {
-    //
-    //            $("ul.tabs li").removeClass("active"); //Remove any "active" class
-    //            $(this).addClass("active"); //Add "active" class to selected tab
-    //            $(".tab_content").hide(); //Hide all tab content
-    //
-    //            var activeTab = $(this).find("a").attr("href");
-    //            //Find the href attribute value to identify the active tab + content
-    //            $(activeTab).fadeIn(); //Fade in the active ID content
-    //            return false;
-    //        });
-    //
-    //    });
-        $(document).ready(function() {
-
-          //When page loads...
-            //$(".tab_content").hide(); //Hide all content
-
-            var h1 = '5ex';
-            var h2 = '4ex';
-            var w = '10ex';
-            var bottom='0px';
-
-            $("#tabs_container").css({'position':'relative','height':h1});
-
-            var tabs = $('a[class^="tab_"]');
-
-            tabs.css('position','absolute');
-            tabs.css('height',h2);
-            //tabs.css('zIndex','10');
-            tabs.css('top','1ex');
-            tabs.css('bottom',bottom);
-            tabs.css('width',w);
-            tabs.css('textAlign','center');
-            //tabs.css('backgroundColor','#ffffff');
-
-            var tabA = $(tabs[0]);
-            var tabM = $(tabs[1]);
-
-            tabM.css('left',w);
-
-            tabA.click(function() {
-                tabA.removeClass("tab_unselected").addClass("tab_selected");
-                tabM.removeClass("tab_selected").addClass("tab_unselected");
-                $("#"+tabA.attr("name")).show('fast');
-                $("#"+tabM.attr("name")).hide();
-
-            });
-
-            tabM.click(function() {
-                tabM.removeClass("tab_unselected").addClass("tab_selected");
-                tabA.removeClass("tab_selected").addClass("tab_unselected");
-                $("#"+tabM.attr("name")).show('fast');
-                $("#"+tabA.attr("name")).hide();
-
-            });
-
-            tabA.trigger("click");
-            
-//            $("ul.tabs li:first").addClass("active").show(); //Activate first tab
-//            $(".tab_content:first").show(); //Show first tab content
-//
-//            //On Click Event
-//            $("ul.tabs li").click(function() {
-//
-//                $("ul.tabs li").removeClass("active"); //Remove any "active" class
-//                $(this).addClass("active"); //Add "active" class to selected tab
-//                $(".tab_content").hide(); //Hide all tab content
-//
-//              var activeTab = $(this).find("a").attr("href");
-//              //Find the href attribute value to identify the active tab + content
-//              $(activeTab).fadeIn(); //Fade in the active ID content
-//               return false;
-//           });
-
-      });
-
+    function setUpTabs(selIndex) {//called from within controller.js once all markers have been loaded.
+         //this is because we need all divs to be visible to calculate size. selIndex is optional, it defaults to 0
+         //
+        //declare variables:
+        var tabContainerHeight = '5ex'; //height for the tab container
+        var tabHeight = '3.5ex'; //height for the tab. Must be lower than tabContainerHeight
+        var tabPaddingTop ='.8ex'; //padding top of each tab. Increasing it will increase also the tab height, so
+        //compensate by decreasing tabHeight, in case. In any case, must be lower or equal to tabContainerHeight-tabHeight
+        var tabWidth = '10ex'; //width of each tab. Each tab from index 1 to n will be at left=n*tabWidth
+        var tabBottom ='-1px'; //bottom of each tab. Must be equal and opposite to the border of the div below the tab
+
+        //retrieve tab container:
+        var tabContainer = $("#tabs_container"); //change if tabContainer has to be retrieved diferently
+        //retrieve the tabs by checking the elements whose class name starts with "tab_"
+        //var tabs = $('a[class^="tab_"]'); //change if the tabs have to be determined differently.
+        var tabs = tabContainer.find('a[id^="tab_"]');
+        //function that retrieves the div relative to a tab (the div will be set visible.invisible according to tab click):
+        var tab2div = function(tab){
+            return $("#"+tab.attr("name"));
+            //ie, returns the element whose id is equal to the tab name.
+            //change here if div has to be determined differently
+        };
+        var selectedTabClassName = "tab_selected"; //change if needed
+        var unselectedTabClassName = "tab_unselected"; //change if needed
+        var tabClicked = function(index) {
+            for(var i=0; i<tabs.length; i++){
+                var t = $(tabs[i]);
+                if(i===index){
+                    t.removeClass(unselectedTabClassName).addClass(selectedTabClassName);
+                    tab2div(t).fadeIn('slow');
+                }else{
+                    t.removeClass(selectedTabClassName).addClass(unselectedTabClassName);
+                    tab2div(t).hide();
+                }
+            }
+            return false; //returning false avoids scroll of the anchor to the top of the page
+            //if the tab is an anchor, of course
+        };
+        //end of variables declaration
+
+        //tabContainer default css:
+        tabContainer.css({'position':'relative','height':tabContainerHeight});
+        //tabs default css:
+        tabs.css({'position':'absolute',
+            'height':tabHeight,
+            'bottom':tabBottom,
+            'paddingTop':tabPaddingTop,
+            'width':tabWidth,
+            'color': '#000000',
+            'left':0, //this will be overridden for tabs from 1 to n (see below)
+            'textAlign':'center'});
+        //setting the left property for all tabs from 1 to n
+        var left = parseFloat(tabWidth); //note that 40%, 33.3ex will be converted
+        //succesfully to 40 and 33.3 respectively
+        if(!isNaN(left)){
+            //retrieve the unit
+            var s = new String(left);
+            var unit = '';
+            if(s.length<tabWidth.length){
+                unit = tabWidth.substring(s.length,tabWidth.length);
+            }
+            for(var i=1; i<tabs.length; i++){
+                $(tabs[i]).css('left',(left*i)+unit);
+            }
+        }
+
+        for (var i=0;i<tabs.length;i++){
+            // introduce a new scope (round brackets)
+            //otherwise i is retrieved from the current scope and will be always equal to tabs.length
+            //due to this loop
+            (function(tabIndex){
+                $(tabs[i]).click(function(){return tabClicked(tabIndex);});
+                })(i);
+        }
+        
+        if(!(selIndex)){
+            selIndex = 0;
+        }
+        $(tabs[selIndex]).trigger("click");
+    }
+
+    function selectMarkerTab(){
+        $('#tab_markers').trigger("click");
+    }
 </script>
 
 {% endblock %}
@@ -169,6 +168,7 @@
 
 
         <div class="item_visualization" id="item_visualization_id">
+            
             <form id="visualizer_id_form" method="get" action="#">
                 <!--
                 <select name="visualizer_id" onchange="this.form.submit()">
@@ -178,7 +178,7 @@
                     {% endfor %}
                 </select>
                 -->
-                &nbsp;Visualization :
+                <img src="/images/plots.png" style="vertical-align:middle" />&nbsp;Visualization :
                 <select id="visualizer_id" name="visualizer_id">
                     {% for v in visualizers %}
                     <option value="{% url telemeta-item-visualize item.public_id,v.id,"WIDTH","HEIGHT" %}">
@@ -208,47 +208,47 @@
                             <li><a href="#">Analysis</a></li>
                             <li><a href="#">Markers</a></li>
                         </ul>-->
-            <a class="tab_analysis" name ="analyzer_div_id" href="#">Analysis</a>
-            <a class="tab_markers" name="markers_div_id" href="#">Markers</a>
-            </div>
-            <!--<div class="tab_container_">-->
-                <!--        <div id="tab1" class="tab_content">
-                            Content
-                        </div>
-                        <div id="tab2" class="tab_content">
-                           Content
-                        </div>
-                    </div>-->
-                <div class="markers" id="markers_div_id"></div>
-
-                <div class="analyzer" id="analyzer_div_id">
-                    <table width="100%">
-                        <tr class="analyzer-title">
-                            <td>Property</td>
-                            <td>Value</td>
-                            <td>Unit</td>
-                        </tr>
-                        {% for analyser in analysers %}
-                        <tr class="analyzer-line">
-                            <td>
-                                {{ analyser.name }}
-                            </td>
-                            <td>
-                                {{ analyser.value }}
-                            </td>
-                            <td>
-                                {{ analyser.unit }}
-                            </td>
-                        </tr>
-                        {% endfor %}
-                    </table>
+            <a id="tab_analysis" name ="analyzer_div_id" href="#">Analysis</a>
+            <a id="tab_markers" name="markers_div_id" href="#">Markers</a>
+        </div>
+        <!--<div class="tab_container_">-->
+        <!--        <div id="tab1" class="tab_content">
+                    Content
                 </div>
-            <!--</div>-->
-        
+                <div id="tab2" class="tab_content">
+                   Content
+                </div>
+            </div>-->
+        <div class="markers" id="markers_div_id"></div>
+
+        <div class="analyzer" id="analyzer_div_id">
+            <table width="100%">
+                <tr class="analyzer-title">
+                    <td>Property</td>
+                    <td>Value</td>
+                    <td>Unit</td>
+                </tr>
+                {% for analyser in analysers %}
+                <tr class="analyzer-line">
+                    <td>
+                        {{ analyser.name }}
+                    </td>
+                    <td>
+                        {{ analyser.value }}
+                    </td>
+                    <td>
+                        {{ analyser.unit }}
+                    </td>
+                </tr>
+                {% endfor %}
+            </table>
+        </div>
+        <!--</div>-->
+
 
         {% if audio_export_enabled %}
         <div class="exporter">
-            <p>{% trans "Download:" %}
+            <p><img src="/images/download.png" style="vertical-align:middle"/> {% trans "Download:" %}
                 {% for format in export_formats %}
                 <a href="{% url telemeta-item-export item.public_id,format.extension %}">{{ format.name }}</a>
                 {% endfor %}</p>
-- 
2.39.5