From 158c24ae9f1f8017d6159f1c06102343a174cd9b Mon Sep 17 00:00:00 2001
From: riccardo <riccardo@parisson.com>
Date: Mon, 21 Feb 2011 19:11:20 +0100
Subject: [PATCH] Added all div marker images. Note that the images were edited
 in external program in order to exploit pngs transparent background
 capabilities: this lets the pngs to be independent from future potential div
 background changes (actually, this kind of editing should be done for all
 pngs in the page). Implemented the edit button and consequent hiding/showing
 of the marker description textarea. Added the label showing the marker
 description (for which a caomputation of the available size is required: this
 part is still to be terminated)

---
 telemeta/htdocs/images/del_marker.png      | Bin 475 -> 260 bytes
 telemeta/htdocs/images/edit_marker.png     | Bin 682 -> 919 bytes
 telemeta/htdocs/images/marker_ok_green.png | Bin 774 -> 805 bytes
 telemeta/htdocs/images/marker_tiny.png     | Bin 316 -> 205 bytes
 telemeta/htdocs/timeside/src/controller.js |   3 -
 telemeta/htdocs/timeside/src/markermap.js  | 221 +++++++++------------
 6 files changed, 90 insertions(+), 134 deletions(-)

diff --git a/telemeta/htdocs/images/del_marker.png b/telemeta/htdocs/images/del_marker.png
index c91aae4d562182ba4cf9e4ee2f58d50eea753d7f..5055a0f4550d7124c74b4679163b911ea8c8e2ec 100644
GIT binary patch
delta 232
zcmcc3+`=?LrJk`k$lZxy-8q?;3=9lxN#5=*KpF^sI`6IrQk(@Ik;M!Q+`=Ht$S`Y;
z1W=H@#M9T6{Wg=RARlkYAFZ!Ip%zaU#}JM4cPH%@Jggw#68}W+PFD=Omqyy`#r#(o
zoR?(GRX86R)*@S(K0~^%`pw5i`4?;{3mASUc2qvmFJ-rS(0%dvuXbnlKM~W+70&#=
zX(-Pcy>?p4fo!jPS-lB;0hVQP!A03;C&d|BOy_vJQPp!>Et}1&eZ{k^E?;@;yZ7>!
d{vYDDj5|s@Loe2c`vM)r;OXk;vd$@?2>=z9SMC4+

delta 420
zcmV;V0bBlr0^0+SBp(E4K}|sb0I`n?{9y$E000JJOGiWi{{a60|De66laW9me+~~S
z7+Gm?TmS$8SV=@dR4C8AQlWCfKos0`q7X3*XUY$RK?ECYaSW3wiYmS!0)fhup~QuW
zI8%NA8Rn))YWV{OJ^*TtoB)A>zKTvl15;5%SKYmL``*spYD7f%Bkphm^vi-$3d`jZ
zTPaas45d;D`F#F&(j<xyh9M4ze?wZ!<#OnBI(Te0ujL6L;QKywJ-b}jb@;vyAw-s>
zl)^9w0086hIGt*mCf=q~+!u=&1_6{(XL<AaJeAb#cJVqI!7vQ8+ih^p@v+$;dDmz(
z&YKdfRx5DM;kqu~XERKqDD7>fJj?s(j%k{3T^F2lJk)9#0}70NABc$JdN`)4ZBxav
zXtQ3^U@)MHWzkcsMZ4XO>h(HRZJXjaCL$s&NrVsrFa16Y!@z#OPp2pM=Uxwv<7EHI
zaU6V}P6)#=WBKuTgy(rF0RXhi>?x(NSS%o=1Y->4a``F|+P?+%CejyrY@!zr0;ID5
O0000<MNUMnLSTXx!?<(+

diff --git a/telemeta/htdocs/images/edit_marker.png b/telemeta/htdocs/images/edit_marker.png
index f42e78bcfba609467262af9f628487b2a8e77736..b40bbae45fb66ab56b54cb6a3cbec355a2887be3 100644
GIT binary patch
delta 896
zcmV-`1AqLg1(yeqB!2;OQb$4nuFf3k00006VoOIv00000008+zyMF)x010qNS#tmY
z3ljhU3ljkVnw%H_000McNliru+X59404#<U7bO4y0~bj|K~zY`#g@-YBS{p;zg1SH
z2_pn!cMx_(=)f?V1j0sgGm8+>LGb2HJS~0jA4tH1;K3jNfPaU^!(Kc!3VPb5`?B#M
z9vX8=90roJF)_iDwAFU+DLsa?GqWr+d8h7IuZvH8`@MRP0QiMc`jK<KDM?b6G4_rS
zLNOxqecy9k_sMabsu1E&&-4Cbl+us!czk(wcJ@Omm5L@33CcN#@B2R;kPreP1iin%
zkJf6n_qVsV%YWT&7etbzN<N?eu(7c*Stt~!EX!bwfe<nZ72&!rI-L$Gm5O(Aa`JF}
zef^0^l9WxS)6qhqK$FQNIOm}ooSvQ{pU-1@disaM#$qu5pf@)+lhtbVH_8}$rzi@O
zWf@~*W1%1I?d@T6a}$e;i)b_&KOB;C4q29=C<^7AM}HY1gmTWo7z3rl^|HIWi=CYv
z06?SB!2bR|j*pLnbzRrd>-B>7TrLLyux&f=t*@^`RaNM^4pmhL)&O8)Vgj0`4fq&i
z{j~c+6_$gq0RdojbrnZPM*}g2VZgGi0iSK#&~-g{o}Zsbuh)ZN7y)3j*+jWqep5|K
zX~4wZ3V#X%JUcr>BoY~lRaG@mFqg~0wr!}Yic+Zr07xd20W<)VN+np91zp#Jn6OIk
z-!P$&kB^VYX0wPyB6xm&#>&ddn}7gdSr(ejCIH~z;2`u6|Hp=s@Z#bEsZ<J?Oa_Kw
zU~O#;=jZ2d0s?@hX)sL_rfCL>zW(*LZ4dds=YKjHg6uo5uC8!*cZY?A1!OXrZvp~9
zxm*Sz1cVSA9v%kj5<;-Fv;<AlP%IYz6Qt*PUy2BT=ejO+T^F9`VSIcXTU%S0nVG@V
z)YLaOGfgwpAC_ycV~fS&SG(HF%L`oBh41?w6GA+-TCHfO)1k3g4BOk=7_|u@&~CTU
zZh5yoA;c4N9H&~V)!tVsl}P|pQIw$T{LI$aSG5m#d3ov8>-7i6aXu4D=^ycUe0gqe
z?)P*$J&{Nxm?TLfQ_*o8v|25%R;xYK>-B%S-R|E6z^|0jmHw#4IUo6`CWIIm)&2$a
Wm{d~{_?O)P0000<MNUMnLSTZEkCp}i

delta 629
zcmV-*0*d{Y2dV{-Bp(E4K}|sb0I`n?{9y$E000JJOGiWi{{a60|De66laW9me+~~R
zGO7RTNdN!>CrLy>R7l6omOX1KK^TRfF&D{}DU9g?Yau9tplxha2naSoY*TGxr-e2W
zun5|uv{(ci8(B!O6L#?*ENm4J)Kr2Yg$MybNahx~ED14RcnN!|op;W_Gw0o5Mo1|o
zz;rt0_VyO9D4Wf)zrPQFkW$K0f2qW9I3yB@cm~omP0HmmmzS4tcXua`kB{Z^^Rx7l
z7K?>EJUo<AO6hYPhj=`W5aQFFU0q!<9*=)5$zU)D!2SI_zNe=r_V)HZUC?MWs8lMX
z(`hD?$*;Hm&sT;<qrt_+1pxE;oMy90r_*ugbzNt<T)N{#A_0JH+itB;e<+};D!Q(t
zs_L6LfP;erG)?=E!S`K2fLty|yWM`{F$@FCvfk8e+eX)Q_dA(PvRp1P48sMS&1TeU
zwcV2326%majo<Ho=T%kJO)!y2VB0pTs#2|10SJXcE;K;3TE(&~bX|8nKZabbR>b3R
z{C+>1&4$y{(+>dwEX!gxf13f&Y&N%UVi&z@_sz`>(P)%dEQVni<nwt3gTaS@0Gg&@
znkJ@cx{1DSy=~j?>N`P>MkD6)IVUG4#A2~80Rd{Y8bSz!5VTq?H(enF*=!a~)5v5p
z|L=4^K0b1Oeoi<X=IH3?TQ|ctZTr_=do!5~|8C@;Lw37eye3~DOAz4U;Q=pdy<Vdz
z%F6>Il}ZtbM9AfGo`LK4`zVS+uh)Bl1gO{RIF929NJUX77K@ynodNI{cGz-(_+ttd
P00000NkvXXu0mjf@dqET

diff --git a/telemeta/htdocs/images/marker_ok_green.png b/telemeta/htdocs/images/marker_ok_green.png
index 4df84eedbb48f23b4de6711a4643c06207386939..be467ce029dc77a3aaa8f1cc9aee1f1f582c9dc1 100644
GIT binary patch
delta 782
zcmV+p1M&QZ2Bij&B!2;OQb$4nuFf3k00006VoOIv00;ng02G2(S{48R010qNS#tmY
z3ljhU3ljkVnw%H_000McNliru+X5924LL~N1Ni^|0;NerK~zY`&6iO~Q&Akoe|OV4
zU6G{bL!=@q8U%_PF46Fz#7q-R!;BOXG<qq>RLUL<O(nB@5r47_3QR#ILW3|0DvUy5
z3RbqVs5I1VCE46?>gmDtFt%WU=Ka0h|GD42AK&@kbI*}*qOJ@+0+a$eK*RsX3Jd{l
z_C|9jfaEmR1e`%WT(LKr%Oz)Gcaa~33g=YHky3@T$K;4ku|du64H^Y9=AX=MQfa8q
ztif0{!q2*I7=NoqsL!lHqjC*@u67bzgUO|KHtiI)1{21r5q1P__v(E<-Wu~&`qEd@
zjXqq5-C^gwd4kBT5uDz05`DOi^tK!v%MOp)B5ffTGpd=HpJo4zT)xgtt!;8Ac9)<J
z*I}3%C8i;P#H*=9H^gI@8bu$jqfCF?qb@Tpoz~oDet#^?aiBeq3CqW|pVor-JOIl3
z&SSEg0We!FRP<k19Z$$}(<DbE(NWlr&0*u<t;4*Ye!D(B7Z)0X5Q0}<hF$7^u4A`F
zyJ>ohJ5c+oxi{9&@T6gVKL}3<ArL~KkUT%iY_)JKv4BIna@Nn>_^c60l1K{Ey3~`x
zv`CV~n}3;iZkp`&e2P2E5JGT0zlEKlvFl^5%g_tJ<*Yh_H9-J`Xo6|Vu5*s}xM_wb
z4LteqluM7B(5N(Y7u_Mye~Z`VBz0x5@a9I9QpG^oeUieo*c>({ET4!9ibU<J=H=%h
zm!)K`b`n1yKm4mgRuhmEJSgcQEh?3V<B!O_eSZ`o#M&jdxV%W#%{*G3w_>(_CpIJo
zlhwktXRTzn=l^w$16UC&6nB*|JwHQ6>^`dZR(PG<FPZ*dtqSMvQ;rNNfHs+$Yf~-_
zE{yr41Z)P9WwuRkRst*yE)4jj1Q>xJAOuit&;jQKaL(RnZU*=bkJIQWx`6U>00000
MNe4wvM6N<$f}q}GH~;_u

delta 722
zcmV;@0xkWe28ITZBp(E4K}|sb0I`n?{9y$E000JJOGiWi{{a60|De66laW9me+~~V
zI>Sh&e*gdigGod|R7l6omqAEVaU91#ZZ=$p`5bh}p=+=@L~BfRQkMt2jlgVmkOmTM
zheBM3fv0wA2Qfw^1|A%UFz_H^k>o)Z^Dxk)F%u89m@B3SalE`dG3M)Fd$DGu(QM!2
z@BM%9`Tu_3FOPqnq9_W0{B4&fe+whLTAO2KbCu$Lk&}}CR09r^og20;?qBht)o1~z
zQxrw{w4KE>ewz<l8UD9ATRV7hcap{i0~&xkllN)@3}Er|TOP~|0H8^(FS7jQ9kryX
zl^Hg6Hqq1?7(j8qNP1%x&0cYjTGY<&&VlD@RmXz!*t$se&m#|RArEe`e>Sj8Pz<Qw
z9VR=o{wZetQ)<m(G^;hAv$r~MK`}tg8^vL=lgg)wXA)S9X2R}}3e%()a9KrMRuKR}
zFA(!aaalzq`76<-iDSXlALUR90^s56M?@0C>ZFqW^SG=cK4&l4LawYY><+1y>6;E#
zXRRLFbpW!3oC*ez%BR(7f4I(zWj#J;FFt24k}Tnk`H*C(x}M7x)+=k<xgRTREUS-r
zA^=2}CMqUc6}Tq7P+2?O_?wI5RIhq$UDbn&XA-K%N@gz^zLdcD$Az+<i$m>d-*Zm{
zi_u&ixKuvP^!t|p#JppK-64WvfMowXf?gn7$Q_zQZ_JM*OKNI`e?un!PuAKu9VC(%
zM$iic#Q<S<2#e87Jd@zs*v&%?e-H-0I`vZGkE*)IZ=Nclx$u!21ie6;$*u<EZ_WNE
zjrWXFuhZ&|)g;N1>ZNMR&|pB*-qKcc|5U9;i@o_0nycqJsWre`m%C{;oIMD{c+V&o
z&RA;#th2R)XWc_TDBlpjK5$a`^oauLv^v^b92F0o?<NiUr$e#Pc>n+a07*qoM6N<$
Eg0X2)?EnA(

diff --git a/telemeta/htdocs/images/marker_tiny.png b/telemeta/htdocs/images/marker_tiny.png
index ab0579224ce136bbb172d6cb95bc759735b37571..925ec14c0dd8dd56fc481020fdbb7e96582bcc96 100644
GIT binary patch
delta 130
zcmV-|0Db?w0?h%CBnkm@Qb$4nuFf3kkufrD6%I5LoFFZt0000@Nkl<ZILl*Tpa3v3
zFfcGYixm7%sz#~h?-`jWv3XSUsAk$~W<(cw7Ae@kz`#(CMQx+h^7jpRHRCV<LnB`B
kEK;!HS)|~9s6o^R05h!=2~b%1kpKVy07*qoM6N<$f^H5nx&QzG

delta 242
zcmV<O01f}m0lWf`Bn<>-K}|sb0I`n?{9y%=E;4@(4=oplm--3-006m3L_t(I%VYfi
z|NnmmG64$%0|UdCbzKa9-#sT@lY|ljw@)ra^Y@dR82&uIMzm%&bqfY=pIine1`5Ea
z=8>V9g@J*Afz#ZN;jgMG!=K037=GP8jW=bnNUJljNGLHdFfcGMqGyaR8+sYOtm|g@
z|L0m4T#S*8gMl}!hJo8F3)Qs$SirA)=l{PdGX4K7Qt<z)GVA}ppWMKv>_1k`|NsC0
s|L^Db|6lhn{{QdyPh3j=Gg6YD0W@@*I$LFznE(I)07*qoM6N<$f^D{P=>Px#

diff --git a/telemeta/htdocs/timeside/src/controller.js b/telemeta/htdocs/timeside/src/controller.js
index f7d13f0c..fcb05b78 100644
--- a/telemeta/htdocs/timeside/src/controller.js
+++ b/telemeta/htdocs/timeside/src/controller.js
@@ -24,9 +24,6 @@ TimeSide(function($N) {
         },
 
         _setupPlayer: function() {
-//             if (this.cfg.player && !$N.isInstanceOf(this.cfg.player, 'Player')) {
-//                this.cfg.player = new $N.Player(this.cfg.player);
-//            }
             this.attach(this.updateMarkersDiv);
             this.cfg.player
             .setSoundProvider(this.cfg.soundProvider)
diff --git a/telemeta/htdocs/timeside/src/markermap.js b/telemeta/htdocs/timeside/src/markermap.js
index 30776e96..fac52f0d 100644
--- a/telemeta/htdocs/timeside/src/markermap.js
+++ b/telemeta/htdocs/timeside/src/markermap.js
@@ -1,7 +1,7 @@
 /**
  * TimeSide - Web Audio Components
  * Copyright (c) 2008-2009 Samalyse
- * Author: Olivier Guilyardi <olivier samalyse com>
+ * Author: Olivier Guilyardi <olivier samalyse com> and Riccardo Zaccarelli
  * License: GNU General Public License version 2.0
  */
 
@@ -60,7 +60,7 @@ TimeSide(function($N, $J) {
             this.add(marker);
         },
 
-        //this function adds a new marker. It is actually
+        
         add: function(marker) {
             var idx = this.insertionIndex(marker);
             //adding the div
@@ -77,8 +77,9 @@ TimeSide(function($N, $J) {
             return marker;
         },
         
-        
-
+        //remove must have this class as argument (klass) as we cannot access this class with the keyword 'this':
+        //the latter, when remove is called from within
+        //a click function refers to the current document
         remove: function(klass, marker) {
             if (marker) {
                 if(!(klass)){
@@ -90,9 +91,7 @@ TimeSide(function($N, $J) {
                 klass.fire('remove', {
                     marker: marker
                 });
-                //                var i1= Math.min(oldIndex,newIndex);
-                //                var i2= Math.max(oldIndex,newIndex);
-                //var mrks = this.markers;
+                
                 klass.fireRefreshLabels(i,klass.markers.length);
 
                 klass.removeHTTP(marker);
@@ -163,7 +162,7 @@ TimeSide(function($N, $J) {
                 });
                 //update label element
                 this.markers[i].div['labelIndex'].html(i+1)
-               // $($( this.markers[i].div.children()[0] ).children()[0]).html(i+1);
+            // $($( this.markers[i].div.children()[0] ).children()[0]).html(i+1);
 
             }
         },
@@ -191,12 +190,7 @@ TimeSide(function($N, $J) {
             var l = m.length;
             var ret = {};
             if(div){
-                //var textWithFocus;
-                //div.style.display = "block";
-                //var doc = document;
-
-
-                var text, timeSpan, closeAnchor, ok, header;
+                var text, timeSpan, closeAnchor, ok, header, editAnchor, textShort;
 
 
                 //creating marker, see marker.js
@@ -205,8 +199,14 @@ TimeSide(function($N, $J) {
                 var label = $J('<span/>')
                 .css({
                     color:'#fff',
-                    backgroundColor:'#009',
-                    width: '2em',
+                    //backgroundColor:'#009',
+                    backgroundImage:'url("/images/marker_tiny.png")',
+                    backgroundRepeat:'no-repeat',
+                    backgroundPosition:'center center',
+                    fontSize: '60%',
+                    fontWeight:'bold',
+                    display:'inline-block',
+                    width:'3ex',
                     textAlign: 'center'
                 //,fontFamily: 'monospace'
                 })
@@ -215,13 +215,18 @@ TimeSide(function($N, $J) {
 
                 timeSpan = $J('<span/>')
                 .css({
-                    marginLeft:'1ex'
-                });
+                    marginLeft:'1ex',
+                    marginRight:'1ex'
+                })
+                .html(this.formatMarkerOffset(marker.offset));
+
                 ret['labelOffset']=timeSpan;
 
-                closeAnchor = $J('<input/>')
-                .attr("type","submit")
-                .attr("value","x")
+                closeAnchor = $J('<a/>')
+                .attr("href","#")
+                .append($J('<img/>').attr("src","/images/del_marker.png").css({
+                    width:'1em'
+                }))
                 .css({
                     //fontFamily: 'monospace',
                     fontWeight:'bold',
@@ -231,129 +236,56 @@ TimeSide(function($N, $J) {
                 });
                 ret['submitCancel']=closeAnchor;
 
-                header = $J('<div/>')
-                .append(label)
-                .append(timeSpan)
-                .append(closeAnchor);
-
-                text = $J('<textarea/>')
-                .css({
-                    margin:0,
-                    padding:0,
-                    width:'100%'
-                });
-                ret['textarea']=text;
-
-                ok = $J('<input/>')
-                .attr("type","submit")
-                .attr("value","OK");
-                ret['submitOk']=ok;
-
-                //create new div
-                var subdiv = $J('<div/>')
-                .append(header)
-                .append(text)
-                .append(ok)
-                .css({
-                    marginBottom:'1em',
-                    marginTop:'1ex'
-                });
-
-                var timeStr = this.formatMarkerOffset(marker.offset);
-
-                timeSpan.html(timeStr);
-
-                //updating text
-                text.val(marker.desc);
-
-                var send = this.sendHTTP;
-                //set the ok function
-                //we clear all the click event handlers from ok and assign a new one:
-                ok.unbind('click').click( function(){
-                    marker.desc = text.val();
-                    send(marker);
-                });
-                //set the remove action
-                var remove = this.remove;
-                var klass = this;
-                closeAnchor.unbind('click').click( function(){
-                    remove(klass, marker);
-                });
-
-                var divLen = div.children().length;
-                div.append(subdiv);
-                if(insertionIndex==divLen){
-                    div.append(subdiv);
-                }else{
-                    $( div.children()[insertionIndex] ).before(subdiv);
-                }
-                //if(textWithFocus){
-                text.focus();
-                // }
-                ret['div']=subdiv;
-                return ret;
-            }
-        },
-        createDivOld: function(marker,insertionIndex){
-            var div = this.divContainer;
-            var m = this.markers;
-            var l = m.length;
-            if(div){
-                //var textWithFocus;
-                //div.style.display = "block";
-                //var doc = document;
-
-
-                var text, timeSpan, closeAnchor, ok, header;
-
-
-                //creating marker, see marker.js
-                //would be better not to copy this code but to
-                //reference it.
-                var label = $J('<span/>')
-                .css({
-                    color:'#fff',
-                    backgroundColor:'#009',
-                    width: '2em',
-                    textAlign: 'center'
-                //,fontFamily: 'monospace'
-                })
-                .html(insertionIndex+1);
-
-                timeSpan = $J('<span/>')
-                .css({
-                    marginLeft:'1ex'
-                });
-
-                closeAnchor = $J('<a/>')
+                editAnchor = $J('<a/>')
                 .attr("href","#")
-                .html("x")
+                .append($J('<img/>').attr("src","/images/edit_marker.png").css({
+                    width:'6.5ex'
+                }))
+                //.attr("type","submit")
+                //.attr("value","x")
                 .css({
                     //fontFamily: 'monospace',
-                    fontWeight:'bold',
-                    ackgroundColor:'#888877',
+                    //fontWeight:'bold',
+                    //border:'1px dotted #333333',
+                    //display:'none',
                     float:'right',
-                    color:'white'
-                //,backgroundImage:'url("img/cancel.png")'
+                //color:'white'
                 });
-                //.append('</img>').attr("src","img/cancel.png");
+                ret['editMarker']=editAnchor;
+
+
+                textShort = $J('<span/>')
+                 .css({
+                    fontWeight:'bold'
+                })
+                .html('x');
 
                 header = $J('<div/>')
                 .append(label)
                 .append(timeSpan)
-                .append(closeAnchor);
+                .append(textShort)
+                .append(closeAnchor)
+                .append(editAnchor);
 
                 text = $J('<textarea/>')
                 .css({
                     margin:0,
                     padding:0,
-                    width:'100%'
+                    width:'100%',
+                    display:'none'
                 });
+                ret['textarea']=text;
 
+               
                 ok = $J('<a/>')
+                .css({
+                    display:'none'
+                })
                 .attr("href","#")
-                .addClass('ts-marker-button')
-                .html("OK");
+                .append($J('<img/>').attr("src","/images/marker_ok_green.png").css({
+                    width:'3em'
+                }))
+                ret['submitOk']=ok;
 
                 //create new div
                 var subdiv = $J('<div/>')
@@ -365,18 +297,26 @@ TimeSide(function($N, $J) {
                     marginTop:'1ex'
                 });
 
-                var timeStr = this.formatMarkerOffset(marker.offset);
-
-                timeSpan.html(timeStr);
-
+                
                 //updating text
                 text.val(marker.desc);
 
+                //action for edit
+                editAnchor.unbind('click').click( function(){
+                    marker.desc = text.val();
+                    editAnchor.hide('fast');
+                    text.show('fast');
+                    ok.show('fast');
+                    //send(marker);
+                });
                 var send = this.sendHTTP;
                 //set the ok function
                 //we clear all the click event handlers from ok and assign a new one:
                 ok.unbind('click').click( function(){
                     marker.desc = text.val();
+                    editAnchor.show('fast');
+                    text.hide('fast');
+                    ok.hide('fast');
                     send(marker);
                 });
                 //set the remove action
@@ -396,9 +336,28 @@ TimeSide(function($N, $J) {
                 //if(textWithFocus){
                 text.focus();
                 // }
-                return subdiv;
+                ret['div']=subdiv;
+
+                //show label according to div width:
+                var space = header.innerWidth()-label.outerWidth()-timeSpan.outerWidth()-closeAnchor.outerWidth()-editAnchor.outerWidth();
+                var ex = textShort.innerWidth();
+                if(space>ex){
+                    var string = text.val();
+                    var endS = string.length;
+                    var id=0;
+                    while(id<=endS && textShort.innerWidth()<space){
+                        id++;
+                        textShort.html(string.substring(0, id));
+                    }
+                }else{
+                    textShort.html('');
+                }
+                //var labelMarker =
+                alert(space);
             }
+            return ret;
         },
+       
 
         formatMarkerOffset: function(markerOffset){
             //marker offset is in float format second.decimalPart
-- 
2.39.5