converted all the source files to use the require.js syntax. require-js
authorhamidouk
Mon, 14 Nov 2011 17:19:26 +0100
branchrequire-js
changeset 238 6008172a0592
parent 237 8f99b0df3278
child 239 9eb584fdfbe4
converted all the source files to use the require.js syntax.
src/js/IriSP.js
src/js/data.js
src/js/init.js
src/js/layout.js
src/js/serializers/JSONSerializer.js
src/js/site.js
src/js/ui.js
src/js/utils.js
src/js/widgets.js
src/js/widgets/annotationsWidget.js
src/js/widgets/playerWidget.js
src/js/widgets/polemicWidget.js
src/js/widgets/segmentsWidget.js
src/js/widgets/sliderWidget.js
src/js/widgets/tooltipWidget.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/js/IriSP.js	Mon Nov 14 17:19:26 2011 +0100
@@ -0,0 +1,6 @@
+/* IriSP.js - the module every module depends on. */
+
+if ( window.IriSP === undefined && window.__IriSP === undefined ) { 
+	var IriSP = {}; 
+	var __IriSP = IriSP; /* for backward compatibility */
+}
\ No newline at end of file
--- a/src/js/data.js	Mon Nov 14 16:12:13 2011 +0100
+++ b/src/js/data.js	Mon Nov 14 17:19:26 2011 +0100
@@ -1,157 +1,158 @@
 /* data.js - this file deals with how the players gets and sends data */
-
-IriSP.DataLoader = function() {
-  this._cache = {};
-};
+define(["IriSP"], function() {
+  IriSP.DataLoader = function() {
+    this._cache = {};
+  };
 
-IriSP.DataLoader.prototype.get = function(url, callback) {  
-  if (this._cache.hasOwnProperty(url)) {
-    callback(this._cache[url]);
-  } else {
-    /* we need a closure because this gets lost when it's called back */
-    IriSP.jQuery.get(url, callback);  
-    /*
-    IriSP.jQuery.get(url, (function(obj) {      
-                               return function(data) {
-                                  obj._cache[url] = data;      
-                                  callback(obj._cache[url]);
-                                }; 
-                              })(this));
-    */
-       
+  IriSP.DataLoader.prototype.get = function(url, callback) {  
+    if (this._cache.hasOwnProperty(url)) {
+      callback(this._cache[url]);
+    } else {
+      /* we need a closure because this gets lost when it's called back */
+      IriSP.jQuery.get(url, callback);  
+      /*
+      IriSP.jQuery.get(url, (function(obj) {      
+                                 return function(data) {
+                                    obj._cache[url] = data;      
+                                    callback(obj._cache[url]);
+                                  }; 
+                                })(this));
+      */
+         
+    }
   }
-}
 
-/* the base abstract "class" */
-IriSP.Serializer = function(DataLoader, url) {
-  this._DataLoader = DataLoader;
-  this._url = url;
-  this._data = [];
-};
+  /* the base abstract "class" */
+  IriSP.Serializer = function(DataLoader, url) {
+    this._DataLoader = DataLoader;
+    this._url = url;
+    this._data = [];
+  };
 
-IriSP.Serializer.prototype.serialize = function(data) { };
-IriSP.Serializer.prototype.deserialize = function(data) {};
+  IriSP.Serializer.prototype.serialize = function(data) { };
+  IriSP.Serializer.prototype.deserialize = function(data) {};
 
-IriSP.Serializer.prototype.currentMedia = function() {  
-};
+  IriSP.Serializer.prototype.currentMedia = function() {  
+  };
 
-IriSP.Serializer.prototype.sync = function(callback) {  
-  callback.call(this, this._data);  
-};
+  IriSP.Serializer.prototype.sync = function(callback) {  
+    callback.call(this, this._data);  
+  };
 
-IriSP.SerializerFactory = function(DataLoader) {
-  this._dataloader = DataLoader;
-};
+  IriSP.SerializerFactory = function(DataLoader) {
+    this._dataloader = DataLoader;
+  };
 
-IriSP.SerializerFactory.prototype.getSerializer = function(metadataOptions) {
-  /* This function returns serializer set-up with the correct
-     configuration - takes a metadata struct describing the metadata source
-  */
-  
-  if (metadataOptions === undefined)
-    /* return an empty serializer */
-    return IriSP.Serializer("", "");
-            
-  switch(metadataOptions.type) {
-    case "json":
-      return new IriSP.JSONSerializer(this._dataloader, metadataOptions.src);
-      break;
+  IriSP.SerializerFactory.prototype.getSerializer = function(metadataOptions) {
+    /* This function returns serializer set-up with the correct
+       configuration - takes a metadata struct describing the metadata source
+    */
     
-    case "dummy": /* only used for unit testing - not defined in production */
-      return new IriSP.MockSerializer(this._dataloader, metadataOptions.src);
-      break;
-    
-    case "empty":
-      return new IriSP.Serializer("", "empty");
-      break;
+    if (metadataOptions === undefined)
+      /* return an empty serializer */
+      return IriSP.Serializer("", "");
+              
+    switch(metadataOptions.type) {
+      case "json":
+        return new IriSP.JSONSerializer(this._dataloader, metadataOptions.src);
+        break;
       
-    default:      
-      return undefined;
-  }
-};
+      case "dummy": /* only used for unit testing - not defined in production */
+        return new IriSP.MockSerializer(this._dataloader, metadataOptions.src);
+        break;
+      
+      case "empty":
+        return new IriSP.Serializer("", "empty");
+        break;
+        
+      default:      
+        return undefined;
+    }
+  };
 
 
-IriSP.getMetadata = function() {
-	
-	IriSP.jQuery.ajax({
-		  dataType: IriSP.config.metadata.load,
-		  url:IriSP.config.metadata.src,
-		  success : function( json ){
-		  
-				IriSP.trace( "ajax", "success" );
-				
-				// START PARSING ----------------------- 
-				if( json === "" ){
-					alert( "Json load error" );
-				} else {							  							  
-					// # CREATE MEDIA  							//
-					// # JUSTE ONE PLAYER FOR THE MOMENT		//
-					//__IriSP.jQuery("<div></div>").appendTo("#output");
-					var MyMedia = new  __IriSP.Media(
-														json.medias[0].id,
-														json.medias[0].href,
-														json.medias[0]['meta']['dc:duration'],
-														json.medias[0]['dc:title'],
-														json.medias[0]['dc:description']);
-					
-					IriSP.trace( "__IriSP.MyApiPlayer",
-														IriSP.config.gui.width+"   "
-														+ IriSP.config.gui.height + " "
-														+ json.medias[0].href + " "
-														+ json.medias[0]['meta']['dc:duration'] + " "
-														+ json.medias[0]['meta']['item']['value']);
-					
-					// Create APIplayer
-					IriSP.MyApiPlayer = new __IriSP.APIplayer (
-														IriSP.config.gui.width,
-														IriSP.config.gui.height,
-														json.medias[0].href,
-														json.medias[0]['meta']['dc:duration'],
-														json.medias[0]['meta']['item']['value']);
-				
-					// # CREATE THE FIRST LINE  				//
-					IriSP.trace( "__IriSP.init.main","__IriSP.Ligne" );
-					IriSP.MyLdt = new __IriSP.Ligne(
-														json['annotation-types'][0].id,
-														json['annotation-types'][0]['dc:title'],
-														json['annotation-types'][0]['dc:description'],
-														json.medias[0]['meta']['dc:duration']);			
-					
-					// CREATE THE TAG CLOUD 					//
-					IriSP.trace( "__IriSP.init.main","__IriSP.Tags" );
-					IriSP.MyTags =  new __IriSP.Tags( json.tags );
-				
-					// CREATE THE ANNOTATIONS  				    //
-					// JUSTE FOR THE FIRST TYPE   			 	//
-					/* FIXME: make it support more than one ligne de temps */
-					IriSP.jQuery.each( json.annotations, function(i,item) {
-						if (item.meta['id-ref'] == IriSP.MyLdt.id) {
-							//__IriSP.trace("__IriSP.init.main","__IriSP.MyLdt.addAnnotation");
-							IriSP.MyLdt.addAnnotation(
-										item.id,
-										item.begin,
-										item.end,
-										item.media,
-										item.content.title,
-										item.content.description,
-										item.content.color,
-										item.tags);
-						}
-							//MyTags.addAnnotation(item);
-					} );	
-					IriSP.jQuery.each( json.lists, function(i,item) {
-						IriSP.trace("lists","");
-					} );	
-					IriSP.jQuery.each( json.views, function(i,item) {
-						IriSP.trace("views","");
-					} );	
-				}
-				// END PARSING ----------------------- //  
-			
-							
-		}, error : function(data){
-			  alert("ERROR : "+data);
-		}
-	  });	
+  IriSP.getMetadata = function() {
+    
+    IriSP.jQuery.ajax({
+        dataType: IriSP.config.metadata.load,
+        url:IriSP.config.metadata.src,
+        success : function( json ){
+        
+          IriSP.trace( "ajax", "success" );
+          
+          // START PARSING ----------------------- 
+          if( json === "" ){
+            alert( "Json load error" );
+          } else {							  							  
+            // # CREATE MEDIA  							//
+            // # JUSTE ONE PLAYER FOR THE MOMENT		//
+            //__IriSP.jQuery("<div></div>").appendTo("#output");
+            var MyMedia = new  __IriSP.Media(
+                              json.medias[0].id,
+                              json.medias[0].href,
+                              json.medias[0]['meta']['dc:duration'],
+                              json.medias[0]['dc:title'],
+                              json.medias[0]['dc:description']);
+            
+            IriSP.trace( "__IriSP.MyApiPlayer",
+                              IriSP.config.gui.width+"   "
+                              + IriSP.config.gui.height + " "
+                              + json.medias[0].href + " "
+                              + json.medias[0]['meta']['dc:duration'] + " "
+                              + json.medias[0]['meta']['item']['value']);
+            
+            // Create APIplayer
+            IriSP.MyApiPlayer = new __IriSP.APIplayer (
+                              IriSP.config.gui.width,
+                              IriSP.config.gui.height,
+                              json.medias[0].href,
+                              json.medias[0]['meta']['dc:duration'],
+                              json.medias[0]['meta']['item']['value']);
+          
+            // # CREATE THE FIRST LINE  				//
+            IriSP.trace( "__IriSP.init.main","__IriSP.Ligne" );
+            IriSP.MyLdt = new __IriSP.Ligne(
+                              json['annotation-types'][0].id,
+                              json['annotation-types'][0]['dc:title'],
+                              json['annotation-types'][0]['dc:description'],
+                              json.medias[0]['meta']['dc:duration']);			
+            
+            // CREATE THE TAG CLOUD 					//
+            IriSP.trace( "__IriSP.init.main","__IriSP.Tags" );
+            IriSP.MyTags =  new __IriSP.Tags( json.tags );
+          
+            // CREATE THE ANNOTATIONS  				    //
+            // JUSTE FOR THE FIRST TYPE   			 	//
+            /* FIXME: make it support more than one ligne de temps */
+            IriSP.jQuery.each( json.annotations, function(i,item) {
+              if (item.meta['id-ref'] == IriSP.MyLdt.id) {
+                //__IriSP.trace("__IriSP.init.main","__IriSP.MyLdt.addAnnotation");
+                IriSP.MyLdt.addAnnotation(
+                      item.id,
+                      item.begin,
+                      item.end,
+                      item.media,
+                      item.content.title,
+                      item.content.description,
+                      item.content.color,
+                      item.tags);
+              }
+                //MyTags.addAnnotation(item);
+            } );	
+            IriSP.jQuery.each( json.lists, function(i,item) {
+              IriSP.trace("lists","");
+            } );	
+            IriSP.jQuery.each( json.views, function(i,item) {
+              IriSP.trace("views","");
+            } );	
+          }
+          // END PARSING ----------------------- //  
+        
+                
+      }, error : function(data){
+          alert("ERROR : "+data);
+      }
+      });	
 
-}
\ No newline at end of file
+  }
+});  
\ No newline at end of file
--- a/src/js/init.js	Mon Nov 14 16:12:13 2011 +0100
+++ b/src/js/init.js	Mon Nov 14 17:19:26 2011 +0100
@@ -3,92 +3,94 @@
  
  */
 
-IriSP.configurePopcorn = function (layoutManager, options) {
-    var pop;
-    var containerDiv = layoutManager.createDiv();
-    
-    switch(options.type) {
-      /*
-        todo : dynamically create the div/video tag which
-        will contain the video.
-      */
-      case "html5":
-           var tmpId = Popcorn.guid("video"); 
-           IriSP.jQuery("#" + containerDiv).append("<video src='" + options.file + "' id='" + tmpId + "'></video>");
-           pop = Popcorn("#" + tmpId).mediafragment({start : 0});
-        break;
-        
-      case "jwplayer":
-          var opts = IriSP.jQuery.extend({}, options);
-          delete opts.container;
-          pop = Popcorn.jwplayer("#" + containerDiv, "", opts).mediafragment({start : 0});
-        break;
+define(["IriSP"], function() {
+  IriSP.configurePopcorn = function (layoutManager, options) {
+      var pop;
+      var containerDiv = layoutManager.createDiv();
       
-      case "youtube":
-          var opts = IriSP.jQuery.extend({}, options);
-          delete opts.container;
-          opts.controls = 0;
-          opts.autostart = false;
-          templ = "width: {{width}}px; height: {{height}}px;";
-          var str = Mustache.to_html(templ, {width: opts.width, height: opts.height});    
-          // Popcorn.youtube wants us to specify the size of the player in the style attribute of its container div.
-          IriSP.jQuery("#" + containerDiv).attr("style", str);
+      switch(options.type) {
+        /*
+          todo : dynamically create the div/video tag which
+          will contain the video.
+        */
+        case "html5":
+             var tmpId = Popcorn.guid("video"); 
+             IriSP.jQuery("#" + containerDiv).append("<video src='" + options.file + "' id='" + tmpId + "'></video>");
+             pop = Popcorn("#" + tmpId).mediafragment({start : 0});
+          break;
           
-          pop = Popcorn.youtube("#" + containerDiv, opts.video, opts).mediafragment({start : 0});
-        break;
+        case "jwplayer":
+            var opts = IriSP.jQuery.extend({}, options);
+            delete opts.container;
+            pop = Popcorn.jwplayer("#" + containerDiv, "", opts).mediafragment({start : 0});
+          break;
         
-      default:
-        pop = undefined;
-    };
-    
-    return pop;
-};
-
-IriSP.configureWidgets = function (popcornInstance, layoutManager, guiOptions) {
-
-  var dt = new IriSP.DataLoader();
-  var serialFactory = new IriSP.SerializerFactory(dt);
-  
-  var params = {width: guiOptions.width, height: guiOptions.height};
-
-  var ret_widgets = [];
-  var index;
-  
-  for (index = 0; index < guiOptions.widgets.length; index++) {    
-    var widgetConfig = guiOptions.widgets[index];
-    var widget = IriSP.instantiateWidget(popcornInstance, serialFactory, layoutManager, widgetConfig);
-    ret_widgets.push(widget);
-   
+        case "youtube":
+            var opts = IriSP.jQuery.extend({}, options);
+            delete opts.container;
+            opts.controls = 0;
+            opts.autostart = false;
+            templ = "width: {{width}}px; height: {{height}}px;";
+            var str = Mustache.to_html(templ, {width: opts.width, height: opts.height});    
+            // Popcorn.youtube wants us to specify the size of the player in the style attribute of its container div.
+            IriSP.jQuery("#" + containerDiv).attr("style", str);
+            
+            pop = Popcorn.youtube("#" + containerDiv, opts.video, opts).mediafragment({start : 0});
+          break;
+          
+        default:
+          pop = undefined;
+      };
+      
+      return pop;
   };
 
-  return ret_widgets;
-};
+  IriSP.configureWidgets = function (popcornInstance, layoutManager, guiOptions) {
 
-IriSP.instantiateWidget = function(popcornInstance, serialFactory, layoutManager, widgetConfig) {
-    var container = layoutManager.createDiv();        
-    var arr = IriSP.jQuery.extend({}, widgetConfig);
-    arr.container = container;
+    var dt = new IriSP.DataLoader();
+    var serialFactory = new IriSP.SerializerFactory(dt);
     
-    var serializer = serialFactory.getSerializer(widgetConfig.metadata);    
-    
-    if (typeof serializer == "undefined")   
-      debugger;
-    
-    // instantiate the object passed as a string
-    var widget = new IriSP[widgetConfig.type](popcornInstance, arr, serializer);    
+    var params = {width: guiOptions.width, height: guiOptions.height};
+
+    var ret_widgets = [];
+    var index;
     
-    if (widgetConfig.hasOwnProperty("requires")) {
-      // also create the widgets this one depends on.
-      // the dependency widget is available in the parent widget context as
-      // this.WidgetName (for instance, this.TipWidget);
+    for (index = 0; index < guiOptions.widgets.length; index++) {    
+      var widgetConfig = guiOptions.widgets[index];
+      var widget = IriSP.instantiateWidget(popcornInstance, serialFactory, layoutManager, widgetConfig);
+      ret_widgets.push(widget);
+     
+    };
+
+    return ret_widgets;
+  };
+
+  IriSP.instantiateWidget = function(popcornInstance, serialFactory, layoutManager, widgetConfig) {
+      var container = layoutManager.createDiv();        
+      var arr = IriSP.jQuery.extend({}, widgetConfig);
+      arr.container = container;
+      
+      var serializer = serialFactory.getSerializer(widgetConfig.metadata);    
+      
+      if (typeof serializer == "undefined")   
+        debugger;
       
-      var i = 0;
-      for(i = 0; i < widgetConfig.requires.length; i++) {
-        var widgetName = widgetConfig.requires[i]["type"];
-        widget[widgetName] = IriSP.instantiateWidget(popcornInstance, serialFactory, layoutManager, widgetConfig.requires[i]);
-      }
-    }       
-     
-    serializer.sync(IriSP.wrap(widget, function() { this.draw(); }));
-    return widget;
-};
\ No newline at end of file
+      // instantiate the object passed as a string
+      var widget = new IriSP[widgetConfig.type](popcornInstance, arr, serializer);    
+      
+      if (widgetConfig.hasOwnProperty("requires")) {
+        // also create the widgets this one depends on.
+        // the dependency widget is available in the parent widget context as
+        // this.WidgetName (for instance, this.TipWidget);
+        
+        var i = 0;
+        for(i = 0; i < widgetConfig.requires.length; i++) {
+          var widgetName = widgetConfig.requires[i]["type"];
+          widget[widgetName] = IriSP.instantiateWidget(popcornInstance, serialFactory, layoutManager, widgetConfig.requires[i]);
+        }
+      }       
+       
+      serializer.sync(IriSP.wrap(widget, function() { this.draw(); }));
+      return widget;
+  };
+});  
\ No newline at end of file
--- a/src/js/layout.js	Mon Nov 14 16:12:13 2011 +0100
+++ b/src/js/layout.js	Mon Nov 14 17:19:26 2011 +0100
@@ -1,59 +1,61 @@
 /* layout.js - very basic layout management */
 
-/*
-  a layout manager manages a div and the layout of objects
-  inside it.
-*/
+define(["IriSP"], function() {
+  /*
+    a layout manager manages a div and the layout of objects
+    inside it.
+  */
 
-IriSP.LayoutManager = function(options) {
-    this._Popcorn = null;
-    this._widgets = [];
-    
-    this._div = "LdtPlayer";
-    this._width = 640;
-    
-    if (options === undefined) {
-      options = {};
-    };
-    
-    if (options.hasOwnProperty('container')) {
-      this._div = options.container;
-    }
+  IriSP.LayoutManager = function(options) {
+      this._Popcorn = null;
+      this._widgets = [];
+      
+      this._div = "LdtPlayer";
+      this._width = 640;
+      
+      if (options === undefined) {
+        options = {};
+      };
+      
+      if (options.hasOwnProperty('container')) {
+        this._div = options.container;
+      }
 
-    if (options.hasOwnProperty('width')) {
-      this._width = options.width;
-    }    
-    
-    if (options.hasOwnProperty('height')) {
-      this._height = options.height;
-    } 
-    
-    /* this is a shortcut */
-    this.selector = IriSP.jQuery("#" + this._div);
-    
-    this.selector.css("width", this._width);
-    
-    if (this._height !== undefined)
-      this.selector.css("height", this._height);
-};
+      if (options.hasOwnProperty('width')) {
+        this._width = options.width;
+      }    
+      
+      if (options.hasOwnProperty('height')) {
+        this._height = options.height;
+      } 
+      
+      /* this is a shortcut */
+      this.selector = IriSP.jQuery("#" + this._div);
+      
+      this.selector.css("width", this._width);
+      
+      if (this._height !== undefined)
+        this.selector.css("height", this._height);
+  };
 
-/* we need this special setter because of a chicken and egg problem :
-   we want the manager to use popcorn but the popcorn div will be managed
-   by the manager. So we need a way to set the instance the manager uses
-*/
-   
-IriSP.LayoutManager.prototype.setPopcornInstance = function(popcorn) {
-    this._Popcorn = popcorn;
-    /* FIXME - don't forget to add the popcorn messages handlers there */
-}
+  /* we need this special setter because of a chicken and egg problem :
+     we want the manager to use popcorn but the popcorn div will be managed
+     by the manager. So we need a way to set the instance the manager uses
+  */
+     
+  IriSP.LayoutManager.prototype.setPopcornInstance = function(popcorn) {
+      this._Popcorn = popcorn;
+      /* FIXME - don't forget to add the popcorn messages handlers there */
+  }
 
-IriSP.LayoutManager.prototype.createDiv = function() {
-    var newDiv = Popcorn.guid(this._div + "_widget_");
-    this._widgets.push(newDiv);
+  IriSP.LayoutManager.prototype.createDiv = function() {
+      var newDiv = Popcorn.guid(this._div + "_widget_");
+      this._widgets.push(newDiv);
 
-    var templ = "<div id='{{id}}' style='width: 100%; position: relative;'></div";
-    var txt = Mustache.to_html(templ, {id: newDiv});
-    this.selector.append(txt);
-    
-    return newDiv;
-};
+      var templ = "<div id='{{id}}' style='width: 100%; position: relative;'></div";
+      var txt = Mustache.to_html(templ, {id: newDiv});
+      this.selector.append(txt);
+      
+      return newDiv;
+  };
+});
\ No newline at end of file
--- a/src/js/serializers/JSONSerializer.js	Mon Nov 14 16:12:13 2011 +0100
+++ b/src/js/serializers/JSONSerializer.js	Mon Nov 14 17:19:26 2011 +0100
@@ -1,107 +1,108 @@
+define(["IriSP", "data"], function() {
+  IriSP.JSONSerializer = function(DataLoader, url) {
+    IriSP.Serializer.call(this, DataLoader, url);
+  };
 
-IriSP.JSONSerializer = function(DataLoader, url) {
-  IriSP.Serializer.call(this, DataLoader, url);
-};
-
-IriSP.JSONSerializer.prototype = new IriSP.Serializer();
+  IriSP.JSONSerializer.prototype = new IriSP.Serializer();
 
-IriSP.JSONSerializer.prototype.serialize = function(data) {
-  return JSON.stringify(data);
-};
+  IriSP.JSONSerializer.prototype.serialize = function(data) {
+    return JSON.stringify(data);
+  };
 
-IriSP.JSONSerializer.prototype.deserialize = function(data) {
-  return JSON.parse(data);
-};
-
-IriSP.JSONSerializer.prototype.sync = function(callback) {
-  /* we don't have to do much because jQuery handles json for us */
-
-  var self = this;
+  IriSP.JSONSerializer.prototype.deserialize = function(data) {
+    return JSON.parse(data);
+  };
 
-  var fn = function(data) {      
-      self._data = data;      
-      // sort the data too     
-      self._data["annotations"].sort(function(a, b) 
-          { var a_begin = +a.begin;
-            var b_begin = +b.begin;
-            return a_begin - b_begin;
-          });
-     
-      callback(data);      
-  };
-  
-  this._DataLoader.get(this._url, fn);
-};
+  IriSP.JSONSerializer.prototype.sync = function(callback) {
+    /* we don't have to do much because jQuery handles json for us */
+
+    var self = this;
 
-IriSP.JSONSerializer.prototype.currentMedia = function() {  
-  return this._data.medias[0]; /* FIXME: don't hardcode it */
-};
-
-/* this function searches for an annotation which matches title, description and keyword 
-   "" matches any field. 
-*/    
-IriSP.JSONSerializer.prototype.searchAnnotations = function(title, description, keyword) {
-    var rTitle;
-    var rDescription;
-    var rKeyword;
+    var fn = function(data) {      
+        self._data = data;      
+        // sort the data too     
+        self._data["annotations"].sort(function(a, b) 
+            { var a_begin = +a.begin;
+              var b_begin = +b.begin;
+              return a_begin - b_begin;
+            });
+       
+        callback(data);      
+    };
     
-    /* match anything if given the empty string */
-    if (title == "")
-      title = ".*";
-    if (description == "")
-      description = ".*";
-    if (keyword == "")
-      keyword = ".*";
-    
-    rTitle = new RegExp(title, "i");  
-    rDescription = new RegExp(description, "i");  
-    rKeyword = new RegExp(keyword, "i");  
-    
-    var ret_array = [];
-    
-    var i;
-    for (i in this._data.annotations) {
-      var annotation = this._data.annotations[i];
+    this._DataLoader.get(this._url, fn);
+  };
+
+  IriSP.JSONSerializer.prototype.currentMedia = function() {  
+    return this._data.medias[0]; /* FIXME: don't hardcode it */
+  };
+
+  /* this function searches for an annotation which matches title, description and keyword 
+     "" matches any field. 
+  */    
+  IriSP.JSONSerializer.prototype.searchAnnotations = function(title, description, keyword) {
+      var rTitle;
+      var rDescription;
+      var rKeyword;
       
-      if (rTitle.test(annotation.content.title) && 
-          rDescription.test(annotation.content.description)) {
-          /* FIXME : implement keyword support */
-          ret_array.push(annotation);
-      }
-    }
-    
-    return ret_array;
-};
-
-/* breaks a string in words and searches each of these words. Returns an array
-   of objects with the id of the annotation and its number of occurences.
-   
-   FIXME: optimize ? seems to be n^2 in the worst case.
-*/
-IriSP.JSONSerializer.prototype.searchOccurences = function(searchString) {
-  var ret = { };
-  var keywords = searchString.split(/\s+/);
-  
-  for (var i in keywords) {
-    var keyword = keywords[i];
-    
-    // search this keyword in descriptions and title
-    var found_annotations = []
-    found_annotations = found_annotations.concat(this.searchAnnotations(keyword, "", ""));
-    found_annotations = found_annotations.concat(this.searchAnnotations("", keyword, ""));
-    
-    for (var j in found_annotations) {
-      var current_annotation = found_annotations[j];
+      /* match anything if given the empty string */
+      if (title == "")
+        title = ".*";
+      if (description == "")
+        description = ".*";
+      if (keyword == "")
+        keyword = ".*";
+      
+      rTitle = new RegExp(title, "i");  
+      rDescription = new RegExp(description, "i");  
+      rKeyword = new RegExp(keyword, "i");  
       
-      if (!ret.hasOwnProperty(current_annotation.id)) {
-        ret[current_annotation.id] = 1;
-      } else {
-        ret[current_annotation.id] += 1;
+      var ret_array = [];
+      
+      var i;
+      for (i in this._data.annotations) {
+        var annotation = this._data.annotations[i];
+        
+        if (rTitle.test(annotation.content.title) && 
+            rDescription.test(annotation.content.description)) {
+            /* FIXME : implement keyword support */
+            ret_array.push(annotation);
+        }
       }
       
-    }
-
+      return ret_array;
   };
-  
-  return ret;
-};
\ No newline at end of file
+
+  /* breaks a string in words and searches each of these words. Returns an array
+     of objects with the id of the annotation and its number of occurences.
+     
+     FIXME: optimize ? seems to be n^2 in the worst case.
+  */
+  IriSP.JSONSerializer.prototype.searchOccurences = function(searchString) {
+    var ret = { };
+    var keywords = searchString.split(/\s+/);
+    
+    for (var i in keywords) {
+      var keyword = keywords[i];
+      
+      // search this keyword in descriptions and title
+      var found_annotations = []
+      found_annotations = found_annotations.concat(this.searchAnnotations(keyword, "", ""));
+      found_annotations = found_annotations.concat(this.searchAnnotations("", keyword, ""));
+      
+      for (var j in found_annotations) {
+        var current_annotation = found_annotations[j];
+        
+        if (!ret.hasOwnProperty(current_annotation.id)) {
+          ret[current_annotation.id] = 1;
+        } else {
+          ret[current_annotation.id] += 1;
+        }
+        
+      }
+
+    };
+    
+    return ret;
+  };
+});
\ No newline at end of file
--- a/src/js/site.js	Mon Nov 14 16:12:13 2011 +0100
+++ b/src/js/site.js	Mon Nov 14 17:19:26 2011 +0100
@@ -1,57 +1,58 @@
 /* site.js - all our site-dependent config : player chrome, cdn locations, etc...*/
 
-IriSP.lib = { 
-		jQuery : "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js",
-		jQueryUI : "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js",
-		jQueryToolTip : "http://cdn.jquerytools.org/1.2.4/all/jquery.tools.min.js",
-		swfObject : "http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js",
-		cssjQueryUI : "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css",
-    popcorn : "src/js/libs/popcorn.js",
-    jwplayer : "src/js/libs/jwplayer.js",
-    "popcorn.mediafragment" : "src/js/libs/popcorn.mediafragment.js",
-    "popcorn.code" : "src/js/libs/popcorn.code.js",
-    "popcorn.jwplayer": "src/js/libs/popcorn.jwplayer.js",
-    "popcorn.youtube": "src/js/libs/popcorn.youtube.js",
-     raphael: "src/js/libs/raphael.js"
-};
+define(["IriSP"], function() {
+  IriSP.lib = { 
+      jQuery : "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js",
+      jQueryUI : "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js",
+      jQueryToolTip : "http://cdn.jquerytools.org/1.2.4/all/jquery.tools.min.js",
+      swfObject : "http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js",
+      cssjQueryUI : "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css",
+      popcorn : "src/js/libs/popcorn.js",
+      jwplayer : "src/js/libs/jwplayer.js",
+      "popcorn.mediafragment" : "src/js/libs/popcorn.mediafragment.js",
+      "popcorn.code" : "src/js/libs/popcorn.code.js",
+      "popcorn.jwplayer": "src/js/libs/popcorn.jwplayer.js",
+      "popcorn.youtube": "src/js/libs/popcorn.youtube.js",
+       raphael: "src/js/libs/raphael.js"
+  };
 
-//Player Configuration 
-IriSP.config = undefined;
-IriSP.configDefault = {
-		metadata:{
-			format:'cinelab',
-			src:'',
-			load:'jsonp'
-		},
-		gui:{
-			width:650,
-			height:0,
-			mode:'radio',
-			container:'LdtPlayer',
-			debug:false, 
-			css:'../src/css/LdtPlayer.css'
-		},
-		player:{
-			type:'jwplayer',
-			src:'../res/swf/player.swf',
-			params:{
-				allowfullscreen:"true", 
-				allowscriptaccess:"always",
-				wmode:"transparent"
-			},
-			flashvars:{
-				streamer:"streamer",
-				file:"file", 
-				live:"true",
-				autostart:"false",
-				controlbar:"none",
-				playerready:"IriSP.playerReady"
-			},
-			attributes:{
-				id:"Ldtplayer1",  
-				name:"Ldtplayer1"
-			}
-		},
-		module:null
-};
-
+  //Player Configuration 
+  IriSP.config = undefined;
+  IriSP.configDefault = {
+      metadata:{
+        format:'cinelab',
+        src:'',
+        load:'jsonp'
+      },
+      gui:{
+        width:650,
+        height:0,
+        mode:'radio',
+        container:'LdtPlayer',
+        debug:false, 
+        css:'../src/css/LdtPlayer.css'
+      },
+      player:{
+        type:'jwplayer',
+        src:'../res/swf/player.swf',
+        params:{
+          allowfullscreen:"true", 
+          allowscriptaccess:"always",
+          wmode:"transparent"
+        },
+        flashvars:{
+          streamer:"streamer",
+          file:"file", 
+          live:"true",
+          autostart:"false",
+          controlbar:"none",
+          playerready:"IriSP.playerReady"
+        },
+        attributes:{
+          id:"Ldtplayer1",  
+          name:"Ldtplayer1"
+        }
+      },
+      module:null
+  };
+});
--- a/src/js/ui.js	Mon Nov 14 16:12:13 2011 +0100
+++ b/src/js/ui.js	Mon Nov 14 17:19:26 2011 +0100
@@ -1,129 +1,130 @@
 /* ui.js - ui related functions */
-
-/* FIXME: use an sharing library */
-IriSP.LdtShareTool = IriSP.share_template; /* the contents come from share.html */
+define("ui.js", function() {
+  /* FIXME: use an sharing library */
+  IriSP.LdtShareTool = IriSP.share_template; /* the contents come from share.html */
 
-IriSP.createPlayerChrome = function(){
-	var width = IriSP.config.gui.width;
-	var height = IriSP.config.gui.height;
-	var heightS = IriSP.config.gui.height-20;
-	
-	// AUDIO  */
-	// PB dans le html : ; 
-	IriSP.trace( "__IriSP.createMyHtml",IriSP.config.gui.container );
+  IriSP.createPlayerChrome = function(){
+    var width = IriSP.config.gui.width;
+    var height = IriSP.config.gui.height;
+    var heightS = IriSP.config.gui.height-20;
+    
+    // AUDIO  */
+    // PB dans le html : ; 
+    IriSP.trace( "__IriSP.createMyHtml",IriSP.config.gui.container );
 
-	
-	/* FIXME : factor this in another file */
-	if( IriSP.config.gui.mode=="radio" ){
+    
+    /* FIXME : factor this in another file */
+    if( IriSP.config.gui.mode=="radio" ){
 
-		IriSP.jQuery( "#"+IriSP.config.gui.container ).before(IriSP.search_template);
-		var radioPlayer = Mustache.to_html(IriSP.radio_template, {"share_template" : IriSP.share_template});
-		IriSP.jQuery(radioPlayer).appendTo("#"+IriSP.config.gui.container);
+      IriSP.jQuery( "#"+IriSP.config.gui.container ).before(IriSP.search_template);
+      var radioPlayer = Mustache.to_html(IriSP.radio_template, {"share_template" : IriSP.share_template});
+      IriSP.jQuery(radioPlayer).appendTo("#"+IriSP.config.gui.container);
 
-		// special tricks for IE 7
-		if (IriSP.jQuery.browser.msie==true && IriSP.jQuery.browser.version=="7.0"){
-			//LdtSearchContainer
-			//__IriSP.jQuery("#LdtPlayer").attr("margin-top","50px");
-			IriSP.jQuery("#Ldt-Root").css("padding-top","25px");
-			IriSP.trace("__IriSP.createHtml","IE7 SPECIAL ");
-		}
-	} else if(IriSP.config.gui.mode=="video") {
-	
-		var videoPlayer = Mustache.to_html(IriSP.video_template, {"share_template" : IriSP.share_template, "heightS" : heightS});
-		IriSP.jQuery(videoPlayer).appendTo("#"+IriSP.config.gui.container);
-	}
-	
-	IriSP.jQuery("#Ldt-Annotations").width(width-(75*2));
-	IriSP.jQuery("#Ldt-Show-Arrow-container").width(width-(75*2));
-	IriSP.jQuery("#Ldt-ShowAnnotation-audio").width(width-10);
-	IriSP.jQuery("#Ldt-ShowAnnotation-video").width(width-10);
-	IriSP.jQuery("#Ldt-SaKeyword").width(width-10);
-	IriSP.jQuery("#Ldt-controler").width(width-10);
-	IriSP.jQuery("#Ldt-Control").attr("z-index","100");
-	IriSP.jQuery("#Ldt-controler").hide();
-	
-	IriSP.jQuery(IriSP.annotation_loading_template).appendTo("#Ldt-ShowAnnotation-audio");
+      // special tricks for IE 7
+      if (IriSP.jQuery.browser.msie==true && IriSP.jQuery.browser.version=="7.0"){
+        //LdtSearchContainer
+        //__IriSP.jQuery("#LdtPlayer").attr("margin-top","50px");
+        IriSP.jQuery("#Ldt-Root").css("padding-top","25px");
+        IriSP.trace("__IriSP.createHtml","IE7 SPECIAL ");
+      }
+    } else if(IriSP.config.gui.mode=="video") {
+    
+      var videoPlayer = Mustache.to_html(IriSP.video_template, {"share_template" : IriSP.share_template, "heightS" : heightS});
+      IriSP.jQuery(videoPlayer).appendTo("#"+IriSP.config.gui.container);
+    }
+    
+    IriSP.jQuery("#Ldt-Annotations").width(width-(75*2));
+    IriSP.jQuery("#Ldt-Show-Arrow-container").width(width-(75*2));
+    IriSP.jQuery("#Ldt-ShowAnnotation-audio").width(width-10);
+    IriSP.jQuery("#Ldt-ShowAnnotation-video").width(width-10);
+    IriSP.jQuery("#Ldt-SaKeyword").width(width-10);
+    IriSP.jQuery("#Ldt-controler").width(width-10);
+    IriSP.jQuery("#Ldt-Control").attr("z-index","100");
+    IriSP.jQuery("#Ldt-controler").hide();
+    
+    IriSP.jQuery(IriSP.annotation_loading_template).appendTo("#Ldt-ShowAnnotation-audio");
 
-	if(IriSP.config.gui.mode=='radio'){
-		IriSP.jQuery("#Ldt-load-container").attr("width",IriSP.config.gui.width);
-	}
-	// Show or not the output
-	if(IriSP.config.gui.debug===true){
-		IriSP.jQuery("#Ldt-output").show();
-	} else {
-		IriSP.jQuery("#Ldt-output").hide();
-	}
-	
-};
+    if(IriSP.config.gui.mode=='radio'){
+      IriSP.jQuery("#Ldt-load-container").attr("width",IriSP.config.gui.width);
+    }
+    // Show or not the output
+    if(IriSP.config.gui.debug===true){
+      IriSP.jQuery("#Ldt-output").show();
+    } else {
+      IriSP.jQuery("#Ldt-output").hide();
+    }
+    
+  };
 
 
-/* create the buttons and the slider   */
-IriSP.createInterface = function( width, height, duration ) {
-		
-		IriSP.jQuery( "#Ldt-controler" ).show();
-		//__IriSP.jQuery("#Ldt-Root").css('display','visible');
-		IriSP.trace( "__IriSP.createInterface" , width+","+height+","+duration+"," );
-		
-		IriSP.jQuery( "#Ldt-ShowAnnotation").click( function () { 
-			 //__IriSP.jQuery(this).slideUp(); 
-		} );
+  /* create the buttons and the slider   */
+  IriSP.createInterface = function( width, height, duration ) {
+      
+      IriSP.jQuery( "#Ldt-controler" ).show();
+      //__IriSP.jQuery("#Ldt-Root").css('display','visible');
+      IriSP.trace( "__IriSP.createInterface" , width+","+height+","+duration+"," );
+      
+      IriSP.jQuery( "#Ldt-ShowAnnotation").click( function () { 
+         //__IriSP.jQuery(this).slideUp(); 
+      } );
 
-		var LdtpPlayerY = IriSP.jQuery("#Ldt-PlaceHolder").attr("top");
-		var LdtpPlayerX = IriSP.jQuery("#Ldt-PlaceHolder").attr("left");
-		
-		IriSP.jQuery( "#slider-range-min" ).slider( { //range: "min",
-			value: 0,
-			min: 1,
-			max: duration/1000,//1:54:52.66 = 3600+3240+
-			step: 0.1,
-			slide: function(event, ui) {
-				
-				//__IriSP.jQuery("#amount").val(ui.value+" s");
-				//player.sendEvent('SEEK', ui.value)
-				IriSP.MyApiPlayer.seek(ui.value);
-				//changePageUrlOffset(ui.value);
-				//player.sendEvent('PAUSE')
-			}
-		} );
-		
-		IriSP.trace("__IriSP.createInterface","ICI");
-		IriSP.jQuery("#amount").val(IriSP.jQuery("#slider-range-min").slider("value")+" s");
-		IriSP.jQuery(".Ldt-Control1 button:first").button({
-			icons: {
-				primary: 'ui-icon-play'
-			},
-			text: false
-		}).next().button({
-			icons: {
-				primary: 'ui-icon-seek-next'
-			},
-			 text: false
-		});
-		IriSP.jQuery(".Ldt-Control2 button:first").button({
-			icons: {
-				primary: 'ui-icon-search'//,
-				//secondary: 'ui-icon-volume-off'
-			},
-			text: false
-		}).next().button({
-			icons: {
-				primary: 'ui-icon-volume-on'
-			},
-			 text: false
-		});
+      var LdtpPlayerY = IriSP.jQuery("#Ldt-PlaceHolder").attr("top");
+      var LdtpPlayerX = IriSP.jQuery("#Ldt-PlaceHolder").attr("left");
+      
+      IriSP.jQuery( "#slider-range-min" ).slider( { //range: "min",
+        value: 0,
+        min: 1,
+        max: duration/1000,//1:54:52.66 = 3600+3240+
+        step: 0.1,
+        slide: function(event, ui) {
+          
+          //__IriSP.jQuery("#amount").val(ui.value+" s");
+          //player.sendEvent('SEEK', ui.value)
+          IriSP.MyApiPlayer.seek(ui.value);
+          //changePageUrlOffset(ui.value);
+          //player.sendEvent('PAUSE')
+        }
+      } );
+      
+      IriSP.trace("__IriSP.createInterface","ICI");
+      IriSP.jQuery("#amount").val(IriSP.jQuery("#slider-range-min").slider("value")+" s");
+      IriSP.jQuery(".Ldt-Control1 button:first").button({
+        icons: {
+          primary: 'ui-icon-play'
+        },
+        text: false
+      }).next().button({
+        icons: {
+          primary: 'ui-icon-seek-next'
+        },
+         text: false
+      });
+      IriSP.jQuery(".Ldt-Control2 button:first").button({
+        icons: {
+          primary: 'ui-icon-search'//,
+          //secondary: 'ui-icon-volume-off'
+        },
+        text: false
+      }).next().button({
+        icons: {
+          primary: 'ui-icon-volume-on'
+        },
+         text: false
+      });
 
-		// /!\ PB A MODIFIER 
-		//__IriSP.MyTags.draw();
-		IriSP.trace("__IriSP.createInterface","ICI2");
-		IriSP.jQuery( "#ldt-CtrlPlay" ).attr( "style", "background-color:#CD21C24;" );
-		
-		IriSP.jQuery( "#Ldt-load-container" ).hide();
-		
-		if( IriSP.config.gui.mode=="radio" & IriSP.jQuery.browser.msie != true ) {
-			IriSP.jQuery( "#Ldtplayer1" ).attr( "height", "0" );
-		}
-		IriSP.trace( "__IriSP.createInterface" , "3" );
+      // /!\ PB A MODIFIER 
+      //__IriSP.MyTags.draw();
+      IriSP.trace("__IriSP.createInterface","ICI2");
+      IriSP.jQuery( "#ldt-CtrlPlay" ).attr( "style", "background-color:#CD21C24;" );
+      
+      IriSP.jQuery( "#Ldt-load-container" ).hide();
+      
+      if( IriSP.config.gui.mode=="radio" & IriSP.jQuery.browser.msie != true ) {
+        IriSP.jQuery( "#Ldtplayer1" ).attr( "height", "0" );
+      }
+      IriSP.trace( "__IriSP.createInterface" , "3" );
 
-		IriSP.trace( "__IriSP.createInterface", "END" );
-		
-	};
+      IriSP.trace( "__IriSP.createInterface", "END" );
+      
+    };
+});
\ No newline at end of file
--- a/src/js/utils.js	Mon Nov 14 16:12:13 2011 +0100
+++ b/src/js/utils.js	Mon Nov 14 17:19:26 2011 +0100
@@ -1,4 +1,5 @@
 /* utils.js - various utils that don't belong anywhere else */
+define(["IriSP"], function() {
 
 /* trace function, for debugging */
 
@@ -36,4 +37,5 @@
       if ("set" in desc) obj.__defineSetter__(prop,desc.set);
    }
 }
-*/
\ No newline at end of file
+*/
+});
\ No newline at end of file
--- a/src/js/widgets.js	Mon Nov 14 16:12:13 2011 +0100
+++ b/src/js/widgets.js	Mon Nov 14 17:19:26 2011 +0100
@@ -1,43 +1,45 @@
 /* the widget classes and definitions */
 
-IriSP.Widget = function(Popcorn, config, Serializer) {
+define(["IriSP"], function() {
+  IriSP.Widget = function(Popcorn, config, Serializer) {
 
-  if (config === undefined || config === null) {
-    config = {}
-  }
-  
-  this._Popcorn = Popcorn;
-  this._config = config;  
-  this._serializer = Serializer;
-  
-  if (config.hasOwnProperty("container")) {
-     this._id = config.container;
-     this.selector = IriSP.jQuery("#" + this._id);
-  }
+    if (config === undefined || config === null) {
+      config = {}
+    }
+    
+    this._Popcorn = Popcorn;
+    this._config = config;  
+    this._serializer = Serializer;
+    
+    if (config.hasOwnProperty("container")) {
+       this._id = config.container;
+       this.selector = IriSP.jQuery("#" + this._id);
+    }
 
-  if (config.hasOwnProperty("width")) {
-     // this.width and not this._width because we consider it public.
-     this.width = config.width;     
-  }
-  
-  if (config.hasOwnProperty("height")) {    
-     this.height = config.height;     
-  }
-  
-  if (config.hasOwnProperty("heightmax")) {
-     this.heightmax = config.heightmax;     
-  }
+    if (config.hasOwnProperty("width")) {
+       // this.width and not this._width because we consider it public.
+       this.width = config.width;     
+    }
+    
+    if (config.hasOwnProperty("height")) {    
+       this.height = config.height;     
+    }
+    
+    if (config.hasOwnProperty("heightmax")) {
+       this.heightmax = config.heightmax;     
+    }
 
-  if (config.hasOwnProperty("widthmax")) {
-     this.widthmax = config.widthmax;     
-  }
-  
-};
+    if (config.hasOwnProperty("widthmax")) {
+       this.widthmax = config.widthmax;     
+    }
+    
+  };
 
-IriSP.Widget.prototype.draw = function() {
-  /* implemented by "sub-classes" */  
-};
+  IriSP.Widget.prototype.draw = function() {
+    /* implemented by "sub-classes" */  
+  };
 
-IriSP.Widget.prototype.redraw = function() {
-  /* implemented by "sub-classes" */  
-};
+  IriSP.Widget.prototype.redraw = function() {
+    /* implemented by "sub-classes" */  
+  };
+});
\ No newline at end of file
--- a/src/js/widgets/annotationsWidget.js	Mon Nov 14 16:12:13 2011 +0100
+++ b/src/js/widgets/annotationsWidget.js	Mon Nov 14 17:19:26 2011 +0100
@@ -1,61 +1,63 @@
-IriSP.AnnotationsWidget = function(Popcorn, config, Serializer) {
-  IriSP.Widget.call(this, Popcorn, config, Serializer);
-  
-};
+define(["IriSP", "widgets", "util"], function() {
+  IriSP.AnnotationsWidget = function(Popcorn, config, Serializer) {
+    IriSP.Widget.call(this, Popcorn, config, Serializer);
+    
+  };
 
 
-IriSP.AnnotationsWidget.prototype = new IriSP.Widget();
+  IriSP.AnnotationsWidget.prototype = new IriSP.Widget();
 
-IriSP.AnnotationsWidget.prototype.clear = function() {
-    this.selector.find(".Ldt-SaTitle").text("");
-    this.selector.find(".Ldt-SaDescription").text("");
-    this.selector.find(".Ldt-SaKeywordText").text("");
-};
+  IriSP.AnnotationsWidget.prototype.clear = function() {
+      this.selector.find(".Ldt-SaTitle").text("");
+      this.selector.find(".Ldt-SaDescription").text("");
+      this.selector.find(".Ldt-SaKeywordText").text("");
+  };
 
-IriSP.AnnotationsWidget.prototype.displayAnnotation = function(annotation) {
-    var title = annotation.content.title;
-    var description = annotation.content.description;
-    var keywords =  "" // FIXME;
-    var begin = +annotation.begin;
-    var end = +annotation.end;
-    var duration = +this._serializer.currentMedia().meta["dc:duration"];
+  IriSP.AnnotationsWidget.prototype.displayAnnotation = function(annotation) {
+      var title = annotation.content.title;
+      var description = annotation.content.description;
+      var keywords =  "" // FIXME;
+      var begin = +annotation.begin;
+      var end = +annotation.end;
+      var duration = +this._serializer.currentMedia().meta["dc:duration"];
 
-    this.selector.find(".Ldt-SaTitle").text(title);
-    this.selector.find(".Ldt-SaDescription").text(description);
-		var startPourcent = parseInt(Math.round((begin*1+(end*1-begin*1)/2) / (duration*1)) / 100); 
-		this.selector.find(".Ldt-Show-Arrow").animate({left:startPourcent+'%'},1000);
-		//IriSP.jQuery("#"+annotationTempo.id).animate({alpha:'100%'},1000);
+      this.selector.find(".Ldt-SaTitle").text(title);
+      this.selector.find(".Ldt-SaDescription").text(description);
+      var startPourcent = parseInt(Math.round((begin*1+(end*1-begin*1)/2) / (duration*1)) / 100); 
+      this.selector.find(".Ldt-Show-Arrow").animate({left:startPourcent+'%'},1000);
+      //IriSP.jQuery("#"+annotationTempo.id).animate({alpha:'100%'},1000);
 
-};
+  };
 
-IriSP.AnnotationsWidget.prototype.clearWidget = function() {
-    /* retract the pane between two annotations */
-    this.selector.find(".Ldt-SaTitle").text("");
-    this.selector.find(".Ldt-SaDescription").text("");
-    this.selector.find(".Ldt-SaKeywordText").html("");
-    this.selector.find(".Ldt-ShowAnnotation").slideUp();
-};
+  IriSP.AnnotationsWidget.prototype.clearWidget = function() {
+      /* retract the pane between two annotations */
+      this.selector.find(".Ldt-SaTitle").text("");
+      this.selector.find(".Ldt-SaDescription").text("");
+      this.selector.find(".Ldt-SaKeywordText").html("");
+      this.selector.find(".Ldt-ShowAnnotation").slideUp();
+  };
 
-IriSP.AnnotationsWidget.prototype.draw = function() {
-  var _this = this;
+  IriSP.AnnotationsWidget.prototype.draw = function() {
+    var _this = this;
 
-  var annotationMarkup = Mustache.to_html(IriSP.annotationWidget_template, {"share_template" : IriSP.share_template});
-	this.selector.append(annotationMarkup);
+    var annotationMarkup = Mustache.to_html(IriSP.annotationWidget_template, {"share_template" : IriSP.share_template});
+    this.selector.append(annotationMarkup);
 
-  var annotations = this._serializer._data.annotations;
-  var i;
-  
-	for (i in annotations) {    
-    var annotation = annotations[i];
-    var begin = Math.round((+ annotation.begin) / 1000);
-    var end = Math.round((+ annotation.end) / 1000);
+    var annotations = this._serializer._data.annotations;
+    var i;
+    
+    for (i in annotations) {    
+      var annotation = annotations[i];
+      var begin = Math.round((+ annotation.begin) / 1000);
+      var end = Math.round((+ annotation.end) / 1000);
 
-    var conf = {start: begin, end: end, 
-                onStart: 
-                       function(annotation) { return function() { _this.displayAnnotation(annotation); } }(annotation),
-                onEnd: 
-                       function() { _this.clearWidget(); },
-                };
-    this._Popcorn = this._Popcorn.code(conf);                                             
-  }
-};
+      var conf = {start: begin, end: end, 
+                  onStart: 
+                         function(annotation) { return function() { _this.displayAnnotation(annotation); } }(annotation),
+                  onEnd: 
+                         function() { _this.clearWidget(); },
+                  };
+      this._Popcorn = this._Popcorn.code(conf);                                             
+    }
+  };
+});
\ No newline at end of file
--- a/src/js/widgets/playerWidget.js	Mon Nov 14 16:12:13 2011 +0100
+++ b/src/js/widgets/playerWidget.js	Mon Nov 14 17:19:26 2011 +0100
@@ -1,198 +1,199 @@
-IriSP.PlayerWidget = function(Popcorn, config, Serializer) {
-  IriSP.Widget.call(this, Popcorn, config, Serializer);
-  
-  this._searchBlockOpen = false;
-  this._searchLastValue = "";
-};
-
-IriSP.PlayerWidget.prototype = new IriSP.Widget();
+define(["IriSP", "widgets", "util"], function() {
+  IriSP.PlayerWidget = function(Popcorn, config, Serializer) {
+    IriSP.Widget.call(this, Popcorn, config, Serializer);
+    
+    this._searchBlockOpen = false;
+    this._searchLastValue = "";
+  };
 
-IriSP.PlayerWidget.prototype.draw = function() {
-  var self = this;
-  var width = this.width;
-	var height = this.height;
-	var heightS = this.height-20;
-	
-  var searchBox = Mustache.to_html(IriSP.search_template);
-  this.selector.append(searchBox);
-  
-	if (this._config.mode=="radio") {
-		var radioPlayer = Mustache.to_html(IriSP.radio_template, {"share_template" : IriSP.share_template});
-    this.selector.append(radioPlayer);		
+  IriSP.PlayerWidget.prototype = new IriSP.Widget();
+
+  IriSP.PlayerWidget.prototype.draw = function() {
+    var self = this;
+    var width = this.width;
+    var height = this.height;
+    var heightS = this.height-20;
+    
+    var searchBox = Mustache.to_html(IriSP.search_template);
+    this.selector.append(searchBox);
     
-		// special tricks for IE 7
-		if (IriSP.jQuery.browser.msie == true && IriSP.jQuery.browser.version == "7.0"){
-			//__IriSP.jQuery("#LdtPlayer").attr("margin-top","50px");
-			this.selector.children("#Ldt-Root").css("padding-top","25px");			
-		}
-	} else if (this._config.mode == "video") {
-	
-		var videoPlayer = Mustache.to_html(IriSP.video_template, {"share_template" : IriSP.share_template, "heightS" : heightS});
-    this.selector.append(videoPlayer);		
-	}
-	
-	this.selector.children("#Ldt-Annotations").width(width - (75 * 2));
-	this.selector.children("#Ldt-Show-Arrow-container").width(width - (75 * 2));
-	this.selector.children("#Ldt-ShowAnnotation-audio").width(width - 10);
-	this.selector.children("#Ldt-ShowAnnotation-video").width(width - 10);
-	this.selector.children("#Ldt-SaKeyword").width(width - 10);
-	this.selector.children("#Ldt-controler").width(width - 10);
-	this.selector.children("#Ldt-Control").attr("z-index", "100");
-	this.selector.children("#Ldt-controler").hide();
-	
-  this.selector.children("#Ldt-ShowAnnotation-audio").append(IriSP.annotation_loading_template);	
+    if (this._config.mode=="radio") {
+      var radioPlayer = Mustache.to_html(IriSP.radio_template, {"share_template" : IriSP.share_template});
+      this.selector.append(radioPlayer);		
+      
+      // special tricks for IE 7
+      if (IriSP.jQuery.browser.msie == true && IriSP.jQuery.browser.version == "7.0"){
+        //__IriSP.jQuery("#LdtPlayer").attr("margin-top","50px");
+        this.selector.children("#Ldt-Root").css("padding-top","25px");			
+      }
+    } else if (this._config.mode == "video") {
+    
+      var videoPlayer = Mustache.to_html(IriSP.video_template, {"share_template" : IriSP.share_template, "heightS" : heightS});
+      this.selector.append(videoPlayer);		
+    }
+    
+    this.selector.children("#Ldt-Annotations").width(width - (75 * 2));
+    this.selector.children("#Ldt-Show-Arrow-container").width(width - (75 * 2));
+    this.selector.children("#Ldt-ShowAnnotation-audio").width(width - 10);
+    this.selector.children("#Ldt-ShowAnnotation-video").width(width - 10);
+    this.selector.children("#Ldt-SaKeyword").width(width - 10);
+    this.selector.children("#Ldt-controler").width(width - 10);
+    this.selector.children("#Ldt-Control").attr("z-index", "100");
+    this.selector.children("#Ldt-controler").hide();
+    
+    this.selector.children("#Ldt-ShowAnnotation-audio").append(IriSP.annotation_loading_template);	
 
-	if(this._config.mode=='radio'){
-		this.selector.children("#Ldt-load-container").attr("width",this.width);
-	}
-	  		
-  this.selector.children("#Ldt-controler").show();
-  //__IriSP.jQuery("#Ldt-Root").css('display','visible');
-  this.selector.children("#Ldt-ShowAnnotation").click( function () { 
-     //__IriSP.jQuery(this).slideUp(); 
-  } );
+    if(this._config.mode=='radio'){
+      this.selector.children("#Ldt-load-container").attr("width",this.width);
+    }
+          
+    this.selector.children("#Ldt-controler").show();
+    //__IriSP.jQuery("#Ldt-Root").css('display','visible');
+    this.selector.children("#Ldt-ShowAnnotation").click( function () { 
+       //__IriSP.jQuery(this).slideUp(); 
+    } );
 
-  var LdtpPlayerY = this.selector.children("#Ldt-PlaceHolder").attr("top");
-  var LdtpPlayerX = this.selector.children("#Ldt-PlaceHolder").attr("left");
+    var LdtpPlayerY = this.selector.children("#Ldt-PlaceHolder").attr("top");
+    var LdtpPlayerX = this.selector.children("#Ldt-PlaceHolder").attr("left");
+      
+    // handle clicks by the user on the video.
+    this._Popcorn.listen("play", IriSP.wrap(this, this.playButtonUpdater));
+    this._Popcorn.listen("pause", IriSP.wrap(this, this.playButtonUpdater));
     
-  // handle clicks by the user on the video.
-  this._Popcorn.listen("play", IriSP.wrap(this, this.playButtonUpdater));
-  this._Popcorn.listen("pause", IriSP.wrap(this, this.playButtonUpdater));
-  
-  this.selector.children("#amount").val(this.selector.children("#slider-range-min").slider("value")+" s");
-  this.selector.children(".Ldt-Control1 button:first").button({
-    icons: {
-      primary: 'ui-icon-play'
-    },
-    text: false
-  }).click(function() { self.playHandler.call(self); })
-    .next().button({
-    icons: {
-      primary: 'ui-icon-seek-next'
-    },
-     text: false
-  });
-  this.selector.children(".Ldt-Control2 button:first").button({
-    icons: {
-      primary: 'ui-icon-search'//,
-      //secondary: 'ui-icon-volume-off'
-    },
-    text: false
-  }).click(function() { self.searchButtonHandler.call(self); })
-    .next().button({
-    icons: {
-      primary: 'ui-icon-volume-on'
-    },
-     text: false
-  }).click(function() { self.muteHandler.call(self); } );
+    this.selector.children("#amount").val(this.selector.children("#slider-range-min").slider("value")+" s");
+    this.selector.children(".Ldt-Control1 button:first").button({
+      icons: {
+        primary: 'ui-icon-play'
+      },
+      text: false
+    }).click(function() { self.playHandler.call(self); })
+      .next().button({
+      icons: {
+        primary: 'ui-icon-seek-next'
+      },
+       text: false
+    });
+    this.selector.children(".Ldt-Control2 button:first").button({
+      icons: {
+        primary: 'ui-icon-search'//,
+        //secondary: 'ui-icon-volume-off'
+      },
+      text: false
+    }).click(function() { self.searchButtonHandler.call(self); })
+      .next().button({
+      icons: {
+        primary: 'ui-icon-volume-on'
+      },
+       text: false
+    }).click(function() { self.muteHandler.call(self); } );
 
-  this.selector.children("#ldt-CtrlPlay").attr( "style", "background-color:#CD21C24;" );
-  
-  this.selector.children("#Ldt-load-container").hide();
-  
-  if( this._config.mode=="radio" & IriSP.jQuery.browser.msie != true ) {
-    IriSP.jQuery( "#Ldtplayer1" ).attr( "height", "0" );
-  }
+    this.selector.children("#ldt-CtrlPlay").attr( "style", "background-color:#CD21C24;" );
+    
+    this.selector.children("#Ldt-load-container").hide();
+    
+    if( this._config.mode=="radio" & IriSP.jQuery.browser.msie != true ) {
+      IriSP.jQuery( "#Ldtplayer1" ).attr( "height", "0" );
+    }
 
 
-};
+  };
 
-/* update the icon of the button - separate function from playHandler
-   because in some cases (for instance, when the user directly clicks on
-   the jwplayer window) we have to change the icon without playing/pausing
-*/
-IriSP.PlayerWidget.prototype.playButtonUpdater = function() {
-  var status = this._Popcorn.media.paused;
-  
-  if ( status == true ){        
-    this.selector.find(".ui-icon-play").css( "background-position", "-16px -160px" );
-    this.selector.find("#ldt-CtrlPlay").attr("title", "Play");
-  } else {
-    this.selector.find(".ui-icon-play").css( "background-position","0px -160px" );
-    this.selector.find("#ldt-CtrlPlay").attr("title", "Pause");
-  }  
-};
+  /* update the icon of the button - separate function from playHandler
+     because in some cases (for instance, when the user directly clicks on
+     the jwplayer window) we have to change the icon without playing/pausing
+  */
+  IriSP.PlayerWidget.prototype.playButtonUpdater = function() {
+    var status = this._Popcorn.media.paused;
+    
+    if ( status == true ){        
+      this.selector.find(".ui-icon-play").css( "background-position", "-16px -160px" );
+      this.selector.find("#ldt-CtrlPlay").attr("title", "Play");
+    } else {
+      this.selector.find(".ui-icon-play").css( "background-position","0px -160px" );
+      this.selector.find("#ldt-CtrlPlay").attr("title", "Pause");
+    }  
+  };
 
 
-IriSP.PlayerWidget.prototype.playHandler = function() {
-  var status = this._Popcorn.media.paused;
-  
-  this.playButtonUpdater();
-  
-  if ( status == true ){        
-    this._Popcorn.play();   
-  } else {
-    this._Popcorn.pause();
-  }  
-};
+  IriSP.PlayerWidget.prototype.playHandler = function() {
+    var status = this._Popcorn.media.paused;
+    
+    this.playButtonUpdater();
+    
+    if ( status == true ){        
+      this._Popcorn.play();   
+    } else {
+      this._Popcorn.pause();
+    }  
+  };
 
-IriSP.PlayerWidget.prototype.muteHandler = function() {
-  if (!this._Popcorn.muted()) {    
-      this._Popcorn.mute(true);
-      this.selector.find(" .ui-icon-volume-on ").css("background-position", "-130px -160px");    
-    } else {
-      this._Popcorn.mute(false);
-      this.selector.find( ".ui-icon-volume-on" ).css("background-position", "-144px -160px" );
-    }
-};
+  IriSP.PlayerWidget.prototype.muteHandler = function() {
+    if (!this._Popcorn.muted()) {    
+        this._Popcorn.mute(true);
+        this.selector.find(" .ui-icon-volume-on ").css("background-position", "-130px -160px");    
+      } else {
+        this._Popcorn.mute(false);
+        this.selector.find( ".ui-icon-volume-on" ).css("background-position", "-144px -160px" );
+      }
+  };
 
-IriSP.PlayerWidget.prototype.searchButtonHandler = function() {
-    var self = this;
+  IriSP.PlayerWidget.prototype.searchButtonHandler = function() {
+      var self = this;
 
-    /* show the search field if it is not shown */
-  	if ( this._searchBlockOpen == false ) {
-      this.selector.find( ".ui-icon-search" ).css( "background-position", "-144px -112px" );
-      
-      this.selector.find("#LdtSearch").show(100);
-      
-      this.selector.find("#LdtSearchInput").css('background-color','#fff');
-      this.selector.find("#LdtSearchInput").focus();
-      this.selector.find("#LdtSearchInput").attr('value', this._searchLastValue);      
-      this._Popcorn.trigger("IriSP.search", this._searchLastValue); // trigger the search to make it more natural.
-      
-      this._searchBlockOpen = true;           
-      this.selector.find("#LdtSearchInput").bind('keyup', null, function() { self.searchHandler.call(self); } );
-      
-      // tell the world the field is open
-      this._Popcorn.trigger("IriSP.search.open");
-      
-	} else {
-      this._searchLastValue = this.selector.find("#LdtSearchInput").attr('value');
-      this.selector.find("#LdtSearchInput").attr('value','');
-      this.selector.find(".ui-icon-search").css("background-position","-160px -112px");
-      this.selector.find("#LdtSearch").hide(100);
-      
-      // unbind the watcher event.
-      this.selector.find("#LdtSearchInput").unbind('keypress set');
-      this._searchBlockOpen = false;
-      
-      this._Popcorn.trigger("IriSP.search.closed");
+      /* show the search field if it is not shown */
+      if ( this._searchBlockOpen == false ) {
+        this.selector.find( ".ui-icon-search" ).css( "background-position", "-144px -112px" );
+        
+        this.selector.find("#LdtSearch").show(100);
+        
+        this.selector.find("#LdtSearchInput").css('background-color','#fff');
+        this.selector.find("#LdtSearchInput").focus();
+        this.selector.find("#LdtSearchInput").attr('value', this._searchLastValue);      
+        this._Popcorn.trigger("IriSP.search", this._searchLastValue); // trigger the search to make it more natural.
+        
+        this._searchBlockOpen = true;           
+        this.selector.find("#LdtSearchInput").bind('keyup', null, function() { self.searchHandler.call(self); } );
+        
+        // tell the world the field is open
+        this._Popcorn.trigger("IriSP.search.open");
+        
+    } else {
+        this._searchLastValue = this.selector.find("#LdtSearchInput").attr('value');
+        this.selector.find("#LdtSearchInput").attr('value','');
+        this.selector.find(".ui-icon-search").css("background-position","-160px -112px");
+        this.selector.find("#LdtSearch").hide(100);
+        
+        // unbind the watcher event.
+        this.selector.find("#LdtSearchInput").unbind('keypress set');
+        this._searchBlockOpen = false;
+        
+        this._Popcorn.trigger("IriSP.search.closed");
+    }
+  };
+
+  /* this handler is called whenever the content of the search
+     field changes */
+  IriSP.PlayerWidget.prototype.searchHandler = function() {
+    this._searchLastValue = this.selector.find("#LdtSearchInput").attr('value');
+    
+    // do nothing if the search field is empty, instead of highlighting everything.
+    if (this._searchLastValue == "") {
+      this._Popcorn.trigger("IriSP.search.cleared");
+    } else {
+      this._Popcorn.trigger("IriSP.search", this._searchLastValue);
+    }
+  };
+
+  /*
+    handler for the IriSP.search.found message, which is sent by some views when they
+    highlight a match.
+  */
+  IriSP.PlayerWidget.prototype.searchMatch = function() {
+    this.selector.find("#LdtSearchInput").css('background-color','#e1ffe1');
   }
-};
 
-/* this handler is called whenever the content of the search
-   field changes */
-IriSP.PlayerWidget.prototype.searchHandler = function() {
-  this._searchLastValue = this.selector.find("#LdtSearchInput").attr('value');
-  
-  // do nothing if the search field is empty, instead of highlighting everything.
-  if (this._searchLastValue == "") {
-    this._Popcorn.trigger("IriSP.search.cleared");
-  } else {
-    this._Popcorn.trigger("IriSP.search", this._searchLastValue);
+  /* the same, except that no value could be found */
+  IriSP.PlayerWidget.prototype.searchNoMatch = function() {
+    this.selector.find("#LdtSearchInput").css('background-color','#e1ffe1');
   }
-};
-
-/*
-  handler for the IriSP.search.found message, which is sent by some views when they
-  highlight a match.
-*/
-IriSP.PlayerWidget.prototype.searchMatch = function() {
-  this.selector.find("#LdtSearchInput").css('background-color','#e1ffe1');
-}
-
-/* the same, except that no value could be found */
-IriSP.PlayerWidget.prototype.searchNoMatch = function() {
-  this.selector.find("#LdtSearchInput").css('background-color','#e1ffe1');
-}
-
+});
--- a/src/js/widgets/polemicWidget.js	Mon Nov 14 16:12:13 2011 +0100
+++ b/src/js/widgets/polemicWidget.js	Mon Nov 14 17:19:26 2011 +0100
@@ -18,313 +18,315 @@
 */
 // CHART TIMELINE / VERSION PROTOTYPE  ::
 
-IriSP.PolemicWidget = function(Popcorn, config, Serializer) {
-  IriSP.Widget.call(this, Popcorn, config, Serializer);
- 
-  this.userPol    = new Array();
-  this.userNoPol  = new Array();
-  this.userst      = new Array();
-  this.numberOfTweet = 0;
-  this.Users;
-  this.TweetPolemic;
-  this.yMax        = this.height; 
-  this.PaperSlider;
-  this.heightOfChart;
-  this.tweets  = new Array();
-  this.svgElements = new Array();
-  
-  // Make and define the Raphael area
-  this.paper = Raphael(document.getElementById(this._id), config.width, config.height);
-  
-};
+define(["IriSP", "widgets", "util", "tooltipWidget"], function() {
 
-IriSP.PolemicWidget.prototype = new IriSP.Widget();
-  
-IriSP.PolemicWidget.prototype.draw = function() {
-  
-    // variable 
-    // yMax
+  IriSP.PolemicWidget = function(Popcorn, config, Serializer) {
+    IriSP.Widget.call(this, Popcorn, config, Serializer);
+   
+    this.userPol    = new Array();
+    this.userNoPol  = new Array();
+    this.userst      = new Array();
+    this.numberOfTweet = 0;
+    this.Users;
+    this.TweetPolemic;
+    this.yMax        = this.height; 
+    this.PaperSlider;
+    this.heightOfChart;
+    this.tweets  = new Array();
+    this.svgElements = new Array();
     
-    var self = this;
-    var yCoef        = 2;             // coef for height of 1 tweet 
-    var frameSize     = 5;             // frame size 
-    var margin         = 1;            // marge between frame
-    var lineSize      = this.width;        // timeline pixel width 
-    var nbrframes     = lineSize/frameSize;     // frame numbers
-    var numberOfTweet   = 0;            // number of tweet overide later 
-    var duration      = +this._serializer.currentMedia().meta["dc:duration"];      // timescale width 
-    var frameLength   = lineSize / frameSize;    // frame timescale  
-    var timeline;
-    var colors  = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858");
+    // Make and define the Raphael area
+    this.paper = Raphael(document.getElementById(this._id), config.width, config.height);
+    
+  };
+
+  IriSP.PolemicWidget.prototype = new IriSP.Widget();
+    
+  IriSP.PolemicWidget.prototype.draw = function() {
     
-    // array 
-    //var tweets  = new Array();
-    var element = new Array();
-    var cluster = new Array();
-    var frames  = new Array(frameLength);
-    var slices  = new Array();
-    
-    
-    // Classes =======================================================================
-    var Frames = function(){
+      // variable 
+      // yMax
+      
+      var self = this;
+      var yCoef        = 2;             // coef for height of 1 tweet 
+      var frameSize     = 5;             // frame size 
+      var margin         = 1;            // marge between frame
+      var lineSize      = this.width;        // timeline pixel width 
+      var nbrframes     = lineSize/frameSize;     // frame numbers
+      var numberOfTweet   = 0;            // number of tweet overide later 
+      var duration      = +this._serializer.currentMedia().meta["dc:duration"];      // timescale width 
+      var frameLength   = lineSize / frameSize;    // frame timescale  
+      var timeline;
+      var colors  = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858");
+      
+      // array 
+      //var tweets  = new Array();
+      var element = new Array();
+      var cluster = new Array();
+      var frames  = new Array(frameLength);
+      var slices  = new Array();
+      
       
-      var Myclusters;
-      var x;
-      var y;
-      var width;
-      var height;
-    };
-    Frames = function(json){
-      // make my clusters
-      // ou Frame vide 
-    };
-    Frames.prototype.draw = function(){
-    };
-    Frames.prototype.zoom = function(){
-    };
-    Frames.prototype.inside = function(){
-    };
-    var Clusters = function(){
-      var Object;
-      var yDist;
-      var x;
-      var y;
-      var width;
-      var height;
-    };
-    Clusters = function(json){
-      // make my object
-    };
-    var Tweet = function(){
-    };
-    // Classes =======================================================================
+      // Classes =======================================================================
+      var Frames = function(){
+        
+        var Myclusters;
+        var x;
+        var y;
+        var width;
+        var height;
+      };
+      Frames = function(json){
+        // make my clusters
+        // ou Frame vide 
+      };
+      Frames.prototype.draw = function(){
+      };
+      Frames.prototype.zoom = function(){
+      };
+      Frames.prototype.inside = function(){
+      };
+      var Clusters = function(){
+        var Object;
+        var yDist;
+        var x;
+        var y;
+        var width;
+        var height;
+      };
+      Clusters = function(json){
+        // make my object
+      };
+      var Tweet = function(){
+      };
+      // Classes =======================================================================
 
-    // Refactoring (parametere) ************************************************************
-    // color translastion
-    var qTweet_0  =0;
-    var qTweet_Q  =0;
-    var qTweet_REF=0;
-    var qTweet_OK =0;
-    var qTweet_KO =0;
-    function colorTranslation(value){
-      if(value == "Q"){
-        qTweet_Q+=1;
-        return 2;
-      }else if(value =="REF"){
-        qTweet_REF+=1;
-        return 4;
-      }else if(value =="OK"){
-        qTweet_OK+=1;
-        return 1;
-      }else if(value =="KO"){
-        qTweet_KO+=1;
-        return 3;
-      }else if(value ==""){
-        qTweet_0+=1;
-        return 5;
+      // Refactoring (parametere) ************************************************************
+      // color translastion
+      var qTweet_0  =0;
+      var qTweet_Q  =0;
+      var qTweet_REF=0;
+      var qTweet_OK =0;
+      var qTweet_KO =0;
+      function colorTranslation(value){
+        if(value == "Q"){
+          qTweet_Q+=1;
+          return 2;
+        }else if(value =="REF"){
+          qTweet_REF+=1;
+          return 4;
+        }else if(value =="OK"){
+          qTweet_OK+=1;
+          return 1;
+        }else if(value =="KO"){
+          qTweet_KO+=1;
+          return 3;
+        }else if(value ==""){
+          qTweet_0+=1;
+          return 5;
+        }
       }
-    }
-    
+      
 
-      this._serializer.sync(function(data) { loaded_callback.call(self, data) });
-      
-      function loaded_callback (json) {
-
-        // get current view (the first ???)
-        view = json.views[0];
+        this._serializer.sync(function(data) { loaded_callback.call(self, data) });
         
-        // the tweets are by definition of the second annotation type FIXME ?
-        tweet_annot_type = null;
-        if(typeof(view.annotation_types) !== "undefined" && view.annotation_types.length > 1) {
-          tweet_annot_type = view.annotation_types[1];
-        }
-      
-      for(var i = 0; i < json.annotations.length; i++) {
-        var item = json.annotations[i];              
-        var MyTime  = Math.floor(item.begin/duration*lineSize);
-        var Myframe = Math.floor(MyTime/lineSize*frameLength);
+        function loaded_callback (json) {
 
-        if (typeof(item.meta) !== "undefined" 
-          && typeof(item.meta["id-ref"]) !== "undefined"
-          && item.meta["id-ref"] === tweet_annot_type) {
-            
-          var MyTJson = JSON.parse(item.meta['dc:source']['content']);
+          // get current view (the first ???)
+          view = json.views[0];
           
-            if (item.content['polemics'] != undefined 
-            && item.content['polemics'][0] != null) {
-            
+          // the tweets are by definition of the second annotation type FIXME ?
+          tweet_annot_type = null;
+          if(typeof(view.annotation_types) !== "undefined" && view.annotation_types.length > 1) {
+            tweet_annot_type = view.annotation_types[1];
+          }
+        
+        for(var i = 0; i < json.annotations.length; i++) {
+          var item = json.annotations[i];              
+          var MyTime  = Math.floor(item.begin/duration*lineSize);
+          var Myframe = Math.floor(MyTime/lineSize*frameLength);
+
+          if (typeof(item.meta) !== "undefined" 
+            && typeof(item.meta["id-ref"]) !== "undefined"
+            && item.meta["id-ref"] === tweet_annot_type) {
+              
+            var MyTJson = JSON.parse(item.meta['dc:source']['content']);
             
-              for(var j=0; j<item.content['polemics'].length; j++){
-                  
-                  this.tweets[numberOfTweet] = {
-                        id:i,
-                        qualification:colorTranslation(item.content['polemics'][j]),
-                        yIndicator:MyTime,
-                        yframe:Myframe,
-                        title:item.content['title'],
-                        timeframe:item.begin,
-                        userId: MyTJson.id,
-                        userScreenName: MyTJson.screen_name,
-                        tsource:MyTJson
-                        };
-                  numberOfTweet+=1;
-                  
-              }
-          }
-          else {
-            this.tweets[numberOfTweet] = {
-                  id:i,
-                  qualification:colorTranslation(""),
-                  yIndicator:MyTime,
-                  yframe:Myframe,
-                  title:item.content['title'],
-                  timeframe:item.begin,
-                  userId: MyTJson.id,
-                  userScreenName: MyTJson.screen_name,
-                  tsource:MyTJson
-                  
-            };
-            numberOfTweet+=1;
-          }
-          
-        } 
-      };  
-      
-       DrawTweets.call (this); // FIXME: ugly.
-       
-      };      
-
-    // tweet Drawing (in raphael) 
-    function DrawTweets (){
-    // GROUPES TWEET ============================================
-    // Count nbr of cluster and tweet in a frame an save int in "frames"
-      numberOfTweet = this.tweets.length;
-      for(var i=0; i<nbrframes; i++) {  
-        for(var j=0; j<numberOfTweet; j++) {  
-        
-          if (i==this.tweets[j].yframe){
-            
-            var k = this.tweets[j].qualification;
-            
-            // make array for frame cluster
-            if(frames[i]==undefined){
-              frames[i] = {id:i,
-                     qualifVol:new Array(),
-                     mytweetsID:new Array()
-                    };
+              if (item.content['polemics'] != undefined 
+              && item.content['polemics'][0] != null) {
+              
+              
+                for(var j=0; j<item.content['polemics'].length; j++){
+                    
+                    this.tweets[numberOfTweet] = {
+                          id:i,
+                          qualification:colorTranslation(item.content['polemics'][j]),
+                          yIndicator:MyTime,
+                          yframe:Myframe,
+                          title:item.content['title'],
+                          timeframe:item.begin,
+                          userId: MyTJson.id,
+                          userScreenName: MyTJson.screen_name,
+                          tsource:MyTJson
+                          };
+                    numberOfTweet+=1;
+                    
+                }
             }
-            // add my tweet to frame
-            frames[i].mytweetsID.push(this.tweets[j]);
-            
-            // count opinion by frame
-            if( frames[i].qualifVol[k] == undefined){
-              frames[i].qualifVol[k] = 1;
-            }else{
-              frames[i].qualifVol[k] += 1;
+            else {
+              this.tweets[numberOfTweet] = {
+                    id:i,
+                    qualification:colorTranslation(""),
+                    yIndicator:MyTime,
+                    yframe:Myframe,
+                    title:item.content['title'],
+                    timeframe:item.begin,
+                    userId: MyTJson.id,
+                    userScreenName: MyTJson.screen_name,
+                    tsource:MyTJson
+                    
+              };
+              numberOfTweet+=1;
             }
             
-          }
-        }
-      }
-    
-    // GROUPES TWEET ============================================    
-    // max of tweet by Frame 
-      var max = 0; 
-      for(var i = 0; i < nbrframes; i++) {
-        var moy  = 0;
-        for (var j = 0; j < 6; j++) {    
-          if (frames[i] != undefined) {
-            if (frames[i].qualifVol[j] != undefined) {
-              moy += frames[i].qualifVol[j];
+          } 
+        };  
+        
+         DrawTweets.call (this); // FIXME: ugly.
+         
+        };      
+
+      // tweet Drawing (in raphael) 
+      function DrawTweets (){
+      // GROUPES TWEET ============================================
+      // Count nbr of cluster and tweet in a frame an save int in "frames"
+        numberOfTweet = this.tweets.length;
+        for(var i=0; i<nbrframes; i++) {  
+          for(var j=0; j<numberOfTweet; j++) {  
+          
+            if (i==this.tweets[j].yframe){
+              
+              var k = this.tweets[j].qualification;
+              
+              // make array for frame cluster
+              if(frames[i]==undefined){
+                frames[i] = {id:i,
+                       qualifVol:new Array(),
+                       mytweetsID:new Array()
+                      };
+              }
+              // add my tweet to frame
+              frames[i].mytweetsID.push(this.tweets[j]);
+              
+              // count opinion by frame
+              if( frames[i].qualifVol[k] == undefined){
+                frames[i].qualifVol[k] = 1;
+              }else{
+                frames[i].qualifVol[k] += 1;
+              }
+              
             }
           }
         }
-        
-        if (moy > max) {
-          max = moy;
-        }
-      }
-    
-      var tweetDrawed = new Array();
-      var TweetHeight = 5;
       
-      // DRAW  TWEETS ============================================
-      for(var i = 0; i < nbrframes; i++) {
-        var addEheight = 5;
-        if (frames[i] != undefined){                
-          // by type 
+      // GROUPES TWEET ============================================    
+      // max of tweet by Frame 
+        var max = 0; 
+        for(var i = 0; i < nbrframes; i++) {
+          var moy  = 0;
+          for (var j = 0; j < 6; j++) {    
+            if (frames[i] != undefined) {
+              if (frames[i].qualifVol[j] != undefined) {
+                moy += frames[i].qualifVol[j];
+              }
+            }
+          }
           
-          for (var j = 6; j > -1; j--) {
-            if (frames[i].qualifVol[j] != undefined) {
-              // show tweet by type 
-              for (var k = 0; k < frames[i].mytweetsID.length; k++) {
-              
-                if (frames[i].mytweetsID[k].qualification == j) {                
-                  var x = i * frameSize;
-                  var y = this.heightmax - addEheight;
-                  
-                  if (this.yMax > y) {
-                    this.yMax = y;
+          if (moy > max) {
+            max = moy;
+          }
+        }
+      
+        var tweetDrawed = new Array();
+        var TweetHeight = 5;
+        
+        // DRAW  TWEETS ============================================
+        for(var i = 0; i < nbrframes; i++) {
+          var addEheight = 5;
+          if (frames[i] != undefined){                
+            // by type 
+            
+            for (var j = 6; j > -1; j--) {
+              if (frames[i].qualifVol[j] != undefined) {
+                // show tweet by type 
+                for (var k = 0; k < frames[i].mytweetsID.length; k++) {
+                
+                  if (frames[i].mytweetsID[k].qualification == j) {                
+                    var x = i * frameSize;
+                    var y = this.heightmax - addEheight;
+                    
+                    if (this.yMax > y) {
+                      this.yMax = y;
+                    }
+                    
+                    var e = this.paper.rect(x, y, frameSize - margin, TweetHeight /* height */).attr({stroke:"#00","stroke-width":0.1,  fill: colors[j]});  
+                    this.svgElements.push(e);
+                    
+                    addEheight += TweetHeight;
+                    
+                    e.time= frames[i].mytweetsID[k].timeframe;
+                    e.title= frames[i].mytweetsID[k].title;
+                    
+                    e.mouseover(function(element) { return function (event) {
+                          // event.clientX and event.clientY are to raphael what event.pageX and pageY are to jquery.                        
+                          self.TooltipWidget.show.call(self.TooltipWidget, element.title, element.attr("fill"), event.clientX - 106, event.clientY - 160);
+                          element.displayed = true;
+                          debugger;
+                    }}(e)).mouseout(function(element) { return function () {                          
+                            self.TooltipWidget.hide.call(self.TooltipWidget);
+                    }}(e)).mousedown(function () {
+                      self._Popcorn.currentTime(this.time/1000);
+                    });
+                    
+                    IriSP.jQuery(e.node).attr('id', 't' + k + '');
+                    IriSP.jQuery(e.node).attr('title', frames[i].mytweetsID[k].title);
+                    IriSP.jQuery(e.node).attr('begin',  frames[i].mytweetsID[k].timeframe);                  
                   }
-                  
-                  var e = this.paper.rect(x, y, frameSize - margin, TweetHeight /* height */).attr({stroke:"#00","stroke-width":0.1,  fill: colors[j]});  
-                  this.svgElements.push(e);
-                  
-                  addEheight += TweetHeight;
-                  
-                  e.time= frames[i].mytweetsID[k].timeframe;
-                  e.title= frames[i].mytweetsID[k].title;
-                  
-                  e.mouseover(function(element) { return function (event) {
-                        // event.clientX and event.clientY are to raphael what event.pageX and pageY are to jquery.                        
-                        self.TooltipWidget.show.call(self.TooltipWidget, element.title, element.attr("fill"), event.clientX - 106, event.clientY - 160);
-                        element.displayed = true;
-                        debugger;
-                  }}(e)).mouseout(function(element) { return function () {                          
-                          self.TooltipWidget.hide.call(self.TooltipWidget);
-                  }}(e)).mousedown(function () {
-                    self._Popcorn.currentTime(this.time/1000);
-                  });
-                  
-                  IriSP.jQuery(e.node).attr('id', 't' + k + '');
-                  IriSP.jQuery(e.node).attr('title', frames[i].mytweetsID[k].title);
-                  IriSP.jQuery(e.node).attr('begin',  frames[i].mytweetsID[k].timeframe);                  
                 }
               }
             }
           }
-        }
 
-      }    
-      // DRAW UI :: resize border and bgd      
-      this.paperBackground = this.paper.rect(0, 0, this.width, this.heightmax).attr({fill:"#F8F8F8","stroke-width":0.1,opacity: 1});  
-      // var PaperBorder   = this.paper.rect(0, this.yMax,this.width,1).attr({fill:"#fff",stroke: "none",opacity: 1});  
-      
-      this.paperSlider   = this.paper.rect(0, 0, 0, this.heightmax).attr({fill:"#D4D5D5", stroke: "none", opacity: 1});
-      
-      // the small white line displayed over the slider.
-      this.sliderTip = this.paper.rect(0, 0, 1, this.heightmax).attr({fill:"#fc00ff", stroke: "none", opacity: 1});
-      
-      // decalage 
-      // tweetSelection = this.paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1});  
-      
+        }    
+        // DRAW UI :: resize border and bgd      
+        this.paperBackground = this.paper.rect(0, 0, this.width, this.heightmax).attr({fill:"#F8F8F8","stroke-width":0.1,opacity: 1});  
+        // var PaperBorder   = this.paper.rect(0, this.yMax,this.width,1).attr({fill:"#fff",stroke: "none",opacity: 1});  
+        
+        this.paperSlider   = this.paper.rect(0, 0, 0, this.heightmax).attr({fill:"#D4D5D5", stroke: "none", opacity: 1});
+        
+        // the small white line displayed over the slider.
+        this.sliderTip = this.paper.rect(0, 0, 1, this.heightmax).attr({fill:"#fc00ff", stroke: "none", opacity: 1});
+        
+        // decalage 
+        // tweetSelection = this.paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1});  
+        
+        
+        this.paperSlider.toBack();
+        this.paperBackground.toBack();
+        this.sliderTip.toFront();
+      }
       
-      this.paperSlider.toBack();
-      this.paperBackground.toBack();
-      this.sliderTip.toFront();
-    }
-    
-    this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater));
-}
+      this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater));
+  }
 
-IriSP.PolemicWidget.prototype.sliderUpdater = function() {
+  IriSP.PolemicWidget.prototype.sliderUpdater = function() {
 
-    var time = +this._Popcorn.currentTime();
-    var duration = +this._serializer.currentMedia().meta["dc:duration"];
-    
-    this.paperSlider.attr("width", time * (this.width / (duration / 1000)));
-        
-    this.sliderTip.attr("x", time * (this.width / (duration / 1000)));
-};
-    
-    
\ No newline at end of file
+      var time = +this._Popcorn.currentTime();
+      var duration = +this._serializer.currentMedia().meta["dc:duration"];
+      
+      this.paperSlider.attr("width", time * (this.width / (duration / 1000)));
+          
+      this.sliderTip.attr("x", time * (this.width / (duration / 1000)));
+  };
+});
+      
\ No newline at end of file
--- a/src/js/widgets/segmentsWidget.js	Mon Nov 14 16:12:13 2011 +0100
+++ b/src/js/widgets/segmentsWidget.js	Mon Nov 14 17:19:26 2011 +0100
@@ -1,148 +1,150 @@
-IriSP.SegmentsWidget = function(Popcorn, config, Serializer) {
+define(["IriSP", "widgets", "util", "tooltipWidget"], function() {
+  IriSP.SegmentsWidget = function(Popcorn, config, Serializer) {
 
-  var self = this;
-  IriSP.Widget.call(this, Popcorn, config, Serializer);
-  this.oldSearchMatches = [];
+    var self = this;
+    IriSP.Widget.call(this, Popcorn, config, Serializer);
+    this.oldSearchMatches = [];
 
-  // event handlers
-  this._Popcorn.listen("IriSP.search", function(searchString) { self.searchHandler.call(self, searchString); });
-  this._Popcorn.listen("IriSP.search.closed", function() { self.searchFieldClosedHandler.call(self); });
-  this._Popcorn.listen("IriSP.search.cleared", function() { self.searchFieldClearedHandler.call(self); });
-};
+    // event handlers
+    this._Popcorn.listen("IriSP.search", function(searchString) { self.searchHandler.call(self, searchString); });
+    this._Popcorn.listen("IriSP.search.closed", function() { self.searchFieldClosedHandler.call(self); });
+    this._Popcorn.listen("IriSP.search.cleared", function() { self.searchFieldClearedHandler.call(self); });
+  };
 
-IriSP.SegmentsWidget.prototype = new IriSP.Widget();
+  IriSP.SegmentsWidget.prototype = new IriSP.Widget();
 
-IriSP.SegmentsWidget.prototype.draw = function() {
+  IriSP.SegmentsWidget.prototype.draw = function() {
 
-  var self = this;
-  var annotations = this._serializer._data.annotations;
+    var self = this;
+    var annotations = this._serializer._data.annotations;
 
-  this.selector.css("overflow", "auto"); // clear the floats - FIXME : to refactor ?
-  this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
-  
-  this.positionMarker = this.selector.children(":first");
-  
-  this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater));
-  
-  this.selector.after("<div class='cleaner'></div>"); // we need to do this because the segments are floated                                                      
-  
-  var i = 0;
-  var totalWidth = this.selector.width();
-  var onePxPercent = 100 / totalWidth; /* the value of a pixel, in percents */
-  
-  for (i = 0; i < annotations.length; i++) {
-    var annotation = annotations[i];
+    this.selector.css("overflow", "auto"); // clear the floats - FIXME : to refactor ?
+    this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
+    
+    this.positionMarker = this.selector.children(":first");
+    
+    this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater));
+    
+    this.selector.after("<div class='cleaner'></div>"); // we need to do this because the segments are floated                                                      
+    
+    var i = 0;
+    var totalWidth = this.selector.width();
+    var onePxPercent = 100 / totalWidth; /* the value of a pixel, in percents */
+    
+    for (i = 0; i < annotations.length; i++) {
+      var annotation = annotations[i];
 
-    var begin = Math.round((+ annotation.begin) / 1000);
-    var end = Math.round((+ annotation.end) / 1000);
-    var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
-    var id = annotation.id;
-    var startPourcent 	= IriSP.timeToPourcent(begin, duration);
-    
-    /* some sort of collapsing occurs, so we only have to substract one pixel to each box instead of
-       two
-    */
-    var endPourcent 	= IriSP.timeToPourcent(end, duration) - startPourcent - onePxPercent * 1;
-    
-    /* on the other hand, we have to substract one pixel from the first box because it's the only
-       one to have to effective 1px margins */
-    if (i == 0) {
+      var begin = Math.round((+ annotation.begin) / 1000);
+      var end = Math.round((+ annotation.end) / 1000);
+      var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
+      var id = annotation.id;
+      var startPourcent 	= IriSP.timeToPourcent(begin, duration);
+      
+      /* some sort of collapsing occurs, so we only have to substract one pixel to each box instead of
+         two
+      */
+      var endPourcent 	= IriSP.timeToPourcent(end, duration) - startPourcent - onePxPercent * 1;
+      
+      /* on the other hand, we have to substract one pixel from the first box because it's the only
+         one to have to effective 1px margins */
+      if (i == 0) {
 
-      endPourcent -= onePxPercent;
-    }
-    
-    var divTitle = annotation.content.title.substr(0,55);
-    var color = annotation.content.color
+        endPourcent -= onePxPercent;
+      }
+      
+      var divTitle = annotation.content.title.substr(0,55);
+      var color = annotation.content.color
 
 
-    var annotationTemplate = Mustache.to_html(IriSP.annotation_template,
-        {"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent,
-        "endPourcent" : endPourcent, "hexa_color" : IriSP.DEC_HEXA_COLOR(color),
-        "seekPlace" : Math.round(begin/1000)});
+      var annotationTemplate = Mustache.to_html(IriSP.annotation_template,
+          {"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent,
+          "endPourcent" : endPourcent, "hexa_color" : IriSP.DEC_HEXA_COLOR(color),
+          "seekPlace" : Math.round(begin/1000)});
 
 
-    var toolTipTemplate = Mustache.to_html(IriSP.tooltip_template,
-          {"title" : divTitle, "begin" : begin, "end" : end,
-          "description": annotation.content.description});
+      var toolTipTemplate = Mustache.to_html(IriSP.tooltip_template,
+            {"title" : divTitle, "begin" : begin, "end" : end,
+            "description": annotation.content.description});
 
-    this.selector.append(annotationTemplate);
+      this.selector.append(annotationTemplate);
 
-    IriSP.jQuery("#" + id).tooltip({ effect: 'slide'});
+      IriSP.jQuery("#" + id).tooltip({ effect: 'slide'});
 
-    IriSP.jQuery("#" + id).fadeTo(0, 0.3);
+      IriSP.jQuery("#" + id).fadeTo(0, 0.3);
 
-    IriSP.jQuery("#" + id).mouseover(function() {
-      IriSP.jQuery("#" + id).animate({opacity: 0.6}, 5);
-    }).mouseout(function(){
-      IriSP.jQuery("#" + id).animate({opacity: 0.3}, 5);
-    });
+      IriSP.jQuery("#" + id).mouseover(function() {
+        IriSP.jQuery("#" + id).animate({opacity: 0.6}, 5);
+      }).mouseout(function(){
+        IriSP.jQuery("#" + id).animate({opacity: 0.3}, 5);
+      });
 
-    IriSP.jQuery("#" + id).click(function(_this, annotation) {
-                                    return function() { _this.clickHandler(annotation)};
-                                 }(this, annotation));
-  }
-};
+      IriSP.jQuery("#" + id).click(function(_this, annotation) {
+                                      return function() { _this.clickHandler(annotation)};
+                                   }(this, annotation));
+    }
+  };
 
-/* restores the view after a search */
-IriSP.SegmentsWidget.prototype.clear = function() {
-  // reinit the fields
-  for (var id in this.oldSearchMatches) {
+  /* restores the view after a search */
+  IriSP.SegmentsWidget.prototype.clear = function() {
+    // reinit the fields
+    for (var id in this.oldSearchMatches) {
 
-      IriSP.jQuery("#"+id).dequeue();
-			IriSP.jQuery("#"+id).animate({height:0}, 100);
-			IriSP.jQuery("#"+id).css('border-color','lightgray');
-			IriSP.jQuery("#"+id).animate({opacity:0.3}, 100);
-  }
-};
+        IriSP.jQuery("#"+id).dequeue();
+        IriSP.jQuery("#"+id).animate({height:0}, 100);
+        IriSP.jQuery("#"+id).css('border-color','lightgray');
+        IriSP.jQuery("#"+id).animate({opacity:0.3}, 100);
+    }
+  };
 
-IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) {
-  var begin = Math.round((+ annotation.begin) / 1000);
-  this._Popcorn.currentTime(begin);
-};
+  IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) {
+    var begin = Math.round((+ annotation.begin) / 1000);
+    this._Popcorn.currentTime(begin);
+  };
 
-IriSP.SegmentsWidget.prototype.searchHandler = function(searchString) {
+  IriSP.SegmentsWidget.prototype.searchHandler = function(searchString) {
 
-  if (searchString == "")
-    return;
+    if (searchString == "")
+      return;
 
-  var matches = this._serializer.searchOccurences(searchString);
+    var matches = this._serializer.searchOccurences(searchString);
 
-  for (var id in matches) {
-    var factor = matches[id] * 8;
-    this.selector.find("#"+id).dequeue();
-    this.selector.find("#"+id).animate({height: factor}, 200);    
-    this.selector.find("#"+id).css('border-color','red');
-    this.selector.find("#"+id).animate({opacity:0.6}, 200);
+    for (var id in matches) {
+      var factor = matches[id] * 8;
+      this.selector.find("#"+id).dequeue();
+      this.selector.find("#"+id).animate({height: factor}, 200);    
+      this.selector.find("#"+id).css('border-color','red');
+      this.selector.find("#"+id).animate({opacity:0.6}, 200);
 
-    IriSP.jQuery("#LdtSearchInput").css('background-color','#e1ffe1');
-  }
+      IriSP.jQuery("#LdtSearchInput").css('background-color','#e1ffe1');
+    }
 
-  // clean up the blocks that were in the previous search
-  // but who aren't in the current one.
-  for (var id in this.oldSearchMatches) {
-    if (!matches.hasOwnProperty(id)) {
-        IriSP.jQuery("#"+id).dequeue();
-				IriSP.jQuery("#"+id).animate({height:0}, 250);				
-				IriSP.jQuery("#"+id).animate({opacity:0.3}, 200);
-        this.selector.find("#"+id).css('border','solid 1px #aaaaaa');
+    // clean up the blocks that were in the previous search
+    // but who aren't in the current one.
+    for (var id in this.oldSearchMatches) {
+      if (!matches.hasOwnProperty(id)) {
+          IriSP.jQuery("#"+id).dequeue();
+          IriSP.jQuery("#"+id).animate({height:0}, 250);				
+          IriSP.jQuery("#"+id).animate({opacity:0.3}, 200);
+          this.selector.find("#"+id).css('border','solid 1px #aaaaaa');
+      }
     }
-  }
-  
-  this.oldSearchMatches = matches;
-};
+    
+    this.oldSearchMatches = matches;
+  };
 
-IriSP.SegmentsWidget.prototype.searchFieldClearedHandler = function() {
-  this.clear();
-};
+  IriSP.SegmentsWidget.prototype.searchFieldClearedHandler = function() {
+    this.clear();
+  };
 
-IriSP.SegmentsWidget.prototype.searchFieldClosedHandler = function() {
-  this.clear();
-};
+  IriSP.SegmentsWidget.prototype.searchFieldClosedHandler = function() {
+    this.clear();
+  };
 
-IriSP.SegmentsWidget.prototype.positionUpdater = function() {  
-  var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
-  var time = this._Popcorn.currentTime();
-  var position 	= ((time / duration) * 100).toFixed(2);
+  IriSP.SegmentsWidget.prototype.positionUpdater = function() {  
+    var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
+    var time = this._Popcorn.currentTime();
+    var position 	= ((time / duration) * 100).toFixed(2);
 
-  this.positionMarker.css("left", position + "%");  
-};
\ No newline at end of file
+    this.positionMarker.css("left", position + "%");  
+  };
+});
\ No newline at end of file
--- a/src/js/widgets/sliderWidget.js	Mon Nov 14 16:12:13 2011 +0100
+++ b/src/js/widgets/sliderWidget.js	Mon Nov 14 17:19:26 2011 +0100
@@ -1,52 +1,54 @@
-IriSP.SliderWidget = function(Popcorn, config, Serializer) { 
-  IriSP.Widget.call(this, Popcorn, config, Serializer);
-};
+define(["IriSP", "widgets", "util"], function() {
+  IriSP.SliderWidget = function(Popcorn, config, Serializer) { 
+    IriSP.Widget.call(this, Popcorn, config, Serializer);
+  };
 
-IriSP.SliderWidget.prototype = new IriSP.Widget();
+  IriSP.SliderWidget.prototype = new IriSP.Widget();
 
-IriSP.SliderWidget.prototype.draw = function() {
-  var self = this;
-  
-  this.selector.append("<div class='sliderBackground'></div>");
-  this.sliderBackground = this.selector.children(".sliderBackground");
-  
-  this.selector.append("<div class='sliderForeground' style='position: absolute; top: 0%; width: 0%;'></div>");
-  this.sliderForeground = this.selector.children(".sliderForeground");
-  
-  this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
-  this.positionMarker = this.selector.children(".positionMarker");
-  
-  this.sliderBackground.click(function(event) { self.clickHandler.call(self, event); });
-  
-  this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater));
-};
+  IriSP.SliderWidget.prototype.draw = function() {
+    var self = this;
+    
+    this.selector.append("<div class='sliderBackground'></div>");
+    this.sliderBackground = this.selector.children(".sliderBackground");
+    
+    this.selector.append("<div class='sliderForeground' style='position: absolute; top: 0%; width: 0%;'></div>");
+    this.sliderForeground = this.selector.children(".sliderForeground");
+    
+    this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
+    this.positionMarker = this.selector.children(".positionMarker");
+    
+    this.sliderBackground.click(function(event) { self.clickHandler.call(self, event); });
+    
+    this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater));
+  };
 
-/* updates the slider as time passes */
-IriSP.SliderWidget.prototype.sliderUpdater = function() {  
-  var time = this._Popcorn.currentTime();
-  
-  var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
-  var percent = ((time / duration) * 100).toFixed(2);
-	this.sliderForeground.css("width", percent + "%");
-	this.positionMarker.css("left", percent + "%");
-  
-};
+  /* updates the slider as time passes */
+  IriSP.SliderWidget.prototype.sliderUpdater = function() {  
+    var time = this._Popcorn.currentTime();
+    
+    var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
+    var percent = ((time / duration) * 100).toFixed(2);
+    this.sliderForeground.css("width", percent + "%");
+    this.positionMarker.css("left", percent + "%");
+    
+  };
 
-IriSP.SliderWidget.prototype.clickHandler = function(event) {
-  /* this piece of code is a little bit convoluted - here's how it works :
-     we want to handle clicks on the progress bar and convert those to seeks in the media.
-     However, jquery only gives us a global position, and we want a number of pixels relative
-     to our container div, so we get the parent position, and compute an offset to this position,
-     and finally compute the progress ratio in the media.
-     Finally we multiply this ratio with the duration to get the correct time
-  */
-  
-  var parentOffset = this.sliderBackground.parent().offset();
-  var width = this.sliderBackground.width();
-  var relX = event.pageX - parentOffset.left;
-      
-  var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
-  var newTime = ((relX / width) * duration).toFixed(2);
-	
-  this._Popcorn.currentTime(newTime);
-};
\ No newline at end of file
+  IriSP.SliderWidget.prototype.clickHandler = function(event) {
+    /* this piece of code is a little bit convoluted - here's how it works :
+       we want to handle clicks on the progress bar and convert those to seeks in the media.
+       However, jquery only gives us a global position, and we want a number of pixels relative
+       to our container div, so we get the parent position, and compute an offset to this position,
+       and finally compute the progress ratio in the media.
+       Finally we multiply this ratio with the duration to get the correct time
+    */
+    
+    var parentOffset = this.sliderBackground.parent().offset();
+    var width = this.sliderBackground.width();
+    var relX = event.pageX - parentOffset.left;
+        
+    var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
+    var newTime = ((relX / width) * duration).toFixed(2);
+    
+    this._Popcorn.currentTime(newTime);
+  };
+});
\ No newline at end of file
--- a/src/js/widgets/tooltipWidget.js	Mon Nov 14 16:12:13 2011 +0100
+++ b/src/js/widgets/tooltipWidget.js	Mon Nov 14 17:19:26 2011 +0100
@@ -1,28 +1,30 @@
 /* this widget displays a small tooltip */
-IriSP.TooltipWidget = function(Popcorn, config, Serializer) {
-  IriSP.Widget.call(this, Popcorn, config, Serializer);  
-};
+define(["IriSP", "widgets", "util"], function() {
+  IriSP.TooltipWidget = function(Popcorn, config, Serializer) {
+    IriSP.Widget.call(this, Popcorn, config, Serializer);  
+  };
 
 
-IriSP.TooltipWidget.prototype = new IriSP.Widget();
+  IriSP.TooltipWidget.prototype = new IriSP.Widget();
 
-IriSP.TooltipWidget.prototype.draw = function() {
-  var templ = Mustache.to_html(IriSP.tooltipWidget_template);
+  IriSP.TooltipWidget.prototype.draw = function() {
+    var templ = Mustache.to_html(IriSP.tooltipWidget_template);
+      
+    this.selector.append(templ);
+    this.hide();
     
-  this.selector.append(templ);
-  this.hide();
-  
-};
+  };
 
-IriSP.TooltipWidget.prototype.show = function(text, color, x, y) {
-  if (this.selector.find(".tiptext").text() == text)
-    return;
-    
-  this.selector.find(".tipcolor").css("background-color", color);  
-	this.selector.find(".tiptext").text(text);  
-  this.selector.find(".tip").css("left", x).css("top", y);
-};
+  IriSP.TooltipWidget.prototype.show = function(text, color, x, y) {
+    if (this.selector.find(".tiptext").text() == text)
+      return;
+      
+    this.selector.find(".tipcolor").css("background-color", color);  
+    this.selector.find(".tiptext").text(text);  
+    this.selector.find(".tip").css("left", x).css("top", y);
+  };
 
-IriSP.TooltipWidget.prototype.hide = function() {
-  this.selector.find(".tip").css("left", -10000).css("top", -100000);
-};
\ No newline at end of file
+  IriSP.TooltipWidget.prototype.hide = function() {
+    this.selector.find(".tip").css("left", -10000).css("top", -100000);
+  };
+});
\ No newline at end of file