From: olivier <>
Date: Mon, 13 Apr 2009 13:58:46 +0000 (+0000)
Subject: eztelemeta: namespace css classes with 'ezt-', move player control template into... 
X-Git-Tag: 1.1~675
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=3919716685c4fa41bacde568a6729b1718d8c7dd;p=telemeta.git

eztelemeta: namespace css classes with 'ezt-', move player control template into separate file
---

diff --git a/tools/eztelemeta/design/standard/javascript/page-player.js b/tools/eztelemeta/design/standard/javascript/page-player.js
index 43fe008e..6ee62570 100644
--- a/tools/eztelemeta/design/standard/javascript/page-player.js
+++ b/tools/eztelemeta/design/standard/javascript/page-player.js
@@ -61,16 +61,16 @@ function PagePlayer(oConfigOverride) {
   }
 
   this.css = {             // CSS class names appended to link during various states
-    sDefault: 'sm2_link',  // default state
-    sLoading: 'sm2_loading',
-    sPlaying: 'sm2_playing',
-    sPaused: 'sm2_paused'
+    sDefault: 'ezt-sm2_link',  // default state
+    sLoading: 'ezt-sm2_loading',
+    sPlaying: 'ezt-sm2_playing',
+    sPaused: 'ezt-sm2_paused'
   }
 
   // apply externally-defined override, if applicable
   this.cssBase = []; // optional features added to ul.playlist
-  if (this.config.usePeakData) this.cssBase.push('use-peak');
-  if (this.config.useWaveformData || this.config.useEQData) this.cssBase.push('use-spectrum');
+  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
@@ -415,7 +415,7 @@ function PagePlayer(oConfigOverride) {
     }
     if (index != metadata.currentItem) {
       // update
-      oSound._data.oLink.innerHTML = metadata.mainTitle+' <span class="metadata"><span class="sm2_divider"> | </span><span class="sm2_metadata">'+metadata[index].title+'</span></span>';
+      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;
     }
@@ -432,7 +432,7 @@ function PagePlayer(oConfigOverride) {
   }
   
   this.withinStatusBar = function(o) {
-    return (self.isChildOfClass(o,'controls'));
+    return (self.isChildOfClass(o,'ezt-controls'));
   }
 
   this.handleClick = function(e) {
@@ -455,7 +455,7 @@ function PagePlayer(oConfigOverride) {
       return true;
     }
     var sURL = o.getAttribute('href');
-    if (!o.href || (!sm.canPlayURL(o.href) || !self.hasClass(o,'playable')) || self.hasClass(o,'exclude')) {
+    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?
       }
@@ -481,7 +481,7 @@ function PagePlayer(oConfigOverride) {
       } else {
         // ..different sound
         if (self.lastSound) self.stopSound(self.lastSound);
-        thisSound._data.oTimingBox.appendChild(document.getElementById('spectrum-container'));
+        thisSound._data.oTimingBox.appendChild(document.getElementById('ezt-spectrum-container'));
         thisSound.togglePause(); // start playing current
       }
     } else {
@@ -502,26 +502,26 @@ function PagePlayer(oConfigOverride) {
       // append control template
       var oControls = self.oControls.cloneNode(true);
       o.parentNode.appendChild(oControls);
-      o.parentNode.appendChild(document.getElementById('spectrum-container'));
+      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('controls','div',o.parentNode)[0],
-        oStatus: self.getElementsByClassName('statusbar','div',o.parentNode)[0],
-        oLoading: self.getElementsByClassName('loading','div',o.parentNode)[0],
-        oPosition: self.getElementsByClassName('position','div',o.parentNode)[0],
-        oTimingBox: self.getElementsByClassName('timing','div',o.parentNode)[0],
-        oTiming: self.getElementsByClassName('timing','div',o.parentNode)[0].getElementsByTagName('div')[0],
-        oPeak: self.getElementsByClassName('peak','div',o.parentNode)[0],
-        oGraph: self.getElementsByClassName('spectrum-box','div',o.parentNode)[0],
+        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('spectrum-container'));
+      thisSound._data.oTimingBox.appendChild(document.getElementById('ezt-spectrum-container'));
       // "Metadata"
       if (thisSound._data.oLI.getElementsByTagName('ul').length) {
         thisSound._data.metadata = new Metadata(thisSound);
@@ -551,7 +551,7 @@ function PagePlayer(oConfigOverride) {
     self.lastSound.pause();
     self.setPosition(e);
     self.addEventHandler(document,'mousemove',self.handleMouseMove);
-    self.addClass(self.lastSound._data.oControls,'dragging');
+    self.addClass(self.lastSound._data.oControls,'ezt-dragging');
     self.stopEvent(e);
     return false;
   }
@@ -581,7 +581,7 @@ function PagePlayer(oConfigOverride) {
   
   this.stopDrag = function(e) {
     if (self.dragActive) {
-      self.removeClass(self.lastSound._data.oControls,'dragging');
+      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)) {
@@ -612,7 +612,7 @@ function PagePlayer(oConfigOverride) {
     // called from slider control
     var oThis = self.getTheDamnTarget(e);
     var oControl = oThis;
-    while (!self.hasClass(oControl,'controls') && oControl.parentNode) {
+    while (!self.hasClass(oControl,'ezt-controls') && oControl.parentNode) {
       oControl = oControl.parentNode;
     }
     var oSound = self.lastSound;
@@ -853,7 +853,7 @@ function PagePlayer(oConfigOverride) {
     // 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],'playable')) && !self.hasClass(oLinks[i],'exclude')) {
+      if ((sm.canPlayURL(oLinks[i].href) && self.hasClass(oLinks[i],'ezt-playable')) && !self.hasClass(oLinks[i],'ezt-exclude')) {
         oLinks[i].rel = 'pagePlayerMP3Sound'+i;
         self.links[self.links.length] = oLinks[i];
         self.addClass(oLinks[i],self.css.sDefault); // add default CSS decoration
@@ -861,7 +861,7 @@ function PagePlayer(oConfigOverride) {
       }
     }
     if (foundItems>0) {
-      var oTiming = document.getElementById('sm2_timing');
+      var oTiming = document.getElementById('ezt-sm2_timing');
       self.strings['timing'] = oTiming.innerHTML;
       oTiming.innerHTML = '';
       oTiming.id = '';
@@ -870,6 +870,7 @@ function PagePlayer(oConfigOverride) {
       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('pagePlayer.init(): Found '+foundItems+' relevant items.');
     if (self.config.autoStart) {
       pl.handleClick({target:pl.links[0]});
@@ -883,13 +884,13 @@ var Metadata = function(oSound) {
   var oItems = o.getElementsByTagName('li');
   var oTemplate = document.createElement('div');
   oTemplate.innerHTML = '<span>&nbsp;</span>';
-  oTemplate.className = 'annotation';
+  oTemplate.className = 'ezt-annotation';
   var oTemplate2 = document.createElement('div');
   oTemplate2.innerHTML = '<span>&nbsp;</span>';
-  oTemplate2.className = 'annotation alt';
+  oTemplate2.className = 'ezt-annotation ezt-alt';
 
   var oTemplate3 = document.createElement('div');
-  oTemplate3.className = 'note';
+  oTemplate3.className = 'ezt-note';
 
   this.totalTime = 0;
   this.strToTime = function(sTime) {
@@ -917,7 +918,7 @@ var Metadata = function(oSound) {
       oNote: null
     }
   }
-  var oDuration = pl.getElementsByClassName('duration','div',oLI);
+  var oDuration = pl.getElementsByClassName('ezt-duration','div',oLI);
   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;
@@ -938,7 +939,7 @@ var Metadata = function(oSound) {
       oNode.rel = i;
       self.data[i].o = oNode;
       oNode2 = oTemplate3.cloneNode(true);
-      if (i%2==0) oNode2.className = 'note alt';
+      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;
@@ -985,9 +986,9 @@ var Metadata = function(oSound) {
 
   this.initDOM = function() {
     // set up graph box stuffs
-    var sb = self.getElementsByClassName('spectrum-box','div',document.documentElement)[0];
+    var sb = self.getElementsByClassName('ezt-spectrum-box','div',document.documentElement)[0];
     if (sm.flashVersion >= 9) {
-      self.addClass(self.getElementsByClassName('playlist','ul',document.documentElement)[0],self.cssBase);
+      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;
@@ -999,7 +1000,7 @@ var Metadata = function(oSound) {
       sb.removeChild(sbC);
       sb.appendChild(oF);
     }
-    this.oControls = document.getElementById('control-template').cloneNode(true);
+    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 ee7b9067..452951df 100755
--- a/tools/eztelemeta/design/standard/override/templates/embed/eztelemetaitem.tpl
+++ b/tools/eztelemeta/design/standard/override/templates/embed/eztelemetaitem.tpl
@@ -8,33 +8,10 @@
         <dt>Identifier:</dt><dd>{$attribute.content.id}</dd>
         <dt>Title:</dt><dd>{$attribute.content.title|wash}</dd>
         </dl>
-        <ul class="playlist">
-        <li><a class="playable" href="{$attribute.content.mp3}">{$attribute.content.title|wash}</a></li>
+        <ul class="ezt-playlist">
+        <li><a class="ezt-playable" href="{$attribute.content.mp3}">{$attribute.content.title|wash}</a></li>
         </ul>
     {/let}
     </div>
-     <div id="control-template">
-      <!-- control markup inserted dynamically after each link -->
-      <div class="controls">
-       <div class="statusbar">
-        <div class="loading"></div>
-         <div class="position"></div>
-       </div>
-      </div>
-      <div class="timing">
-       <div id="sm2_timing" class="timing-data">
-        <span class="sm2_position">%s1</span> / <span class="sm2_total">%s2</span></div>
-      </div>
-      <div class="peak">
-       <div class="peak-box"><span class="l"></span><span class="r"></span>
-       </div>
-      </div>
-     </div>
-
-     <div id="spectrum-container" class="spectrum-container">
-      <div class="spectrum-box">
-       <div class="spectrum"></div>
-      </div>
-     </div>
 </div>
 
diff --git a/tools/eztelemeta/design/standard/stylesheets/page-player.css b/tools/eztelemeta/design/standard/stylesheets/page-player.css
index 92b7a9df..10ec2c6f 100644
--- a/tools/eztelemeta/design/standard/stylesheets/page-player.css
+++ b/tools/eztelemeta/design/standard/stylesheets/page-player.css
@@ -65,11 +65,11 @@
 
 /* background-image-based CSS3 example */
 
-.spectrum-container {
+.ezt-spectrum-container {
  display:none;
 }
 
-ul.use-spectrum li.sm2_playing .spectrum-container {
+ul.ezt-use-spectrum li.ezt-sm2_playing .ezt-spectrum-container {
  position:absolute;
  left:0px;
  top:0px;
@@ -83,7 +83,7 @@ ul.use-spectrum li.sm2_playing .spectrum-container {
  border-radius:4px;
 }
 
-ul.use-spectrum .spectrum-box {
+ul.ezt-use-spectrum .ezt-spectrum-box {
  position:relative;
  width:255px;
  font-size:1em;
@@ -92,7 +92,7 @@ ul.use-spectrum .spectrum-box {
  overflow:hidden;
 }
 
-ul.use-spectrum .spectrum-box .spectrum {
+ul.ezt-use-spectrum .ezt-spectrum-box .ezt-spectrum {
  position:absolute;
  left:0px;
  top:-2px;
@@ -105,14 +105,14 @@ ul.use-spectrum .spectrum-box .spectrum {
  background-color:#fff;
 }
 
-ul.playlist {
+ul.ezt-playlist {
  list-style-type:none;
  margin:0px;
  padding:0px;
 
 }
 
-ul.playlist li {
+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;
@@ -127,7 +127,7 @@ ul.playlist li {
  -webkit-transition: background-color 0.15s ease-in-out;
 }
 
-ul.playlist li a {
+ul.ezt-playlist li a {
  display:block;
  text-decoration:none;
  font-weight:normal;
@@ -139,88 +139,88 @@ ul.playlist li a {
  text-shadow: 0 0 0 #fff; /* stupid Safari "fat" font rendering tweak */
 }
 
-ul.playlist li.sm2_playing,
-ul.playlist li.sm2_paused,
-ul.playlist li.sm2_playing a {
+ul.ezt-playlist li.ezt-sm2_playing,
+ul.ezt-playlist li.ezt-sm2_paused,
+ul.ezt-playlist li.ezt-sm2_playing a {
  color:#fff;
  border-radius:3px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
 }
 
-ul.playlist li:hover {
+ul.ezt-playlist li:hover {
  background-color:#eee;
 }
 
-ul.playlist li:hover a {
+ul.ezt-playlist li:hover a {
  color:#333;
 }
 
-ul.playlist li.sm2_playing,
-ul.playlist li.sm2_playing:hover {
+ul.ezt-playlist li.ezt-sm2_playing,
+ul.ezt-playlist li.ezt-sm2_playing:hover {
  background-color:#6699cc;
 }
 
-ul.playlist li.sm2_paused {
+ul.ezt-playlist li.ezt-sm2_paused {
  background-color:#999;
 }
 
-ul.playlist li.sm2_playing:hover a,
-ul.playlist li.sm2_paused a {
+ul.ezt-playlist li.ezt-sm2_playing:hover a,
+ul.ezt-playlist li.ezt-sm2_paused a {
  color:#fff;
 }
 
-ul.playlist li .controls {
+ul.ezt-playlist li .ezt-controls {
  display:none;
 }
 
-ul.playlist li .peak,
-ul.playlist.use-peak li .peak {
+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.playlist li.sm2_playing .controls,
-ul.playlist li.sm2_paused .controls {
+ul.ezt-playlist li.ezt-sm2_playing .ezt-controls,
+ul.ezt-playlist li.ezt-sm2_paused .ezt-controls {
  position:relative;
  display:block;
 }
 
-ul.playlist.use-peak li.sm2_playing .peak,
-ul.playlist.use-peak li.sm2_paused .peak {
+ul.ezt-playlist.ezt-use-peak li.ezt-sm2_playing .ezt-peak,
+ul.ezt-playlist.ezt-use-peak li.ezt-sm2_paused .ezt-peak {
  display:inline;
  display:inline-block;
 }
 
-ul.playlist.use-peak li .peak {
+ul.ezt-playlist.ezt-use-peak li .ezt-peak {
  display:none; /* IE 7 */
 }
 
-ul.playlist li.sm2_paused .controls {
+ul.ezt-playlist li.ezt-sm2_paused .ezt-controls {
  background-color:#666;
 }
 
-ul.playlist li:hover .controls .statusbar {
+ul.ezt-playlist li:hover .ezt-controls .ezt-statusbar {
  position:relative;
  cursor:ew-resize;
  cursor:-moz-grab;
  cursor:grab;
 }
 
-ul.playlist li.sm2_paused .controls .statusbar {
+ul.ezt-playlist li.ezt-sm2_paused .ezt-controls .ezt-statusbar {
  background-color:#ccc;
 }
 
-ul.playlist li .controls {
+ul.ezt-playlist li .ezt-controls {
  position:relative;
  margin-top:0.25em;
  margin-bottom:0.25em;
  background-color:#99ccff;
 }
 
-ul.playlist li .controls .statusbar {
+ul.ezt-playlist li .ezt-controls .ezt-statusbar {
  position:relative;
  height:0.5em;
  background-color:#ccddff;
@@ -233,21 +233,21 @@ ul.playlist li .controls .statusbar {
  cursor:grab;
 }
 
-ul.playlist li .controls.dragging .statusbar {
+ul.ezt-playlist li .ezt-controls.ezt-dragging .ezt-statusbar {
  cursor:-moz-grabbing;
  cursor:grabbing;
 }
 
-ul.playlist li .controls .statusbar .position,
-ul.playlist li .controls .statusbar .loading,
-ul.playlist li .controls .statusbar .annotation {
+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.playlist li .controls .statusbar .position {
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-position {
  background-color:#336699;
  border-right:3px solid #336699;
  border-radius:3px;
@@ -255,26 +255,26 @@ ul.playlist li .controls .statusbar .position {
  -webkit-border-radius:3px;
 }
 
-ul.playlist li.sm2_paused .controls .statusbar .position {
+ul.ezt-playlist li.ezt-sm2_paused .ezt-controls .ezt-statusbar .ezt-position {
  background-color:#666;
  border-color:#666;
 }
 
-ul.playlist li .controls .statusbar .loading {
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-loading {
  background-color:#eee;
 }
 
-ul.playlist li .controls .statusbar .position,
-ul.playlist li .controls .statusbar .loading {
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-position,
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-loading {
  width:0px;
 }
 
-ul.playlist li.sm2_playing a.sm2_link,
-ul.playlist li.sm2_paused a.sm2_link {
+ul.ezt-playlist li.ezt-sm2_playing a.ezt-sm2_link,
+ul.ezt-playlist li.ezt-sm2_paused a.ezt-sm2_link {
  margin-right:4.5em; /* room for timing stuff */
 }
 
-ul.playlist li .timing {
+ul.ezt-playlist li .ezt-timing {
  position:absolute;
  display:none;
  text-align:right;
@@ -298,41 +298,41 @@ ul.playlist li .timing {
  vertical-align:middle;
 }
 
-ul.playlist.use-peak li .timing {
+ul.ezt-playlist.ezt-use-peak li .ezt-timing {
  right:4.25em;
 }
 
-ul.playlist li:hover .timing {
+ul.ezt-playlist li:hover .ezt-timing {
  z-index:2;
 }
 
-ul.playlist li .timing div.sm2_timing {
+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.playlist li.sm2_playing .timing,
-ul.playlist li.sm2_paused .timing {
+ul.ezt-playlist li.ezt-sm2_playing .ezt-timing,
+ul.ezt-playlist li.ezt-sm2_paused .ezt-timing {
  display:block;
 }
 
-ul.playlist li.sm2_paused .timing .sm2_position {
+ul.ezt-playlist li.ezt-sm2_paused .ezt-timing .ezt-sm2_position {
  text-decoration:blink; /* hee hee. first actual appropriate use? :D */
 }
 
-ul.playlist li.sm2_paused .timing,
-ul.playlist.use-peak li.sm2_paused .peak {
+ul.ezt-playlist li.ezt-sm2_paused .ezt-timing,
+ul.ezt-playlist.ezt-use-peak li.ezt-sm2_paused .ezt-peak {
  background-color:#888;
  border-color:#ccc;
 }
 
 /* peak data */
 
-/* ul.playlist ... */
+/* ul.ezt-playlist ... */
 
-ul.playlist.use-peak li .peak {
+ul.ezt-playlist.ezt-use-peak li .ezt-peak {
  display:none;
  zoom:1;
  border:1px solid #99ccff;
@@ -347,15 +347,15 @@ ul.playlist.use-peak li .peak {
  margin-top:-3px;
 }
 
-ul.playlist.use-peak li .peak-box {
+ul.ezt-playlist.ezt-use-peak li .ezt-peak-box {
  position:relative;
  width:100%;
  height:0.55em;
  overflow:hidden;
 }
 
-ul.playlist li .peak .l,
-ul.playlist li .peak .r {
+ul.ezt-playlist li .ezt-peak .ezt-l,
+ul.ezt-playlist li .ezt-peak .ezt-r {
  position:absolute;
  left:0px;
  top:0px;
@@ -368,11 +368,11 @@ ul.playlist li .peak .r {
  margin-top:1em;
 }
 
-ul.playlist li .peak .l {
+ul.ezt-playlist li .ezt-peak .ezt-l {
  margin-right:1px;
 }
 
-ul.playlist li .peak .r {
+ul.ezt-playlist li .ezt-peak .ezt-r {
  left:10px;
 }
 
@@ -386,16 +386,16 @@ ul.playlist li .peak .r {
  ------------------------------------------
 */
 
-ul.playlist li a.sm2_link .metadata {
+ul.ezt-playlist li a.ezt-sm2_link .ezt-metadata {
  display:none; /* hide by default */
 }
 
-ul.playlist li.sm2_paused a.sm2_link .metadata,
-ul.playlist li.sm2_playing a.sm2_link .metadata {
+ul.ezt-playlist li.ezt-sm2_paused a.ezt-sm2_link .ezt-metadata,
+ul.ezt-playlist li.ezt-sm2_playing a.ezt-sm2_link .ezt-metadata {
  display:inline;
 }
 
-ul.playlist li ul {
+ul.ezt-playlist li ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
@@ -404,7 +404,7 @@ ul.playlist li ul {
  display:none;
 }
 
-ul.playlist li ul li {
+ul.ezt-playlist li ul li {
  position:relative;
  margin:0px;
  padding:2px 3px;
@@ -421,46 +421,46 @@ ul.playlist li ul li {
  opacity:0.66;
 }
 
-ul.playlist li ul li:hover {
+ul.ezt-playlist li ul li:hover {
  opacity:1;
  background-color:#fff;
  border-color:#ccc;
  color:#666;
 }
 
-ul.playlist li.sm2_playing ul li,
-ul.playlist li.sm2_paused ul li {
+ul.ezt-playlist li.ezt-sm2_playing ul li,
+ul.ezt-playlist li.ezt-sm2_paused ul li {
  color:#fff;
 }
 
-ul.playlist li.sm2_playing ul li:hover {
+ul.ezt-playlist li.ezt-sm2_playing ul li:hover {
  background-color:#fff;
  color:#5588bb;
  border-color:#336699;
  opacity:0.9;
 }
 
-ul.playlist li.sm2_paused ul li:hover {
+ul.ezt-playlist li.ezt-sm2_paused ul li:hover {
  background-color:#888;
 }
 
 /* metadata */
 
-ul.playlist li .metadata .duration {
+ul.ezt-playlist li .ezt-metadata .ezt-duration {
  /* optional timing data */
  display:none;
 }
 
-ul.playlist li .metadata ul li p {
+ul.ezt-playlist li .ezt-metadata ul li p {
  margin:0px;
  padding:0px;
 }
 
-ul.playlist li .metadata ul li span {
+ul.ezt-playlist li .ezt-metadata ul li span {
  display:none;
 }
 
-ul.playlist li .controls .statusbar .annotation {
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation {
  position:absolute;
  background-color:transparent;
  top:0px;
@@ -470,11 +470,11 @@ ul.playlist li .controls .statusbar .annotation {
  height:0.5em;
 }
 
-ul.playlist li .controls .statusbar .annotation:hover {
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation:hover {
  z-index:12; /* sit on top of note */
 }
 
-ul.playlist li .controls .statusbar .annotation span.bubble {
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation span.ezt-bubble {
  /* using &middot; */
  display:inline-block;
  background-color:#fff;
@@ -484,34 +484,34 @@ ul.playlist li .controls .statusbar .annotation span.bubble {
  -webkit-border-radius:6px;
 }
 
-ul.playlist li .controls .statusbar .annotation span {
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation span {
  display:block;
- background:transparent url(../image/divot.png) no-repeat 50% 0px;
+ background:transparent url(../image/divot.ezt-png) no-repeat 50% 0px;
  width:15px;
  margin-left:-15px;
  height:12px;
  text-align:center;
 }
 
-ul.playlist li .controls .statusbar .annotation.alt {
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation.ezt-alt {
  top:auto;
  bottom:0px;
 }
 
-ul.playlist li .controls .statusbar .annotation span:hover {
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation span:hover {
  cursor:none; /* Fx3 rules. */
  margin-top:0.1em;
 }
 
-ul.playlist li .controls .statusbar .annotation.alt span:hover {
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation.ezt-alt span:hover {
  margin-top:-0.1em;
 }
 
-ul.playlist li .controls .statusbar .annotation.alt span {
- background:transparent url(../image/divot-bottom.png) no-repeat 50% bottom;
+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.playlist li .note {
+ul.ezt-playlist li .ezt-note {
  position:absolute;
  display:none;
  left:0px;
@@ -533,19 +533,19 @@ ul.playlist li .note {
  margin-top:1.1em;
 }
 
-ul.playlist li .note.alt {
+ul.ezt-playlist li .ezt-note.ezt-alt {
  margin-top:-1.32em;
 }
 
-ul.playlist li .note:hover {
+ul.ezt-playlist li .ezt-note:hover {
  display:block !important;
 }
 
-ul.playlist li .sm2_divider {
+ul.ezt-playlist li .ezt-sm2_divider {
  font-size:0.75em;
 }
 
-ul.playlist li .sm2_metadata {
+ul.ezt-playlist li .ezt-sm2_metadata {
  font-size:0.65em;
 }
 
@@ -556,51 +556,51 @@ ul.playlist li .sm2_metadata {
  ---------------------------------
 */
 
-ul.playlist.dark li.sm2_playing a {
+ul.ezt-playlist.ezt-dark li.ezt-sm2_playing a {
  color:#fff;
 }
 
-ul.playlist.dark li.sm2_playing .timing,
-ul.playlist.use-peak.dark li.sm2_playing .peak {
+ul.ezt-playlist.ezt-dark li.ezt-sm2_playing .ezt-timing,
+ul.ezt-playlist.ezt-use-peak.ezt-dark li.ezt-sm2_playing .ezt-peak {
  color:#999;
 }
 
-ul.playlist.use-spectrum.dark li.sm2_playing .spectrum-container {
+ul.ezt-playlist.ezt-use-spectrum.ezt-dark li.ezt-sm2_playing .ezt-spectrum-container {
  background-color:#222;
  border-color:#444;
 }
 
-ul.playlist.use-spectrum.dark li.sm2_playing .spectrum-container .spectrum {
+ul.ezt-playlist.ezt-use-spectrum.ezt-dark li.ezt-sm2_playing .ezt-spectrum-container .ezt-spectrum {
  background-color:#999;
 }
 
-ul.playlist.dark li.sm2_paused {
+ul.ezt-playlist.ezt-dark li.ezt-sm2_paused {
  background-color:#333;
 }
 
-ul.playlist.dark li.sm2_paused a {
+ul.ezt-playlist.ezt-dark li.ezt-sm2_paused a {
  color:#999;
 }
 
-ul.playlist.dark li.sm2_playing,
-ul.playlist.dark li.sm2_playing:hover {
+ul.ezt-playlist.ezt-dark li.ezt-sm2_playing,
+ul.ezt-playlist.ezt-dark li.ezt-sm2_playing:hover {
  background-color:#333;
 }
 
-ul.playlist.dark li:hover .controls .statusbar {
+ul.ezt-playlist.ezt-dark li:hover .ezt-controls .ezt-statusbar {
  background-color:#666;
 }
 
-ul.playlist.dark li .controls {
+ul.ezt-playlist.ezt-dark li .ezt-controls {
  background-color:#333;
 }
 
-ul.playlist.dark li .controls .statusbar {
+ul.ezt-playlist.ezt-dark li .ezt-controls .ezt-statusbar {
  background-color:#666;
  border-color:#444;
 }
 
-ul.playlist.dark li .controls .statusbar .position {
+ul.ezt-playlist.ezt-dark li .ezt-controls .ezt-statusbar .ezt-position {
  background-color:#111;
  border-right:3px solid #111;
  border-radius:3px;
@@ -608,18 +608,18 @@ ul.playlist.dark li .controls .statusbar .position {
  -webkit-border-radius:3px;
 }
 
-ul.playlist.dark li .controls .statusbar .loading {
+ul.ezt-playlist.ezt-dark li .ezt-controls .ezt-statusbar .ezt-loading {
  background-color:#444;
 }
 
-ul.playlist.dark li .timing,
-ul.playlist.use-peak.dark li .peak {
+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.playlist.dark.use-peak li .peak .l,
-ul.playlist.dark.use-peak li .peak .r {
+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;
 }
@@ -627,25 +627,25 @@ ul.playlist.dark.use-peak li .peak .r {
 
 /* gold theme */
 
-ul.playlist.gold li.sm2_paused {
+ul.ezt-playlist.ezt-gold li.ezt-sm2_paused {
  background-color:#996600;
 }
 
-ul.playlist.gold li.sm2_playing,
-ul.playlist.gold li.sm2_playing:hover {
+ul.ezt-playlist.ezt-gold li.ezt-sm2_playing,
+ul.ezt-playlist.ezt-gold li.ezt-sm2_playing:hover {
  background-color:#cc9900;
 }
 
-ul.playlist.gold li .controls {
+ul.ezt-playlist.ezt-gold li .ezt-controls {
  background-color:transparent;
 }
 
-ul.playlist.gold li .controls .statusbar {
+ul.ezt-playlist.ezt-gold li .ezt-controls .ezt-statusbar {
  background-color:#fff;
  border-color:#fff;
 }
 
-ul.playlist.gold li .controls .statusbar .position {
+ul.ezt-playlist.ezt-gold li .ezt-controls .ezt-statusbar .ezt-position {
  background-color:#996600;
  border-right:3px solid #996600;
  border-radius:3px;
@@ -653,27 +653,27 @@ ul.playlist.gold li .controls .statusbar .position {
  -webkit-border-radius:3px;
 }
 
-ul.playlist.gold li .controls .statusbar .loading {
+ul.ezt-playlist.ezt-gold li .ezt-controls .ezt-statusbar .ezt-loading {
  background-color:#ffeedd;
 }
 
-ul.playlist.gold li .timing,
-ul.playlist.use-peak.gold li .peak {
+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.playlist.use-spectrum.gold li.sm2_playing .spectrum-container {
+ul.ezt-playlist.ezt-use-spectrum.ezt-gold li.ezt-sm2_playing .ezt-spectrum-container {
  background-color:#cc9900;
  border-color:#ffcc33;
 }
 
-ul.playlist.use-spectrum.gold li.sm2_playing .spectrum-container .spectrum {
+ul.ezt-playlist.ezt-use-spectrum.ezt-gold li.ezt-sm2_playing .ezt-spectrum-container .ezt-spectrum {
  background-color:#fff;
 }
 
-ul.playlist.gold.use-peak li .peak .l,
-ul.playlist.gold.use-peak li .peak .r {
+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;
 }
@@ -681,41 +681,41 @@ ul.playlist.gold.use-peak li .peak .r {
 
 /* ZOMG PONIES!!!ONEONEONE */
 
-ul.playlist.bubblegum li a {
+ul.ezt-playlist.ezt-bubblegum li a {
  font-family:"comic sans ms",verdana,arial,tahoma,"sans serif"; /* heh */
 }
 
-ul.playlist.bubblegum li.sm2_paused,
-ul.playlist.bubblegum li.sm2_paused:hover {
+ul.ezt-playlist.ezt-bubblegum li.ezt-sm2_paused,
+ul.ezt-playlist.ezt-bubblegum li.ezt-sm2_paused:hover {
  background-color:#ffccee;
 }
 
-ul.playlist.bubblegum li.sm2_paused a,
-ul.playlist.bubblegum li.sm2_paused:hover a,
-ul.playlist.bubblegum li.sm2_paused .timing,
-ul.playlist.use-peak.bubblegum li.sm2_paused .peak {
+ul.ezt-playlist.ezt-bubblegum li.ezt-sm2_paused a,
+ul.ezt-playlist.ezt-bubblegum li.ezt-sm2_paused:hover a,
+ul.ezt-playlist.ezt-bubblegum li.ezt-sm2_paused .ezt-timing,
+ul.ezt-playlist.ezt-use-peak.ezt-bubblegum li.ezt-sm2_paused .ezt-peak {
  color:#ff6699;
 }
 
-ul.playlist.bubblegum li:hover {
+ul.ezt-playlist.ezt-bubblegum li:hover {
  background-color:#ffddee;
 }
 
-ul.playlist.bubblegum li.sm2_playing,
-ul.playlist.bubblegum li.sm2_playing:hover {
+ul.ezt-playlist.ezt-bubblegum li.ezt-sm2_playing,
+ul.ezt-playlist.ezt-bubblegum li.ezt-sm2_playing:hover {
  background-color:#ff7799;
 }
 
-ul.playlist.bubblegum li .controls {
+ul.ezt-playlist.ezt-bubblegum li .ezt-controls {
  background-color:transparent;
 }
 
-ul.playlist.bubblegum li .controls .statusbar {
+ul.ezt-playlist.ezt-bubblegum li .ezt-controls .ezt-statusbar {
  background-color:#fff;
  border-color:#fff;
 }
 
-ul.playlist.bubblegum li .controls .statusbar .position {
+ul.ezt-playlist.ezt-bubblegum li .ezt-controls .ezt-statusbar .ezt-position {
  background-color:#ffaacc;
  border-right:3px solid #ffaacc;
  border-radius:3px;
@@ -723,36 +723,36 @@ ul.playlist.bubblegum li .controls .statusbar .position {
  -webkit-border-radius:3px;
 }
 
-ul.playlist.bubblegum li .controls .statusbar .loading {
+ul.ezt-playlist.ezt-bubblegum li .ezt-controls .ezt-statusbar .ezt-loading {
  background-color:#ffeedd;
 }
 
-ul.playlist.bubblegum li .timing,
-ul.playlist.use-peak.bubblegum li .peak {
+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.playlist.use-spectrum.bubblegum li.sm2_playing .spectrum-container {
+ul.ezt-playlist.ezt-use-spectrum.ezt-bubblegum li.ezt-sm2_playing .ezt-spectrum-container {
  background-color:#ffaacc;
  border-color:#ffccee;
 }
 
-ul.playlist.use-spectrum.bubblegum li.sm2_playing .spectrum-container .spectrum {
+ul.ezt-playlist.ezt-use-spectrum.ezt-bubblegum li.ezt-sm2_playing .ezt-spectrum-container .ezt-spectrum {
  background-color:#fff;
 }
 
-ul.playlist.bubblegum.use-peak li .peak .l,
-ul.playlist.bubblegum.use-peak li .peak .r {
+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.playlist.shiny li.sm2_paused,
-ul.playlist.shiny li.sm2_playing {
- background-image:url(../image/top-highlight.png);
+ul.ezt-playlist.ezt-shiny li.ezt-sm2_paused,
+ul.ezt-playlist.ezt-shiny li.ezt-sm2_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. */
-}
\ No newline at end of file
+}
diff --git a/tools/eztelemeta/design/standard/templates/eztelemeta_foot.tpl b/tools/eztelemeta/design/standard/templates/eztelemeta_foot.tpl
new file mode 100644
index 00000000..34cb6b97
--- /dev/null
+++ b/tools/eztelemeta/design/standard/templates/eztelemeta_foot.tpl
@@ -0,0 +1,25 @@
+{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}