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

diff --git a/tools/eztelemeta/design/standard/javascript/page-player.js b/tools/eztelemeta/design/standard/javascript/page-player.js
index 43fe008ef77b857a0ee7b07c2331756ad278a29c..6ee625707d6e3dcb61f403d997e5665e578631a6 100644 (file)
--- 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) {
   }\r
 \r
   this.css = {             // CSS class names appended to link during various states\r
-    sDefault: 'sm2_link',  // default state\r
-    sLoading: 'sm2_loading',\r
-    sPlaying: 'sm2_playing',\r
-    sPaused: 'sm2_paused'\r
+    sDefault: 'ezt-sm2_link',  // default state\r
+    sLoading: 'ezt-sm2_loading',\r
+    sPlaying: 'ezt-sm2_playing',\r
+    sPaused: 'ezt-sm2_paused'\r
   }\r
 \r
   // apply externally-defined override, if applicable\r
   this.cssBase = []; // optional features added to ul.playlist\r
-  if (this.config.usePeakData) this.cssBase.push('use-peak');\r
-  if (this.config.useWaveformData || this.config.useEQData) this.cssBase.push('use-spectrum');\r
+  if (this.config.usePeakData) this.cssBase.push('ezt-use-peak');\r
+  if (this.config.useWaveformData || this.config.useEQData) this.cssBase.push('ezt-use-spectrum');\r
   this.cssBase = this.cssBase.join(' ');\r
 \r
   // apply some items to SM2\r
@@ -415,7 +415,7 @@ function PagePlayer(oConfigOverride) {
     }\r
     if (index != metadata.currentItem) {\r
       // update\r
-      oSound._data.oLink.innerHTML = metadata.mainTitle+' <span class="metadata"><span class="sm2_divider"> | </span><span class="sm2_metadata">'+metadata[index].title+'</span></span>';\r
+      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>';\r
       self.setPageTitle(metadata[index].title+' | '+metadata.mainTitle);\r
       metadata.currentItem = index;\r
     }\r
@@ -432,7 +432,7 @@ function PagePlayer(oConfigOverride) {
   }\r
   \r
   this.withinStatusBar = function(o) {\r
-    return (self.isChildOfClass(o,'controls'));\r
+    return (self.isChildOfClass(o,'ezt-controls'));\r
   }\r
 \r
   this.handleClick = function(e) {\r
@@ -455,7 +455,7 @@ function PagePlayer(oConfigOverride) {
       return true;\r
     }\r
     var sURL = o.getAttribute('href');\r
-    if (!o.href || (!sm.canPlayURL(o.href) || !self.hasClass(o,'playable')) || self.hasClass(o,'exclude')) {\r
+    if (!o.href || (!sm.canPlayURL(o.href) || !self.hasClass(o,'ezt-playable')) || self.hasClass(o,'ezt-exclude')) {\r
       if (isIE && o.onclick) {\r
         return false; // IE will run this handler before .onclick(), everyone else is cool?\r
       }\r
@@ -481,7 +481,7 @@ function PagePlayer(oConfigOverride) {
       } else {\r
         // ..different sound\r
         if (self.lastSound) self.stopSound(self.lastSound);\r
-        thisSound._data.oTimingBox.appendChild(document.getElementById('spectrum-container'));\r
+        thisSound._data.oTimingBox.appendChild(document.getElementById('ezt-spectrum-container'));\r
         thisSound.togglePause(); // start playing current\r
       }\r
     } else {\r
@@ -502,26 +502,26 @@ function PagePlayer(oConfigOverride) {
       // append control template\r
       var oControls = self.oControls.cloneNode(true);\r
       o.parentNode.appendChild(oControls);\r
-      o.parentNode.appendChild(document.getElementById('spectrum-container'));\r
+      o.parentNode.appendChild(document.getElementById('ezt-spectrum-container'));\r
       self.soundsByObject[o.rel] = thisSound;\r
       // tack on some custom data\r
       thisSound._data = {\r
         oLink: o, // DOM reference within SM2 object event handlers\r
         oLI: o.parentNode,\r
-        oControls: self.getElementsByClassName('controls','div',o.parentNode)[0],\r
-        oStatus: self.getElementsByClassName('statusbar','div',o.parentNode)[0],\r
-        oLoading: self.getElementsByClassName('loading','div',o.parentNode)[0],\r
-        oPosition: self.getElementsByClassName('position','div',o.parentNode)[0],\r
-        oTimingBox: self.getElementsByClassName('timing','div',o.parentNode)[0],\r
-        oTiming: self.getElementsByClassName('timing','div',o.parentNode)[0].getElementsByTagName('div')[0],\r
-        oPeak: self.getElementsByClassName('peak','div',o.parentNode)[0],\r
-        oGraph: self.getElementsByClassName('spectrum-box','div',o.parentNode)[0],\r
+        oControls: self.getElementsByClassName('ezt-controls','div',o.parentNode)[0],\r
+        oStatus: self.getElementsByClassName('ezt-statusbar','div',o.parentNode)[0],\r
+        oLoading: self.getElementsByClassName('ezt-loading','div',o.parentNode)[0],\r
+        oPosition: self.getElementsByClassName('ezt-position','div',o.parentNode)[0],\r
+        oTimingBox: self.getElementsByClassName('ezt-timing','div',o.parentNode)[0],\r
+        oTiming: self.getElementsByClassName('ezt-timing','div',o.parentNode)[0].getElementsByTagName('div')[0],\r
+        oPeak: self.getElementsByClassName('ezt-peak','div',o.parentNode)[0],\r
+        oGraph: self.getElementsByClassName('ezt-spectrum-box','div',o.parentNode)[0],\r
         nIndex: self.getSoundIndex(o),\r
         className: self.css.sPlaying,\r
         originalTitle: o.innerHTML,\r
         metadata: null\r
       };\r
-      thisSound._data.oTimingBox.appendChild(document.getElementById('spectrum-container'));\r
+      thisSound._data.oTimingBox.appendChild(document.getElementById('ezt-spectrum-container'));\r
       // "Metadata"\r
       if (thisSound._data.oLI.getElementsByTagName('ul').length) {\r
         thisSound._data.metadata = new Metadata(thisSound);\r
@@ -551,7 +551,7 @@ function PagePlayer(oConfigOverride) {
     self.lastSound.pause();\r
     self.setPosition(e);\r
     self.addEventHandler(document,'mousemove',self.handleMouseMove);\r
-    self.addClass(self.lastSound._data.oControls,'dragging');\r
+    self.addClass(self.lastSound._data.oControls,'ezt-dragging');\r
     self.stopEvent(e);\r
     return false;\r
   }\r
@@ -581,7 +581,7 @@ function PagePlayer(oConfigOverride) {
   \r
   this.stopDrag = function(e) {\r
     if (self.dragActive) {\r
-      self.removeClass(self.lastSound._data.oControls,'dragging');\r
+      self.removeClass(self.lastSound._data.oControls,'ezt-dragging');\r
       self.removeEventHandler(document,'mousemove',self.handleMouseMove);\r
       // self.removeEventHandler(document,'mouseup',self.stopDrag);\r
       if (!pl.hasClass(self.lastSound._data.oLI,self.css.sPaused)) {\r
@@ -612,7 +612,7 @@ function PagePlayer(oConfigOverride) {
     // called from slider control\r
     var oThis = self.getTheDamnTarget(e);\r
     var oControl = oThis;\r
-    while (!self.hasClass(oControl,'controls') && oControl.parentNode) {\r
+    while (!self.hasClass(oControl,'ezt-controls') && oControl.parentNode) {\r
       oControl = oControl.parentNode;\r
     }\r
     var oSound = self.lastSound;\r
@@ -853,7 +853,7 @@ function PagePlayer(oConfigOverride) {
     // grab all links, look for .mp3\r
     var foundItems = 0;\r
     for (var i=0; i<oLinks.length; i++) {\r
-      if ((sm.canPlayURL(oLinks[i].href) && self.hasClass(oLinks[i],'playable')) && !self.hasClass(oLinks[i],'exclude')) {\r
+      if ((sm.canPlayURL(oLinks[i].href) && self.hasClass(oLinks[i],'ezt-playable')) && !self.hasClass(oLinks[i],'ezt-exclude')) {\r
         oLinks[i].rel = 'pagePlayerMP3Sound'+i;\r
         self.links[self.links.length] = oLinks[i];\r
         self.addClass(oLinks[i],self.css.sDefault); // add default CSS decoration\r
@@ -861,7 +861,7 @@ function PagePlayer(oConfigOverride) {
       }\r
     }\r
     if (foundItems>0) {\r
-      var oTiming = document.getElementById('sm2_timing');\r
+      var oTiming = document.getElementById('ezt-sm2_timing');\r
       self.strings['timing'] = oTiming.innerHTML;\r
       oTiming.innerHTML = '';\r
       oTiming.id = '';\r
@@ -870,6 +870,7 @@ function PagePlayer(oConfigOverride) {
       self.addEventHandler(document,'mouseup',self.stopDrag);\r
       self.addEventHandler(window,'unload',function(){}); // force page reload when returning here via back button (Opera tries to remember old state, etc.)\r
     }\r
+    console.log('TestTest');\r
     sm._writeDebug('pagePlayer.init(): Found '+foundItems+' relevant items.');\r
     if (self.config.autoStart) {\r
       pl.handleClick({target:pl.links[0]});\r
@@ -883,13 +884,13 @@ var Metadata = function(oSound) {
   var oItems = o.getElementsByTagName('li');\r
   var oTemplate = document.createElement('div');\r
   oTemplate.innerHTML = '<span>&nbsp;</span>';\r
-  oTemplate.className = 'annotation';\r
+  oTemplate.className = 'ezt-annotation';\r
   var oTemplate2 = document.createElement('div');\r
   oTemplate2.innerHTML = '<span>&nbsp;</span>';\r
-  oTemplate2.className = 'annotation alt';\r
+  oTemplate2.className = 'ezt-annotation ezt-alt';\r
 \r
   var oTemplate3 = document.createElement('div');\r
-  oTemplate3.className = 'note';\r
+  oTemplate3.className = 'ezt-note';\r
 \r
   this.totalTime = 0;\r
   this.strToTime = function(sTime) {\r
@@ -917,7 +918,7 @@ var Metadata = function(oSound) {
       oNote: null\r
     }\r
   }\r
-  var oDuration = pl.getElementsByClassName('duration','div',oLI);\r
+  var oDuration = pl.getElementsByClassName('ezt-duration','div',oLI);\r
   this.data.givenDuration = (oDuration.length?self.strToTime(oDuration[0].innerHTML)*1000:0);\r
   for (i=0; i<this.data.length; i++) {\r
     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;\r
@@ -938,7 +939,7 @@ var Metadata = function(oSound) {
       oNode.rel = i;\r
       self.data[i].o = oNode;\r
       oNode2 = oTemplate3.cloneNode(true);\r
-      if (i%2==0) oNode2.className = 'note alt';\r
+      if (i%2==0) oNode2.className = 'ezt-note ezt-alt';\r
       oNode2.innerHTML = this.data[i].title;\r
       // evil old-skool event handlers, css:hover-only ideally would be nice excluding IE 6\r
       oNode.onmouseover = self.mouseover;\r
@@ -985,9 +986,9 @@ var Metadata = function(oSound) {
 \r
   this.initDOM = function() {\r
     // set up graph box stuffs\r
-    var sb = self.getElementsByClassName('spectrum-box','div',document.documentElement)[0];\r
+    var sb = self.getElementsByClassName('ezt-spectrum-box','div',document.documentElement)[0];\r
     if (sm.flashVersion >= 9) {\r
-      self.addClass(self.getElementsByClassName('playlist','ul',document.documentElement)[0],self.cssBase);\r
+      self.addClass(self.getElementsByClassName('ezt-playlist','ul',document.documentElement)[0],self.cssBase);\r
       var sbC = sb.getElementsByTagName('div')[0];\r
       var oF = document.createDocumentFragment();\r
       var oClone = null;\r
@@ -999,7 +1000,7 @@ var Metadata = function(oSound) {
       sb.removeChild(sbC);\r
       sb.appendChild(oF);\r
     }\r
-    this.oControls = document.getElementById('control-template').cloneNode(true);\r
+    this.oControls = document.getElementById('ezt-control-template').cloneNode(true);\r
     this.oControls.id = '';\r
     this.init();\r
   }\r

diff --git a/tools/eztelemeta/design/standard/override/templates/embed/eztelemetaitem.tpl b/tools/eztelemeta/design/standard/override/templates/embed/eztelemetaitem.tpl
index ee7b90673a099824442f74bd2a414bcfe129c08a..452951df5e51e97868673f649ddc4d1883fec026 100755 (executable)
--- 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 92b7a9df680c1b0dc6461d5d0ac549c34fd8bb59..10ec2c6f7c9263ef3419e07e95a31df7c1f36093 100644 (file)
--- a/tools/eztelemeta/design/standard/stylesheets/page-player.css
+++ b/tools/eztelemeta/design/standard/stylesheets/page-player.css
@@ -65,11 +65,11 @@
 \r
 /* background-image-based CSS3 example */\r
 \r
-.spectrum-container {\r
+.ezt-spectrum-container {\r
  display:none;\r
 }\r
 \r
-ul.use-spectrum li.sm2_playing .spectrum-container {\r
+ul.ezt-use-spectrum li.ezt-sm2_playing .ezt-spectrum-container {\r
  position:absolute;\r
  left:0px;\r
  top:0px;\r
@@ -83,7 +83,7 @@ ul.use-spectrum li.sm2_playing .spectrum-container {
  border-radius:4px;\r
 }\r
 \r
-ul.use-spectrum .spectrum-box {\r
+ul.ezt-use-spectrum .ezt-spectrum-box {\r
  position:relative;\r
  width:255px;\r
  font-size:1em;\r
@@ -92,7 +92,7 @@ ul.use-spectrum .spectrum-box {
  overflow:hidden;\r
 }\r
 \r
-ul.use-spectrum .spectrum-box .spectrum {\r
+ul.ezt-use-spectrum .ezt-spectrum-box .ezt-spectrum {\r
  position:absolute;\r
  left:0px;\r
  top:-2px;\r
@@ -105,14 +105,14 @@ ul.use-spectrum .spectrum-box .spectrum {
  background-color:#fff;\r
 }\r
 \r
-ul.playlist {\r
+ul.ezt-playlist {\r
  list-style-type:none;\r
  margin:0px;\r
  padding:0px;\r
 \r
 }\r
 \r
-ul.playlist li {\r
+ul.ezt-playlist li {\r
  /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */\r
  position:relative;\r
  display:block;\r
@@ -127,7 +127,7 @@ ul.playlist li {
  -webkit-transition: background-color 0.15s ease-in-out;\r
 }\r
 \r
-ul.playlist li a {\r
+ul.ezt-playlist li a {\r
  display:block;\r
  text-decoration:none;\r
  font-weight:normal;\r
@@ -139,88 +139,88 @@ ul.playlist li a {
  text-shadow: 0 0 0 #fff; /* stupid Safari "fat" font rendering tweak */\r
 }\r
 \r
-ul.playlist li.sm2_playing,\r
-ul.playlist li.sm2_paused,\r
-ul.playlist li.sm2_playing a {\r
+ul.ezt-playlist li.ezt-sm2_playing,\r
+ul.ezt-playlist li.ezt-sm2_paused,\r
+ul.ezt-playlist li.ezt-sm2_playing a {\r
  color:#fff;\r
  border-radius:3px;\r
  -webkit-border-radius:3px;\r
  -moz-border-radius:3px;\r
 }\r
 \r
-ul.playlist li:hover {\r
+ul.ezt-playlist li:hover {\r
  background-color:#eee;\r
 }\r
 \r
-ul.playlist li:hover a {\r
+ul.ezt-playlist li:hover a {\r
  color:#333;\r
 }\r
 \r
-ul.playlist li.sm2_playing,\r
-ul.playlist li.sm2_playing:hover {\r
+ul.ezt-playlist li.ezt-sm2_playing,\r
+ul.ezt-playlist li.ezt-sm2_playing:hover {\r
  background-color:#6699cc;\r
 }\r
 \r
-ul.playlist li.sm2_paused {\r
+ul.ezt-playlist li.ezt-sm2_paused {\r
  background-color:#999;\r
 }\r
 \r
-ul.playlist li.sm2_playing:hover a,\r
-ul.playlist li.sm2_paused a {\r
+ul.ezt-playlist li.ezt-sm2_playing:hover a,\r
+ul.ezt-playlist li.ezt-sm2_paused a {\r
  color:#fff;\r
 }\r
 \r
-ul.playlist li .controls {\r
+ul.ezt-playlist li .ezt-controls {\r
  display:none;\r
 }\r
 \r
-ul.playlist li .peak,\r
-ul.playlist.use-peak li .peak {\r
+ul.ezt-playlist li .ezt-peak,\r
+ul.ezt-playlist.ezt-use-peak li .ezt-peak {\r
  display:none;\r
  position:absolute;\r
  top:0.55em;\r
  right:0.5em;\r
 }\r
 \r
-ul.playlist li.sm2_playing .controls,\r
-ul.playlist li.sm2_paused .controls {\r
+ul.ezt-playlist li.ezt-sm2_playing .ezt-controls,\r
+ul.ezt-playlist li.ezt-sm2_paused .ezt-controls {\r
  position:relative;\r
  display:block;\r
 }\r
 \r
-ul.playlist.use-peak li.sm2_playing .peak,\r
-ul.playlist.use-peak li.sm2_paused .peak {\r
+ul.ezt-playlist.ezt-use-peak li.ezt-sm2_playing .ezt-peak,\r
+ul.ezt-playlist.ezt-use-peak li.ezt-sm2_paused .ezt-peak {\r
  display:inline;\r
  display:inline-block;\r
 }\r
 \r
-ul.playlist.use-peak li .peak {\r
+ul.ezt-playlist.ezt-use-peak li .ezt-peak {\r
  display:none; /* IE 7 */\r
 }\r
 \r
-ul.playlist li.sm2_paused .controls {\r
+ul.ezt-playlist li.ezt-sm2_paused .ezt-controls {\r
  background-color:#666;\r
 }\r
 \r
-ul.playlist li:hover .controls .statusbar {\r
+ul.ezt-playlist li:hover .ezt-controls .ezt-statusbar {\r
  position:relative;\r
  cursor:ew-resize;\r
  cursor:-moz-grab;\r
  cursor:grab;\r
 }\r
 \r
-ul.playlist li.sm2_paused .controls .statusbar {\r
+ul.ezt-playlist li.ezt-sm2_paused .ezt-controls .ezt-statusbar {\r
  background-color:#ccc;\r
 }\r
 \r
-ul.playlist li .controls {\r
+ul.ezt-playlist li .ezt-controls {\r
  position:relative;\r
  margin-top:0.25em;\r
  margin-bottom:0.25em;\r
  background-color:#99ccff;\r
 }\r
 \r
-ul.playlist li .controls .statusbar {\r
+ul.ezt-playlist li .ezt-controls .ezt-statusbar {\r
  position:relative;\r
  height:0.5em;\r
  background-color:#ccddff;\r
@@ -233,21 +233,21 @@ ul.playlist li .controls .statusbar {
  cursor:grab;\r
 }\r
 \r
-ul.playlist li .controls.dragging .statusbar {\r
+ul.ezt-playlist li .ezt-controls.ezt-dragging .ezt-statusbar {\r
  cursor:-moz-grabbing;\r
  cursor:grabbing;\r
 }\r
 \r
-ul.playlist li .controls .statusbar .position,\r
-ul.playlist li .controls .statusbar .loading,\r
-ul.playlist li .controls .statusbar .annotation {\r
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-position,\r
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-loading,\r
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation {\r
  position:absolute;\r
  left:0px;\r
  top:0px;\r
  height:0.5em;\r
 }\r
 \r
-ul.playlist li .controls .statusbar .position {\r
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-position {\r
  background-color:#336699;\r
  border-right:3px solid #336699;\r
  border-radius:3px;\r
@@ -255,26 +255,26 @@ ul.playlist li .controls .statusbar .position {
  -webkit-border-radius:3px;\r
 }\r
 \r
-ul.playlist li.sm2_paused .controls .statusbar .position {\r
+ul.ezt-playlist li.ezt-sm2_paused .ezt-controls .ezt-statusbar .ezt-position {\r
  background-color:#666;\r
  border-color:#666;\r
 }\r
 \r
-ul.playlist li .controls .statusbar .loading {\r
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-loading {\r
  background-color:#eee;\r
 }\r
 \r
-ul.playlist li .controls .statusbar .position,\r
-ul.playlist li .controls .statusbar .loading {\r
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-position,\r
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-loading {\r
  width:0px;\r
 }\r
 \r
-ul.playlist li.sm2_playing a.sm2_link,\r
-ul.playlist li.sm2_paused a.sm2_link {\r
+ul.ezt-playlist li.ezt-sm2_playing a.ezt-sm2_link,\r
+ul.ezt-playlist li.ezt-sm2_paused a.ezt-sm2_link {\r
  margin-right:4.5em; /* room for timing stuff */\r
 }\r
 \r
-ul.playlist li .timing {\r
+ul.ezt-playlist li .ezt-timing {\r
  position:absolute;\r
  display:none;\r
  text-align:right;\r
@@ -298,41 +298,41 @@ ul.playlist li .timing {
  vertical-align:middle;\r
 }\r
 \r
-ul.playlist.use-peak li .timing {\r
+ul.ezt-playlist.ezt-use-peak li .ezt-timing {\r
  right:4.25em;\r
 }\r
 \r
-ul.playlist li:hover .timing {\r
+ul.ezt-playlist li:hover .ezt-timing {\r
  z-index:2;\r
 }\r
 \r
-ul.playlist li .timing div.sm2_timing {\r
+ul.ezt-playlist li .ezt-timing div.ezt-sm2_timing {\r
  margin:0px;\r
  padding:0px;\r
  margin-top:-1em;\r
  text-shadow: 0 0 0 #fff; /* stupid Safari "fat" font rendering tweak */\r
 }\r
 \r
-ul.playlist li.sm2_playing .timing,\r
-ul.playlist li.sm2_paused .timing {\r
+ul.ezt-playlist li.ezt-sm2_playing .ezt-timing,\r
+ul.ezt-playlist li.ezt-sm2_paused .ezt-timing {\r
  display:block;\r
 }\r
 \r
-ul.playlist li.sm2_paused .timing .sm2_position {\r
+ul.ezt-playlist li.ezt-sm2_paused .ezt-timing .ezt-sm2_position {\r
  text-decoration:blink; /* hee hee. first actual appropriate use? :D */\r
 }\r
 \r
-ul.playlist li.sm2_paused .timing,\r
-ul.playlist.use-peak li.sm2_paused .peak {\r
+ul.ezt-playlist li.ezt-sm2_paused .ezt-timing,\r
+ul.ezt-playlist.ezt-use-peak li.ezt-sm2_paused .ezt-peak {\r
  background-color:#888;\r
  border-color:#ccc;\r
 }\r
 \r
 /* peak data */\r
 \r
-/* ul.playlist ... */\r
+/* ul.ezt-playlist ... */\r
 \r
-ul.playlist.use-peak li .peak {\r
+ul.ezt-playlist.ezt-use-peak li .ezt-peak {\r
  display:none;\r
  zoom:1;\r
  border:1px solid #99ccff;\r
@@ -347,15 +347,15 @@ ul.playlist.use-peak li .peak {
  margin-top:-3px;\r
 }\r
 \r
-ul.playlist.use-peak li .peak-box {\r
+ul.ezt-playlist.ezt-use-peak li .ezt-peak-box {\r
  position:relative;\r
  width:100%;\r
  height:0.55em;\r
  overflow:hidden;\r
 }\r
 \r
-ul.playlist li .peak .l,\r
-ul.playlist li .peak .r {\r
+ul.ezt-playlist li .ezt-peak .ezt-l,\r
+ul.ezt-playlist li .ezt-peak .ezt-r {\r
  position:absolute;\r
  left:0px;\r
  top:0px;\r
@@ -368,11 +368,11 @@ ul.playlist li .peak .r {
  margin-top:1em;\r
 }\r
 \r
-ul.playlist li .peak .l {\r
+ul.ezt-playlist li .ezt-peak .ezt-l {\r
  margin-right:1px;\r
 }\r
 \r
-ul.playlist li .peak .r {\r
+ul.ezt-playlist li .ezt-peak .ezt-r {\r
  left:10px;\r
 }\r
 \r
@@ -386,16 +386,16 @@ ul.playlist li .peak .r {
  ------------------------------------------\r
 */\r
 \r
-ul.playlist li a.sm2_link .metadata {\r
+ul.ezt-playlist li a.ezt-sm2_link .ezt-metadata {\r
  display:none; /* hide by default */\r
 }\r
 \r
-ul.playlist li.sm2_paused a.sm2_link .metadata,\r
-ul.playlist li.sm2_playing a.sm2_link .metadata {\r
+ul.ezt-playlist li.ezt-sm2_paused a.ezt-sm2_link .ezt-metadata,\r
+ul.ezt-playlist li.ezt-sm2_playing a.ezt-sm2_link .ezt-metadata {\r
  display:inline;\r
 }\r
 \r
-ul.playlist li ul {\r
+ul.ezt-playlist li ul {\r
  list-style-type:none;\r
  margin:0px;\r
  padding:0px;\r
@@ -404,7 +404,7 @@ ul.playlist li ul {
  display:none;\r
 }\r
 \r
-ul.playlist li ul li {\r
+ul.ezt-playlist li ul li {\r
  position:relative;\r
  margin:0px;\r
  padding:2px 3px;\r
@@ -421,46 +421,46 @@ ul.playlist li ul li {
  opacity:0.66;\r
 }\r
 \r
-ul.playlist li ul li:hover {\r
+ul.ezt-playlist li ul li:hover {\r
  opacity:1;\r
  background-color:#fff;\r
  border-color:#ccc;\r
  color:#666;\r
 }\r
 \r
-ul.playlist li.sm2_playing ul li,\r
-ul.playlist li.sm2_paused ul li {\r
+ul.ezt-playlist li.ezt-sm2_playing ul li,\r
+ul.ezt-playlist li.ezt-sm2_paused ul li {\r
  color:#fff;\r
 }\r
 \r
-ul.playlist li.sm2_playing ul li:hover {\r
+ul.ezt-playlist li.ezt-sm2_playing ul li:hover {\r
  background-color:#fff;\r
  color:#5588bb;\r
  border-color:#336699;\r
  opacity:0.9;\r
 }\r
 \r
-ul.playlist li.sm2_paused ul li:hover {\r
+ul.ezt-playlist li.ezt-sm2_paused ul li:hover {\r
  background-color:#888;\r
 }\r
 \r
 /* metadata */\r
 \r
-ul.playlist li .metadata .duration {\r
+ul.ezt-playlist li .ezt-metadata .ezt-duration {\r
  /* optional timing data */\r
  display:none;\r
 }\r
 \r
-ul.playlist li .metadata ul li p {\r
+ul.ezt-playlist li .ezt-metadata ul li p {\r
  margin:0px;\r
  padding:0px;\r
 }\r
 \r
-ul.playlist li .metadata ul li span {\r
+ul.ezt-playlist li .ezt-metadata ul li span {\r
  display:none;\r
 }\r
 \r
-ul.playlist li .controls .statusbar .annotation {\r
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation {\r
  position:absolute;\r
  background-color:transparent;\r
  top:0px;\r
@@ -470,11 +470,11 @@ ul.playlist li .controls .statusbar .annotation {
  height:0.5em;\r
 }\r
 \r
-ul.playlist li .controls .statusbar .annotation:hover {\r
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation:hover {\r
  z-index:12; /* sit on top of note */\r
 }\r
 \r
-ul.playlist li .controls .statusbar .annotation span.bubble {\r
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation span.ezt-bubble {\r
  /* using · */\r
  display:inline-block;\r
  background-color:#fff;\r
@@ -484,34 +484,34 @@ ul.playlist li .controls .statusbar .annotation span.bubble {
  -webkit-border-radius:6px;\r
 }\r
 \r
-ul.playlist li .controls .statusbar .annotation span {\r
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation span {\r
  display:block;\r
- background:transparent url(../image/divot.png) no-repeat 50% 0px;\r
+ background:transparent url(../image/divot.ezt-png) no-repeat 50% 0px;\r
  width:15px;\r
  margin-left:-15px;\r
  height:12px;\r
  text-align:center;\r
 }\r
 \r
-ul.playlist li .controls .statusbar .annotation.alt {\r
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation.ezt-alt {\r
  top:auto;\r
  bottom:0px;\r
 }\r
 \r
-ul.playlist li .controls .statusbar .annotation span:hover {\r
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation span:hover {\r
  cursor:none; /* Fx3 rules. */\r
  margin-top:0.1em;\r
 }\r
 \r
-ul.playlist li .controls .statusbar .annotation.alt span:hover {\r
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation.ezt-alt span:hover {\r
  margin-top:-0.1em;\r
 }\r
 \r
-ul.playlist li .controls .statusbar .annotation.alt span {\r
- background:transparent url(../image/divot-bottom.png) no-repeat 50% bottom;\r
+ul.ezt-playlist li .ezt-controls .ezt-statusbar .ezt-annotation.ezt-alt span {\r
+ background:transparent url(../image/divot-bottom.ezt-png) no-repeat 50% bottom;\r
 }\r
 \r
-ul.playlist li .note {\r
+ul.ezt-playlist li .ezt-note {\r
  position:absolute;\r
  display:none;\r
  left:0px;\r
@@ -533,19 +533,19 @@ ul.playlist li .note {
  margin-top:1.1em;\r
 }\r
 \r
-ul.playlist li .note.alt {\r
+ul.ezt-playlist li .ezt-note.ezt-alt {\r
  margin-top:-1.32em;\r
 }\r
 \r
-ul.playlist li .note:hover {\r
+ul.ezt-playlist li .ezt-note:hover {\r
  display:block !important;\r
 }\r
 \r
-ul.playlist li .sm2_divider {\r
+ul.ezt-playlist li .ezt-sm2_divider {\r
  font-size:0.75em;\r
 }\r
 \r
-ul.playlist li .sm2_metadata {\r
+ul.ezt-playlist li .ezt-sm2_metadata {\r
  font-size:0.65em;\r
 }\r
 \r
@@ -556,51 +556,51 @@ ul.playlist li .sm2_metadata {
  ---------------------------------\r
 */\r
 \r
-ul.playlist.dark li.sm2_playing a {\r
+ul.ezt-playlist.ezt-dark li.ezt-sm2_playing a {\r
  color:#fff;\r
 }\r
 \r
-ul.playlist.dark li.sm2_playing .timing,\r
-ul.playlist.use-peak.dark li.sm2_playing .peak {\r
+ul.ezt-playlist.ezt-dark li.ezt-sm2_playing .ezt-timing,\r
+ul.ezt-playlist.ezt-use-peak.ezt-dark li.ezt-sm2_playing .ezt-peak {\r
  color:#999;\r
 }\r
 \r
-ul.playlist.use-spectrum.dark li.sm2_playing .spectrum-container {\r
+ul.ezt-playlist.ezt-use-spectrum.ezt-dark li.ezt-sm2_playing .ezt-spectrum-container {\r
  background-color:#222;\r
  border-color:#444;\r
 }\r
 \r
-ul.playlist.use-spectrum.dark li.sm2_playing .spectrum-container .spectrum {\r
+ul.ezt-playlist.ezt-use-spectrum.ezt-dark li.ezt-sm2_playing .ezt-spectrum-container .ezt-spectrum {\r
  background-color:#999;\r
 }\r
 \r
-ul.playlist.dark li.sm2_paused {\r
+ul.ezt-playlist.ezt-dark li.ezt-sm2_paused {\r
  background-color:#333;\r
 }\r
 \r
-ul.playlist.dark li.sm2_paused a {\r
+ul.ezt-playlist.ezt-dark li.ezt-sm2_paused a {\r
  color:#999;\r
 }\r
 \r
-ul.playlist.dark li.sm2_playing,\r
-ul.playlist.dark li.sm2_playing:hover {\r
+ul.ezt-playlist.ezt-dark li.ezt-sm2_playing,\r
+ul.ezt-playlist.ezt-dark li.ezt-sm2_playing:hover {\r
  background-color:#333;\r
 }\r
 \r
-ul.playlist.dark li:hover .controls .statusbar {\r
+ul.ezt-playlist.ezt-dark li:hover .ezt-controls .ezt-statusbar {\r
  background-color:#666;\r
 }\r
 \r
-ul.playlist.dark li .controls {\r
+ul.ezt-playlist.ezt-dark li .ezt-controls {\r
  background-color:#333;\r
 }\r
 \r
-ul.playlist.dark li .controls .statusbar {\r
+ul.ezt-playlist.ezt-dark li .ezt-controls .ezt-statusbar {\r
  background-color:#666;\r
  border-color:#444;\r
 }\r
 \r
-ul.playlist.dark li .controls .statusbar .position {\r
+ul.ezt-playlist.ezt-dark li .ezt-controls .ezt-statusbar .ezt-position {\r
  background-color:#111;\r
  border-right:3px solid #111;\r
  border-radius:3px;\r
@@ -608,18 +608,18 @@ ul.playlist.dark li .controls .statusbar .position {
  -webkit-border-radius:3px;\r
 }\r
 \r
-ul.playlist.dark li .controls .statusbar .loading {\r
+ul.ezt-playlist.ezt-dark li .ezt-controls .ezt-statusbar .ezt-loading {\r
  background-color:#444;\r
 }\r
 \r
-ul.playlist.dark li .timing,\r
-ul.playlist.use-peak.dark li .peak {\r
+ul.ezt-playlist.ezt-dark li .ezt-timing,\r
+ul.ezt-playlist.ezt-use-peak.ezt-dark li .ezt-peak {\r
  background-color:#222;\r
  border-color:#444;\r
 }\r
 \r
-ul.playlist.dark.use-peak li .peak .l,\r
-ul.playlist.dark.use-peak li .peak .r {\r
+ul.ezt-playlist.ezt-dark.ezt-use-peak li .ezt-peak .ezt-l,\r
+ul.ezt-playlist.ezt-dark.ezt-use-peak li .ezt-peak .ezt-r {\r
  border-color:#444;\r
  background-color:#999;\r
 }\r
@@ -627,25 +627,25 @@ ul.playlist.dark.use-peak li .peak .r {
 \r
 /* gold theme */\r
 \r
-ul.playlist.gold li.sm2_paused {\r
+ul.ezt-playlist.ezt-gold li.ezt-sm2_paused {\r
  background-color:#996600;\r
 }\r
 \r
-ul.playlist.gold li.sm2_playing,\r
-ul.playlist.gold li.sm2_playing:hover {\r
+ul.ezt-playlist.ezt-gold li.ezt-sm2_playing,\r
+ul.ezt-playlist.ezt-gold li.ezt-sm2_playing:hover {\r
  background-color:#cc9900;\r
 }\r
 \r
-ul.playlist.gold li .controls {\r
+ul.ezt-playlist.ezt-gold li .ezt-controls {\r
  background-color:transparent;\r
 }\r
 \r
-ul.playlist.gold li .controls .statusbar {\r
+ul.ezt-playlist.ezt-gold li .ezt-controls .ezt-statusbar {\r
  background-color:#fff;\r
  border-color:#fff;\r
 }\r
 \r
-ul.playlist.gold li .controls .statusbar .position {\r
+ul.ezt-playlist.ezt-gold li .ezt-controls .ezt-statusbar .ezt-position {\r
  background-color:#996600;\r
  border-right:3px solid #996600;\r
  border-radius:3px;\r
@@ -653,27 +653,27 @@ ul.playlist.gold li .controls .statusbar .position {
  -webkit-border-radius:3px;\r
 }\r
 \r
-ul.playlist.gold li .controls .statusbar .loading {\r
+ul.ezt-playlist.ezt-gold li .ezt-controls .ezt-statusbar .ezt-loading {\r
  background-color:#ffeedd;\r
 }\r
 \r
-ul.playlist.gold li .timing,\r
-ul.playlist.use-peak.gold li .peak {\r
+ul.ezt-playlist.ezt-gold li .ezt-timing,\r
+ul.ezt-playlist.ezt-use-peak.ezt-gold li .ezt-peak {\r
  background-color:#CC9900;\r
  border-color:#ffcc33;\r
 }\r
 \r
-ul.playlist.use-spectrum.gold li.sm2_playing .spectrum-container {\r
+ul.ezt-playlist.ezt-use-spectrum.ezt-gold li.ezt-sm2_playing .ezt-spectrum-container {\r
  background-color:#cc9900;\r
  border-color:#ffcc33;\r
 }\r
 \r
-ul.playlist.use-spectrum.gold li.sm2_playing .spectrum-container .spectrum {\r
+ul.ezt-playlist.ezt-use-spectrum.ezt-gold li.ezt-sm2_playing .ezt-spectrum-container .ezt-spectrum {\r
  background-color:#fff;\r
 }\r
 \r
-ul.playlist.gold.use-peak li .peak .l,\r
-ul.playlist.gold.use-peak li .peak .r {\r
+ul.ezt-playlist.ezt-gold.ezt-use-peak li .ezt-peak .ezt-l,\r
+ul.ezt-playlist.ezt-gold.ezt-use-peak li .ezt-peak .ezt-r {\r
  border-color:#fff;\r
  background-color:#fff;\r
 }\r
@@ -681,41 +681,41 @@ ul.playlist.gold.use-peak li .peak .r {
 \r
 /* ZOMG PONIES!!!ONEONEONE */\r
 \r
-ul.playlist.bubblegum li a {\r
+ul.ezt-playlist.ezt-bubblegum li a {\r
  font-family:"comic sans ms",verdana,arial,tahoma,"sans serif"; /* heh */\r
 }\r
 \r
-ul.playlist.bubblegum li.sm2_paused,\r
-ul.playlist.bubblegum li.sm2_paused:hover {\r
+ul.ezt-playlist.ezt-bubblegum li.ezt-sm2_paused,\r
+ul.ezt-playlist.ezt-bubblegum li.ezt-sm2_paused:hover {\r
  background-color:#ffccee;\r
 }\r
 \r
-ul.playlist.bubblegum li.sm2_paused a,\r
-ul.playlist.bubblegum li.sm2_paused:hover a,\r
-ul.playlist.bubblegum li.sm2_paused .timing,\r
-ul.playlist.use-peak.bubblegum li.sm2_paused .peak {\r
+ul.ezt-playlist.ezt-bubblegum li.ezt-sm2_paused a,\r
+ul.ezt-playlist.ezt-bubblegum li.ezt-sm2_paused:hover a,\r
+ul.ezt-playlist.ezt-bubblegum li.ezt-sm2_paused .ezt-timing,\r
+ul.ezt-playlist.ezt-use-peak.ezt-bubblegum li.ezt-sm2_paused .ezt-peak {\r
  color:#ff6699;\r
 }\r
 \r
-ul.playlist.bubblegum li:hover {\r
+ul.ezt-playlist.ezt-bubblegum li:hover {\r
  background-color:#ffddee;\r
 }\r
 \r
-ul.playlist.bubblegum li.sm2_playing,\r
-ul.playlist.bubblegum li.sm2_playing:hover {\r
+ul.ezt-playlist.ezt-bubblegum li.ezt-sm2_playing,\r
+ul.ezt-playlist.ezt-bubblegum li.ezt-sm2_playing:hover {\r
  background-color:#ff7799;\r
 }\r
 \r
-ul.playlist.bubblegum li .controls {\r
+ul.ezt-playlist.ezt-bubblegum li .ezt-controls {\r
  background-color:transparent;\r
 }\r
 \r
-ul.playlist.bubblegum li .controls .statusbar {\r
+ul.ezt-playlist.ezt-bubblegum li .ezt-controls .ezt-statusbar {\r
  background-color:#fff;\r
  border-color:#fff;\r
 }\r
 \r
-ul.playlist.bubblegum li .controls .statusbar .position {\r
+ul.ezt-playlist.ezt-bubblegum li .ezt-controls .ezt-statusbar .ezt-position {\r
  background-color:#ffaacc;\r
  border-right:3px solid #ffaacc;\r
  border-radius:3px;\r
@@ -723,36 +723,36 @@ ul.playlist.bubblegum li .controls .statusbar .position {
  -webkit-border-radius:3px;\r
 }\r
 \r
-ul.playlist.bubblegum li .controls .statusbar .loading {\r
+ul.ezt-playlist.ezt-bubblegum li .ezt-controls .ezt-statusbar .ezt-loading {\r
  background-color:#ffeedd;\r
 }\r
 \r
-ul.playlist.bubblegum li .timing,\r
-ul.playlist.use-peak.bubblegum li .peak {\r
+ul.ezt-playlist.ezt-bubblegum li .ezt-timing,\r
+ul.ezt-playlist.ezt-use-peak.ezt-bubblegum li .ezt-peak {\r
  background-color:#ffaacc;\r
  border-color:#ffccee;\r
 }\r
 \r
-ul.playlist.use-spectrum.bubblegum li.sm2_playing .spectrum-container {\r
+ul.ezt-playlist.ezt-use-spectrum.ezt-bubblegum li.ezt-sm2_playing .ezt-spectrum-container {\r
  background-color:#ffaacc;\r
  border-color:#ffccee;\r
 }\r
 \r
-ul.playlist.use-spectrum.bubblegum li.sm2_playing .spectrum-container .spectrum {\r
+ul.ezt-playlist.ezt-use-spectrum.ezt-bubblegum li.ezt-sm2_playing .ezt-spectrum-container .ezt-spectrum {\r
  background-color:#fff;\r
 }\r
 \r
-ul.playlist.bubblegum.use-peak li .peak .l,\r
-ul.playlist.bubblegum.use-peak li .peak .r {\r
+ul.ezt-playlist.ezt-bubblegum.ezt-use-peak li .ezt-peak .ezt-l,\r
+ul.ezt-playlist.ezt-bubblegum.ezt-use-peak li .ezt-peak .ezt-r {\r
  border-color:#fff;\r
  background-color:#fff;\r
 }\r
 \r
 \r
-ul.playlist.shiny li.sm2_paused,\r
-ul.playlist.shiny li.sm2_playing {\r
- background-image:url(../image/top-highlight.png);\r
+ul.ezt-playlist.ezt-shiny li.ezt-sm2_paused,\r
+ul.ezt-playlist.ezt-shiny li.ezt-sm2_playing {\r
+ background-image:url(../image/top-highlight.ezt-png);\r
  background-repeat:repeat-x;\r
  background-position:0px -1px;\r
  _background-image:none; /* can't be bothered with IE 6. */\r
-}
\ No newline at end of file
+}\r

diff --git a/tools/eztelemeta/design/standard/templates/eztelemeta_foot.tpl b/tools/eztelemeta/design/standard/templates/eztelemeta_foot.tpl
new file mode 100644 (file)
index 0000000..34cb6b9
--- /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}