From: olivier <>
Date: Tue, 14 Apr 2009 11:52:22 +0000 (+0000)
Subject: eztelemeta: much simplified audio player, easier to style and integrate
X-Git-Tag: 1.1~669
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=de0a2d18ecd412fa49291f4bcb99134b1783ff56;p=telemeta.git

eztelemeta: much simplified audio player, easier to style and integrate
---

diff --git a/tools/eztelemeta/design/standard/images/pause.png b/tools/eztelemeta/design/standard/images/pause.png
deleted file mode 100644
index 18112cc9..00000000
Binary files a/tools/eztelemeta/design/standard/images/pause.png and /dev/null differ
diff --git a/tools/eztelemeta/design/standard/images/play.png b/tools/eztelemeta/design/standard/images/play.png
index 09a895d1..bc7336cb 100644
Binary files a/tools/eztelemeta/design/standard/images/play.png and b/tools/eztelemeta/design/standard/images/play.png differ
diff --git a/tools/eztelemeta/design/standard/images/stop.png b/tools/eztelemeta/design/standard/images/stop.png
new file mode 100644
index 00000000..2a7e1bf2
Binary files /dev/null and b/tools/eztelemeta/design/standard/images/stop.png differ
diff --git a/tools/eztelemeta/design/standard/javascript/eztelemeta-player.js b/tools/eztelemeta/design/standard/javascript/eztelemeta-player.js
new file mode 100644
index 00000000..9e9004fe
--- /dev/null
+++ b/tools/eztelemeta/design/standard/javascript/eztelemeta-player.js
@@ -0,0 +1,269 @@
+function TelemetaPlayer(cfg)
+{
+    var that            = this;
+    var soundManager    = null;
+    var sound           = null;
+    var currentLink     = null;
+   
+    this.init = function() {
+        var sounds = this.byClass(document, 'dd', 'telemeta-sound');
+        for (i in sounds) {
+            link = sounds[i].getElementsByTagName('a')[0];
+            link.onclick = this.togglePlayback;
+        }
+    }
+
+    this.findContainer = function(link) {
+        var e = link;
+        while (e) {
+            e = e.parentNode;
+            if (this.hasClass(e, 'telemeta-item'))
+                break;
+            if (e == document)
+                e = null;
+        }
+        return e;
+    }
+
+    this.setStateStyle = function(link, state) {
+        var container = this.findContainer(link);
+        if (state == 'stopped' || state == 'loading') {
+            if (this.hasClass(container, 'telemeta-playing'))
+                container.className = container.className.replace('telemeta-playing', '');
+        }
+
+        if (state == 'stopped' || state == 'playing') {
+            if (this.hasClass(container, 'telemeta-loading'))
+                container.className = container.className.replace('telemeta-loading', '');
+        }
+
+        if (state == 'playing') {
+            if (!this.hasClass(container, 'telemeta-playing'))
+                container.className += ' telemeta-playing';
+        } else if (state == 'loading') {
+            if (!this.hasClass(container, 'telemeta-loading'))
+                container.className += ' telemeta-loading';
+        }
+    }
+
+    this.togglePlayback = function() {
+        var link = this;
+        if (that.soundManager) {
+            if (that.sound)
+                that.sound.stop();
+            if (that.currentLink) {
+                that.setStateStyle(that.currentLink, 'stopped');
+                that.updatePosition(0);
+            }
+            if (!that.currentLink || that.currentLink != link) {
+                that.sound = that.soundManager.createSound({
+                    id: 'telemeta_sound', 
+                    url: link.href,
+                    whileplaying: function() { that.update(); },
+                    onbufferchange: function() { that.update(); }
+                });
+                that.currentLink = link;
+                that.sound.play();
+                that.setStateStyle(link, 'loading');
+                that.updatePosition(0);
+            } else {
+                that.currentLink = null;
+            }
+        }
+        return false;
+    }
+
+    this.updatePosition = function(position)
+    {
+        var container = that.findContainer(that.currentLink)
+        var positionContainer = that.byClass(container, 'span', 'telemeta-position')[0];
+
+        function format(i) { i = '' + parseInt(i); return i.length < 2 ? '0' + i : i; }
+
+        var hours = format(position / 3600);
+        var mins  = format(position % 3600 / 60);
+        var secs  = format(position % 3600 % 60);
+        positionContainer.firstChild.nodeValue = hours + ':' + mins + ':' + secs;
+    }
+
+    this.update = function()
+    {
+        that.updatePosition(that.sound.position / 1000);
+        if (that.sound.isBuffering) {
+            that.setStateStyle(that.currentLink, 'loading');
+        } else {
+            that.setStateStyle(that.currentLink, 'playing');
+        }
+    }
+
+    this.hasClass = function(element, className) {
+        if (typeof(element.className) != 'undefined') 
+            return new RegExp('(^|\\s)' + className + '(\\s|$)').test(element.className);
+
+        return false;
+    }
+
+    this.byClass = function(root, tag, className) {
+        var result = [];
+        var nodes = root.getElementsByTagName(tag);
+        var i;
+        for (i = 0; i < nodes.length; i++) {
+            if (this.hasClass(nodes[i], className)) 
+                result.push(nodes[i]);
+        }
+        return result;
+    }
+
+    this.setSoundManager = function(soundManager) {
+        this.soundManager = soundManager;
+    }
+
+    TelemetaDom.ready(function() { that.init(cfg); });
+}
+
+(function(){
+
+    var DomReady = window.TelemetaDom = {};
+
+	// Everything that has to do with properly supporting our document ready event. Brought over from the most awesome jQuery. 
+
+    var userAgent = navigator.userAgent.toLowerCase();
+
+    // Figure out what browser is being used
+    var browser = {
+    	version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
+    	safari: /webkit/.test(userAgent),
+    	opera: /opera/.test(userAgent),
+    	msie: (/msie/.test(userAgent)) && (!/opera/.test( userAgent )),
+    	mozilla: (/mozilla/.test(userAgent)) && (!/(compatible|webkit)/.test(userAgent))
+    };    
+
+	var readyBound = false;	
+	var isReady = false;
+	var readyList = [];
+
+	// Handle when the DOM is ready
+	function domReady() {
+		// Make sure that the DOM is not already loaded
+		if(!isReady) {
+			// Remember that the DOM is ready
+			isReady = true;
+        
+	        if(readyList) {
+	            for(var fn = 0; fn < readyList.length; fn++) {
+	                readyList[fn].call(window, []);
+	            }
+            
+	            readyList = [];
+	        }
+		}
+	};
+
+	// From Simon Willison. A safe way to fire onload w/o screwing up everyone else.
+	function addLoadEvent(func) {
+	  var oldonload = window.onload;
+	  if (typeof window.onload != 'function') {
+	    window.onload = func;
+	  } else {
+	    window.onload = function() {
+	      if (oldonload) {
+	        oldonload();
+	      }
+	      func();
+	    }
+	  }
+	};
+
+	// does the heavy work of working through the browsers idiosyncracies (let's call them that) to hook onload.
+	function bindReady() {
+		if(readyBound) {
+		    return;
+	    }
+	
+		readyBound = true;
+
+		// Mozilla, Opera (see further below for it) and webkit nightlies currently support this event
+		if (document.addEventListener && !browser.opera) {
+			// Use the handy event callback
+			document.addEventListener("DOMContentLoaded", domReady, false);
+		}
+
+		// If IE is used and is not in a frame
+		// Continually check to see if the document is ready
+		if (browser.msie && window == top) (function(){
+			if (isReady) return;
+			try {
+				// If IE is used, use the trick by Diego Perini
+				// http://javascript.nwbox.com/IEContentLoaded/
+				document.documentElement.doScroll("left");
+			} catch(error) {
+				setTimeout(arguments.callee, 0);
+				return;
+			}
+			// and execute any waiting functions
+		    domReady();
+		})();
+
+		if(browser.opera) {
+			document.addEventListener( "DOMContentLoaded", function () {
+				if (isReady) return;
+				for (var i = 0; i < document.styleSheets.length; i++)
+					if (document.styleSheets[i].disabled) {
+						setTimeout( arguments.callee, 0 );
+						return;
+					}
+				// and execute any waiting functions
+	            domReady();
+			}, false);
+		}
+
+		if(browser.safari) {
+		    var numStyles;
+			(function(){
+				if (isReady) return;
+				if (document.readyState != "loaded" && document.readyState != "complete") {
+					setTimeout( arguments.callee, 0 );
+					return;
+				}
+				if (numStyles === undefined) {
+	                var links = document.getElementsByTagName("link");
+	                for (var i=0; i < links.length; i++) {
+	                	if(links[i].getAttribute('rel') == 'stylesheet') {
+	                	    numStyles++;
+	                	}
+	                }
+	                var styles = document.getElementsByTagName("style");
+	                numStyles += styles.length;
+				}
+				if (document.styleSheets.length != numStyles) {
+					setTimeout( arguments.callee, 0 );
+					return;
+				}
+			
+				// and execute any waiting functions
+				domReady();
+			})();
+		}
+
+		// A fallback to window.onload, that will always work
+	    addLoadEvent(domReady);
+	};
+
+	// This is the public function that people can use to hook up ready.
+	DomReady.ready = function(fn, args) {
+		// Attach the listeners
+		bindReady();
+    
+		// If the DOM is already ready
+		if (isReady) {
+			// Execute the function immediately
+			fn.call(window, []);
+	    } else {
+			// Add the function to the wait list
+	        readyList.push( function() { return fn.call(window, []); } );
+	    }
+	};
+    
+	bindReady();
+	
+})();
diff --git a/tools/eztelemeta/design/standard/javascript/init.js b/tools/eztelemeta/design/standard/javascript/init.js
deleted file mode 100644
index 5f8494a3..00000000
--- a/tools/eztelemeta/design/standard/javascript/init.js
+++ /dev/null
@@ -1,14 +0,0 @@
-
-/* SoundManager2 configuration */
-soundManager.debugMode = true;
-
-/* SoundManager2 Page Player configuration */
-var PP_CONFIG = {
-  flashVersion:     9,
-  usePeakData:      true,
-  useWaveformData:  false,
-  useEQData:        false,
-  useFavIcon:       false,
-  useMovieStar:     false,
-  updatePageTitle:  false
-}
diff --git a/tools/eztelemeta/design/standard/javascript/page-player.js b/tools/eztelemeta/design/standard/javascript/page-player.js
deleted file mode 100644
index 6039b92e..00000000
--- a/tools/eztelemeta/design/standard/javascript/page-player.js
+++ /dev/null
@@ -1,1009 +0,0 @@
-/*
-
-  SoundManager 2 Demo: "Page as playlist"
-  ----------------------------------------------
-  http://schillmania.com/projects/soundmanager2/
-
-  An example of a Muxtape.com-style UI, where an
-  unordered list of MP3 links becomes a playlist
-
-  Flash 9 "MovieStar" edition supports MPEG4
-  audio and video as well.
-
-  Requires SoundManager 2 Javascript API.
-
-*/
-
-function TelemetaPlayer(oConfigOverride) {
-  var self = this;
-  var pl = this;
-  var sm = soundManager; // soundManager instance
-  // sniffing for favicon stuff/IE workarounds
-  var isIE = navigator.userAgent.match(/msie/i);
-  var isOpera = navigator.userAgent.match(/opera/i);
-  var isFirefox = navigator.userAgent.match(/firefox/i);
-
-  // sm.url = '../../swf/'; // path to directory containing SM2 SWF
-
-  this.config = {
-    flashVersion: 8,        // version of Flash to tell SoundManager to use - either 8 or 9. Flash 9 required for peak / spectrum data.
-    usePeakData: false,     // [Flash 9 only]: show peak data
-    useWaveformData: false, // [Flash 9 only]: enable sound spectrum (raw waveform data) - WARNING: CPU-INTENSIVE: may set CPUs on fire.
-    useEQData: false,       // [Flash 9 only]: enable sound EQ (frequency spectrum data) - WARNING: Also CPU-intensive.
-    fillGraph: false,       // [Flash 9 only]: draw full lines instead of only top (peak) spectrum points
-    allowRightClick:true,   // let users right-click MP3 links ("save as...", etc.) or discourage (can't prevent.)
-    useThrottling: false,   // try to rate-limit potentially-expensive calls (eg. dragging position around)
-    autoStart: false,       // begin playing first sound when page loads
-    playNext: true,         // stop after one sound, or play through list until end
-    updatePageTitle: true,  // change the page title while playing sounds
-    emptyTime: '-:--',      // null/undefined timer values (before data is available)
-    useFavIcon: false       // try to show peakData in address bar (Firefox + Opera)
-  }
-
-  //sm.debugMode = (window.location.href.toString().match(/debug=1/i)?true:false); // enable with #debug=1 for example
-
-  this._mergeObjects = function(oMain,oAdd) {
-    // non-destructive merge
-    var o1 = {}; // clone o1
-    for (var i in oMain) {
-      o1[i] = oMain[i];
-    }
-    var o2 = (typeof oAdd == 'undefined'?{}:oAdd);
-    for (var o in o2) {
-      if (typeof o1[o] == 'undefined') o1[o] = o2[o];
-    }
-    return o1;
-  }
-
-  if (typeof oConfigOverride != 'undefined' && oConfigOverride) {
-    // allow overriding via arguments object
-    this.config = this._mergeObjects(oConfigOverride,this.config);
-  }
-
-  this.css = {             // CSS class names appended to link during various states
-    sDefault: 'ezt-link',  // default state
-    sPlaying: 'ezt-playing',
-    sPaused: 'ezt-paused'
-  }
-
-  // apply externally-defined override, if applicable
-  this.cssBase = []; // optional features added to ul.playlist
-  if (this.config.usePeakData) this.cssBase.push('ezt-use-peak');
-  if (this.config.useWaveformData || this.config.useEQData) this.cssBase.push('ezt-use-spectrum');
-  this.cssBase = this.cssBase.join(' ');
-
-  // apply some items to SM2
-  sm.flashVersion = this.config.flashVersion;
-  if (sm.flashVersion >= 9) {
-    sm.useMovieStar = this.config.useMovieStar; // enable playing FLV, MP4 etc.
-    sm.movieStarOptions.useVideo = this.config.useVideo;
-    sm.defaultOptions.usePeakData = this.config.usePeakData;
-    sm.defaultOptions.useWaveformData = this.config.useWaveformData;
-    sm.defaultOptions.useEQData = this.config.useEQData;
-  }
-
-  this.links = [];
-  this.sounds = [];
-  this.soundsByObject = [];
-  this.lastSound = null;
-  this.soundCount = 0;
-  this.strings = [];
-  this.dragActive = false;
-  this.dragExec = new Date();
-  this.dragTimer = null;
-  this.pageTitle = document.title;
-  this.lastWPExec = new Date();
-  this.xbmImages = [];
-  this.oControls = null;
-
-  this.addEventHandler = function(o,evtName,evtHandler) {
-    typeof(attachEvent)=='undefined'?o.addEventListener(evtName,evtHandler,false):o.attachEvent('on'+evtName,evtHandler);
-  }
-
-  this.removeEventHandler = function(o,evtName,evtHandler) {
-    typeof(attachEvent)=='undefined'?o.removeEventListener(evtName,evtHandler,false):o.detachEvent('on'+evtName,evtHandler);
-  }
-
-  this.hasClass = function(o,cStr) {
-    return (typeof(o.className)!='undefined'?new RegExp('(^|\\s)'+cStr+'(\\s|$)').test(o.className):false);
-  }
-
-  this.addClass = function(o,cStr) {
-    if (!o || !cStr) return false; // safety net
-    if (self.hasClass(o,cStr)) return false;
-    o.className = (o.className?o.className+' ':'')+cStr;
-  }
-
-  this.removeClass = function(o,cStr) {
-    if (!o || !cStr) return false; // safety net
-    if (!self.hasClass(o,cStr)) return false;
-    o.className = o.className.replace(new RegExp('( '+cStr+')|('+cStr+')','g'),'');
-  }
-
-  this.getElementsByClassName = function(className,tagNames,oParent) {
-    var doc = (oParent||document);
-    var matches = [];
-    var i,j;
-    var nodes = [];
-    if (typeof(tagNames)!='undefined' && typeof(tagNames)!='string') {
-      for (i=tagNames.length; i--;) {
-        if (!nodes || !nodes[tagNames[i]]) {
-          nodes[tagNames[i]] = doc.getElementsByTagName(tagNames[i]);
-        }
-      }
-    } else if (tagNames) {
-      nodes = doc.getElementsByTagName(tagNames);
-    } else {
-      nodes = doc.all||doc.getElementsByTagName('*');
-    }
-    if (typeof(tagNames)!='string') {
-      for (i=tagNames.length; i--;) {
-        for (j=nodes[tagNames[i]].length; j--;) {
-          if (self.hasClass(nodes[tagNames[i]][j],className)) {
-            matches[matches.length] = nodes[tagNames[i]][j];
-          }
-        }
-      }
-    } else {
-      for (i=0; i<nodes.length; i++) {
-        if (self.hasClass(nodes[i],className)) {
-          matches[matches.length] = nodes[i];
-        }
-      }
-    }
-    return matches;
-  }
-  
-  this.getOffX = function(o) {
-    // http://www.xs4all.nl/~ppk/js/findpos.html
-    var curleft = 0;
-    if (o.offsetParent) {
-      while (o.offsetParent) {
-        curleft += o.offsetLeft;
-        o = o.offsetParent;
-      }
-    }
-    else if (o.x) curleft += o.x;
-    return curleft;
-  }
-
-  this.isChildOfClass = function(oChild,oClass) {
-    if (!oChild || !oClass) return false;
-    while (oChild.parentNode && !self.hasClass(oChild,oClass)) {
-      oChild = oChild.parentNode;
-    }
-    return (self.hasClass(oChild,oClass));
-  }
-
-  this.getParentByNodeName = function(oChild,sParentNodeName) {
-    if (!oChild || !sParentNodeName) return false;
-    sParentNodeName = sParentNodeName.toLowerCase();
-    while (oChild.parentNode && sParentNodeName != oChild.parentNode.nodeName.toLowerCase()) {
-      oChild = oChild.parentNode;
-    }
-    return (oChild.parentNode && sParentNodeName == oChild.parentNode.nodeName.toLowerCase()?oChild.parentNode:null);
-  }
-  
-  this.getTime = function(nMSec,bAsString) {
-    // convert milliseconds to mm:ss, return as object literal or string
-    var nSec = Math.floor(nMSec/1000);
-    var min = Math.floor(nSec/60);
-    var sec = nSec-(min*60);
-    // if (min == 0 && sec == 0) return null; // return 0:00 as null
-    return (bAsString?(min+':'+(sec<10?'0'+sec:sec)):{'min':min,'sec':sec});
-  }
-
-  this.getSoundByObject = function(o) {
-    return (typeof self.soundsByObject[o.rel] != 'undefined'?self.soundsByObject[o.rel]:null);
-  }
-
-  this.getSoundIndex = function(o) {
-    for (var i=self.links.length; i--;) {
-      if (self.links[i].rel == o.rel) return i;
-    }
-    return -1;
-  }
-
-  this.setPageTitle = function(sTitle) {
-    if (!self.config.updatePageTitle) return false;
-    try {
-      document.title = (sTitle?sTitle+' - ':'')+self.pageTitle;
-    } catch(e) {
-      // oh well
-      self.setPageTitle = function() {return false;}
-    }
-  }
-
-  this.events = {
-
-    // handlers for sound events as they're started/stopped/played
-
-    play: function() {
-      pl.removeClass(this._data.oLI,this._data.className);
-      this._data.className = pl.css.sPlaying;
-      pl.addClass(this._data.oLI,this._data.className);
-      self.setPageTitle(this._data.originalTitle);
-    },
-
-    stop: function() {
-      pl.removeClass(this._data.oLI,this._data.className);
-      this._data.className = '';
-      this._data.oPosition.style.width = '0px';
-      self.setPageTitle();
-      self.resetPageIcon();
-    },
-
-    pause: function() {
-      if (pl.dragActive) return false;
-      pl.removeClass(this._data.oLI,this._data.className);
-      this._data.className = pl.css.sPaused;
-      pl.addClass(this._data.oLI,this._data.className);
-      self.setPageTitle();
-      self.resetPageIcon();
-    },
-
-    resume: function() {
-      if (pl.dragActive) return false;
-      pl.removeClass(this._data.oLI,this._data.className);
-      this._data.className = pl.css.sPlaying;
-      pl.addClass(this._data.oLI,this._data.className);
-    },
-
-    finish: function() {
-      pl.removeClass(this._data.oLI,this._data.className);
-      this._data.className = '';
-      this._data.oPosition.style.width = '0px';
-      // play next if applicable
-      if (self.config.playNext && this._data.nIndex<pl.links.length-1) {
-        pl.handleClick({target:pl.links[this._data.nIndex+1]}); // fake a click event - aren't we sneaky. ;)
-      } else {
-        self.setPageTitle();
-        self.resetPageIcon();
-      }
-    },
-
-    whileloading: function() {
-      this._data.oLoading.style.width = (((this.bytesLoaded/this.bytesTotal)*100)+'%'); // theoretically, this should work.
-      if (!this._data.didRefresh && this._data.metadata) {
-        this._data.didRefresh = true;
-        this._data.metadata.refresh();
-      }
-    },
-
-    onload: function() {
-      if (!this.loaded) {
-		var oTemp = this._data.oLI.getElementsByTagName('a')[0];
-		var oString = oTemp.innerHTML;
-		var oThis = this;
-		oTemp.innerHTML = oString+' <span style="font-size:0.5em"> | Load failed, d\'oh! '+(sm.sandbox.noRemote?' Possible cause: Flash sandbox is denying remote URL access.':(sm.sandbox.noLocal?'Flash denying local filesystem access':'404?'))+'</span>';
-		setTimeout(function(){
-		  oTemp.innerHTML = oString;
-		  // pl.events.finish.apply(oThis); // load next
-		},5000);
-	  } else {
-        if (this._data.metadata) {
-          this._data.metadata.refresh();
-        }
-      }
-    },
-
-	metadata: function() {
-	  // video-only stuff
-	  sm._wD('video metadata: '+this.width+'x'+this.height);
-      // set the SWF dimensions to match
-	  sm.oMC.style.width = this.width+'px';	
-	  sm.oMC.style.height = this.height+'px';
-	},
-
-    whileplaying: function() {
-      var d = null;
-      if (pl.dragActive || !pl.config.useThrottling) {
-        self.updateTime.apply(this);
-  	    if (sm.flashVersion >= 9) {
-          if (pl.config.usePeakData && this.instanceOptions.usePeakData) self.updatePeaks.apply(this);
-	      if (pl.config.useWaveformData && this.instanceOptions.useWaveformData || pl.config.useEQData && this.instanceOptions.useEQData) {
-	        self.updateGraph.apply(this);
-	      }
-	    }
-        if (this._data.metadata) {
-          d = new Date();
-          if (d && d-self.lastWPExec>500) {
-            self.refreshMetadata(this);
-            self.lastWPExec = d;
-          }
-        }
-        this._data.oPosition.style.width = (((this.position/self.getDurationEstimate(this))*100)+'%');
-      } else {
-        d = new Date();
-        if (d-self.lastWPExec>500) {
-          self.updateTime.apply(this);
-	      if (sm.flashVersion >= 9) {
-            if (pl.config.usePeakData && this.instanceOptions.usePeakData) {
-	          self.updatePeaks.apply(this);
-	        }
-	        if (pl.config.useWaveformData && this.instanceOptions.useWaveformData || pl.config.useEQData && this.instanceOptions.useEQData) {
-		      self.updateGraph.apply(this);
-			}
-          }
-          if (this._data.metadata) self.refreshMetadata(this);
-          this._data.oPosition.style.width = (((this.position/self.getDurationEstimate(this))*100)+'%');
-          self.lastWPExec = d;
-        }
-      }
-    }
-	
-  } // events{}
-
-  this.setPageIcon = function(sDataURL) {
-	if (!self.config.useFavIcon || !self.config.usePeakData || !sDataURL) return false;
-    var link = document.getElementById('favicon');
-    if (!link) {
-	  link = document.createElement('link');
-	  link.id = 'favicon';
-	  link.rel = 'shortcut icon';
-	  link.type = 'image/x-bitmap';
-	  link.href = sDataURL;
-	} else {
-      link.href = sDataURL;
-    }
-    document.getElementsByTagName('head')[0].appendChild(link);
-  }
-
-  this.resetPageIcon = function() {
-	if (!self.config.useFavIcon) return false;
-    var link = document.getElementById('favicon');
-    if (link) {
-	  link.href = '/favicon.ico';
-    }
-  }
-
-  this.updatePeaks = function() {
-    var o = this._data.oPeak;
-    var oSpan = o.getElementsByTagName('span');
-    oSpan[0].style.marginTop = (13-(Math.floor(15*this.peakData.left))+'px');
-    oSpan[1].style.marginTop = (13-(Math.floor(15*this.peakData.right))+'px');
-	// highly experimental
-    if (self.config.flashVersion > 8 && self.config.useFavIcon && self.config.usePeakData) {
-	  if (!isOpera) {
-	    self.setPageIcon(self.xbmImages[parseInt(15*this.peakData.left)][parseInt(15*this.peakData.right)]);
-	  } else {
-	self.setPageIcon(self.xbmImages[1+parseInt(14*this.peakData.left)][1+parseInt(14*this.peakData.right)]);
-	  }
-	}
-  }
-  
-  this.updateGraph = function() {
-    if ((!pl.config.useWaveformData && !pl.config.useEQData) || pl.config.flashVersion<9) return false;
-    var sbC = this._data.oGraph.getElementsByTagName('div');
-    if (pl.config.useWaveformData) {
-      // raw waveform
-      var scale = 8; // Y axis (+/- this distance from 0)
-      for (var i=255; i--;) {
-        sbC[255-i].style.marginTop = (1+scale+Math.ceil(this.waveformData[i]*-scale))+'px';
-      }
-    } else {
-	  // eq spectrum
-      var offset = 9;
-      for (var i=255; i--;) {
-        sbC[255-i].style.marginTop = ((offset*2)-1+Math.ceil(this.eqData[i]*-offset))+'px';
-      }
-    }
-  }
-  
-  this.resetGraph = function() {
-    if (!pl.config.useEQData || pl.config.flashVersion<9) return false;
-    var sbC = this._data.oGraph.getElementsByTagName('div');
-    var scale = (!pl.config.useEQData?'9px':'17px');
-    var nHeight = (!pl.config.fillGraph?'1px':'32px');
-    for (var i=255; i--;) {
-      sbC[255-i].style.marginTop = scale; // EQ scale
-      sbC[255-i].style.height = nHeight;
-    }
-  }
-
-  this.refreshMetadata = function(oSound) {
-    // Display info as appropriate
-    var index = null;
-    var now = oSound.position;
-    var metadata = oSound._data.metadata.data;
-    for (var i=0, j=metadata.length; i<j; i++) {
-      if (now >= metadata[i].startTimeMS && now <= metadata[i].endTimeMS) {
-        index = i;
-        break;
-      }
-    }
-    if (index != metadata.currentItem) {
-      // update
-      oSound._data.oLink.innerHTML = metadata.mainTitle+' <span class="ezt-metadata"><span class="ezt-sm2_divider"> | </span><span class="ezt-sm2_metadata">'+metadata[index].title+'</span></span>';
-      self.setPageTitle(metadata[index].title+' | '+metadata.mainTitle);
-      metadata.currentItem = index;
-    }
-  }
-  
-  this.updateTime = function() {
-    var str = self.strings['timing'].replace('%s1',self.getTime(this.position,true));
-    str = str.replace('%s2',self.getTime(self.getDurationEstimate(this),true));
-    this._data.oTiming.innerHTML = str;
-  }
-
-  this.getTheDamnTarget = function(e) {
-    return (e.target||e.srcElement||window.event.srcElement);
-  }
-  
-  this.withinStatusBar = function(o) {
-    return (self.isChildOfClass(o,'ezt-controls'));
-  }
-
-  this.handleClick = function(e) {
-    // a sound (or something) was clicked - determine what and handle appropriately
-    if (e.button == 2) {
-      if (!pl.config.allowRightClick) pl.stopEvent(e);
-      return (pl.config.allowRightClick); // ignore right-clicks
-    }
-    var o = self.getTheDamnTarget(e);
-    if (self.dragActive) self.stopDrag(); // to be safe
-    if (self.withinStatusBar(o)) {
-      // self.handleStatusClick(e);
-      return false;
-    }
-    if (o.nodeName.toLowerCase() != 'a') {
-      o = self.getParentByNodeName(o,'a');
-    }
-    if (!o) {
-      // not a link
-      return true;
-    }
-    var sURL = o.getAttribute('href');
-    if (!o.href || (!sm.canPlayURL(o.href) || !self.hasClass(o,'ezt-playable')) || self.hasClass(o,'ezt-exclude')) {
-      if (isIE && o.onclick) {
-        return false; // IE will run this handler before .onclick(), everyone else is cool?
-      }
-      return true; // pass-thru for non-MP3/non-links
-    }
-    var soundURL = o.href;
-    var thisSound = self.getSoundByObject(o);
-    if (thisSound) {
-      // sound already exists
-      self.setPageTitle(thisSound._data.originalTitle);
-      if (thisSound == self.lastSound) {
-        // ..and was playing (or paused) and isn't in an error state
-		if (thisSound.readyState != 2) {
-		  if (thisSound.playState != 1) {
-			// not yet playing
-			thisSound.play();
-		  } else {
-            thisSound.togglePause();
-          }
-		} else {
-		  sm._writeDebug('Warning: sound failed to load (security restrictions, 404 or bad format)',2);
-		}
-      } else {
-        // ..different sound
-        if (self.lastSound) self.stopSound(self.lastSound);
-        thisSound._data.oTimingBox.appendChild(document.getElementById('ezt-spectrum-container'));
-        thisSound.togglePause(); // start playing current
-      }
-    } else {
-      // create sound
-      thisSound = sm.createSound({
-        id:'telemetaPlayerMP3Sound'+(self.soundCount++),
-        url:soundURL,
-        onplay:self.events.play,
-        onstop:self.events.stop,
-        onpause:self.events.pause,
-        onresume:self.events.resume,
-        onfinish:self.events.finish,
-        whileloading:self.events.whileloading,
-        whileplaying:self.events.whileplaying,
-		onmetadata:self.events.metadata,
-        onload:self.events.onload
-      });
-      // append control template
-      var oControls = self.oControls.cloneNode(true);
-      o.parentNode.appendChild(oControls);
-      o.parentNode.appendChild(document.getElementById('ezt-spectrum-container'));
-      self.soundsByObject[o.rel] = thisSound;
-      // tack on some custom data
-      thisSound._data = {
-        oLink: o, // DOM reference within SM2 object event handlers
-        oLI: o.parentNode,
-        oControls: self.getElementsByClassName('ezt-controls','div',o.parentNode)[0],
-        oStatus: self.getElementsByClassName('ezt-statusbar','div',o.parentNode)[0],
-        oLoading: self.getElementsByClassName('ezt-loading','div',o.parentNode)[0],
-        oPosition: self.getElementsByClassName('ezt-position','div',o.parentNode)[0],
-        oTimingBox: self.getElementsByClassName('ezt-timing','div',o.parentNode)[0],
-        oTiming: self.getElementsByClassName('ezt-timing','div',o.parentNode)[0].getElementsByTagName('div')[0],
-        oPeak: self.getElementsByClassName('ezt-peak','div',o.parentNode)[0],
-        oGraph: self.getElementsByClassName('ezt-spectrum-box','div',o.parentNode)[0],
-        nIndex: self.getSoundIndex(o),
-        className: self.css.sPlaying,
-        originalTitle: o.innerHTML,
-        metadata: null
-      };
-      thisSound._data.oTimingBox.appendChild(document.getElementById('ezt-spectrum-container'));
-      // "Metadata"
-      if (thisSound._data.oLI.getElementsByTagName('ul').length) {
-        thisSound._data.metadata = new Metadata(thisSound);
-      }
-      // set initial timer stuff (before loading)
-      var str = self.strings['timing'].replace('%s1',self.config.emptyTime);
-      str = str.replace('%s2',self.config.emptyTime);
-      thisSound._data.oTiming.innerHTML = str;
-      self.sounds.push(thisSound);
-      if (self.lastSound) self.stopSound(self.lastSound);
-      self.resetGraph.apply(thisSound);
-      thisSound.play();
-    }
-    self.lastSound = thisSound; // reference for next call
-    return self.stopEvent(e);
-  }
-  
-  this.handleMouseDown = function(e) {
-    // a sound link was clicked
-    if (e.button == 2) {
-      if (!pl.config.allowRightClick) pl.stopEvent(e);
-      return (pl.config.allowRightClick); // ignore right-clicks
-    }
-    var o = self.getTheDamnTarget(e);
-    if (!self.withinStatusBar(o)) return true;
-    self.dragActive = true;
-    self.lastSound.pause();
-    self.setPosition(e);
-    self.addEventHandler(document,'mousemove',self.handleMouseMove);
-    self.addClass(self.lastSound._data.oControls,'ezt-dragging');
-    self.stopEvent(e);
-    return false;
-  }
-  
-  this.handleMouseMove = function(e) {
-    // set position accordingly
-    if (self.dragActive) {
-      if (self.config.useThrottling) {
-        // be nice to CPU/externalInterface
-        var d = new Date();
-        if (d-self.dragExec>20) {
-          self.setPosition(e);
-        } else {
-          window.clearTimeout(self.dragTimer);
-          self.dragTimer = window.setTimeout(function(){self.setPosition(e)},20);
-        }
-        self.dragExec = d;
-      } else {
-        // oh the hell with it
-        self.setPosition(e);
-      }
-    } else {
-      self.stopDrag();
-    }
-	return false;
-  }
-  
-  this.stopDrag = function(e) {
-    if (self.dragActive) {
-      self.removeClass(self.lastSound._data.oControls,'ezt-dragging');
-      self.removeEventHandler(document,'mousemove',self.handleMouseMove);
-      // self.removeEventHandler(document,'mouseup',self.stopDrag);
-      if (!pl.hasClass(self.lastSound._data.oLI,self.css.sPaused)) {
-        self.lastSound.resume();
-      }
-      self.dragActive = false;
-      self.stopEvent(e);
-      return false;
-    }
-  }
-  
-  this.handleStatusClick = function(e) {
-    self.setPosition(e);
-    if (!pl.hasClass(self.lastSound._data.oLI,self.css.sPaused)) self.resume();
-    return self.stopEvent(e);
-  }
-  
-  this.stopEvent = function(e) {
-   if (typeof e != 'undefined' && typeof e.preventDefault != 'undefined') {
-      e.preventDefault();
-    } else if (typeof event != 'undefined' && typeof event.returnValue != 'undefined') {
-      event.returnValue = false;
-    }
-    return false;
-  }
- 
-  this.setPosition = function(e) {
-    // called from slider control
-    var oThis = self.getTheDamnTarget(e);
-    var oControl = oThis;
-    while (!self.hasClass(oControl,'ezt-controls') && oControl.parentNode) {
-      oControl = oControl.parentNode;
-    }
-    var oSound = self.lastSound;
-    var x = parseInt(e.clientX);
-    // play sound at this position
-    var nMsecOffset = Math.floor((x-self.getOffX(oControl)-4)/(oControl.offsetWidth)*self.getDurationEstimate(oSound));
-    if (!isNaN(nMsecOffset)) nMsecOffset = Math.min(nMsecOffset,oSound.duration);
-    if (!isNaN(nMsecOffset)) oSound.setPosition(nMsecOffset);
-  }
-
-  this.stopSound = function(oSound) {
-    sm._writeDebug('stopping sound: '+oSound.sID);
-    sm.stop(oSound.sID);
-    sm.unload(oSound.sID);
-  }
-
-  this.getDurationEstimate = function(oSound) {
-    if (oSound.instanceOptions.isMovieStar) {
-	  return (oSound.duration);
-    } else {
-      return (!oSound._data.metadata || !oSound._data.metadata.data.givenDuration?oSound.durationEstimate:oSound._data.metadata.data.givenDuration);
-    }
-  }
-
-  // XBM support
-
-	// xbmDraw.js XBM drawing library
-	// (c)2002 David L. Blackledge
-	// http://David.Blackledge.com
-	// Written April, 2002
-	// You may use this if you keep this copyright notice intact
-	//
-	// See http://David.Blackledge.com/XBMDrawLibrary.html
-	// Some unused functions removed, see site for complete library
-
-	function array_copy(o_array) {
-	 var ret_array = new Array();
-	 if(typeof(ret_array.concat) == "function")
-	  return ret_array.concat(o_array);
-	 for(var j = 0 ; j < o_array.length ; ++j) {
-	  ret_array[ret_array.length] = o_array[j];
-	 }
-	 return ret_array;
-	}
-
-	function XBMImage_body() {
-	 var bod = "";
-	 for(var i = 0 ; i < this.height ; ++i) {
-	  for(var j = 0 ; j < this.width/8 ; ++j) {
-	   if(typeof(this.data[i]) != "undefined" && typeof(this.data[i][j]) != "undefined") {
-	    // must be reversed to work right, apparently.
-	    var bool = 0;
-	    bool = this.data[i][j];
-	    var hex = (new Number(bool)).toString(16);
-	    if(hex.length == 1)
-	     hex = "0"+hex;
-	    bod += "0x"+hex+",";
-	   } else {
-	    bod += "0x00,";
-	   }
-	  }
-	 }
-	 if(bod.length > 0) // remove trailing comma
-	  bod = bod.substring(0,bod.length-1);
-	 return bod;
-	}
-
-	function XBMImage_draw(x,y) {
-	 if(!(x > -1 && x < this.width && y > -1 && y < this.height))
-	  return;
-	 if(typeof(this.data[y]) == "undefined")
-	   this.data[y] = new Array();
-	 var bit = x%8;
-	 var byt = (x-bit)/8;
-	 if(typeof(this.data[y][byt]) == "undefined")
-	   this.data[y][byt] = 0;
-	 this.data[y][byt] |= (0x01<<bit);
-	}
-
-	// attempt to do a fast horizontal line algorithm.
-	function XBMImage_drawHLine(x1,y1,x2) {
-	 if(!(y1 > -1 && y1 < this.height))
-	  return;
-	 if(x1 > x2){
-	  var xs = x1;x1=Math.max(0,x2);x2=Math.min(this.width,xs);
-	 }
-	 var filled = 0xFF;
-	 var startbits = x1%8;
-	 var startbyt = (x1-x1%8)/8;
-	 var endbits = 8-x2%8;
-	 var endbyt = (x2-x2%8)/8;
-	 if(startbyt == endbyt) {
-	  this.data[y1][startbyt]|=(filled <<startbits)&(filled>>endbits);
-	  return;
-	 }
-	 for(var i = startbyt+1 ; i < endbyt ; ++i) {
-	  this.data[y1][i] = filled;
-	 }
-	 for(var j=x1; j < (x1+(8-x1%8)) ; ++j)
-	  this.draw(j,y1);
-	 this.data[y1][endbyt] |= (filled >>endbits);
-	}
-	
-	function XBMImage_drawVLine(x1,y1,y2) {
-	 if(!(x1 > -1 && x1 < this.width))
-	  return;
-	 if(y1 > y2){
-	  var ys = y1;y1=Math.max(0,y2);y2=Math.min(this.height,ys);
-	 }
-	 var bit = x1%8;
-	 var byt = (x1-bit)/8;
-	 var bitmask = (0x01<<bit);
-	 for(var y = y1 ; y <= y2 ; ++y)
-	  this.data[y][byt] |= bitmask;
-	}
-	
-	function XBMImage_drawLine(x1,y1,x2,y2) {
-	 if(x1 > x2) {
-	  var xx = x1; x1 = x2; x2 = xx;
-	  var yy = y1; y1 = y2; y2 = yy;
-	 }
-	 var y = y1;
-	 if(y1 == y2)
-	   if(x1 == x2)
-		 return this.draw(x1,y1);
-	   else
-		 return this.drawHLine(x1,y1,x2);
-	 if(x1 == x2) return this.drawVLine(x1,y1,y2);
-	 var slope=(y1-y2)/(x1-x2);
-	 var yint = y1-Math.floor(slope*x1); // y-intercept
-	 for(var x = x1; x < x2; ++x) {
-	  if(slope > 0) { //y1<y2 (top to bottom)
-	   for(y = Math.floor(slope*x)+yint ; y < (Math.floor(slope*(x+1))+yint) ; ++y) {
-	    this.draw(x,y);
-	   }
-	   if(Math.floor(slope*x) == Math.floor(slope*(x+1)))
-	    this.draw(x,y);
-	   if(x==x2-1) {
-	    for(y ; y <= y2 ; ++y) {
-	     this.draw(x,y);
-	    }  
-	   }
-	  } else { //y1>y2 (bottom to top)
-	   for(y = Math.floor(slope*x)+yint ; y > (Math.floor(slope*(x+1))+yint) ; --y) {
-	    this.draw(x,y);
-	   }
-	   if(Math.floor(slope*x) == Math.floor(slope*(x+1)))
-	    this.draw(x,y);
-	   if(x==x2-1) {
-	    for(y ; y >= y2 ; --y) {
-	     this.draw(x,y);
-	    }  
-	   }
-	  }
-	 }
-	 return null;
-	}
-
-	function XBMImage_drawBoxFilled(x1,y1,x2,y2) {
-	 for(var y = y1; y <= y2; ++y)
-	  this.drawHLine(x1,y,x2);
-	}
-
-	function XBMImage_getXBM() {
-	 return this.header + this.body() + this.footer;
-	}
-
-	function XBMImage_setXBM(str){
-	 var xbmdata = str.substring(str.indexOf("{")+1,str.lastIndexOf("}"));
-	 var a_data = xbmdata.split(",");
-	 for(var j = 0 ; j < this.height ; ++j) {
-	  this.data[j] = new Array();
-	  for(var i = 0 ; i < Math.floor(this.width/8) ; ++i) {
-	   var a_idx = i+j*(Math.floor(this.width/8));
-	   if(a_idx < a_data.length)
-	    this.data[j][i] = (new Number(parseInt(a_data[a_idx],16))).valueOf();//parseInt(a_data[a_idx]);
-	  }
-	 }
-	}
-
-	function XBMImage(width,height,name) {
-	 this.name = name;
-	 this.width = width+((width%8)>0?(8-(width%8)):0); //expand to a multiple of 8
-	 this.height = height;
-	 this.header = "#define "+name+"_width "+this.width+"\n"+
-	   "#define "+name+"_height "+this.height+"\n"+
-	   "static char "+name+"_bits[] = {\n";
-	 this.footer = "};";
-	 this.data = new Array(this.height);
-	 for(var i = 0 ; i < this.data.length ; ++i) {
-	  this.data[i] = new Array(this.width);
-	  for(var j = 0 ; j < this.data[i].length ; ++j) {
-	   this.data[i][j] = 0;
-	  }
-	 }
-	 this.frames = new Array(); // store copies of this.data;
-	 this.body = XBMImage_body;
-	 this.draw = XBMImage_draw;
-	 this.drawLine = XBMImage_drawLine;
-	 this.drawHLine = XBMImage_drawHLine;
-	 this.drawVLine = XBMImage_drawVLine;
-	 this.drawBoxFilled = XBMImage_drawBoxFilled;
-	 this.getXBM = XBMImage_getXBM;
-	 this.setXBM = XBMImage_setXBM;
-	 this.xbm = this.getXBM();
-  }
-
-  this.createXBMData = function() {
-    var ico = null;
-    var i=0;
-    var j=0;
-    for (i=0; i<16; i++) {
-      self.xbmImages[i] = [];
-    }
-    for (var i=0; i<16; i++) {
-      for (j=0; j<16; j++) {
-        ico = new XBMImage(16,16,'img'+i+'x'+j);
-        ico.drawBoxFilled(0,16-i,7,16-(i-16));
-        ico.drawBoxFilled(9,16-j,16,16-(j-16));
-        // self.xbmImages[i][j] = 'data:image/x-bitmap;base64,'+Base64.encode(ico.getXBM()); // using Base64 library
-        self.xbmImages[i][j] = 'data:image/x-bitmap,'+encodeURI(ico.getXBM()); // hat tip: @p01
-      }
-    }
-  }
-
-  if (this.config.useFavIcon) {
-	if (isFirefox || isOpera) {
-	  this.createXBMData();
-	} else {
-	  // browser doesn't support doing this
-	  this.config.useFavIcon = false;
-	}
-  }
-
-  this.init = function() {
-    sm._writeDebug('TelemetaPlayer.init()');
-    var oLinks = document.getElementsByTagName('a');
-    // grab all links, look for .mp3
-    var foundItems = 0;
-    for (var i=0; i<oLinks.length; i++) {
-      if ((sm.canPlayURL(oLinks[i].href) && self.hasClass(oLinks[i],'ezt-playable')) && !self.hasClass(oLinks[i],'ezt-exclude')) {
-        oLinks[i].rel = 'telemetaPlayerMP3Sound'+i;
-        self.links[self.links.length] = oLinks[i];
-        self.addClass(oLinks[i],self.css.sDefault); // add default CSS decoration
-        foundItems++;
-      }
-    }
-    if (foundItems>0) {
-      var oTiming = document.getElementById('ezt-sm2_timing');
-      self.strings['timing'] = oTiming.innerHTML;
-      oTiming.innerHTML = '';
-      oTiming.id = '';
-      self.addEventHandler(document,'click',self.handleClick);
-      self.addEventHandler(document,'mousedown',self.handleMouseDown);
-      self.addEventHandler(document,'mouseup',self.stopDrag);
-      self.addEventHandler(window,'unload',function(){}); // force page reload when returning here via back button (Opera tries to remember old state, etc.)
-    }
-    console.log('TestTest');
-    sm._writeDebug('TelemetaPlayer.init(): Found '+foundItems+' relevant items.');
-    if (self.config.autoStart) {
-      pl.handleClick({target:pl.links[0]});
-    }
-  }
-
-var Metadata = function(oSound) {
-  var self = this;
-  var oLI = oSound._data.oLI;
-  var o = oLI.getElementsByTagName('ul')[0];
-  var oItems = o.getElementsByTagName('li');
-  var oTemplate = document.createElement('div');
-  oTemplate.innerHTML = '<span>&nbsp;</span>';
-  oTemplate.className = 'ezt-annotation';
-  var oTemplate2 = document.createElement('div');
-  oTemplate2.innerHTML = '<span>&nbsp;</span>';
-  oTemplate2.className = 'ezt-annotation ezt-alt';
-
-  var oTemplate3 = document.createElement('div');
-  oTemplate3.className = 'ezt-note';
-
-  this.totalTime = 0;
-  this.strToTime = function(sTime) {
-    var segments = sTime.split(':');
-    var seconds = 0;
-    for (var i=segments.length; i--;) {
-      seconds += parseInt(segments[i])*Math.pow(60,segments.length-1-i,10); // hours, minutes
-    }
-    return seconds;
-  }
-  this.data = [];
-  this.data.givenDuration = null;
-  this.data.currentItem = null;
-  this.data.mainTitle = oSound._data.oLink.innerHTML;
-  for (var i=0; i<oItems.length; i++) {
-    this.data[i] = {
-      o: null,
-      title: oItems[i].getElementsByTagName('p')[0].innerHTML,
-      startTime: oItems[i].getElementsByTagName('span')[0].innerHTML,
-      startSeconds: self.strToTime(oItems[i].getElementsByTagName('span')[0].innerHTML.replace(/[()]/g,'')),
-      duration: 0,
-      durationMS: null,
-      startTimeMS: null,
-      endTimeMS: null,
-      oNote: null
-    }
-  }
-  var oDuration = pl.getElementsByClassName('ezt-duration','div',oLI);
-  console.log(oDuration);
-  this.data.givenDuration = (oDuration.length?self.strToTime(oDuration[0].innerHTML)*1000:0);
-  for (i=0; i<this.data.length; i++) {
-    this.data[i].duration = parseInt(this.data[i+1]?this.data[i+1].startSeconds:(self.data.givenDuration?self.data.givenDuration:oSound.durationEstimate)/1000)-this.data[i].startSeconds;
-    this.data[i].startTimeMS = this.data[i].startSeconds*1000;
-    this.data[i].durationMS = this.data[i].duration*1000;
-    this.data[i].endTimeMS = this.data[i].startTimeMS+this.data[i].durationMS;
-    this.totalTime += this.data[i].duration;
-  }
-  // make stuff
-  this.createElements = function() {
-    var oFrag = document.createDocumentFragment();
-    var oNode = null;
-    var oNodeSpan = null;
-    var oNode2 = null;
-    for (var i=0; i<self.data.length; i++) {
-      oNode = (i%2==0?oTemplate:oTemplate2).cloneNode(true);
-      oNodeSpan = oNode.getElementsByTagName('span')[0];
-      oNode.rel = i;
-      self.data[i].o = oNode;
-      oNode2 = oTemplate3.cloneNode(true);
-      if (i%2==0) oNode2.className = 'ezt-note ezt-alt';
-      oNode2.innerHTML = this.data[i].title;
-      // evil old-skool event handlers, css:hover-only ideally would be nice excluding IE 6
-      oNode.onmouseover = self.mouseover;
-      oNode.onmouseout = self.mouseout;
-      this.data[i].oNote = oNode2;
-      oSound._data.oControls.appendChild(oNode2);
-      oFrag.appendChild(oNode);
-    }
-    self.refresh();
-    oSound._data.oStatus.appendChild(oFrag);
-  }
-
-  this.refresh = function() {
-    var offset = 0;
-    var relWidth = null;
-    var duration = (self.data.givenDuration?self.data.givenDuration:oSound.durationEstimate);
-    for (var i=0; i<self.data.length; i++) {
-      if (duration) {
-        relWidth = (((self.data[i].duration*1000)/duration)*100);
-        self.data[i].o.style.left = (offset?offset+'%':'-2px');
-        self.data[i].oNote.style.left = (offset?offset+'%':'0px');
-        offset += relWidth;
-      }
-    }
-  }
-
-  this.mouseover = function(e) {
-    self.data[this.rel].oNote.style.visibility = 'hidden';
-    self.data[this.rel].oNote.style.display = 'inline-block';
-    self.data[this.rel].oNote.style.marginLeft = -parseInt(self.data[this.rel].oNote.offsetWidth/2)+'px';
-    self.data[this.rel].oNote.style.visibility = 'visible';
-  }
-
-  this.mouseout = function() { 
-    self.data[this.rel].oNote.style.display = 'none';
-  }
-
-  // ----
-
-  this.createElements();
-  this.refresh();
-  
-} // MetaData();
-
-  this.initDOM = function() {
-    // set up graph box stuffs
-    var sb = self.getElementsByClassName('ezt-spectrum-box','div',document.documentElement)[0];
-    if (sm.flashVersion >= 9) {
-      self.addClass(self.getElementsByClassName('ezt-playlist','ul',document.documentElement)[0],self.cssBase);
-      var sbC = sb.getElementsByTagName('div')[0];
-      var oF = document.createDocumentFragment();
-      var oClone = null;
-      for (var i=256; i--;) {
-        oClone = sbC.cloneNode(false);
-        oClone.style.left = (i)+'px';
-        oF.appendChild(oClone);
-      }
-      sb.removeChild(sbC);
-      sb.appendChild(oF);
-    }
-    this.oControls = document.getElementById('ezt-control-template').cloneNode(true);
-    this.oControls.id = '';
-    this.init();
-  }
-
-}
-
diff --git a/tools/eztelemeta/design/standard/override/templates/embed/eztelemetaitem.tpl b/tools/eztelemeta/design/standard/override/templates/embed/eztelemetaitem.tpl
index e78518ac..89354689 100755
--- a/tools/eztelemeta/design/standard/override/templates/embed/eztelemetaitem.tpl
+++ b/tools/eztelemeta/design/standard/override/templates/embed/eztelemetaitem.tpl
@@ -1,22 +1,33 @@
 {eztelemetadata_set('eztelemeta_player', true)}
 <div class="view-embed">
     <div class="content-media">
-    {let attribute=$object.data_map.item}
-        Telemeta Item:
-        <dl>
-        <dt>Server:</dt><dd>{$attribute.content.url}</dd>
-        <dt>Identifier:</dt><dd>{$attribute.content.id}</dd>
-        <dt>Title:</dt><dd>{$attribute.content.title|wash}</dd>
+    {let item=$object.data_map.item.content}
+        <dl class="telemeta-item">
+            <dt class="telemeta-sound">Sound:</dt>
+            <dd class="telemeta-sound"><a href="{$item.mp3}">{$item.title|wash}</a></dd>
+
+            <dt class="telemeta-duration">Duration:</dt>
+            <dd class="telemeta-duration">
+                <span class="telemeta-position">00:00:00</span>
+                <span class="telemeta-separator"> / </span>
+                {$item.duration_str}
+            </dd>
+
+            {if $item.description }
+            <dt class="telemeta-description">Description:</dt>
+            <dd class="telemeta-description">{$item.description}</dd>
+            {/if}
+
+            {if $item.creator }
+            <dt class="telemeta-creator">Creator:</dt>
+            <dd class="telemeta-creator">{$item.creator}</dd>
+            {/if}
+
+            {if $item.rights }
+            <dt class="telemeta-rights">Legal rights:</dt>
+            <dd class="telemeta-rights">{$item.rights}</dd>
+            {/if}
         </dl>
-        <ul class="ezt-playlist">
-        <li>
-            <a class="ezt-playable" href="{$attribute.content.mp3}">{$attribute.content.title|wash}</a>
-            <div class="ezt-metadata">
-                <div class="ezt-duration">{$attribute.content.duration_str}</div>
-                <ul></ul>
-            </div>
-         </li>
-        </ul>
     {/let}
     </div>
 </div>
diff --git a/tools/eztelemeta/design/standard/stylesheets/eztelemeta.css b/tools/eztelemeta/design/standard/stylesheets/eztelemeta.css
index e69de29b..f2d9b52f 100644
--- a/tools/eztelemeta/design/standard/stylesheets/eztelemeta.css
+++ b/tools/eztelemeta/design/standard/stylesheets/eztelemeta.css
@@ -0,0 +1,25 @@
+
+.telemeta-item .telemeta-sound a {
+    display: block;
+    background: url('../images/play.png') no-repeat left;
+    padding-left: 27px;
+    padding-top: 6px;
+    height: 22px;
+}
+
+.telemeta-playing .telemeta-sound a, .telemeta-loading .telemeta-sound a {
+    background-image: url('../images/stop.png');
+}
+
+.telemeta-item .telemeta-position, .telemeta-item .telemeta-separator {
+    display: none;
+}
+
+.telemeta-playing .telemeta-position, .telemeta-playing .telemeta-separator,
+.telemeta-loading .telemeta-position, .telemeta-loading .telemeta-separator {
+    display: inline;
+}
+
+.telemeta-loading .telemeta-position {
+    text-decoration: blink;
+}
diff --git a/tools/eztelemeta/design/standard/stylesheets/page-player.css b/tools/eztelemeta/design/standard/stylesheets/page-player.css
deleted file mode 100644
index 19807644..00000000
--- a/tools/eztelemeta/design/standard/stylesheets/page-player.css
+++ /dev/null
@@ -1,764 +0,0 @@
-/*
-
- SoundManager 2: "page as playlist" example
- ------------------------------------------
-
- Clicks on links to MP3s are intercepted via JS, calls are
- made to SoundManager to load/play sounds. CSS classes are
- appended to the LI parent, which are used to highlight the
- current play state and so on.
-
- Class names are applied in addition to "ezt-link" base.
-
- Default:
-
- ezt-link
-
- Additional states:
-
- ezt-playing
- ezt-paused
-
- eg.
-
- <!-- default -->
- <li class="ezt-link"><a href="some.mp3">some.mp3</a></li>
-
- <!-- playing -->
- <li class="ezt-link ezt-playing"><a href="some.mp3">some.mp3</a></li>
-
- The script also injects an HTML template containing control bar
- and timing elements, which can also be targeted with CSS.
-
-
- Note you don't necessarily require ul.playlist for your use
- if only using one style on a page. You can just use .ezt-link
- and so on, but isolate the CSS you want.
-
- Side note: Would do multiple class definitions eg.
-
- li.ezt-default.ezt-playing{}
-
- .. except IE 6 has a parsing bug which may break behaviour,
- applying ezt-playing {} even when the class is set to ezt-default.
-
-
- If you want to make your own UI from scratch, here is the base:
-
- Default + hover state, "click to play":
-
- li.ezt-link {}
- li.ezt-link:hover {}
-
- Playing + hover state, "click to pause":
-
- li.ezt-playing {}
- li.ezt-playing:hover {}
-
- Paused + hover state, "click to resume":
-
- li.ezt-paused {}
- li.ezt-paused:hover {}
-
-*/
-
-
-/* background-image-based CSS3 example */
-
-.ezt-spectrum-container {
- display:none;
-}
-
-ul.ezt-use-spectrum li.ezt-playing .ezt-spectrum-container {
- position:absolute;
- left:0px;
- top:0px;
- margin-left:-266px;
- margin-top:-1px;
- display:block;
- background-color:#5588bb;
- border:1px solid #99ccff;
- -moz-border-radius:4px;
- -webkit-border-radius:4px;
- border-radius:4px;
-}
-
-ul.ezt-use-spectrum .ezt-spectrum-box {
- position:relative;
- width:255px;
- font-size:1em;
- padding:2px 0px;
- height:1.2em;
- overflow:hidden;
-}
-
-ul.ezt-use-spectrum .ezt-spectrum-box .ezt-spectrum {
- position:absolute;
- left:0px;
- top:-2px;
- margin-top:20px;
- display:block;
- font-size:1px;
- width:1px;
- height:1px; /* set to 50px for a thick line, 1px for a thin line, etc. */
- overflow:hidden;
- background-color:#fff;
-}
-
-ul.ezt-playlist {
- list-style-type:none;
- margin:0px;
- padding:0px;
-
-}
-
-ul.ezt-playlist li {
- /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
- position:relative;
- display:block;
- width:auto;
- font-size:2em;
- color:#666;
- padding:0.25em 0.5em 0.25em 0.5em;
- border:none;
- letter-spacing:-1px; /* ZOMG WEB X.0. ;) */
- background-color:#f9f9f9;
- -webkit-transition-property: hover;
- -webkit-transition: background-color 0.15s ease-in-out;
-}
-
-ul.ezt-playlist li a {
- display:block;
- text-decoration:none;
- font-weight:bold;
- color:#000;
- font-size:60%;
- outline:none;
- position:relative;
- z-index:2;
- text-shadow: 0 0 0 #fff; /* stupid Safari "fat" font rendering tweak */
- padding-left: 30px;
- background: url(../images/play.png) no-repeat left;
-}
-
-ul.ezt-playlist li.ezt-playing a {
- background: url(../images/pause.png) no-repeat left;
-}
-
-ul.ezt-playlist li.ezt-playing,
-ul.ezt-playlist li.ezt-paused,
-ul.ezt-playlist li.ezt-playing a {
- color:#fff;
- border-radius:3px;
- -webkit-border-radius:3px;
- -moz-border-radius:3px;
-}
-
-ul.ezt-playlist li:hover {
- background-color:#eee;
-}
-
-ul.ezt-playlist li:hover a {
- color:#333;
-}
-
-ul.ezt-playlist li.ezt-playing,
-ul.ezt-playlist li.ezt-playing:hover {
- background-color:#6699cc;
-}
-
-ul.ezt-playlist li.ezt-paused {
- background-color:#999;
-}
-
-ul.ezt-playlist li.ezt-playing:hover a,
-ul.ezt-playlist li.ezt-paused a {
- color:#fff;
-}
-
-ul.ezt-playlist li .ezt-controls {
- display:none;
-}
-
-ul.ezt-playlist li .ezt-peak,
-ul.ezt-playlist.ezt-use-peak li .ezt-peak {
- display:none;
- position:absolute;
- top:0.55em;
- right:0.5em;
-}
-
-ul.ezt-playlist li.ezt-playing .ezt-controls,
-ul.ezt-playlist li.ezt-paused .ezt-controls {
- position:relative;
- display:block;
-}
-
-ul.ezt-playlist.ezt-use-peak li.ezt-playing .ezt-peak,
-ul.ezt-playlist.ezt-use-peak li.ezt-paused .ezt-peak {
- display:inline;
- display:inline-block;
-}
-
-ul.ezt-playlist.ezt-use-peak li .ezt-peak {
- display:none; /* IE 7 */
-}
-
-ul.ezt-playlist li.ezt-paused .ezt-controls {
- background-color:#666;
-}
-
-ul.ezt-playlist li:hover .ezt-controls .ezt-statusbar {
- position:relative;
- cursor:ew-resize;
- cursor:-moz-grab;
- cursor:grab;
-}
-
-ul.ezt-playlist li.ezt-paused .ezt-controls .ezt-statusbar {
- background-color:#ccc;
-}
-
-ul.ezt-playlist li .ezt-controls {
- position:relative;
- margin-top:0.25em;
- margin-bottom:0.25em;
- background-color:#99ccff;
-}
-
-ul.ezt-playlist li .ezt-controls .ezt-statusbar {
- position:relative;
- height:0.5em;
- background-color:#ccddff;
- border:2px solid #fff;
- border-radius:2px;
- -moz-border-radius:2px;
- -webkit-border-radius:2px;
- overflow:hidden;
- cursor:-moz-grab;
- cursor:grab;
-}
-
-ul.ezt-playlist li .ezt-controls.ezt-dragging .ezt-statusbar {
- cursor:-moz-grabbing;
- cursor:grabbing;
-}
-
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-position,
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-loading,
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation {
- position:absolute;
- left:0px;
- top:0px;
- height:0.5em;
-}
-
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-position {
- background-color:#336699;
- border-right:3px solid #336699;
- border-radius:3px;
- -moz-border-radius:3px;
- -webkit-border-radius:3px;
-}
-
-ul.ezt-playlist li.ezt-paused .ezt-controls .ezt-statusbar .ezt-position {
- background-color:#666;
- border-color:#666;
-}
-
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-loading {
- background-color:#eee;
-}
-
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-position,
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-loading {
- width:0px;
-}
-
-ul.ezt-playlist li.ezt-playing a.ezt-link,
-ul.ezt-playlist li.ezt-paused a.ezt-link {
- margin-right:8.5em; /* room for timing stuff */
-}
-
-ul.ezt-playlist li .ezt-timing {
- position:absolute;
- display:none;
- text-align:right;
- right:1em;
- top:1em;
- width:auto;
- height:1em;
- /*
- padding:4px 5px 2px 5px;
- *padding:3px 5px 3px 5px;
- */
- padding:3px 5px;
- background-color:#5588bb;
- border:1px solid #99ccff;
- -moz-border-radius:4px;
- -khtml-border-radius:4px;
- border-radius:4px;
- letter-spacing:0px;
- font:44% monaco,"VT-100",terminal,"lucida console",courier,system;
- line-height:1em;
- vertical-align:middle;
-}
-
-ul.ezt-playlist.ezt-use-peak li .ezt-timing {
- right:4.25em;
-}
-
-ul.ezt-playlist li:hover .ezt-timing {
- z-index:2;
-}
-
-ul.ezt-playlist li .ezt-timing div.ezt-sm2_timing {
- margin:0px;
- padding:0px;
- margin-top:-1em;
- text-shadow: 0 0 0 #fff; /* stupid Safari "fat" font rendering tweak */
-}
-
-ul.ezt-playlist li.ezt-playing .ezt-timing,
-ul.ezt-playlist li.ezt-paused .ezt-timing {
- display:block;
-}
-
-ul.ezt-playlist li.ezt-paused .ezt-timing .ezt-sm2_position {
- text-decoration:blink; /* hee hee. first actual appropriate use? :D */
-}
-
-ul.ezt-playlist li.ezt-paused .ezt-timing,
-ul.ezt-playlist.ezt-use-peak li.ezt-paused .ezt-peak {
- background-color:#888;
- border-color:#ccc;
-}
-
-/* peak data */
-
-/* ul.ezt-playlist ... */
-
-ul.ezt-playlist.ezt-use-peak li .ezt-peak {
- display:none;
- zoom:1;
- border:1px solid #99ccff;
- padding:2px;
- height:0.55em;
- -moz-border-radius:4px;
- -khtml-border-radius:4px;
- border-radius:4px;
- background-color:#5588bb;
- width:0.8em;
- height:0.55em;
- margin-top:-3px;
-}
-
-ul.ezt-playlist.ezt-use-peak li .ezt-peak-box {
- position:relative;
- width:100%;
- height:0.55em;
- overflow:hidden;
-}
-
-ul.ezt-playlist li .ezt-peak .ezt-l,
-ul.ezt-playlist li .ezt-peak .ezt-r {
- position:absolute;
- left:0px;
- top:0px;
- width:7px;
- height:50px;
- background:#fff;
- border:1px solid #fff;
- -moz-border-radius:1px;
- -khtml-border-radius:1px;
- margin-top:1em;
-}
-
-ul.ezt-playlist li .ezt-peak .ezt-l {
- margin-right:1px;
-}
-
-ul.ezt-playlist li .ezt-peak .ezt-r {
- left:10px;
-}
-
-#control-template {
- display:none;
-}
-
-/*
- ------------------------------------------
- -- annotations (sub-tracks, notes etc.) --
- ------------------------------------------
-*/
-
-ul.ezt-playlist li a.ezt-link .ezt-metadata {
- display:none; /* hide by default */
-}
-
-ul.ezt-playlist li.ezt-paused a.ezt-link .ezt-metadata,
-ul.ezt-playlist li.ezt-playing a.ezt-link .ezt-metadata {
- display:inline;
-}
-
-ul.ezt-playlist li ul {
- list-style-type:none;
- margin:0px;
- padding:0px;
- position:relative;
- font-size:small;
- display:none;
-}
-
-ul.ezt-playlist li ul li {
- position:relative;
- margin:0px;
- padding:2px 3px;
- border:1px solid transparent;
- -moz-border-radius:6px;
- -khtml-border-radius:6px;
- border-radius:6px;
- margin-right:1em;
- font-family:helvetica,verdana,tahoma,arial,"sans serif";
- font-size:x-small;
- font-weight:lighter;
- letter-spacing:0px;
- background-color:transparent;
- opacity:0.66;
-}
-
-ul.ezt-playlist li ul li:hover {
- opacity:1;
- background-color:#fff;
- border-color:#ccc;
- color:#666;
-}
-
-ul.ezt-playlist li.ezt-playing ul li,
-ul.ezt-playlist li.ezt-paused ul li {
- color:#fff;
-}
-
-ul.ezt-playlist li.ezt-playing ul li:hover {
- background-color:#fff;
- color:#5588bb;
- border-color:#336699;
- opacity:0.9;
-}
-
-ul.ezt-playlist li.ezt-paused ul li:hover {
- background-color:#888;
-}
-
-/* metadata */
-
-ul.ezt-playlist li .ezt-metadata .ezt-duration {
- /* optional timing data */
- display:none;
-}
-
-ul.ezt-playlist li .ezt-metadata ul li p {
- margin:0px;
- padding:0px;
-}
-
-ul.ezt-playlist li .ezt-metadata ul li span {
- display:none;
-}
-
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation {
- position:absolute;
- background-color:transparent;
- top:0px;
- color:#666;
- text-align:right;
- margin-left:10px;
- height:0.5em;
-}
-
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation:hover {
- z-index:12; /* sit on top of note */
-}
-
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation span.ezt-bubble {
- /* using &middot; */
- display:inline-block;
- background-color:#fff;
- border:1px solid #666;
- border-radius:6px;
- -moz-border-radius:6px;
- -webkit-border-radius:6px;
-}
-
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation span {
- display:block;
- background:transparent url(../image/divot.ezt-png) no-repeat 50% 0px;
- width:15px;
- margin-left:-15px;
- height:12px;
- text-align:center;
-}
-
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation.ezt-alt {
- top:auto;
- bottom:0px;
-}
-
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation span:hover {
- cursor:none; /* Fx3 rules. */
- margin-top:0.1em;
-}
-
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation.ezt-alt span:hover {
- margin-top:-0.1em;
-}
-
-ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation.ezt-alt span {
- background:transparent url(../image/divot-bottom.ezt-png) no-repeat 50% bottom;
-}
-
-ul.ezt-playlist li .ezt-note {
- position:absolute;
- display:none;
- left:0px;
- top:0px;
- z-index:10;
- font-size:x-small;
- padding:2px 4px 2px 4px;
- width:auto;
- color:#666;
- background-color:#fff;
- border:1px solid #ccc;
- border-radius:6px;
- -moz-border-radius:6px;
- -webkit-border-radius:6px;
- font-style:normal;
- font-weight:bold;
- font-family:arial,tahoma,verdana,"sans serif";
- letter-spacing:0px;
- margin-top:1.1em;
-}
-
-ul.ezt-playlist li .ezt-note.ezt-alt {
- margin-top:-1.32em;
-}
-
-ul.ezt-playlist li .ezt-note:hover {
- display:block !important;
-}
-
-ul.ezt-playlist li .ezt-sm2_divider {
- font-size:0.75em;
-}
-
-ul.ezt-playlist li .ezt-sm2_metadata {
- font-size:0.65em;
-}
-
-
-/* 
- ---------------------------------
- -- alternate (optional) themes --
- ---------------------------------
-*/
-
-ul.ezt-playlist.ezt-dark li.ezt-playing a {
- color:#fff;
-}
-
-ul.ezt-playlist.ezt-dark li.ezt-playing .ezt-timing,
-ul.ezt-playlist.ezt-use-peak.ezt-dark li.ezt-playing .ezt-peak {
- color:#999;
-}
-
-ul.ezt-playlist.ezt-use-spectrum.ezt-dark li.ezt-playing .ezt-spectrum-container {
- background-color:#222;
- border-color:#444;
-}
-
-ul.ezt-playlist.ezt-use-spectrum.ezt-dark li.ezt-playing .ezt-spectrum-container .ezt-spectrum {
- background-color:#999;
-}
-
-ul.ezt-playlist.ezt-dark li.ezt-paused {
- background-color:#333;
-}
-
-ul.ezt-playlist.ezt-dark li.ezt-paused a {
- color:#999;
-}
-
-ul.ezt-playlist.ezt-dark li.ezt-playing,
-ul.ezt-playlist.ezt-dark li.ezt-playing:hover {
- background-color:#333;
-}
-
-ul.ezt-playlist.ezt-dark li:hover .ezt-controls .ezt-statusbar {
- background-color:#666;
-}
-
-ul.ezt-playlist.ezt-dark li .ezt-controls {
- background-color:#333;
-}
-
-ul.ezt-playlist.ezt-dark li .ezt-controls .ezt-statusbar {
- background-color:#666;
- border-color:#444;
-}
-
-ul.ezt-playlist.ezt-dark li .ezt-controls .ezt-statusbar .ezt-position {
- background-color:#111;
- border-right:3px solid #111;
- border-radius:3px;
- -moz-border-radius:3px;
- -webkit-border-radius:3px;
-}
-
-ul.ezt-playlist.ezt-dark li .ezt-controls .ezt-statusbar .ezt-loading {
- background-color:#444;
-}
-
-ul.ezt-playlist.ezt-dark li .ezt-timing,
-ul.ezt-playlist.ezt-use-peak.ezt-dark li .ezt-peak {
- background-color:#222;
- border-color:#444;
-}
-
-ul.ezt-playlist.ezt-dark.ezt-use-peak li .ezt-peak .ezt-l,
-ul.ezt-playlist.ezt-dark.ezt-use-peak li .ezt-peak .ezt-r {
- border-color:#444;
- background-color:#999;
-}
-
-
-/* gold theme */
-
-ul.ezt-playlist.ezt-gold li.ezt-paused {
- background-color:#996600;
-}
-
-ul.ezt-playlist.ezt-gold li.ezt-playing,
-ul.ezt-playlist.ezt-gold li.ezt-playing:hover {
- background-color:#cc9900;
-}
-
-ul.ezt-playlist.ezt-gold li .ezt-controls {
- background-color:transparent;
-}
-
-ul.ezt-playlist.ezt-gold li .ezt-controls .ezt-statusbar {
- background-color:#fff;
- border-color:#fff;
-}
-
-ul.ezt-playlist.ezt-gold li .ezt-controls .ezt-statusbar .ezt-position {
- background-color:#996600;
- border-right:3px solid #996600;
- border-radius:3px;
- -moz-border-radius:3px;
- -webkit-border-radius:3px;
-}
-
-ul.ezt-playlist.ezt-gold li .ezt-controls .ezt-statusbar .ezt-loading {
- background-color:#ffeedd;
-}
-
-ul.ezt-playlist.ezt-gold li .ezt-timing,
-ul.ezt-playlist.ezt-use-peak.ezt-gold li .ezt-peak {
- background-color:#CC9900;
- border-color:#ffcc33;
-}
-
-ul.ezt-playlist.ezt-use-spectrum.ezt-gold li.ezt-playing .ezt-spectrum-container {
- background-color:#cc9900;
- border-color:#ffcc33;
-}
-
-ul.ezt-playlist.ezt-use-spectrum.ezt-gold li.ezt-playing .ezt-spectrum-container .ezt-spectrum {
- background-color:#fff;
-}
-
-ul.ezt-playlist.ezt-gold.ezt-use-peak li .ezt-peak .ezt-l,
-ul.ezt-playlist.ezt-gold.ezt-use-peak li .ezt-peak .ezt-r {
- border-color:#fff;
- background-color:#fff;
-}
-
-
-/* ZOMG PONIES!!!ONEONEONE */
-
-ul.ezt-playlist.ezt-bubblegum li a {
- font-family:"comic sans ms",verdana,arial,tahoma,"sans serif"; /* heh */
-}
-
-ul.ezt-playlist.ezt-bubblegum li.ezt-paused,
-ul.ezt-playlist.ezt-bubblegum li.ezt-paused:hover {
- background-color:#ffccee;
-}
-
-ul.ezt-playlist.ezt-bubblegum li.ezt-paused a,
-ul.ezt-playlist.ezt-bubblegum li.ezt-paused:hover a,
-ul.ezt-playlist.ezt-bubblegum li.ezt-paused .ezt-timing,
-ul.ezt-playlist.ezt-use-peak.ezt-bubblegum li.ezt-paused .ezt-peak {
- color:#ff6699;
-}
-
-ul.ezt-playlist.ezt-bubblegum li:hover {
- background-color:#ffddee;
-}
-
-ul.ezt-playlist.ezt-bubblegum li.ezt-playing,
-ul.ezt-playlist.ezt-bubblegum li.ezt-playing:hover {
- background-color:#ff7799;
-}
-
-ul.ezt-playlist.ezt-bubblegum li .ezt-controls {
- background-color:transparent;
-}
-
-ul.ezt-playlist.ezt-bubblegum li .ezt-controls .ezt-statusbar {
- background-color:#fff;
- border-color:#fff;
-}
-
-ul.ezt-playlist.ezt-bubblegum li .ezt-controls .ezt-statusbar .ezt-position {
- background-color:#ffaacc;
- border-right:3px solid #ffaacc;
- border-radius:3px;
- -moz-border-radius:3px;
- -webkit-border-radius:3px;
-}
-
-ul.ezt-playlist.ezt-bubblegum li .ezt-controls .ezt-statusbar .ezt-loading {
- background-color:#ffeedd;
-}
-
-ul.ezt-playlist.ezt-bubblegum li .ezt-timing,
-ul.ezt-playlist.ezt-use-peak.ezt-bubblegum li .ezt-peak {
- background-color:#ffaacc;
- border-color:#ffccee;
-}
-
-ul.ezt-playlist.ezt-use-spectrum.ezt-bubblegum li.ezt-playing .ezt-spectrum-container {
- background-color:#ffaacc;
- border-color:#ffccee;
-}
-
-ul.ezt-playlist.ezt-use-spectrum.ezt-bubblegum li.ezt-playing .ezt-spectrum-container .ezt-spectrum {
- background-color:#fff;
-}
-
-ul.ezt-playlist.ezt-bubblegum.ezt-use-peak li .ezt-peak .ezt-l,
-ul.ezt-playlist.ezt-bubblegum.ezt-use-peak li .ezt-peak .ezt-r {
- border-color:#fff;
- background-color:#fff;
-}
-
-
-ul.ezt-playlist.ezt-shiny li.ezt-paused,
-ul.ezt-playlist.ezt-shiny li.ezt-playing {
- background-image:url(../image/top-highlight.ezt-png);
- background-repeat:repeat-x;
- background-position:0px -1px;
- _background-image:none; /* can't be bothered with IE 6. */
-}
diff --git a/tools/eztelemeta/design/standard/templates/eztelemeta_foot.tpl b/tools/eztelemeta/design/standard/templates/eztelemeta_foot.tpl
deleted file mode 100644
index 34cb6b97..00000000
--- a/tools/eztelemeta/design/standard/templates/eztelemeta_foot.tpl
+++ /dev/null
@@ -1,25 +0,0 @@
-{if is_set( $module_result.content_info.persistent_variable.eztelemeta_player )}
-   <div id="ezt-control-template">
-    <!-- control markup inserted dynamically after each link -->
-    <div class="ezt-controls">
-     <div class="ezt-statusbar">
-      <div class="ezt-loading"></div>
-       <div class="ezt-position"></div>
-     </div>
-    </div>
-    <div class="ezt-timing">
-     <div id="ezt-sm2_timing" class="ezt-timing-data">
-      <span class="ezt-sm2_position">%s1</span> / <span class="ezt-sm2_total">%s2</span></div>
-    </div>
-    <div class="ezt-peak">
-     <div class="ezt-peak-box"><span class="ezt-l"></span><span class="ezt-r"></span>
-     </div>
-    </div>
-   </div>
-
-   <div id="ezt-spectrum-container" class="ezt-spectrum-container">
-    <div class="ezt-spectrum-box">
-     <div class="ezt-spectrum"></div>
-    </div>
-   </div>
-{/if}
diff --git a/tools/eztelemeta/design/standard/templates/eztelemeta_head.tpl b/tools/eztelemeta/design/standard/templates/eztelemeta_head.tpl
index c0e39491..3bb5fef3 100644
--- a/tools/eztelemeta/design/standard/templates/eztelemeta_head.tpl
+++ b/tools/eztelemeta/design/standard/templates/eztelemeta_head.tpl
@@ -1,29 +1,18 @@
 {if is_set( $module_result.content_info.persistent_variable.eztelemeta_player )}
 <style type="text/css">
   @import url({"stylesheets/eztelemeta.css"|ezdesign});
-  @import url({"stylesheets/page-player.css"|ezdesign});
 </style>
-  <script language="JavaScript" type="text/javascript" src={"javascript/soundmanager2.js"|ezdesign}></script>
-  <script language="JavaScript" type="text/javascript" src={"javascript/page-player.js"|ezdesign}></script>
+  <script language="JavaScript" type="text/javascript" src={"javascript/soundmanager2-nodebug-jsmin.js"|ezdesign}></script>
+  <script language="JavaScript" type="text/javascript" src={"javascript/eztelemeta-player.js"|ezdesign}></script>
   <script language="JavaScript" type="text/javascript">
     /* SoundManager2 configuration */
-    soundManager.debugMode = true;
     soundManager.url = {'swf/'|ezdesign};
 
-    /* Player configuration and instantiation */
-    {literal}
-    var telemetaPlayer = new TelemetaPlayer({
-        flashVersion:     9,
-        usePeakData:      true,
-        useWaveformData:  false,
-        useEQData:        false,
-        useFavIcon:       false,
-        useMovieStar:     false,
-        updatePageTitle:  false
-    });
+    telemetaPlayer = new TelemetaPlayer();
 
+    {literal}
     soundManager.onload = function() {
-        telemetaPlayer.initDOM();
+        telemetaPlayer.setSoundManager(soundManager);
     }
     {/literal}
   </script>