From: riccardo <riccardo@parisson.com>
Date: Wed, 18 May 2011 13:32:02 +0000 (+0200)
Subject: player code cleaned (more readable), fixed some bugs relative to the popup playlist
X-Git-Tag: 1.1~171
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=5701e7f960f875e9820256f65b63a91af18615ee;p=telemeta.git

player code cleaned (more readable), fixed some bugs relative to the popup playlist
---

diff --git a/telemeta/htdocs/js/popupdiv.js b/telemeta/htdocs/js/popupdiv.js
index bf50f21e..1f17843c 100644
--- a/telemeta/htdocs/js/popupdiv.js
+++ b/telemeta/htdocs/js/popupdiv.js
@@ -21,7 +21,126 @@
  */
 
 /**
- * class for showing non-modal dialogs such as popups or combo lists. Requires jQuery
+ * class for showing non-modal dialogs such as popups or combo lists. Requires jQuery. If you're scared about the doc, scroll below to
+ * see some examples.
+ * This class builds an absolutely positioned div for popup forms, message dialogs or listitem popup (emilating the
+ * <select> tag element popup).
+ * Usage:
+ * var p = new PopupDiv(dictionary); p.show(); or simply new PopupDiv(dictionary).show();
+ * dictionary is an object with the following parameters (In brackets the default value if missing). None of them is mandatory, but
+ * at least content should be specified (unless showing an empty div is what you want to get)
+ * content (""): the popup content. Can be:
+ *      a dictionnary of (key: val) pairs for form filling popup. Each pair represents a row in the popupm built as a div with
+ *          a string (key) followed by an input with value = val (the popup takes care of inputs horizontal alignement so there should be
+ *          no need of extra css).
+ *          The input is determined as follows:
+ *          val is boolean: checkbox input
+ *          val is an array of strings: select tag (non multi select)
+ *          otherwise: text input (with val.toString as value)
+ *          If showOk is true (see below), a click on the ok anchor will trigger the popup onOk callback (see below) with
+ *          argument a dictionary of (key: val) pairs, where each val is the relative input value
+ *      an array of strings for listItem popup. Each array element represents a line of the popup (internally, an anchor with
+ *          inner html the array element value). A click on each anchor triggers the onOk callback (see onOk below)
+ *      a jQuery object: the content will be appended to the popup
+ *      otherwise: content.toString() will be set as the popup innerHTML
+ * invoker (jQuery(window)): a jQuery object representing an html element. If invoker is a clickable element (anchor, input of type button or submit,
+ *      button), then the PopupDiv bounds will be placed according to invoker as if it was a popup list of a select tag. Otherwise, the popupdiv will be centered inside invoker. Note that
+ *      internally each popupdiv is appended to the body element, so it will be visually centered in invoker, it should not belong
+ *      to invoker children
+ * bounds ({'top':0.25, 'left':0.25, 'right':0.25, 'bottom':0.25}): if invoker is a clickable element, it is ignored. Otherwise, specifies the
+ *      insets (margins) of the popup within invoker (internally, the popup has no margins, so bounds represents the distances from each window
+ *      size). Each bounds element can be in percentage of invoker size if lower than 1 (eg, bounds first element is 0.25: popup left margin is
+ *      25% of invoker height, and so on) or as pixel measure (if greater than 1)
+ * boundsExact (false): if invoker is a clickable element, it is ignored. Otherwise, specifies whether bounds (see above) should be a hint
+ *      (maximum allowed margins) or an exact measure. In other words, with boundsExact the popup will have the size of the rectangle R
+ *      determined by invoker size and bounds. Otherwise, the maximum popup size will be R, and if the popup size is included in R, it
+ *      will be centered in R.
+ * focusable (false): boolean. When true, the popup gains the focus when shown, and disappears when losses the focus
+ *      (popup.close() is called, see below)
+ * showOk (false): determines whether or not an ok button should be shown at the bottom of the popup. The ok button is an anchor whose
+ *      click will trigger the popup.onOk callback. This parameter should always be true for form filling popup (see content)
+ * onOk (null): callback. callback to be executed when the ok button is pressed. The callback takes as argument a dictionary of the popup data.
+ *      which is not empty only if the popup was built as form filling or listitem popup (see content above). In this last two cases,
+ *      the data returned is a dictionnary of [key:value] pairs (form filling popup) or a dictionary with one key (selIndex) and the
+ *      selected index that was clicked. This parameter should be specified for form filling popup (see content). popup.close() is always called
+ *      after onOk callback is executed, but without triggering the onClose callback, if any (see below)
+ * onShow (function): callback to be executed when the popup shows up
+ * defaultCloseOperation ('hide'): specified what to do when popup.close() is called. 'remove' removes the html element from the document,
+ *      'hide' or any other value simply call jQuery.hide() on the popup
+ * onClose (null): callback to be executed when the popup .close() function is called. It includes the case when focusable=true and
+ *      the popup looses the focus BUT NOT when the ok button (if any) is pressed (see onOk above)
+ * shadowOffset (4): the shadow offset. Each popup has a 'shadow' which renders a kind of 3d raised effect. Set to 0 if no shadow must be visualized
+ * popupClass ("") [see note1]: the popup class, if any, in the same form as jQuery.addClass() argument (ie, it can include multiple classes separated by space).
+ *      The top and bottom divs (housing title and close anchor and ok button respectively) are not affected by this parameter
+ * popupCss ({}) [see note1]: the popup css, if any, in the same form as jQuery.css() argument.
+ *      The top and bottom divs (housing title and close anchor and ok button respectively) are not affected by this parameter
+ * showClose (false): a parameter specifying whether a close button should appear on the top-right corner of the popup. Clicking the close button
+ *      (internally, an anchor) will close the popup and trigger popup.close() (and associated callbacks bindings, if any)
+ * title (""): a parameter specifying whether the popup should have a title. The title will be placed on the top of the popup.
+ * okButtonClass ('') [see note1]: the ok button (anchor) class, if showOk = true, in the same form as jQuery.addClass() argument (ie, it can include multiple classes separated by space).
+ * okButtonTitle ('Ok'): self-explicatory
+ * p.okButtonAlign ('right'): self explicatory. Takes the same argument as css text-align property
+ * closeButtonClass ('') [see note1]: the close button (anchor) class, if showClose = true, in the same form as jQuery.addClass() argument (ie, it can include multiple classes separated by space).
+ * closeButtonTitle ('x'): self- explicatory
+ * titleClass ('') [see note1]: the title (inpuit of type text) class, if title is not empty, in the same form as jQuery.addClass() argument (ie, it can include multiple classes separated by space).
+ * fadeInTime ('fast'): the fade in time when popup.show() is called. See jQuery show for possible values (briefly, a number in milliseconds or the string 'fast' or 'slow')
+ * fadeOutTime (0): the fade out time when popup.close() is called. See jQuery show for possible values (briefly, a number in milliseconds or the string 'fast' or 'slow')
+ * shadowOpacity (0.25): elf-explicatory. 1 means shadow completely black, 0 completely transparent (bascially, no shadow)
+ * zIndex (10000): the popup zIndex. Should be left untouched unless there are issues with other component with hight zIndex.
+ * listItemClass ('') [see note1]: the list items css, valid only if the popup is a listitem popup (see content above),
+ *      in the same form as jQuery.addClass() argument (that is, can take multiple classes separated by space).
+ * listItemCss ('') [see note1]: the list items css, valid only if the popup is a listitem popup (see content above),
+ *      in the same form as jQuery.addClass() argument (ie, a dictionary of key:value pairs).
+ *
+ * [note1] IMPORTANT: For every css or class parameter, some css styles might be overridden before showing the popup because they would interfere with the correct placement and
+ *      appearence of the popup: surely, 'display', 'position' and 'visibility' are among them. Usually, also 'size' css properties
+ *      such as width, height, left, right ectetera. Css and class parameters are useful for customizing the popup 'visually' (eg, colors, font,
+ *      backgrounds etcetera)
+ *
+ * EXAMPLES: given an anchor <a> (jQuery element)
+ *      1) show a popup when clicking <a> leaving the user choose among three oprions: 'banana', 'orange' and 'apple'. The popup will
+ *      behave as a default popup hiding when it looses focus
+ *      //setup parameters
+ *      var choices = ['banana','oranges','apples'];
+ *      var dict = {
+ *          content: choices,
+ *          onOk: function(data){
+ *              var fruitChosen = choices[data.selIndex];
+ *              //.. do something with the selected fruit....
+ *          },
+ *          focusable: true,
+ *          invoker: a,
+ *          defaultCloseOperation: ' remove'
+ *      }
+ *      //bind the click event of the anchor:
+ *      a.click(function(){ new PopupDiv(dict).show();});
+ *      
+ *      1) show a popup when clicking <a> leaving the user choose the fruit as text. The popup will close either when ok or close are clicked
+ *      //setup parameters
+ *      var choices = {'yourFruit':'banana'}; //banana will be the default value when the popup shows
+ *      var dict = {
+ *          content: choices,
+ *          showClose: true, 
+ *          showOk: true,
+ *          onOk: function(data){
+ *              var fruitChosen = data['yourFruit'];
+ *              //.. do something with the selected fruit....
+ *          },
+ *          invoker: a
+ *      }
+ *      //bind the click event of the anchor:
+ *      a.click(function(){ new PopupDiv(dict).show();});
+ *
+ *      3) show a message dialog which expires after 1500 milliseconds. No invoker specified means the popup will be centered in screen
+ *      new PopupDiv.show({
+ *          content: "i'm gonna disappear!", //one could also input "<span>i'm gonna disappear!</span>" or jQuery('<span/>').html("i'm gonna disappear!")
+ *          onShow: function(){
+ *              var me = this; //this refers to the popup
+ *              setTimeout(function(){
+ *                  this.close();
+ *              }, 1500);
+ *          }
+ *      });
  */
 function PopupDiv(){
     var $J = jQuery;
@@ -55,8 +174,7 @@ function PopupDiv(){
         return listeners;
     }
 
-    var k;
-
+    
     //setting static properties, if any.
     //The idea is that static PopupDiv properties SPP (eg, PopupDiv.shadowOffset = 5) should be added to the current PopupDiv
     //instance prototype ONCE (properties in the prototype are shared between all PopupDiv instances)
@@ -70,6 +188,7 @@ function PopupDiv(){
     //means that SPP's cannot be deleted after their first assignment. This requires more work and more memory consumption
     //but it assures cross browser compatibility
 
+    var k;
     var staticProps = undefined;
     for(k in PopupDiv){
         if(!staticProps){
@@ -105,8 +224,6 @@ function PopupDiv(){
         }
     }
 
-    
-
     //setting instance-specific properties:
     for(k in data){
         if(k == 'onOk' || k == 'onShow' || k == 'onClose'){
@@ -126,7 +243,7 @@ function PopupDiv(){
 
 }
 
-
+//populating the prototype object:
 (function(p){
     //private static variables
     var $ = jQuery;
diff --git a/telemeta/htdocs/timeside/js/markermap.js b/telemeta/htdocs/timeside/js/markermap.js
index f25c21bb..d27746d9 100644
--- a/telemeta/htdocs/timeside/js/markermap.js
+++ b/telemeta/htdocs/timeside/js/markermap.js
@@ -1,7 +1,6 @@
 /*
  * Copyright (C) 2007-2011 Parisson
  * Copyright (c) 2011 Riccardo Zaccarelli <riccardo.zaccarelli@gmail.com>
- * Copyright (c) 2010 Olivier Guilyardi <olivier@samalyse.com>
  *
  * This file is part of TimeSide.
  *
@@ -18,14 +17,13 @@
  * You should have received a copy of the GNU General Public License
  * along with TimeSide.  If not, see <http://www.gnu.org/licenses/>.
  *
- * Authors: Riccardo Zaccarelli <riccardo.zaccarelli@gmail.com>
- *          Olivier Guilyardi <olivier@samalyse.com>
+ * Author: Riccardo Zaccarelli <riccardo.zaccarelli@gmail.com>
  */
 
 /**
- * class fior managing markers in the player. Markers on the ruler (ruler.js) or on the divs (divmarker.js)
- * are not included here, they are separate classes. See player.js (loadMarkers method) where the bindings
- * between this class, ruler and divmarker are set
+ * class fior managing markers in the player. This class extends TimesideArray (see timeside.js), and communicates with the other 
+ * two TimesideArrays of the player which receive edit events (click, keys events etcetera): the ruler (ruler.js) and the markermapdiv (divmarker.js)
+ * All bindings between these three classes are set in in the player (See player.js , in particular loadMarkers method)
  */
 var MarkerMap = TimesideArray.extend({
 
@@ -294,7 +292,7 @@ var MarkerMap = TimesideArray.extend({
                 return a < b ? -1 : (a>b ? 1 : 0);
             };
         }
-        var pInt = parseInt; //reference to parseInt outside the loop below
+        //var pInt = parseInt; //reference to parseInt outside the loop below
         //(to increase algorithm performances)
 
         var data = this.toArray();
@@ -302,8 +300,9 @@ var MarkerMap = TimesideArray.extend({
         var high = data.length-1;
 
         while (low <= high) {
-            //int mid = (low + high) >>> 1;
-            var mid = pInt((low + high)/2);
+            var mid = (low + high) >>> 1;
+            //biwise operation equivalent to (but faster than):
+            //var mid = parseInt((low + high)/2);
             var midVal = data[mid];
             var cmp = comparatorFunction(midVal,object);
             if (cmp < 0){
@@ -319,4 +318,12 @@ var MarkerMap = TimesideArray.extend({
         return -(low + 1);  // key not found
     }
 }
-);
\ No newline at end of file
+);
+
+//var low = 6;
+//var high = 8;
+//consolelog(low+' '+high+' returns '+((low + high) >>> 1));
+//high = 9;
+//consolelog(low+' '+high+' returns '+((low + high) >>> 1));
+//high = 10;
+//consolelog(low+' '+high+' returns '+((low + high) >>> 1));
\ No newline at end of file
diff --git a/telemeta/htdocs/timeside/js/player.js b/telemeta/htdocs/timeside/js/player.js
index bab1012c..898eaf7e 100644
--- a/telemeta/htdocs/timeside/js/player.js
+++ b/telemeta/htdocs/timeside/js/player.js
@@ -21,14 +21,17 @@
  * Authors: Riccardo Zaccarelli <riccardo.zaccarelli@gmail.com>
  *          Olivier Guilyardi <olivier@samalyse.com>
  */
+
+/**
+ * The player class to instantiate a new player. Requires all necessary js (timeside, ruler, markermap etcetera...) and
+ * jQuery
+ */
 var Player = TimesideClass.extend({
     
     //sound duration is in milliseconds because the soundmanager has that unit,
     //player (according to timeside syntax) has durations in seconds
     init: function(container, sound, soundDurationInMsec, itemId, visualizers, currentUserName, isStaffOrSuperUser) {
         this._super();
-        this.ready = false;
-        var player = this;
 
         //container is the div #player
         
@@ -53,65 +56,21 @@ var Player = TimesideClass.extend({
 
         //rpivate functions for converting
         //soundmanager has milliseconds, we use here seconds
-        var pInt = Math.round; //instantiate once for faster lookup
-        var pFloat = parseFloat; //instantiate once for faster lookup
-        function toMsec(seconds){
-            return pInt(seconds*1000);
-        }
-        function toSec(msec){
-            return pFloat(msec)/1000;
-        }
+        
 
 
-        var sd = toSec(soundDurationInMsec);
+        var sd = this.toSec(soundDurationInMsec);
         this.getSoundDuration = function(){
             return sd;
         }
        
-        this.isPlaying = function(){
-            /*Numeric value indicating the current playing state of the sound.
-             * 0 = stopped/uninitialised
-             * 1 = playing or buffering sound (play has been called, waiting for data etc.)
-             *Note that a 1 may not always guarantee that sound is being heard, given buffering and autoPlay status.*/
-            return sound && sound.playState==1;
-        };
-
-        var currentMarkerIndex=0;
-        this.getCurrentMarkerIndex = function(){
-            return currentMarkerIndex;
-        };
+       
 
-        //setting the position===============================================
-        //if sound is not loaded, position is buggy. Moreover, we have to handle the conversions between units: 
-        //seconds (here) and milliseconds (swmanager sound). So we store a private variable
-        //private variable and function
-        var soundPos = sound.position ? toSec(sound.position) : 0.0;
-        //private method: updates just the internal variable (called in whilePlaying below)
-        function setPos(value){
-            soundPos = value;
-            var map = player.getMarkerMap();
-            if(map){
-                currentMarkerIndex = map.insertionIndex(value);
-                if(currentMarkerIndex<0){ //see markermap.insertionindex
-                    currentMarkerIndex = -currentMarkerIndex-1;
-                }
-            }
-        }
-        //public methods: calls setPos above AND updates sounbd position
-        this.setSoundPosition = function(newPositionInSeconds){
-            //for some odd reason, if we set sound.setPosition here soundPos
-            //is rounded till the 3rd decimal integer AND WILL BE ROUNDED THIS WAY IN THE FUTURE
-            //don't know why, however we set the sound position before playing (see below)
-            //however, now it works. Even odder....
-            setPos(newPositionInSeconds);
-            if(sound){
-                var s = toMsec(this.getSoundPosition());
-                sound.setPosition(s);
-            }
-        }
+        
+        this.soundPosition =  sound.position ? this.toSec(sound.position) : 0;
         //public methods: returns the sound position
         this.getSoundPosition = function(){
-            return soundPos;
+            return this.soundPosition;
         };
 
 
@@ -128,57 +87,12 @@ var Player = TimesideClass.extend({
         //                }
         //        };
         
-        //implement play here: while playing we do not have to update the sound position, so
-        //we call the private variable soundPos
-        this.play = function(){
-            if(!player || player.isPlaying()){ //TODO: remove?, multishot is set to false
-                return false;
-            }
-            var sound = player.getSound();
-            if(!sound){
-                return false;
-            }
-
-            var ruler = player.getRuler();
-            
-            var playOptions = {
-                whileplaying: function(){
-                    var sPos = toSec(this.position); //this will refer to the sound object (see below)
-                    setPos(sPos);
-                    if(ruler && !ruler.isPointerMovingFromMouse()){
-                        ruler.movePointer(sPos);
-                    }
-                    
-                //player.showMarkerPopup(currentMarkerIndex);
-                },
-                onfinish: function() {
-                    setPos(0); //reset position, not cursor, so that clicking play restarts from zero
-                }
-            };
-            //internal play function. Set all properties and play:
-            var play_ = function(sound, positionInSec){
-                sound.setPosition(toMsec(positionInSec)); //TODO: remove???
-                sound.setVolume(sound.volume); //workaround. Just to be sure. Sometimes it fails when we re-play
-                playOptions.position = toMsec(positionInSec); //apparently THIS IS WORKING
-                sound.play(playOptions);
-            };
-           
-            play_(sound, player.getSoundPosition());
-            
-            return false;
-        };
-        //now implement also pause here: note that pause has some odd behaviour.
-        //Try this sequence: play stop moveforward moveback play pause
-        //When we press the last pause the sound restarts (??!!!!)
-        this.pause = function(){
-            var sound = this.getSound();
-            //we don't check if it's playing, as the stop must really stop anyway
-            //if(sound && this.isPlaying()){
-            sound.stop();
-            //}
-            return false;
+        var currentMarkerIndex=0;
+        this.getCurrentMarkerIndex = function(){
+            return currentMarkerIndex;
         };
 
+
         //initializing markermap and markerui
         var map = new MarkerMap(this.getItemId(), currentUserName, isStaffOrSuperUser);
         this.getMarkerMap = function(){
@@ -189,7 +103,83 @@ var Player = TimesideClass.extend({
             return mapUI;
         }
     },
+    //functions for converting seconds (player unit) to milliseconds (sound manager unit) and viceversa:
+    toSec: function(milliseconds){
+        return milliseconds/1000;
+    },
+    toMsec : function(seconds){ //this function has less performances than toSec, as it calls Math.round
+        return Math.round(1000*seconds); //however, it is assumed that it is NOT called in loops
+    },
+    isPlaying : function(){
+        var sound = this.getSound();
+        if(!sound){
+            return false;
+        }
+        /*Numeric value indicating the current playing state of the sound.
+             * 0 = stopped/uninitialised
+             * 1 = playing or buffering sound (play has been called, waiting for data etc.)
+             *Note that a 1 may not always guarantee that sound is being heard, given buffering and autoPlay status.*/
+        return sound && sound.playState==1;
+    },
+    setSoundPosition : function(newPositionInSeconds){
+        //for some odd reason, if we set sound.setPosition here soundPos
+        //is rounded till the 3rd decimal integer AND WILL BE ROUNDED THIS WAY IN THE FUTURE
+        //don't know why, however we set the sound position before playing (see below)
+        //however, now it works. Even odder....
+        this.soundPosition = newPositionInSeconds;
+
+        if(this.isPlaying()){
+            this.getSound().setPosition(this.toMsec(newPositionInSeconds));
+            //if playing, we do not need to update the pointer position, the play function takes care of it
+        }else{
+           //it is not playing, update pointer position. If this call is due to a pointer move (mouse release),
+           //ruler.isPointerMovingFromMouse=true and the following code has no effect
+            var ruler = this.getRuler();
+            if(ruler){
+                ruler.movePointer(newPositionInSeconds);
+            }
+        }
+    },
+    play : function(){
+        var player = this;
+        if(!player || player.isPlaying()){ //TODO: remove?, multishot is set to false
+            return false;
+        }
+        var sound = player.getSound();
+        if(!sound){
+            return false;
+        }
+
+        var toSec = player.toSec;
+        var ruler = player.getRuler();
+        var sPosInMsec = player.toMsec(player.soundPosition);
+        var playOptions = {
+            whileplaying: function(){
+                var sPosInSec = toSec(this.position); //this refers to the soundmanager obj
+                player.soundPosition = sPosInSec;
+                if(ruler){
+                    ruler.movePointer(sPosInSec);
+                }
+            },
+            position: sPosInMsec,
+            onfinish: function() {
+                setPos(0); //reset position, not cursor, so that clicking play restarts from zero
+            }
+        };
 
+        sound.setVolume(sound.volume); //workaround. Just to be sure. Sometimes it fails when we re-play
+        sound.play(playOptions);
+
+        return false;
+    },
+    pause: function(){
+        var sound = this.getSound();
+        //we don't check if it's playing, as the stop must really stop anyway
+        //if(sound && this.isPlaying()){
+        sound.stop();
+        //}
+        return false;
+    },
     //sets up the player interface and loads the markers. There is theoretically no need of this method, as it might be included in
     //the init constructor, it is separated for "historical" reasons: this method stems from the old _setupInterface,
     //which was a separate method in the old player code. Future releases might include it in the init constructor
@@ -329,7 +319,6 @@ var Player = TimesideClass.extend({
             //avoid checking whether or not we are clicking on a vertical marker line, on a subdiv etcetera
             var sd = me.getSoundDuration();
             me.setSoundPosition(sd*x/w);
-            ruler.movePointer(ruler.toSoundPosition(x));
         });
        
 
@@ -475,13 +464,13 @@ var Player = TimesideClass.extend({
             'margin':'0px',
             'marginTop':span+'px',
             'marginLeft':span+'px'
-            });
+        });
         var span2 = (maxHeight - imgWait.outerHeight())/2; //do not include margins in oputerHeight (we will set them to zero below)
         imgWait.css({
             'margin':'0px',
             'marginTop':span2+'px',
             'marginLeft':span+'px'
-            })
+        })
 
         
         return this;
@@ -556,7 +545,6 @@ var Player = TimesideClass.extend({
             offset = markers[idx].offset;
         }
         this.setSoundPosition(offset);
-        this.getRuler().movePointer(offset);
         return false;
     },
     //moves the pointer (and sound position) backward till the previous marker or the start of sound
@@ -580,7 +568,6 @@ var Player = TimesideClass.extend({
             offset = markers[idx].offset;
         }
         this.setSoundPosition(offset);
-        this.getRuler().movePointer(offset);
         return false;
     },
 
@@ -736,7 +723,6 @@ var Player = TimesideClass.extend({
                     if(data.index>=0 && data.index<map.length){
                         var offset = map.toArray()[data.index].offset;
                         player.setSoundPosition(offset);
-                        player.getRuler().movePointer(offset);
                     }
                 }
             });
diff --git a/telemeta/htdocs/timeside/js/playerLoader.js b/telemeta/htdocs/timeside/js/playerLoader.js
index 82c15c0e..1de86e3c 100644
--- a/telemeta/htdocs/timeside/js/playerLoader.js
+++ b/telemeta/htdocs/timeside/js/playerLoader.js
@@ -121,7 +121,6 @@ function loadPlayer(analizerUrl, soundUrl, itemId, visualizers, currentUserName,
                 });
                 if(selOffs >= 0){
                     p.setSoundPosition(selOffs);
-                    p.getRuler().movePointer(selOffs);
                 }
                 //3) assing a binding to the player maximization button:
                 $J('#player_maximized .toggle, #player_minimized .toggle').click(function() {
diff --git a/telemeta/htdocs/timeside/js/ruler.js b/telemeta/htdocs/timeside/js/ruler.js
index 78ce4bf8..d686ac2f 100644
--- a/telemeta/htdocs/timeside/js/ruler.js
+++ b/telemeta/htdocs/timeside/js/ruler.js
@@ -114,7 +114,7 @@ var Ruler = TimesideArray.extend({
             //.bind('resize', this.attachWithEvent(this.resize)) // Can loop ?
             .appendTo(container);
         }else{
-            //remove all elements neither pointer nor marker
+            //remove all elements neither pointer (or children of it) nor marker (or children of it)
             layout.find(':not(a.ts-pointer,a.ts-marker,a.ts-pointer>*,a.ts-marker>*)').remove();
         }
 
@@ -341,23 +341,15 @@ var Ruler = TimesideArray.extend({
         
         var me = this;
 
-        var ismovingpointer = false;
-        var setmovingpointer = function(value){
-            ismovingpointer = value;
-        }
-        //TODO: this method below private, but how to let him see in the bind below???
-        this.setPointerMovingFromMouse = function(value){
-            setmovingpointer(value);
-        }
-        this.isPointerMovingFromMouse = function(){
-            return ismovingpointer;
-        };
+        //flag to be set to true when moving a poiner from mouse.
+        //when true, movePointer (see below) has no effect
+        this.isPointerMovingFromMouse = false;
         //functions to set if we are moving the pointer (for player when playing)
 
         lbl.bind('mousedown.'+eventId,function(evt) {
             
             if(markerClass=='pointer'){
-                me.setPointerMovingFromMouse(true);
+                me.isPointerMovingFromMouse = true;
             }
 
             var startX = evt.pageX; //lbl.position().left-container.position().left;
@@ -382,9 +374,6 @@ var Ruler = TimesideArray.extend({
                 doc.unbind('mousemove.'+eventId);
                 doc.unbind('mouseup.'+eventId);
                 evt_.stopPropagation();
-                if(markerClass=='pointer'){
-                    me.setPointerMovingFromMouse(false);
-                }
                 if(newPos == startPos){
                     return false;
                 }
@@ -394,6 +383,9 @@ var Ruler = TimesideArray.extend({
                     'markerClass':markerClass
                 };
                 me.fire('markermoved',data);
+                if(markerClass=='pointer'){
+                    me.isPointerMovingFromMouse = false;
+                }
                 return false;
             };
             doc.bind('mouseup.'+eventId, mouseup);
@@ -410,7 +402,7 @@ var Ruler = TimesideArray.extend({
     //soundPosition is in seconds (float)
     movePointer : function(soundPosition) {
         var pointer = this.getPointer();
-        if (pointer) {
+        if (pointer && !this.isPointerMovingFromMouse) {
             var pixelOffset = this.toPixelOffset(soundPosition);
             //first set text, so the label width is set, then call move:
             pointer.setText(this.makeTimeLabel(soundPosition));
@@ -448,54 +440,3 @@ var Ruler = TimesideArray.extend({
         return soundPosition;
     }
 });
-
-
-    // TODO: check here
-    // http://stackoverflow.com/questions/3299926/ie-mousemove-bug
-    // div in IE to receive mouse events must have a background
-    // so for the moment
-
-
-
-    //        var mouseDown = false;
-    //        var _onMouseDown = function(evt) {
-    //            mouseDown = true;
-    //            this._onMouseMove(evt);
-    //            evt.preventDefault(); //If this method is called, the default action of the event will not be triggered.
-    //        };
-    //        var _onMouseMove = function(evt) {
-    //            if (mouseDown) {
-    //                var pixelOffset = evt.pageX - container.offset().left;
-    //                this._movePointerAndUpdateSoundPosition(pixelOffset / this.width * this.duration);
-    //            //moves the pointer and fires onPointerMove
-    //            }
-    //            return false;
-    //        };
-    //
-    //        var _onMouseUp= function(evt) {
-    //            if (mouseDown) {
-    //                mouseDown = false;
-    //                this.debug('_onMouseUp:'+this.pointerPos+' '+this.cfg.sound.position);
-    //            }
-    //            return false;
-    //        };
-    //        var imgContainer = viewer.find('.' + cssPref + 'image-container'); // for IE
-    //        var element = waveContainer.add(imgContainer); //constructs a new jQuery object which is the union of the jquery objects
-    //
-    //        element
-    //        .bind('click dragstart', function() {
-    //            return false;
-    //        })
-    //        .bind('mousedown', function(evt){
-    //            return _onMouseDown(evt);
-    //        })
-    //        .bind('mousemove', function(evt){
-    //            return _onMouseMove(evt);
-    //        })
-    //        .bind('mouseup', function(evt){
-    //            return _onMouseUp(evt);
-    //        });
-    //        this.$J(document)
-    //        .bind('mousemove', function(evt){
-    //            return _onMouseMove(evt);
-    //        });
\ No newline at end of file
diff --git a/telemeta/templates/telemeta_default/mediaitem_detail.html b/telemeta/templates/telemeta_default/mediaitem_detail.html
index 7333ec44..f71357d1 100644
--- a/telemeta/templates/telemeta_default/mediaitem_detail.html
+++ b/telemeta/templates/telemeta_default/mediaitem_detail.html
@@ -12,7 +12,7 @@
       {% endblock %}
 
       {% block extra_javascript %}
-      {% if item.file %}
+{% if item %}
 
       <!--<script src="{% url telemeta-js "wz_jsgraphics.js" %}" type="text/javascript"></script>-->
 <script src="{% url telemeta-timeside "js/soundmanager2-nodebug-jsmin.js" %}" type="text/javascript"></script>