From 753f60c7d4769fa72d3b910e491f37db6f130898 Mon Sep 17 00:00:00 2001
From: Jules Laplace <carbon@melanarchy.org>
Date: Fri, 2 Aug 2013 17:19:21 -0500
Subject: dymaxion

---
 .../demo/360-player/script/360player.js            | 1270 ++++++++++++++++++++
 .../demo/360-player/script/berniecode-animator.js  |  674 +++++++++++
 .../demo/360-player/script/excanvas.js             |   17 +
 3 files changed, 1961 insertions(+)
 create mode 100755 docs/dymaxion/soundmanagerv297a-20101010/demo/360-player/script/360player.js
 create mode 100755 docs/dymaxion/soundmanagerv297a-20101010/demo/360-player/script/berniecode-animator.js
 create mode 100755 docs/dymaxion/soundmanagerv297a-20101010/demo/360-player/script/excanvas.js

(limited to 'docs/dymaxion/soundmanagerv297a-20101010/demo/360-player/script')

diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/360-player/script/360player.js b/docs/dymaxion/soundmanagerv297a-20101010/demo/360-player/script/360player.js
new file mode 100755
index 0000000..419559c
--- /dev/null
+++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/360-player/script/360player.js
@@ -0,0 +1,1270 @@
+/*
+
+  SoundManager 2 Demo: 360-degree / "donut player"
+  ------------------------------------------------
+  http://schillmania.com/projects/soundmanager2/
+
+  An inline player with a circular UI.
+  Based on the original SM2 inline player.
+  Inspired by Apple's preview feature in the
+  iTunes music store (iPhone), among others.
+
+  Requires SoundManager 2 Javascript API.
+  Also uses Bernie's Better Animation Class (BSD):
+  http://www.berniecode.com/writing/animator.html
+
+*/
+
+function ThreeSixtyPlayer() {
+  var self = this;
+  var pl = this;
+  var sm = soundManager; // soundManager instance
+  var uA = navigator.userAgent;
+  var isIE = (uA.match(/msie/i));
+  var isOpera = (uA.match(/opera/i));
+  var isSafari = (uA.match(/safari/i));
+  var isChrome = (uA.match(/chrome/i));
+  var isFirefox = (uA.match(/firefox/i));
+  var isTouchDevice = (uA.match(/ipad|iphone/i));
+  this.excludeClass = 'threesixty-exclude'; // CSS class for ignoring MP3 links
+
+  this.links = [];
+  this.sounds = [];
+  this.soundsByURL = [];
+  this.indexByURL = [];
+  this.lastSound = null;
+  this.soundCount = 0;
+  this.oUITemplate = null;
+  this.oUIImageMap = null;
+  this.vuMeter = null;
+
+  this.config = {
+
+    playNext: false,   // stop after one sound, or play through list until end
+    autoPlay: false,   // start playing the first sound right away
+    loadRingColor: '#ccc', // how much has loaded
+    playRingColor: '#000', // how much has played
+    backgroundRingColor: '#eee', // color shown underneath load + play ("not yet loaded" color)
+
+    // optional segment/annotation (metadata) stuff..
+    segmentRingColor: 'rgba(255,255,255,0.33)', // metadata/annotation (segment) colors
+    segmentRingColorAlt: 'rgba(0,0,0,0.1)',
+    loadRingColorMetadata: '#ddd', // "annotations" load color
+    playRingColorMetadata: 'rgba(96,160,224,0.99)', // how much has played when metadata is present
+    playRingColorMetadata: 'rgba(128,192,256,0.9)', // how much has played when metadata is present
+
+    circleDiameter: null, // set dynamically according to values from CSS
+    circleRadius: null,
+    imageRoot: '', // image path to prepend for transparent .GIF - eg. /images/
+    animDuration: 500,
+    animTransition: Animator.tx.bouncy, // http://www.berniecode.com/writing/animator.html
+    showHMSTime: false, // hours:minutes:seconds vs. seconds-only
+    scaleFont: false,  // also set the font size (if possible) while animating the circle
+
+    // optional: spectrum or EQ graph in canvas (not supported in IE, too slow via ExCanvas)
+    useWaveformData: false,
+    waveformDataColor: '#0099ff',
+    waveformDataDownsample: 3, // use only one in X (of a set of 256 values) - 1 means all 256
+    waveformDataOutside: false,
+    waveformDataConstrain: false, // if true, +ve values only - keep within inside circle
+    waveformDataLineRatio: 0.64,
+
+    // "spectrum frequency" option
+    useEQData: false,
+    eqDataColor: '#339933',
+    eqDataDownsample: 4, // use only one in X (of 256 values)
+    eqDataOutside: true,
+    eqDataLineRatio: 0.54,
+
+    // enable "amplifier" (canvas pulses like a speaker) effect
+    usePeakData: true,
+    peakDataColor: '#ff33ff',
+    peakDataOutside: true,
+    peakDataLineRatio: 0.5,
+
+    useAmplifier: true, // "pulse" like a speaker
+
+    fontSizeMax: null, // set according to CSS
+
+    useFavIcon: false // Experimental (also requires usePeakData: true).. Try to draw a "VU Meter" in the favicon area, if browser supports it (Firefox + Opera as of 2009)
+
+  }
+
+  this.css = {
+    // CSS class names appended to link during various states
+    sDefault: 'sm2_link', // default state
+    sBuffering: 'sm2_buffering',
+    sPlaying: 'sm2_playing',
+    sPaused: 'sm2_paused'
+  }
+
+  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'?o.className.match(new RegExp('(\\s|^)'+cStr+'(\\s|$)')):false);
+  }
+
+  this.addClass = function(o,cStr) {
+    if (!o || !cStr || self.hasClass(o,cStr)) return false;
+    o.className = (o.className?o.className+' ':'')+cStr;
+  }
+
+  this.removeClass = function(o,cStr) {
+    if (!o || !cStr || !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.push(nodes[tagNames[i]][j]);
+          }
+        }
+      }
+    } else {
+      for (i=0; i<nodes.length; i++) {
+        if (self.hasClass(nodes[i],className)) {
+          matches.push(nodes[i]);
+        }
+      }
+    }
+    return matches;
+  }
+
+  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.getParentByClassName = function(oChild,sParentClassName) {
+    if (!oChild || !sParentClassName) return false;
+    while (oChild.parentNode && !self.hasClass(oChild.parentNode,sParentClassName)) {
+      oChild = oChild.parentNode;
+    }
+    return (oChild.parentNode && self.hasClass(oChild.parentNode,sParentClassName)?oChild.parentNode:null);
+  }
+
+  this.getSoundByURL = function(sURL) {
+    return (typeof self.soundsByURL[sURL] != 'undefined'?self.soundsByURL[sURL]:null);
+  }
+
+  this.isChildOfNode = function(o,sNodeName) {
+    if (!o || !o.parentNode) {
+      return false;
+    }
+    sNodeName = sNodeName.toLowerCase();
+    do {
+      o = o.parentNode;
+    } while (o && o.parentNode && o.nodeName.toLowerCase() != sNodeName);
+    return (o && o.nodeName.toLowerCase() == sNodeName?o:null);
+  }
+
+  this.isChildOfClass = function(oChild,oClass) {
+    if (!oChild || !oClass) return false;
+    while (oChild.parentNode && !self.hasClass(oChild,oClass)) {
+      oChild = self.findParent(oChild);
+    }
+    return (self.hasClass(oChild,oClass));
+  }
+
+  this.findParent = function(o) {
+    if (!o || !o.parentNode) return false;
+    o = o.parentNode;
+    if (o.nodeType == 2) {
+      while (o && o.parentNode && o.parentNode.nodeType == 2) {
+        o = o.parentNode;
+      }
+    }
+    return o;
+  }
+
+  this.getStyle = function(o,sProp) {
+    // http://www.quirksmode.org/dom/getstyles.html
+    try {
+      if (o.currentStyle) {
+        return o.currentStyle[sProp];
+      } else if (window.getComputedStyle) {
+        return document.defaultView.getComputedStyle(o,null).getPropertyValue(sProp);
+      }
+    } catch(e) {
+      // oh well
+    }
+    return null;
+  }
+
+  this.findXY = function(obj) {
+    var curleft = 0;
+    var curtop = 0;
+    do {
+      curleft += obj.offsetLeft;
+      curtop += obj.offsetTop;
+    } while (obj = obj.offsetParent);
+    return [curleft,curtop];
+  }
+
+  this.getMouseXY = function(e) {
+    // http://www.quirksmode.org/js/events_properties.html
+    e = e?e:event;
+    if (isTouchDevice && e.touches) {
+      e = e.touches[0];
+    }
+    if (e.pageX || e.pageY) {
+      return [e.pageX,e.pageY];
+    } else if (e.clientX || e.clientY) {
+      return [e.clientX+self.getScrollLeft(),e.clientY+self.getScrollTop()];
+    }
+  }
+
+  this.getScrollLeft = function() {
+    return (document.body.scrollLeft+document.documentElement.scrollLeft);
+  }
+
+  this.getScrollTop = function() {
+    return (document.body.scrollTop+document.documentElement.scrollTop);
+  }
+
+  this.events = {
+
+    // handlers for sound events as they're started/stopped/played
+
+    play: function() {
+      pl.removeClass(this._360data.oUIBox,this._360data.className);
+      this._360data.className = pl.css.sPlaying;
+      pl.addClass(this._360data.oUIBox,this._360data.className);
+      self.fanOut(this);
+    },
+
+    stop: function() {
+      pl.removeClass(this._360data.oUIBox,this._360data.className);
+      this._360data.className = '';
+      self.fanIn(this);
+    },
+
+    pause: function() {
+      pl.removeClass(this._360data.oUIBox,this._360data.className);
+      this._360data.className = pl.css.sPaused;
+      pl.addClass(this._360data.oUIBox,this._360data.className);
+    },
+
+    resume: function() {
+      pl.removeClass(this._360data.oUIBox,this._360data.className);
+      this._360data.className = pl.css.sPlaying;
+      pl.addClass(this._360data.oUIBox,this._360data.className);      
+    },
+
+    finish: function() {
+      pl.removeClass(this._360data.oUIBox,this._360data.className);
+      this._360data.className = '';
+      // self.clearCanvas(this._360data.oCanvas);
+      this._360data.didFinish = true; // so fan draws full circle
+      self.fanIn(this);
+      if (pl.config.playNext) {
+        var nextLink = (pl.indexByURL[this._360data.oLink.href]+1);
+        if (nextLink<pl.links.length) {
+          pl.handleClick({'target':pl.links[nextLink]});
+        }
+      }
+    },
+
+    whileloading: function() {
+      if (this.paused) {
+        self.updatePlaying.apply(this);
+      }
+    },
+
+    whileplaying: function() {
+      self.updatePlaying.apply(this);
+      this._360data.fps++;
+    },
+
+     bufferchange: function() {
+       if (this.isBuffering) {
+         pl.addClass(this._360data.oUIBox,pl.css.sBuffering);
+       } else {
+         pl.removeClass(this._360data.oUIBox,pl.css.sBuffering);
+       }
+     }
+
+  }
+
+  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.getTheDamnLink = (isIE)?function(e) {
+    // I really didn't want to have to do this.
+    return (e && e.target?e.target:window.event.srcElement);
+  }:function(e) {
+    return e.target;
+  }
+
+  this.handleClick = function(e) {
+    // a sound link was clicked
+    if (e.button > 1) {
+      // only catch left-clicks
+      return true;
+    }
+    var o = self.getTheDamnLink(e);
+    if (o.nodeName.toLowerCase() != 'a') {
+      o = self.isChildOfNode(o,'a');
+      if (!o) return true;
+    }
+    if (!self.isChildOfClass(o,'ui360')) {
+      // not a link we're interested in
+      return true;
+    }
+    var sURL = o.getAttribute('href');
+    if (!o.href || !sm.canPlayLink(o) || self.hasClass(o,self.excludeClass)) {
+      return true; // pass-thru for non-MP3/non-links
+    }
+    sm._writeDebug('handleClick()');
+    var soundURL = (o.href);
+    var thisSound = self.getSoundByURL(soundURL);
+    if (thisSound) {
+      // already exists
+      if (thisSound == self.lastSound) {
+        // and was playing (or paused)
+        thisSound.togglePause();
+      } else {
+        // different sound
+        thisSound.togglePause(); // start playing current
+        sm._writeDebug('sound different than last sound: '+self.lastSound.sID);
+        if (self.lastSound) {
+          self.stopSound(self.lastSound);
+        }
+      }
+    } else {
+      // append some dom shiz
+
+      // create sound
+      thisSound = sm.createSound({
+       id:'ui360Sound'+(self.soundCount++),
+       url:soundURL,
+       onplay:self.events.play,
+       onstop:self.events.stop,
+       onpause:self.events.pause,
+       onresume:self.events.resume,
+       onfinish:self.events.finish,
+       onbufferchange:self.events.bufferchange,
+       whileloading:self.events.whileloading,
+       whileplaying:self.events.whileplaying
+      });
+      var oContainer = o.parentNode;
+      // tack on some custom data
+
+      thisSound._360data = {
+        oUI360: self.getParentByClassName(o,'ui360'), // the (whole) entire container
+        oLink: o, // DOM node for reference within SM2 object event handlers
+        className: self.css.sPlaying,
+        oUIBox: self.getElementsByClassName('sm2-360ui','div',oContainer)[0],
+        oCanvas: self.getElementsByClassName('sm2-canvas','canvas',oContainer)[0],
+        oButton: self.getElementsByClassName('sm2-360btn','img',oContainer)[0],
+        oTiming: self.getElementsByClassName('sm2-timing','div',oContainer)[0],
+        oCover: self.getElementsByClassName('sm2-cover','div',oContainer)[0],
+        lastTime: null,
+        didFinish: null,
+        pauseCount:0,
+        radius:0,
+        amplifier: (self.config.usePeakData?0.9:1), // TODO: x1 if not being used, else use dynamic "how much to amplify by" value
+        radiusMax: self.config.circleDiameter*0.175, // circle radius
+        width:0,
+        widthMax: self.config.circleDiameter*0.4, // width of the outer ring
+        lastValues: {
+          bytesLoaded: 0,
+          bytesTotal: 0,
+          position: 0,
+          durationEstimate: 0
+        }, // used to track "last good known" values before sound finish/reset for anim
+        animating: false,
+        oAnim: new Animator({
+          duration: self.config.animDuration,
+          transition:self.config.animTransition,
+          onComplete: function() {
+            // var thisSound = this;
+            // thisSound._360data.didFinish = false; // reset full circle
+          }
+        }),
+        oAnimProgress: function(nProgress) {
+          var thisSound = this;
+          thisSound._360data.radius = parseInt(thisSound._360data.radiusMax*thisSound._360data.amplifier*nProgress);
+          thisSound._360data.width = parseInt(thisSound._360data.widthMax*thisSound._360data.amplifier*nProgress);
+          if (self.config.scaleFont && self.config.fontSizeMax != null) {
+            thisSound._360data.oTiming.style.fontSize = parseInt(Math.max(1,self.config.fontSizeMax*nProgress))+'px';
+            thisSound._360data.oTiming.style.opacity = nProgress;
+          }
+          if (thisSound.paused || thisSound.playState == 0 || thisSound._360data.lastValues.bytesLoaded == 0 || thisSound._360data.lastValues.position == 0) {
+            self.updatePlaying.apply(thisSound);
+          }
+        },
+        fps: 0
+      };
+
+      // "Metadata" (annotations)
+      if (typeof self.Metadata != 'undefined' && self.getElementsByClassName('metadata','div',thisSound._360data.oUI360).length) {
+        thisSound._360data.metadata = new self.Metadata(thisSound,self);
+      }
+
+      // set the cover width/height to match the canvas
+      thisSound._360data.oCover.style.width = self.config.circleDiameter+'px';
+      thisSound._360data.oCover.style.height = self.config.circleDiameter+'px';
+
+      // minimize ze font
+      if (self.config.scaleFont && self.config.fontSizeMax != null) {
+        thisSound._360data.oTiming.style.fontSize = '1px';
+      }
+
+      // set up ze animation
+      thisSound._360data.oAnim.addSubject(thisSound._360data.oAnimProgress,thisSound);
+
+      // animate the radius out nice
+      self.refreshCoords(thisSound);
+
+      self.updatePlaying.apply(thisSound);
+
+      self.soundsByURL[soundURL] = thisSound;
+      self.sounds.push(thisSound);
+      if (self.lastSound) {
+        self.stopSound(self.lastSound);
+      }
+      thisSound.play();
+    }
+
+    self.lastSound = thisSound; // reference for next call
+
+    if (typeof e != 'undefined' && typeof e.preventDefault != 'undefined') {
+      e.preventDefault();
+    } else if (typeof event != 'undefined') {
+      event.returnValue = false;
+    }
+    return false;
+  }
+
+  this.fanOut = function(oSound) {
+     var thisSound = oSound;
+     if (thisSound._360data.animating == 1) {
+       return false;
+     }
+     thisSound._360data.animating = 0;
+     soundManager._writeDebug('fanOut: '+thisSound.sID+': '+thisSound._360data.oLink.href);
+     thisSound._360data.oAnim.seekTo(1); // play to end
+     window.setTimeout(function() {
+       // oncomplete hack
+       thisSound._360data.animating = 0;
+     },self.config.animDuration+20);
+  }
+
+  this.fanIn = function(oSound) {
+     var thisSound = oSound;
+     if (thisSound._360data.animating == -1) {
+       return false;
+     }
+     thisSound._360data.animating = -1;
+     soundManager._writeDebug('fanIn: '+thisSound.sID+': '+thisSound._360data.oLink.href);
+    // massive hack
+     thisSound._360data.oAnim.seekTo(0); // play to end
+    window.setTimeout(function() {
+      // reset full 360 fill after animation has completed (oncomplete hack)
+      thisSound._360data.didFinish = false;
+      thisSound._360data.animating = 0;
+      self.resetLastValues(thisSound);
+    },self.config.animDuration+20);
+
+  }
+
+  this.resetLastValues = function(oSound) {
+    var oData = oSound._360data;
+    oData.lastValues.position = 0;
+    // oData.lastValues.bytesLoaded = 0; // will likely be cached, if file is small
+    // oData.lastValues.bytesTotal = 0;
+    // oData.lastValues.durationEstimate = 0;
+  }
+
+  this.refreshCoords = function(thisSound) {
+    thisSound._360data.canvasXY = self.findXY(thisSound._360data.oCanvas);
+    // thisSound._360data.canvasMid = [Math.floor(thisSound._360data.oCanvas.offsetWidth/2), Math.floor(thisSound._360data.oCanvas.offsetHeight/2)]; // doesn't work in IE, w/h are wrong
+    thisSound._360data.canvasMid = [self.config.circleRadius,self.config.circleRadius];
+    thisSound._360data.canvasMidXY = [thisSound._360data.canvasXY[0]+thisSound._360data.canvasMid[0], thisSound._360data.canvasXY[1]+thisSound._360data.canvasMid[1]];
+  }
+
+  this.stopSound = function(oSound) {
+    soundManager._writeDebug('stopSound: '+oSound.sID);
+    soundManager.stop(oSound.sID);
+    soundManager.unload(oSound.sID);
+  }
+
+  this.buttonClick = function(e) {
+    var o = e?(e.target?e.target:e.srcElement):event.srcElement;
+    self.handleClick({target:self.getParentByClassName(o,'sm2-360ui').nextSibling}); // link next to the nodes we inserted
+    return false;
+  }
+
+  this.buttonMouseDown = function(e) {
+    // user might decide to drag from here
+    // watch for mouse move
+    if (!isTouchDevice) {
+      document.onmousemove = function(e) {
+        // should be boundary-checked, really (eg. move 3px first?)
+        self.mouseDown(e);
+      }
+    } else {
+      self.addEventHandler(document,'touchmove',self.mouseDown);
+    }
+    self.stopEvent(e);
+    return false;
+  }
+
+  this.mouseDown = function(e) {
+    if (!self.lastSound) {
+      self.stopEvent(e);
+      return false;
+    }
+    var thisSound = self.lastSound;
+    // just in case, update coordinates (maybe the element moved since last time.)
+    self.refreshCoords(thisSound);
+    var oData = self.lastSound._360data;
+    self.addClass(oData.oUIBox,'sm2_dragging');
+    oData.pauseCount = (self.lastSound.paused?1:0);
+    // self.lastSound.pause();
+    self.mmh(e?e:event);
+    if (isTouchDevice) {
+      self.removeEventHandler(document,'touchmove',self.mouseDown);
+      self.addEventHandler(document,'touchmove',self.mmh);
+      self.addEventHandler(document,'touchend',self.mouseUp);
+    } else {
+      document.onmousemove = self.mmh;
+      document.onmouseup = self.mouseUp;
+    }
+    self.stopEvent(e);
+    return false;
+  }
+
+  this.mouseUp = function(e) {
+    var oData = self.lastSound._360data;
+    self.removeClass(oData.oUIBox,'sm2_dragging');
+    if (oData.pauseCount == 0) {
+      self.lastSound.resume();
+    }
+    if (!isTouchDevice) {
+      document.onmousemove = null;
+      document.onmouseup = null;
+    } else {
+      self.removeEventHandler(document,'touchmove',self.mmh);
+      self.removeEventHandler(document,'touchend',self.mouseUP);
+    }
+  }
+
+  var fullCircle = 360;
+
+  this.mmh = function(e) {
+    if (typeof e == 'undefined') {
+      var e = event;
+    }
+    var oSound = self.lastSound;
+    var coords = self.getMouseXY(e);
+    var x = coords[0];
+    var y = coords[1];
+    var deltaX = x-oSound._360data.canvasMidXY[0];
+    var deltaY = y-oSound._360data.canvasMidXY[1];
+    var angle = Math.floor(fullCircle-(self.rad2deg(Math.atan2(deltaX,deltaY))+180));
+    oSound.setPosition(oSound.durationEstimate*(angle/fullCircle));
+    self.stopEvent(e);
+    return false;
+  }
+
+  // assignMouseDown();
+
+  this.drawSolidArc = function(oCanvas, color, radius, width, radians, startAngle, noClear) {
+
+    // thank you, http://www.snipersystems.co.nz/community/polarclock/tutorial.html
+
+    var x = radius;
+    var y = radius;
+
+    var canvas = oCanvas;
+
+    if (canvas.getContext){
+      // use getContext to use the canvas for drawing
+      var ctx = canvas.getContext('2d');
+    }
+
+    // var startAngle = 0;
+    var oCanvas = ctx;
+
+    if (!noClear) {
+      self.clearCanvas(canvas);
+    }
+    // ctx.restore();
+
+    if (color) {
+      ctx.fillStyle = color;
+    } else {
+      // ctx.fillStyle = 'black';
+    }
+
+    oCanvas.beginPath();
+
+    if (isNaN(radians)) {
+      radians = 0;
+    }
+
+    var innerRadius = radius-width;
+    var doesntLikeZero = (isOpera || isSafari); // safari 4 doesn't actually seem to mind.
+
+    if (!doesntLikeZero || (doesntLikeZero && radius > 0)) {
+      oCanvas.arc(0, 0, radius, startAngle, radians, false);
+      var endPoint = self.getArcEndpointCoords(innerRadius, radians);
+      oCanvas.lineTo(endPoint.x, endPoint.y);
+      oCanvas.arc(0, 0, innerRadius, radians, startAngle, true);
+      oCanvas.closePath();
+      oCanvas.fill();
+    }
+
+  }
+
+  this.getArcEndpointCoords = function(radius, radians) {
+    return {
+      x: radius * Math.cos(radians), 
+      y: radius * Math.sin(radians)
+    };
+  }
+
+
+this.deg2rad = function(nDeg) {
+  return (nDeg * Math.PI/180);
+}
+
+this.rad2deg = function(nRad) {
+  return (nRad * 180/Math.PI);
+}
+
+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.clearCanvas = function(oCanvas) {
+    var canvas = oCanvas;
+    var ctx = null;
+    if (canvas.getContext){
+      // use getContext to use the canvas for drawing
+      ctx = canvas.getContext('2d');
+    }
+    var width = canvas.offsetWidth;
+    var height = canvas.offsetHeight;
+    ctx.clearRect(-(width/2), -(height/2), width, height);
+}
+
+
+var fullCircle = (isOpera||isChrome?359.9:360); // I dunno what Opera doesn't like about this.
+
+this.updatePlaying = function() {
+  if (this.bytesLoaded) {
+    this._360data.lastValues.bytesLoaded = this.bytesLoaded;
+    this._360data.lastValues.bytesTotal = this.bytesTotal;
+  }
+  if (this.position) {
+    this._360data.lastValues.position = this.position;
+  }
+  if (this.durationEstimate) {
+    this._360data.lastValues.durationEstimate = this.durationEstimate;
+  }
+
+  self.drawSolidArc(this._360data.oCanvas,self.config.backgroundRingColor,this._360data.width,this._360data.radius,self.deg2rad(fullCircle),false);
+
+  self.drawSolidArc(this._360data.oCanvas,(this._360data.metadata?self.config.loadRingColorMetadata:self.config.loadRingColor),this._360data.width,this._360data.radius,self.deg2rad(fullCircle*(this._360data.lastValues.bytesLoaded/this._360data.lastValues.bytesTotal)),0,true);
+
+  if (this._360data.lastValues.position != 0) {
+    // don't draw if 0 (full black circle in Opera)
+    self.drawSolidArc(this._360data.oCanvas,(this._360data.metadata?self.config.playRingColorMetadata:self.config.playRingColor),this._360data.width,this._360data.radius,self.deg2rad((this._360data.didFinish==1?fullCircle:fullCircle*(this._360data.lastValues.position/this._360data.lastValues.durationEstimate))),0,true);
+  }
+
+  // metadata goes here
+  if (this._360data.metadata) {
+    this._360data.metadata.events.whileplaying();
+  }
+
+  var timeNow = (self.config.showHMSTime?self.getTime(this.position,true):parseInt(this.position/1000));
+
+  if (timeNow != this._360data.lastTime) {
+    this._360data.lastTime = timeNow;
+    this._360data.oTiming.innerHTML = timeNow;
+  }
+
+  // draw spectrum, if applicable
+  if (!isIE) { // IE can render maybe 3 or 4 FPS when including the wave/EQ, so don't bother.
+    self.updateWaveform(this);
+    // self.updateWaveformOld(this);
+  }
+
+  if (self.config.useFavIcon && self.vuMeter) {
+    self.vuMeter.updateVU(this);
+  }
+
+}
+
+  this.updateWaveform = function(oSound) {
+
+    if ((!self.config.useWaveformData && !self.config.useEQData) || (!sm.features.waveformData && !sm.features.eqData)) {
+      // feature not enabled..
+      return false;
+    }
+
+    if (!oSound.waveformData.left.length && !oSound.eqData.length && !oSound.peakData.left) {
+      // no data (or errored out/paused/unavailable?)
+      return false;
+    }
+
+    /* use for testing the data */
+    /*
+     for (i=0; i<256; i++) {
+       oSound.eqData[i] = 1-(i/256);
+     }
+    */
+
+    var oCanvas = oSound._360data.oCanvas.getContext('2d');
+    var offX = 0;
+    var offY = parseInt(self.config.circleDiameter/2);
+    var scale = offY/2; // Y axis (+/- this distance from 0)
+    var lineWidth = Math.floor(self.config.circleDiameter-(self.config.circleDiameter*0.175)/(self.config.circleDiameter/255)); // width for each line
+    lineWidth = 1;
+    var lineHeight = 1;
+    var thisY = 0;
+    var offset = offY;
+
+    if (self.config.useWaveformData) {
+      // raw waveform
+      var downSample = self.config.waveformDataDownsample; // only sample X in 256 (greater number = less sample points)
+      downSample = Math.max(1,downSample); // make sure it's at least 1
+      var dataLength = 256;
+      var sampleCount = (dataLength/downSample);
+      var startAngle = 0;
+      var endAngle = 0;
+      var waveData = null;
+      var innerRadius = (self.config.waveformDataOutside?1:(self.config.waveformDataConstrain?0.5:0.565));
+      var scale = (self.config.waveformDataOutside?0.7:0.75);
+      var perItemAngle = self.deg2rad((360/sampleCount)*self.config.waveformDataLineRatio); // 0.85 = clean pixel lines at 150? // self.deg2rad(360*(Math.max(1,downSample-1))/sampleCount);
+      for (var i=0; i<dataLength; i+=downSample) {
+        startAngle = self.deg2rad(360*(i/(sampleCount)*1/downSample)); // +0.67 - counter for spacing
+        endAngle = startAngle+perItemAngle;
+        waveData = oSound.waveformData.left[i];
+        if (waveData<0 && self.config.waveformDataConstrain) {
+          waveData = Math.abs(waveData);
+        }
+        self.drawSolidArc(oSound._360data.oCanvas,self.config.waveformDataColor,oSound._360data.width*innerRadius,oSound._360data.radius*scale*1.25*waveData,endAngle,startAngle,true);
+      }
+    }
+
+    if (self.config.useEQData) {
+      // EQ spectrum
+      var downSample = self.config.eqDataDownsample; // only sample N in 256
+      var yDiff = 0;
+      downSample = Math.max(1,downSample); // make sure it's at least 1
+      var eqSamples = 192; // drop the last 25% of the spectrum (>16500 Hz), most stuff won't actually use it.
+      var sampleCount = (eqSamples/downSample);
+      var innerRadius = (self.config.eqDataOutside?1:0.565);
+      var direction = (self.config.eqDataOutside?-1:1);
+      var scale = (self.config.eqDataOutside?0.5:0.75);
+      var startAngle = 0;
+      var endAngle = 0;
+      var perItemAngle = self.deg2rad((360/sampleCount)*self.config.eqDataLineRatio); // self.deg2rad(360/(sampleCount+1));
+      var playedAngle = self.deg2rad((oSound._360data.didFinish==1?360:360*(oSound._360data.lastValues.position/oSound._360data.lastValues.durationEstimate)));
+      var j=0;
+      var iAvg = 0;
+      for (var i=0; i<eqSamples; i+=downSample) {
+        startAngle = self.deg2rad(360*(i/eqSamples));
+        endAngle = startAngle+perItemAngle;
+        self.drawSolidArc(oSound._360data.oCanvas,(endAngle>playedAngle?self.config.eqDataColor:self.config.playRingColor),oSound._360data.width*innerRadius,oSound._360data.radius*scale*(oSound.eqData.left[i]*direction),endAngle,startAngle,true);
+      }
+    }
+
+    if (self.config.usePeakData) {
+      if (!oSound._360data.animating) {
+        var nPeak = (oSound.peakData.left||oSound.peakData.right);
+        // GIANT HACK: use EQ spectrum data for bass frequencies
+        var eqSamples = 3;
+        for (var i=0; i<eqSamples; i++) {
+          nPeak = (nPeak||oSound.eqData[i]);
+        }
+        oSound._360data.amplifier = (self.config.useAmplifier?(0.9+(nPeak*0.1)):1);
+        oSound._360data.radiusMax = self.config.circleDiameter*0.175*oSound._360data.amplifier;
+        oSound._360data.widthMax = self.config.circleDiameter*0.4*oSound._360data.amplifier;
+        oSound._360data.radius = parseInt(oSound._360data.radiusMax*oSound._360data.amplifier);
+        oSound._360data.width = parseInt(oSound._360data.widthMax*oSound._360data.amplifier);
+      }
+    }
+
+  }
+
+  this.updateWaveformOld = function(oSound) {
+
+    if ((!self.config.useWaveformData && !self.config.useEQData && !self.config.usePeakData) || (!sm.features.waveformData && !sm.features.eqData && !sm.features.peakData)) {
+      // feature not enabled..
+      return false;
+    }
+
+    if (!oSound.waveformData.left.length && !oSound.eqData.length && !oSound.peakData.left.length) {
+      // no data (or errored out/paused/unavailable?)
+      return false;
+    }
+
+    var oCanvas = oSound._360data.oCanvas.getContext('2d');
+    var offX = 0;
+    var offY = parseInt(self.config.circleDiameter*2/3);
+    var scale = offY*1/3; // Y axis (+/- this distance from 0)
+    var downSample = 1;
+    downSample = Math.max(1,downSample);
+    var j = oSound.waveformData.left.length;
+    var lineWidth = Math.max(1,((j*1/downSample)/self.config.circleDiameter));
+    var lineHeight = scale*2.5;
+    var thisY = 0;
+    var offset = offY;
+    var rotateDeg = -90;
+    oCanvas.rotate(self.deg2rad(rotateDeg*-1)); // compensate for arc starting at EAST // http://stackoverflow.com/questions/319267/tutorial-for-html-canvass-arc-function
+    oCanvas.translate(-self.config.circleRadius,-self.config.circleRadius);
+
+    if (self.config.useWaveformData) {
+      for (var i=0; i<j; i+=downSample) {
+        thisY = offY+(oSound.waveformData.left[i]*scale);
+        oCanvas.fillRect((i/j*(self.config.circleDiameter-lineWidth)+1),thisY,lineWidth,lineHeight);
+      }
+    } else {
+      // EQ spectrum
+      var offset = 9;
+      var yDiff = 0;
+      for (var i=0; i<128; i+=4) {
+        yDiff = oSound.eqData[i]*scale;
+        oCanvas.fillRect(i/128*(self.config.circleDiameter-4),self.config.circleDiameter-yDiff,lineWidth*3,yDiff);
+      }
+    }
+
+    // finished drawing..
+    oCanvas.translate(self.config.circleRadius,self.config.circleRadius);
+    oCanvas.rotate(self.deg2rad(rotateDeg)); // compensate for arc starting at EAST
+
+  }
+
+  this.callbackCount = 0;
+  this.peakDataHistory = [];
+
+  this.getUIHTML = function() {
+    return [
+     '<canvas class="sm2-canvas" width="'+self.config.circleDiameter+'" height="'+self.config.circleDiameter+'"></canvas>',
+     ' <img src="'+self.config.imageRoot+'empty.gif" class="sm2-360btn sm2-360btn-default" style="border:none" />', // note use of imageMap, edit or remove if you use a different-size image.
+     ' <div class="sm2-timing'+(navigator.userAgent.match(/safari/i)?' alignTweak':'')+'"></div>', // + Ever-so-slight Safari horizontal alignment tweak
+     ' <div class="sm2-cover"></div>'
+    ];
+  }
+
+  this.init = function() {
+    sm._writeDebug('threeSixtyPlayer.init()');
+    var oItems = self.getElementsByClassName('ui360','div');
+    var oLinks = [];
+
+    for (var i=0,j=oItems.length; i<j; i++) {
+      oLinks.push(oItems[i].getElementsByTagName('a')[0]);
+      // remove "fake" play button (unsupported case)
+      oItems[i].style.backgroundImage = 'none';
+    }
+    // grab all links, look for .mp3
+    var foundItems = 0;
+    var oCanvas = null;
+    var oCanvasCTX = null;
+    var oCover = null;
+
+    self.oUITemplate = document.createElement('div');
+    self.oUITemplate.className = 'sm2-360ui';
+    
+    // fake a 360 UI so we can get some numbers from CSS, etc.
+
+    var oFakeUI = document.createElement('div');
+    oFakeUI.className = 'ui360';
+
+    var oFakeUIBox = oFakeUI.appendChild(self.oUITemplate.cloneNode(true));
+    oFakeUI.style.position = 'absolute';
+    oFakeUI.style.left = '-9999px';
+    var uiHTML = self.getUIHTML();
+
+    oFakeUIBox.innerHTML = uiHTML[1]+uiHTML[2]+uiHTML[3];
+    delete uiHTML;
+
+    var oTemp = document.body.appendChild(oFakeUI);
+
+    self.config.circleDiameter = parseInt(oFakeUIBox.offsetWidth);
+    self.config.circleRadius = parseInt(self.config.circleDiameter/2);
+    var oTiming = self.getElementsByClassName('sm2-timing','div',oTemp)[0];
+    self.config.fontSizeMax = parseInt(self.getStyle(oTiming,'font-size'));
+    if (isNaN(self.config.fontSizeMax)) {
+      // getStyle() etc. didn't work.
+      self.config.fontSizeMax = null;
+    }
+    // soundManager._writeDebug('diameter, font size: '+self.config.circleDiameter+','+self.config.fontSizeMax);
+
+    oFakeUI.parentNode.removeChild(oFakeUI);
+    delete oFakeUI;
+    delete oFakeUIBox;
+    delete oTemp;
+
+    // canvas needs inline width and height, doesn't quite work otherwise
+    self.oUITemplate.innerHTML = self.getUIHTML().join('');
+
+    for (i=0,j=oLinks.length; i<j; i++) {
+      if (sm.canPlayLink(oLinks[i]) && !self.hasClass(oLinks[i],self.excludeClass)) {
+        self.addClass(oLinks[i],self.css.sDefault); // add default CSS decoration
+        self.links[foundItems] = (oLinks[i]);
+        self.indexByURL[oLinks[i].href] = foundItems; // hack for indexing
+        foundItems++;
+        // add canvas shiz
+        var oUI = oLinks[i].parentNode.insertBefore(self.oUITemplate.cloneNode(true),oLinks[i]);
+
+        if (isIE && typeof G_vmlCanvasManager != 'undefined') { // IE only
+          var o = oLinks[i].parentNode;
+          var o2 = document.createElement('canvas');
+          o2.className = 'sm2-canvas';
+          var oID = 'sm2_canvas_'+parseInt(Math.random()*1048576);
+          o2.id = oID;
+          o2.width = self.config.circleDiameter;
+          o2.height = self.config.circleDiameter;
+          oUI.appendChild(o2);
+          G_vmlCanvasManager.initElement(o2); // Apply ExCanvas compatibility magic
+          oCanvas = document.getElementById(oID);
+        } else { 
+          // add a handler for the button
+          oCanvas = oLinks[i].parentNode.getElementsByTagName('canvas')[0];
+        }
+        oCover = self.getElementsByClassName('sm2-cover','div',oLinks[i].parentNode)[0];
+        var oBtn = oLinks[i].parentNode.getElementsByTagName('img')[0];
+        var oBtn = oLinks[i].parentNode.getElementsByTagName('img')[0]
+        self.addEventHandler(oBtn,'click',self.buttonClick);
+        if (!isTouchDevice) {
+          self.addEventHandler(oCover,'mousedown',self.mouseDown);
+        } else {
+          self.addEventHandler(oCover,'touchstart',self.mouseDown);
+        }
+        oCanvasCTX = oCanvas.getContext('2d');
+        oCanvasCTX.translate(self.config.circleRadius,self.config.circleRadius);
+        oCanvasCTX.rotate(self.deg2rad(-90)); // compensate for arc starting at EAST // http://stackoverflow.com/questions/319267/tutorial-for-html-canvass-arc-function
+      }
+    }
+    if (foundItems>0) {
+      self.addEventHandler(document,'click',self.handleClick);
+      if (self.config.autoPlay) {
+        self.handleClick({target:self.links[0],preventDefault:function(){}});
+      }
+    }
+    sm._writeDebug('threeSixtyPlayer.init(): Found '+foundItems+' relevant items.');
+
+    if (self.config.useFavIcon && typeof this.VUMeter != 'undefined') {
+      this.vuMeter = new this.VUMeter(this);
+    }
+
+  }
+
+}
+
+// Optional: VU Meter component
+
+ThreeSixtyPlayer.prototype.VUMeter = function(oParent) {
+
+  var self = oParent;
+  var me = this;
+  this.vuMeterData = [];
+  this.vuDataCanvas = null;
+  var _head = document.getElementsByTagName('head')[0];
+  var isOpera = (navigator.userAgent.match(/opera/i));
+  var isFirefox = (navigator.userAgent.match(/firefox/i));
+
+  this.setPageIcon = function(sDataURL) {
+
+    if (!self.config.useFavIcon || !self.config.usePeakData || !sDataURL) {
+      return false;
+    }
+
+    var link = document.getElementById('sm2-favicon');
+    if (link) {
+      _head.removeChild(link);
+      link = null;
+    }
+    if (!link) {
+      link = document.createElement('link');
+      link.id = 'sm2-favicon';
+      link.rel = 'shortcut icon';
+      link.type = 'image/png';
+      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.updateVU = function(oSound) {
+    if (soundManager.flashVersion >= 9 && self.config.useFavIcon && self.config.usePeakData) {
+      me.setPageIcon(me.vuMeterData[parseInt(16*oSound.peakData.left)][parseInt(16*oSound.peakData.right)]);
+    }
+  }
+
+  this.createVUData = function() {
+    var i=0;
+    var j=0;
+    var canvas = me.vuDataCanvas.getContext('2d');
+    var vuGrad = canvas.createLinearGradient(0, 16, 0, 0);
+    vuGrad.addColorStop(0,'rgb(0,192,0)');
+    vuGrad.addColorStop(0.30,'rgb(0,255,0)');
+    vuGrad.addColorStop(0.625,'rgb(255,255,0)');
+    vuGrad.addColorStop(0.85,'rgb(255,0,0)');
+    var bgGrad = canvas.createLinearGradient(0, 16, 0, 0);
+    var outline = 'rgba(0,0,0,0.2)';
+    bgGrad.addColorStop(0,outline);
+    bgGrad.addColorStop(1,'rgba(0,0,0,0.5)');
+    for (i=0; i<16; i++) {
+      me.vuMeterData[i] = [];
+    }
+    for (var i=0; i<16; i++) {
+      for (j=0; j<16; j++) {
+        // reset/erase canvas
+        me.vuDataCanvas.setAttribute('width',16);
+        me.vuDataCanvas.setAttribute('height',16);
+        // draw new stuffs
+        canvas.fillStyle = bgGrad;
+        canvas.fillRect(0,0,7,15);
+        canvas.fillRect(8,0,7,15);
+        /*
+        // shadow
+        canvas.fillStyle = 'rgba(0,0,0,0.1)';
+        canvas.fillRect(1,15-i,7,17-(17-i));
+        canvas.fillRect(9,15-j,7,17-(17-j));
+        */
+        canvas.fillStyle = vuGrad;
+        canvas.fillRect(0,15-i,7,16-(16-i));
+        canvas.fillRect(8,15-j,7,16-(16-j));
+        // and now, clear out some bits.
+        canvas.clearRect(0,3,16,1);
+        canvas.clearRect(0,7,16,1);
+        canvas.clearRect(0,11,16,1);
+        me.vuMeterData[i][j] = me.vuDataCanvas.toDataURL('image/png');
+        // for debugging VU images
+        /*
+        var o = document.createElement('img');
+        o.style.marginRight = '5px'; 
+        o.src = vuMeterData[i][j];
+        document.documentElement.appendChild(o);
+        */
+      }
+    }
+  };
+
+  this.testCanvas = function(noOpaque) {
+    // canvas + toDataURL();
+    var c = document.createElement('canvas');
+    var ctx = null;
+    if (!c || typeof c.getContext == 'undefined') {
+      return null;
+    }
+    ctx = c.getContext('2d');
+    if (!ctx || typeof c.toDataURL != 'function') {
+      return null;
+    }
+    // just in case..
+    try {
+      var ok = c.toDataURL('image/png');
+    } catch(e) {
+      // no canvas or no toDataURL()
+      return null;
+    }
+    // assume we're all good.
+    return c;
+  }
+
+  this.init = function() {
+    if (self.config.useFavIcon) {
+      me.vuDataCanvas = me.testCanvas(true);
+      if (me.vuDataCanvas && (isFirefox || isOpera)) {
+        // these browsers support dynamically-updating the favicon
+        me.createVUData();
+      } else {
+        // browser doesn't support doing this
+        self.config.useFavIcon = false;
+      }
+    }
+  }
+
+  this.init();
+
+}
+
+// completely optional: Metadata/annotations/segments code
+
+ThreeSixtyPlayer.prototype.Metadata = function(oSound, oParent) {
+  soundManager._wD('Metadata()');
+  var me = this;
+  var oBox = oSound._360data.oUI360;
+  var o = oBox.getElementsByTagName('ul')[0];
+  var oItems = o.getElementsByTagName('li');
+  var isFirefox = (navigator.userAgent.match(/firefox/i));
+  this.lastWPExec = 0;
+  this.refreshInterval = 250;
+
+  var isAlt = false;
+
+  this.events = {
+    whileplaying: function() {
+      var width = oSound._360data.width;
+      var radius = oSound._360data.radius;
+      var fullDuration = (oSound.durationEstimate||(me.totalTime*1000));
+      var isAlt = null;
+      for (var i=0,j=me.data.length; i<j; i++) {
+        isAlt = (i%2==0);
+        oParent.drawSolidArc(oSound._360data.oCanvas,(isAlt?oParent.config.segmentRingColorAlt:oParent.config.segmentRingColor),isAlt?width:width, isAlt?radius/2:radius/2, oParent.deg2rad(360*(me.data[i].endTimeMS/fullDuration)), oParent.deg2rad(360*((me.data[i].startTimeMS||1)/fullDuration)), true);
+      }
+      var d = new Date();
+      if (d-me.lastWPExec>me.refreshInterval) {
+        me.refresh();
+        me.lastWPExec = d;
+      }
+    }
+  }
+
+  this.refresh = function() {
+    // Display info as appropriate
+    var index = null;
+    var now = oSound.position;
+    var metadata = oSound._360data.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 && index < metadata.length) {
+      // update
+      oSound._360data.oLink.innerHTML = metadata.mainTitle+' <span class="metadata"><span class="sm2_divider"> | </span><span class="sm2_metadata">'+metadata[index].title+'</span></span>';
+      // self.setPageTitle(metadata[index].title+' | '+metadata.mainTitle);
+      metadata.currentItem = index;
+    }
+  }
+
+  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._360data.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: me.strToTime(oItems[i].getElementsByTagName('span')[0].innerHTML.replace(/[()]/g,'')),
+      duration: 0,
+      durationMS: null,
+      startTimeMS: null,
+      endTimeMS: null,
+      oNote: null
+    }
+  }
+  var oDuration = oParent.getElementsByClassName('duration','div',oBox);
+  this.data.givenDuration = (oDuration.length?me.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:(me.data.givenDuration?me.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;
+  }
+}
+
+var threeSixtyPlayer = null;
+
+if (navigator.userAgent.match(/webkit/i) && navigator.userAgent.match(/mobile/i)) {
+  // iPad, iPhone etc.
+  soundManager.useHTML5Audio = true;
+}
+
+soundManager.debugMode = (window.location.href.match(/debug=1/i)); // disable or enable debug output
+soundManager.consoleOnly = true;
+soundManager.flashVersion = 9;
+soundManager.useHighPerformance = true;
+soundManager.useFlashBlock = true;
+
+// soundManager.useFastPolling = true; // for more aggressive, faster UI updates (higher CPU use)
+
+// FPS data, testing/debug only
+if (soundManager.debugMode) {
+  var t = window.setInterval(function(){
+    if (threeSixtyPlayer && threeSixtyPlayer.lastSound && threeSixtyPlayer.lastSound._360data.fps && typeof window.isHome === 'undefined') {
+      soundManager._writeDebug('fps: ~'+threeSixtyPlayer.lastSound._360data.fps);
+      threeSixtyPlayer.lastSound._360data.fps = 0;
+    }
+  },1000);
+}
+
+threeSixtyPlayer = new ThreeSixtyPlayer();
+
+if (threeSixtyPlayer.config.useWaveformData) {
+  soundManager.flash9Options.useWaveformData = true;
+}
+if (threeSixtyPlayer.config.useEQData) {
+  soundManager.flash9Options.useEQData = true;
+}
+if (threeSixtyPlayer.config.usePeakData) {
+  soundManager.flash9Options.usePeakData = true;
+}
+
+soundManager.onready(function(){
+  if (soundManager.supported()) {
+    // soundManager.createSound() etc. may now be called
+    threeSixtyPlayer.init();
+  }
+});
\ No newline at end of file
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/360-player/script/berniecode-animator.js b/docs/dymaxion/soundmanagerv297a-20101010/demo/360-player/script/berniecode-animator.js
new file mode 100755
index 0000000..1e852e5
--- /dev/null
+++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/360-player/script/berniecode-animator.js
@@ -0,0 +1,674 @@
+/*  
+	Animator.js 1.1.9
+	
+	This library is released under the BSD license:
+
+	Copyright (c) 2006, Bernard Sumption. All rights reserved.
+	
+	Redistribution and use in source and binary forms, with or without
+	modification, are permitted provided that the following conditions are met:
+	
+	Redistributions of source code must retain the above copyright notice, this
+	list of conditions and the following disclaimer. Redistributions in binary
+	form must reproduce the above copyright notice, this list of conditions and
+	the following disclaimer in the documentation and/or other materials
+	provided with the distribution. Neither the name BernieCode nor
+	the names of its contributors may be used to endorse or promote products
+	derived from this software without specific prior written permission. 
+	
+	THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+	AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+	IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+	ARE DISCLAIMED. IN NO EVENT SHALL THE REGENTS OR CONTRIBUTORS BE LIABLE FOR
+	ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+	DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+	SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+	CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
+	LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
+	OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH
+	DAMAGE.
+
+*/
+
+// http://www.berniecode.com/writing/animator.html
+
+// Applies a sequence of numbers between 0 and 1 to a number of subjects
+// construct - see setOptions for parameters
+function Animator(options) {
+	this.setOptions(options);
+	var _this = this;
+	this.timerDelegate = function(){_this.onTimerEvent()};
+	this.subjects = [];
+	this.subjectScopes = [];
+	this.target = 0;
+	this.state = 0;
+	this.lastTime = null;
+};
+Animator.prototype = {
+	// apply defaults
+	setOptions: function(options) {
+		this.options = Animator.applyDefaults({
+			interval: 20,  // time between animation frames
+			duration: 400, // length of animation
+			onComplete: function(){},
+			onStep: function(){},
+			transition: Animator.tx.easeInOut
+		}, options);
+	},
+	// animate from the current state to provided value
+	seekTo: function(to) {
+		this.seekFromTo(this.state, to);
+	},
+	// animate from the current state to provided value
+	seekFromTo: function(from, to) {
+		this.target = Math.max(0, Math.min(1, to));
+		this.state = Math.max(0, Math.min(1, from));
+		this.lastTime = new Date().getTime();
+		if (!this.intervalId) {
+			this.intervalId = window.setInterval(this.timerDelegate, this.options.interval);
+		}
+	},
+	// animate from the current state to provided value
+	jumpTo: function(to) {
+		this.target = this.state = Math.max(0, Math.min(1, to));
+		this.propagate();
+	},
+	// seek to the opposite of the current target
+	toggle: function() {
+		this.seekTo(1 - this.target);
+	},
+	// add a function or an object with a method setState(state) that will be called with a number
+	// between 0 and 1 on each frame of the animation
+	addSubject: function(subject,scope) {
+		this.subjects[this.subjects.length] = subject;
+		this.subjectScopes[this.subjectScopes.length] = scope;
+		return this;
+	},
+	// remove all subjects
+	clearSubjects: function() {
+		this.subjects = [];
+		this.subjectScopes = [];
+	},
+	// forward the current state to the animation subjects
+	propagate: function() {
+		var value = this.options.transition(this.state);
+		for (var i=0; i<this.subjects.length; i++) {
+			if (this.subjects[i].setState) {
+				this.subjects[i].setState(value);
+			} else {
+				this.subjects[i].apply(this.subjectScopes[i],[value]);
+			}
+		}
+	},
+	// called once per frame to update the current state
+	onTimerEvent: function() {
+		var now = new Date().getTime();
+		var timePassed = now - this.lastTime;
+		this.lastTime = now;
+		var movement = (timePassed / this.options.duration) * (this.state < this.target ? 1 : -1);
+		if (Math.abs(movement) >= Math.abs(this.state - this.target)) {
+			this.state = this.target;
+		} else {
+			this.state += movement;
+		}
+		
+		try {
+			this.propagate();
+		} finally {
+			this.options.onStep.call(this);
+			if (this.target == this.state) {
+				window.clearInterval(this.intervalId);
+				this.intervalId = null;
+				this.options.onComplete.call(this);
+			}
+		}
+	},
+	// shortcuts
+	play: function() {this.seekFromTo(0, 1)},
+	reverse: function() {this.seekFromTo(1, 0)},
+	// return a string describing this Animator, for debugging
+	inspect: function() {
+		var str = "#<Animator:\n";
+		for (var i=0; i<this.subjects.length; i++) {
+			str += this.subjects[i].inspect();
+		}
+		str += ">";
+		return str;
+	}
+}
+// merge the properties of two objects
+Animator.applyDefaults = function(defaults, prefs) {
+	prefs = prefs || {};
+	var prop, result = {};
+	for (prop in defaults) result[prop] = prefs[prop] !== undefined ? prefs[prop] : defaults[prop];
+	return result;
+}
+// make an array from any object
+Animator.makeArray = function(o) {
+	if (o == null) return [];
+	if (!o.length) return [o];
+	var result = [];
+	for (var i=0; i<o.length; i++) result[i] = o[i];
+	return result;
+}
+// convert a dash-delimited-property to a camelCaseProperty (c/o Prototype, thanks Sam!)
+Animator.camelize = function(string) {
+	var oStringList = string.split('-');
+	if (oStringList.length == 1) return oStringList[0];
+	
+	var camelizedString = string.indexOf('-') == 0
+		? oStringList[0].charAt(0).toUpperCase() + oStringList[0].substring(1)
+		: oStringList[0];
+	
+	for (var i = 1, len = oStringList.length; i < len; i++) {
+		var s = oStringList[i];
+		camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
+	}
+	return camelizedString;
+}
+// syntactic sugar for creating CSSStyleSubjects
+Animator.apply = function(el, style, options) {
+	if (style instanceof Array) {
+		return new Animator(options).addSubject(new CSSStyleSubject(el, style[0], style[1]));
+	}
+	return new Animator(options).addSubject(new CSSStyleSubject(el, style));
+}
+// make a transition function that gradually accelerates. pass a=1 for smooth
+// gravitational acceleration, higher values for an exaggerated effect
+Animator.makeEaseIn = function(a) {
+	return function(state) {
+		return Math.pow(state, a*2); 
+	}
+}
+// as makeEaseIn but for deceleration
+Animator.makeEaseOut = function(a) {
+	return function(state) {
+		return 1 - Math.pow(1 - state, a*2); 
+	}
+}
+// make a transition function that, like an object with momentum being attracted to a point,
+// goes past the target then returns
+Animator.makeElastic = function(bounces) {
+	return function(state) {
+		state = Animator.tx.easeInOut(state);
+		return ((1-Math.cos(state * Math.PI * bounces)) * (1 - state)) + state; 
+	}
+}
+// make an Attack Decay Sustain Release envelope that starts and finishes on the same level
+// 
+Animator.makeADSR = function(attackEnd, decayEnd, sustainEnd, sustainLevel) {
+	if (sustainLevel == null) sustainLevel = 0.5;
+	return function(state) {
+		if (state < attackEnd) {
+			return state / attackEnd;
+		}
+		if (state < decayEnd) {
+			return 1 - ((state - attackEnd) / (decayEnd - attackEnd) * (1 - sustainLevel));
+		}
+		if (state < sustainEnd) {
+			return sustainLevel;
+		}
+		return sustainLevel * (1 - ((state - sustainEnd) / (1 - sustainEnd)));
+	}
+}
+// make a transition function that, like a ball falling to floor, reaches the target and/
+// bounces back again
+Animator.makeBounce = function(bounces) {
+	var fn = Animator.makeElastic(bounces);
+	return function(state) {
+		state = fn(state); 
+		return state <= 1 ? state : 2-state;
+	}
+}
+ 
+// pre-made transition functions to use with the 'transition' option
+Animator.tx = {
+	easeInOut: function(pos){
+		return ((-Math.cos(pos*Math.PI)/2) + 0.5);
+	},
+	linear: function(x) {
+		return x;
+	},
+	easeIn: Animator.makeEaseIn(1.5),
+	easeOut: Animator.makeEaseOut(1.5),
+	strongEaseIn: Animator.makeEaseIn(2.5),
+	strongEaseOut: Animator.makeEaseOut(2.5),
+	elastic: Animator.makeElastic(1),
+	veryElastic: Animator.makeElastic(3),
+	bouncy: Animator.makeBounce(1),
+	veryBouncy: Animator.makeBounce(3)
+}
+
+// animates a pixel-based style property between two integer values
+function NumericalStyleSubject(els, property, from, to, units) {
+	this.els = Animator.makeArray(els);
+	if (property == 'opacity' && window.ActiveXObject) {
+		this.property = 'filter';
+	} else {
+		this.property = Animator.camelize(property);
+	}
+	this.from = parseFloat(from);
+	this.to = parseFloat(to);
+	this.units = units != null ? units : 'px';
+}
+NumericalStyleSubject.prototype = {
+	setState: function(state) {
+		var style = this.getStyle(state);
+		var visibility = (this.property == 'opacity' && state == 0) ? 'hidden' : '';
+		var j=0;
+		for (var i=0; i<this.els.length; i++) {
+			try {
+				this.els[i].style[this.property] = style;
+			} catch (e) {
+				// ignore fontWeight - intermediate numerical values cause exeptions in firefox
+				if (this.property != 'fontWeight') throw e;
+			}
+			if (j++ > 20) return;
+		}
+	},
+	getStyle: function(state) {
+		state = this.from + ((this.to - this.from) * state);
+		if (this.property == 'filter') return "alpha(opacity=" + Math.round(state*100) + ")";
+		if (this.property == 'opacity') return state;
+		return Math.round(state) + this.units;
+	},
+	inspect: function() {
+		return "\t" + this.property + "(" + this.from + this.units + " to " + this.to + this.units + ")\n";
+	}
+}
+
+// animates a colour based style property between two hex values
+function ColorStyleSubject(els, property, from, to) {
+	this.els = Animator.makeArray(els);
+	this.property = Animator.camelize(property);
+	this.to = this.expandColor(to);
+	this.from = this.expandColor(from);
+	this.origFrom = from;
+	this.origTo = to;
+}
+
+ColorStyleSubject.prototype = {
+	// parse "#FFFF00" to [256, 256, 0]
+	expandColor: function(color) {
+		var hexColor, red, green, blue;
+		hexColor = ColorStyleSubject.parseColor(color);
+		if (hexColor) {
+			red = parseInt(hexColor.slice(1, 3), 16);
+			green = parseInt(hexColor.slice(3, 5), 16);
+			blue = parseInt(hexColor.slice(5, 7), 16);
+			return [red,green,blue]
+		}
+		if (window.DEBUG) {
+			alert("Invalid colour: '" + color + "'");
+		}
+	},
+	getValueForState: function(color, state) {
+		return Math.round(this.from[color] + ((this.to[color] - this.from[color]) * state));
+	},
+	setState: function(state) {
+		var color = '#'
+				+ ColorStyleSubject.toColorPart(this.getValueForState(0, state))
+				+ ColorStyleSubject.toColorPart(this.getValueForState(1, state))
+				+ ColorStyleSubject.toColorPart(this.getValueForState(2, state));
+		for (var i=0; i<this.els.length; i++) {
+			this.els[i].style[this.property] = color;
+		}
+	},
+	inspect: function() {
+		return "\t" + this.property + "(" + this.origFrom + " to " + this.origTo + ")\n";
+	}
+}
+
+// return a properly formatted 6-digit hex colour spec, or false
+ColorStyleSubject.parseColor = function(string) {
+	var color = '#', match;
+	if(match = ColorStyleSubject.parseColor.rgbRe.exec(string)) {
+		var part;
+		for (var i=1; i<=3; i++) {
+			part = Math.max(0, Math.min(255, parseInt(match[i])));
+			color += ColorStyleSubject.toColorPart(part);
+		}
+		return color;
+	}
+	if (match = ColorStyleSubject.parseColor.hexRe.exec(string)) {
+		if(match[1].length == 3) {
+			for (var i=0; i<3; i++) {
+				color += match[1].charAt(i) + match[1].charAt(i);
+			}
+			return color;
+		}
+		return '#' + match[1];
+	}
+	return false;
+}
+// convert a number to a 2 digit hex string
+ColorStyleSubject.toColorPart = function(number) {
+	if (number > 255) number = 255;
+	var digits = number.toString(16);
+	if (number < 16) return '0' + digits;
+	return digits;
+}
+ColorStyleSubject.parseColor.rgbRe = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i;
+ColorStyleSubject.parseColor.hexRe = /^\#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+
+// Animates discrete styles, i.e. ones that do not scale but have discrete values
+// that can't be interpolated
+function DiscreteStyleSubject(els, property, from, to, threshold) {
+	this.els = Animator.makeArray(els);
+	this.property = Animator.camelize(property);
+	this.from = from;
+	this.to = to;
+	this.threshold = threshold || 0.5;
+}
+
+DiscreteStyleSubject.prototype = {
+	setState: function(state) {
+		var j=0;
+		for (var i=0; i<this.els.length; i++) {
+			this.els[i].style[this.property] = state <= this.threshold ? this.from : this.to; 
+		}
+	},
+	inspect: function() {
+		return "\t" + this.property + "(" + this.from + " to " + this.to + " @ " + this.threshold + ")\n";
+	}
+}
+
+// animates between two styles defined using CSS.
+// if style1 and style2 are present, animate between them, if only style1
+// is present, animate between the element's current style and style1
+function CSSStyleSubject(els, style1, style2) {
+	els = Animator.makeArray(els);
+	this.subjects = [];
+	if (els.length == 0) return;
+	var prop, toStyle, fromStyle;
+	if (style2) {
+		fromStyle = this.parseStyle(style1, els[0]);
+		toStyle = this.parseStyle(style2, els[0]);
+	} else {
+		toStyle = this.parseStyle(style1, els[0]);
+		fromStyle = {};
+		for (prop in toStyle) {
+			fromStyle[prop] = CSSStyleSubject.getStyle(els[0], prop);
+		}
+	}
+	// remove unchanging properties
+	var prop;
+	for (prop in fromStyle) {
+		if (fromStyle[prop] == toStyle[prop]) {
+			delete fromStyle[prop];
+			delete toStyle[prop];
+		}
+	}
+	// discover the type (numerical or colour) of each style
+	var prop, units, match, type, from, to;
+	for (prop in fromStyle) {
+		var fromProp = String(fromStyle[prop]);
+		var toProp = String(toStyle[prop]);
+		if (toStyle[prop] == null) {
+			if (window.DEBUG) alert("No to style provided for '" + prop + '"');
+			continue;
+		}
+		
+		if (from = ColorStyleSubject.parseColor(fromProp)) {
+			to = ColorStyleSubject.parseColor(toProp);
+			type = ColorStyleSubject;
+		} else if (fromProp.match(CSSStyleSubject.numericalRe)
+				&& toProp.match(CSSStyleSubject.numericalRe)) {
+			from = parseFloat(fromProp);
+			to = parseFloat(toProp);
+			type = NumericalStyleSubject;
+			match = CSSStyleSubject.numericalRe.exec(fromProp);
+			var reResult = CSSStyleSubject.numericalRe.exec(toProp);
+			if (match[1] != null) {
+				units = match[1];
+			} else if (reResult[1] != null) {
+				units = reResult[1];
+			} else {
+				units = reResult;
+			}
+		} else if (fromProp.match(CSSStyleSubject.discreteRe)
+				&& toProp.match(CSSStyleSubject.discreteRe)) {
+			from = fromProp;
+			to = toProp;
+			type = DiscreteStyleSubject;
+			units = 0;   // hack - how to get an animator option down to here
+		} else {
+			if (window.DEBUG) {
+				alert("Unrecognised format for value of "
+					+ prop + ": '" + fromStyle[prop] + "'");
+			}
+			continue;
+		}
+		this.subjects[this.subjects.length] = new type(els, prop, from, to, units);
+	}
+}
+
+CSSStyleSubject.prototype = {
+	// parses "width: 400px; color: #FFBB2E" to {width: "400px", color: "#FFBB2E"}
+	parseStyle: function(style, el) {
+		var rtn = {};
+		// if style is a rule set
+		if (style.indexOf(":") != -1) {
+			var styles = style.split(";");
+			for (var i=0; i<styles.length; i++) {
+				var parts = CSSStyleSubject.ruleRe.exec(styles[i]);
+				if (parts) {
+					rtn[parts[1]] = parts[2];
+				}
+			}
+		}
+		// else assume style is a class name
+		else {
+			var prop, value, oldClass;
+			oldClass = el.className;
+			el.className = style;
+			for (var i=0; i<CSSStyleSubject.cssProperties.length; i++) {
+				prop = CSSStyleSubject.cssProperties[i];
+				value = CSSStyleSubject.getStyle(el, prop);
+				if (value != null) {
+					rtn[prop] = value;
+				}
+			}
+			el.className = oldClass;
+		}
+		return rtn;
+		
+	},
+	setState: function(state) {
+		for (var i=0; i<this.subjects.length; i++) {
+			this.subjects[i].setState(state);
+		}
+	},
+	inspect: function() {
+		var str = "";
+		for (var i=0; i<this.subjects.length; i++) {
+			str += this.subjects[i].inspect();
+		}
+		return str;
+	}
+}
+// get the current value of a css property, 
+CSSStyleSubject.getStyle = function(el, property){
+	var style;
+	if(document.defaultView && document.defaultView.getComputedStyle){
+		style = document.defaultView.getComputedStyle(el, "").getPropertyValue(property);
+		if (style) {
+			return style;
+		}
+	}
+	property = Animator.camelize(property);
+	if(el.currentStyle){
+		style = el.currentStyle[property];
+	}
+	return style || el.style[property]
+}
+
+
+CSSStyleSubject.ruleRe = /^\s*([a-zA-Z\-]+)\s*:\s*(\S(.+\S)?)\s*$/;
+CSSStyleSubject.numericalRe = /^-?\d+(?:\.\d+)?(%|[a-zA-Z]{2})?$/;
+CSSStyleSubject.discreteRe = /^\w+$/;
+
+// required because the style object of elements isn't enumerable in Safari
+/*
+CSSStyleSubject.cssProperties = ['background-color','border','border-color','border-spacing',
+'border-style','border-top','border-right','border-bottom','border-left','border-top-color',
+'border-right-color','border-bottom-color','border-left-color','border-top-width','border-right-width',
+'border-bottom-width','border-left-width','border-width','bottom','color','font-size','font-size-adjust',
+'font-stretch','font-style','height','left','letter-spacing','line-height','margin','margin-top',
+'margin-right','margin-bottom','margin-left','marker-offset','max-height','max-width','min-height',
+'min-width','orphans','outline','outline-color','outline-style','outline-width','overflow','padding',
+'padding-top','padding-right','padding-bottom','padding-left','quotes','right','size','text-indent',
+'top','width','word-spacing','z-index','opacity','outline-offset'];*/
+
+
+CSSStyleSubject.cssProperties = ['azimuth','background','background-attachment','background-color','background-image','background-position','background-repeat','border-collapse','border-color','border-spacing','border-style','border-top','border-top-color','border-right-color','border-bottom-color','border-left-color','border-top-style','border-right-style','border-bottom-style','border-left-style','border-top-width','border-right-width','border-bottom-width','border-left-width','border-width','bottom','clear','clip','color','content','cursor','direction','display','elevation','empty-cells','css-float','font','font-family','font-size','font-size-adjust','font-stretch','font-style','font-variant','font-weight','height','left','letter-spacing','line-height','list-style','list-style-image','list-style-position','list-style-type','margin','margin-top','margin-right','margin-bottom','margin-left','max-height','max-width','min-height','min-width','orphans','outline','outline-color','outline-style','outline-width','overflow','padding','padding-top','padding-right','padding-bottom','padding-left','pause','position','right','size','table-layout','text-align','text-decoration','text-indent','text-shadow','text-transform','top','vertical-align','visibility','white-space','width','word-spacing','z-index','opacity','outline-offset','overflow-x','overflow-y'];
+
+
+// chains several Animator objects together
+function AnimatorChain(animators, options) {
+	this.animators = animators;
+	this.setOptions(options);
+	for (var i=0; i<this.animators.length; i++) {
+		this.listenTo(this.animators[i]);
+	}
+	this.forwards = false;
+	this.current = 0;
+}
+
+AnimatorChain.prototype = {
+	// apply defaults
+	setOptions: function(options) {
+		this.options = Animator.applyDefaults({
+			// by default, each call to AnimatorChain.play() calls jumpTo(0) of each animator
+			// before playing, which can cause flickering if you have multiple animators all
+			// targeting the same element. Set this to false to avoid this.
+			resetOnPlay: true
+		}, options);
+	},
+	// play each animator in turn
+	play: function() {
+		this.forwards = true;
+		this.current = -1;
+		if (this.options.resetOnPlay) {
+			for (var i=0; i<this.animators.length; i++) {
+				this.animators[i].jumpTo(0);
+			}
+		}
+		this.advance();
+	},
+	// play all animators backwards
+	reverse: function() {
+		this.forwards = false;
+		this.current = this.animators.length;
+		if (this.options.resetOnPlay) {
+			for (var i=0; i<this.animators.length; i++) {
+				this.animators[i].jumpTo(1);
+			}
+		}
+		this.advance();
+	},
+	// if we have just play()'d, then call reverse(), and vice versa
+	toggle: function() {
+		if (this.forwards) {
+			this.seekTo(0);
+		} else {
+			this.seekTo(1);
+		}
+	},
+	// internal: install an event listener on an animator's onComplete option
+	// to trigger the next animator
+	listenTo: function(animator) {
+		var oldOnComplete = animator.options.onComplete;
+		var _this = this;
+		animator.options.onComplete = function() {
+			if (oldOnComplete) oldOnComplete.call(animator);
+			_this.advance();
+		}
+	},
+	// play the next animator
+	advance: function() {
+		if (this.forwards) {
+			if (this.animators[this.current + 1] == null) return;
+			this.current++;
+			this.animators[this.current].play();
+		} else {
+			if (this.animators[this.current - 1] == null) return;
+			this.current--;
+			this.animators[this.current].reverse();
+		}
+	},
+	// this function is provided for drop-in compatibility with Animator objects,
+	// but only accepts 0 and 1 as target values
+	seekTo: function(target) {
+		if (target <= 0) {
+			this.forwards = false;
+			this.animators[this.current].seekTo(0);
+		} else {
+			this.forwards = true;
+			this.animators[this.current].seekTo(1);
+		}
+	}
+}
+
+// an Accordion is a class that creates and controls a number of Animators. An array of elements is passed in,
+// and for each element an Animator and a activator button is created. When an Animator's activator button is
+// clicked, the Animator and all before it seek to 0, and all Animators after it seek to 1. This can be used to
+// create the classic Accordion effect, hence the name.
+// see setOptions for arguments
+function Accordion(options) {
+	this.setOptions(options);
+	var selected = this.options.initialSection, current;
+	if (this.options.rememberance) {
+		current = document.location.hash.substring(1);
+	}
+	this.rememberanceTexts = [];
+	this.ans = [];
+	var _this = this;
+	for (var i=0; i<this.options.sections.length; i++) {
+		var el = this.options.sections[i];
+		var an = new Animator(this.options.animatorOptions);
+		var from = this.options.from + (this.options.shift * i);
+		var to = this.options.to + (this.options.shift * i);
+		an.addSubject(new NumericalStyleSubject(el, this.options.property, from, to, this.options.units));
+		an.jumpTo(0);
+		var activator = this.options.getActivator(el);
+		activator.index = i;
+		activator.onclick = function(){_this.show(this.index)};
+		this.ans[this.ans.length] = an;
+		this.rememberanceTexts[i] = activator.innerHTML.replace(/\s/g, "");
+		if (this.rememberanceTexts[i] === current) {
+			selected = i;
+		}
+	}
+	this.show(selected);
+}
+
+Accordion.prototype = {
+	// apply defaults
+	setOptions: function(options) {
+		this.options = Object.extend({
+			// REQUIRED: an array of elements to use as the accordion sections
+			sections: null,
+			// a function that locates an activator button element given a section element.
+			// by default it takes a button id from the section's "activator" attibute
+			getActivator: function(el) {return document.getElementById(el.getAttribute("activator"))},
+			// shifts each animator's range, for example with options {from:0,to:100,shift:20}
+			// the animators' ranges will be 0-100, 20-120, 40-140 etc.
+			shift: 0,
+			// the first page to show
+			initialSection: 0,
+			// if set to true, document.location.hash will be used to preserve the open section across page reloads 
+			rememberance: true,
+			// constructor arguments to the Animator objects
+			animatorOptions: {}
+		}, options || {});
+	},
+	show: function(section) {
+		for (var i=0; i<this.ans.length; i++) {
+			this.ans[i].seekTo(i > section ? 1 : 0);
+		}
+		if (this.options.rememberance) {
+			document.location.hash = this.rememberanceTexts[section];
+		}
+	}
+}
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/360-player/script/excanvas.js b/docs/dymaxion/soundmanagerv297a-20101010/demo/360-player/script/excanvas.js
new file mode 100755
index 0000000..d748873
--- /dev/null
+++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/360-player/script/excanvas.js
@@ -0,0 +1,17 @@
+// Excanvas (Explorer Canvas) R43
+// http://excanvas.sourceforge.net/
+// Copyright 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+if(!document.createElement("canvas").getContext){(function(){var u=Math;var v=u.round;var r=u.sin;var C=u.cos;var l=u.abs;var B=u.sqrt;var a=10;var n=a/2;function g(){return this.context_||(this.context_=new p(this))}var t=Array.prototype.slice;function D(j,m,E){var i=t.call(arguments,2);return function(){return j.apply(m,i.concat(t.call(arguments)))}}var h={init:function(i){if(/MSIE/.test(navigator.userAgent)&&!window.opera){var j=i||document;j.createElement("canvas");j.attachEvent("onreadystatechange",D(this.init_,this,j))}},init_:function(F){if(!F.namespaces.g_vml_){F.namespaces.add("g_vml_","urn:schemas-microsoft-com:vml","#default#VML")}if(!F.namespaces.g_o_){F.namespaces.add("g_o_","urn:schemas-microsoft-com:office:office","#default#VML")}if(!F.styleSheets.ex_canvas_){var E=F.createStyleSheet();E.owningElement.id="ex_canvas_";E.cssText="canvas{display:inline-block;overflow:hidden;text-align:left;width:300px;height:150px}g_vml_\\:*{behavior:url(#default#VML)}g_o_\\:*{behavior:url(#default#VML)}"}var m=F.getElementsByTagName("canvas");for(var j=0;j<m.length;j++){this.initElement(m[j])}},initElement:function(j){if(!j.getContext){j.getContext=g;j.innerHTML="";j.attachEvent("onpropertychange",A);j.attachEvent("onresize",b);var i=j.attributes;if(i.width&&i.width.specified){j.style.width=i.width.nodeValue+"px"}else{j.width=j.clientWidth}if(i.height&&i.height.specified){j.style.height=i.height.nodeValue+"px"}else{j.height=j.clientHeight}}return j}};function A(j){var i=j.srcElement;switch(j.propertyName){case"width":i.style.width=i.attributes.width.nodeValue+"px";i.getContext().clearRect();break;case"height":i.style.height=i.attributes.height.nodeValue+"px";i.getContext().clearRect();break}}function b(j){var i=j.srcElement;if(i.firstChild){i.firstChild.style.width=i.clientWidth+"px";i.firstChild.style.height=i.clientHeight+"px"}}h.init();var e=[];for(var y=0;y<16;y++){for(var x=0;x<16;x++){e[y*16+x]=y.toString(16)+x.toString(16)}}function q(){return[[1,0,0],[0,1,0],[0,0,1]]}function d(E,m){var j=q();for(var i=0;i<3;i++){for(var H=0;H<3;H++){var F=0;for(var G=0;G<3;G++){F+=E[i][G]*m[G][H]}j[i][H]=F}}return j}function w(j,i){i.fillStyle=j.fillStyle;i.lineCap=j.lineCap;i.lineJoin=j.lineJoin;i.lineWidth=j.lineWidth;i.miterLimit=j.miterLimit;i.shadowBlur=j.shadowBlur;i.shadowColor=j.shadowColor;i.shadowOffsetX=j.shadowOffsetX;i.shadowOffsetY=j.shadowOffsetY;i.strokeStyle=j.strokeStyle;i.globalAlpha=j.globalAlpha;i.arcScaleX_=j.arcScaleX_;i.arcScaleY_=j.arcScaleY_;i.lineScale_=j.lineScale_}function c(m){var G,F=1;m=String(m);if(m.substring(0,3)=="rgb"){var I=m.indexOf("(",3);var j=m.indexOf(")",I+1);var H=m.substring(I+1,j).split(",");G="#";for(var E=0;E<3;E++){G+=e[Number(H[E])]}if(H.length==4&&m.substr(3,1)=="a"){F=H[3]}}else{G=m}return{color:G,alpha:F}}function s(i){switch(i){case"butt":return"flat";case"round":return"round";case"square":default:return"square"}}function p(j){this.m_=q();this.mStack_=[];this.aStack_=[];this.currentPath_=[];this.strokeStyle="#000";this.fillStyle="#000";this.lineWidth=1;this.lineJoin="miter";this.lineCap="butt";this.miterLimit=a*1;this.globalAlpha=1;this.canvas=j;var i=j.ownerDocument.createElement("div");i.style.width=j.clientWidth+"px";i.style.height=j.clientHeight+"px";i.style.overflow="hidden";i.style.position="absolute";j.appendChild(i);this.element_=i;this.arcScaleX_=1;this.arcScaleY_=1;this.lineScale_=1}var k=p.prototype;k.clearRect=function(){this.element_.innerHTML=""};k.beginPath=function(){this.currentPath_=[]};k.moveTo=function(j,i){var m=this.getCoords_(j,i);this.currentPath_.push({type:"moveTo",x:m.x,y:m.y});this.currentX_=m.x;this.currentY_=m.y};k.lineTo=function(j,i){var m=this.getCoords_(j,i);this.currentPath_.push({type:"lineTo",x:m.x,y:m.y});this.currentX_=m.x;this.currentY_=m.y};k.bezierCurveTo=function(m,j,J,I,H,F){var i=this.getCoords_(H,F);var G=this.getCoords_(m,j);var E=this.getCoords_(J,I);o(this,G,E,i)};function o(i,E,m,j){i.currentPath_.push({type:"bezierCurveTo",cp1x:E.x,cp1y:E.y,cp2x:m.x,cp2y:m.y,x:j.x,y:j.y});i.currentX_=j.x;i.currentY_=j.y}k.quadraticCurveTo=function(H,m,j,i){var G=this.getCoords_(H,m);var F=this.getCoords_(j,i);var I={x:this.currentX_+2/3*(G.x-this.currentX_),y:this.currentY_+2/3*(G.y-this.currentY_)};var E={x:I.x+(F.x-this.currentX_)/3,y:I.y+(F.y-this.currentY_)/3};o(this,I,E,F)};k.arc=function(K,I,J,F,j,m){J*=a;var O=m?"at":"wa";var L=K+C(F)*J-n;var N=I+r(F)*J-n;var i=K+C(j)*J-n;var M=I+r(j)*J-n;if(L==i&&!m){L+=0.125}var E=this.getCoords_(K,I);var H=this.getCoords_(L,N);var G=this.getCoords_(i,M);this.currentPath_.push({type:O,x:E.x,y:E.y,radius:J,xStart:H.x,yStart:H.y,xEnd:G.x,yEnd:G.y})};k.rect=function(m,j,i,E){this.moveTo(m,j);this.lineTo(m+i,j);this.lineTo(m+i,j+E);this.lineTo(m,j+E);this.closePath()};k.strokeRect=function(m,j,i,E){var F=this.currentPath_;this.beginPath();this.moveTo(m,j);this.lineTo(m+i,j);this.lineTo(m+i,j+E);this.lineTo(m,j+E);this.closePath();this.stroke();this.currentPath_=F};k.fillRect=function(m,j,i,E){var F=this.currentPath_;this.beginPath();this.moveTo(m,j);this.lineTo(m+i,j);this.lineTo(m+i,j+E);this.lineTo(m,j+E);this.closePath();this.fill();this.currentPath_=F};k.createLinearGradient=function(j,E,i,m){var F=new z("gradient");F.x0_=j;F.y0_=E;F.x1_=i;F.y1_=m;return F};k.createRadialGradient=function(E,G,m,j,F,i){var H=new z("gradientradial");H.x0_=E;H.y0_=G;H.r0_=m;H.x1_=j;H.y1_=F;H.r1_=i;return H};k.drawImage=function(R,m){var K,I,M,Z,P,N,T,ab;var L=R.runtimeStyle.width;var Q=R.runtimeStyle.height;R.runtimeStyle.width="auto";R.runtimeStyle.height="auto";var J=R.width;var X=R.height;R.runtimeStyle.width=L;R.runtimeStyle.height=Q;if(arguments.length==3){K=arguments[1];I=arguments[2];P=N=0;T=M=J;ab=Z=X}else{if(arguments.length==5){K=arguments[1];I=arguments[2];M=arguments[3];Z=arguments[4];P=N=0;T=J;ab=X}else{if(arguments.length==9){P=arguments[1];N=arguments[2];T=arguments[3];ab=arguments[4];K=arguments[5];I=arguments[6];M=arguments[7];Z=arguments[8]}else{throw Error("Invalid number of arguments")}}}var aa=this.getCoords_(K,I);var E=T/2;var j=ab/2;var Y=[];var i=10;var G=10;Y.push(" <g_vml_:group",' coordsize="',a*i,",",a*G,'"',' coordorigin="0,0"',' style="width:',i,"px;height:",G,"px;position:absolute;");if(this.m_[0][0]!=1||this.m_[0][1]){var F=[];F.push("M11=",this.m_[0][0],",","M12=",this.m_[1][0],",","M21=",this.m_[0][1],",","M22=",this.m_[1][1],",","Dx=",v(aa.x/a),",","Dy=",v(aa.y/a),"");var V=aa;var U=this.getCoords_(K+M,I);var S=this.getCoords_(K,I+Z);var O=this.getCoords_(K+M,I+Z);V.x=u.max(V.x,U.x,S.x,O.x);V.y=u.max(V.y,U.y,S.y,O.y);Y.push("padding:0 ",v(V.x/a),"px ",v(V.y/a),"px 0;filter:progid:DXImageTransform.Microsoft.Matrix(",F.join(""),", sizingmethod='clip');")}else{Y.push("top:",v(aa.y/a),"px;left:",v(aa.x/a),"px;")}Y.push(' ">','<g_vml_:image src="',R.src,'"',' style="width:',a*M,"px;"," height:",a*Z,'px;"',' cropleft="',P/J,'"',' croptop="',N/X,'"',' cropright="',(J-P-T)/J,'"',' cropbottom="',(X-N-ab)/X,'"'," />","</g_vml_:group>");this.element_.insertAdjacentHTML("BeforeEnd",Y.join(""))};k.stroke=function(ae){var J=[];var K=false;var ap=c(ae?this.fillStyle:this.strokeStyle);var aa=ap.color;var ak=ap.alpha*this.globalAlpha;var F=10;var M=10;J.push("<g_vml_:shape",' filled="',!!ae,'"',' style="position:absolute;width:',F,"px;height:",M,'px;"',' coordorigin="0 0" coordsize="',a*F," ",a*M,'"',' stroked="',!ae,'"',' path="');var L=false;var ao={x:null,y:null};var V={x:null,y:null};for(var aj=0;aj<this.currentPath_.length;aj++){var ai=this.currentPath_[aj];var an;switch(ai.type){case"moveTo":an=ai;J.push(" m ",v(ai.x),",",v(ai.y));break;case"lineTo":J.push(" l ",v(ai.x),",",v(ai.y));break;case"close":J.push(" x ");ai=null;break;case"bezierCurveTo":J.push(" c ",v(ai.cp1x),",",v(ai.cp1y),",",v(ai.cp2x),",",v(ai.cp2y),",",v(ai.x),",",v(ai.y));break;case"at":case"wa":J.push(" ",ai.type," ",v(ai.x-this.arcScaleX_*ai.radius),",",v(ai.y-this.arcScaleY_*ai.radius)," ",v(ai.x+this.arcScaleX_*ai.radius),",",v(ai.y+this.arcScaleY_*ai.radius)," ",v(ai.xStart),",",v(ai.yStart)," ",v(ai.xEnd),",",v(ai.yEnd));break}if(ai){if(ao.x==null||ai.x<ao.x){ao.x=ai.x}if(V.x==null||ai.x>V.x){V.x=ai.x}if(ao.y==null||ai.y<ao.y){ao.y=ai.y}if(V.y==null||ai.y>V.y){V.y=ai.y}}}J.push(' ">');if(!ae){var U=this.lineScale_*this.lineWidth;if(U<1){ak*=U}J.push("<g_vml_:stroke",' opacity="',ak,'"',' joinstyle="',this.lineJoin,'"',' miterlimit="',this.miterLimit,'"',' endcap="',s(this.lineCap),'"',' weight="',U,'px"',' color="',aa,'" />')}else{if(typeof this.fillStyle=="object"){var N=this.fillStyle;var S=0;var ah={x:0,y:0};var ab=0;var Q=1;if(N.type_=="gradient"){var P=N.x0_/this.arcScaleX_;var m=N.y0_/this.arcScaleY_;var O=N.x1_/this.arcScaleX_;var aq=N.y1_/this.arcScaleY_;var am=this.getCoords_(P,m);var al=this.getCoords_(O,aq);var I=al.x-am.x;var G=al.y-am.y;S=Math.atan2(I,G)*180/Math.PI;if(S<0){S+=360}if(S<0.000001){S=0}}else{var am=this.getCoords_(N.x0_,N.y0_);var j=V.x-ao.x;var E=V.y-ao.y;ah={x:(am.x-ao.x)/j,y:(am.y-ao.y)/E};j/=this.arcScaleX_*a;E/=this.arcScaleY_*a;var ag=u.max(j,E);ab=2*N.r0_/ag;Q=2*N.r1_/ag-ab}var Z=N.colors_;Z.sort(function(H,i){return H.offset-i.offset});var T=Z.length;var Y=Z[0].color;var X=Z[T-1].color;var ad=Z[0].alpha*this.globalAlpha;var ac=Z[T-1].alpha*this.globalAlpha;var af=[];for(var aj=0;aj<T;aj++){var R=Z[aj];af.push(R.offset*Q+ab+" "+R.color)}J.push('<g_vml_:fill type="',N.type_,'"',' method="none" focus="100%"',' color="',Y,'"',' color2="',X,'"',' colors="',af.join(","),'"',' opacity="',ac,'"',' g_o_:opacity2="',ad,'"',' angle="',S,'"',' focusposition="',ah.x,",",ah.y,'" />')}else{J.push('<g_vml_:fill color="',aa,'" opacity="',ak,'" />')}}J.push("</g_vml_:shape>");this.element_.insertAdjacentHTML("beforeEnd",J.join(""))};k.fill=function(){this.stroke(true)};k.closePath=function(){this.currentPath_.push({type:"close"})};k.getCoords_=function(E,j){var i=this.m_;return{x:a*(E*i[0][0]+j*i[1][0]+i[2][0])-n,y:a*(E*i[0][1]+j*i[1][1]+i[2][1])-n}};k.save=function(){var i={};w(this,i);this.aStack_.push(i);this.mStack_.push(this.m_);this.m_=d(q(),this.m_)};k.restore=function(){w(this.aStack_.pop(),this);this.m_=this.mStack_.pop()};k.translate=function(m,j){var i=[[1,0,0],[0,1,0],[m,j,1]];this.m_=d(i,this.m_)};k.rotate=function(j){var E=C(j);var m=r(j);var i=[[E,m,0],[-m,E,0],[0,0,1]];this.m_=d(i,this.m_)};k.scale=function(G,F){this.arcScaleX_*=G;this.arcScaleY_*=F;var j=[[G,0,0],[0,F,0],[0,0,1]];var i=this.m_=d(j,this.m_);var E=i[0][0]*i[1][1]-i[0][1]*i[1][0];this.lineScale_=B(l(E))};k.clip=function(){};k.arcTo=function(){};k.createPattern=function(){return new f};function z(i){this.type_=i;this.x0_=0;this.y0_=0;this.r0_=0;this.x1_=0;this.y1_=0;this.r1_=0;this.colors_=[]}z.prototype.addColorStop=function(j,i){i=c(i);this.colors_.push({offset:j,color:i.color,alpha:i.alpha})};function f(){}G_vmlCanvasManager=h;CanvasRenderingContext2D=p;CanvasGradient=z;CanvasPattern=f})()};
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2