Add scale factor for the ring

+ Scale factor feature added to 360player.js
+ User can set threeSixtyPlayer.config.scaleArcWidth to a value between
0 (hide) and 100 (regular until now)
+ Ring thickness slider added to Customize view

Hope Scott approves!

demo/360-player/canvas-visualization.html

@@ -180,6 +180,14 @@ <h1><a href="http://www.schillmania.com/projects/soundmanager2/" title="Javascri
 			    <div class="slider" title="Amount to downsample EQ data by"></div>
 			   </dd>
 
+			   <dt>Ring Thickness</dt>
+			   <dd class="title">(Scale)</dd>
+			   <dd>1-100</dd>
+			   <dd class="control">
+			    <div class="bar" title="Click to move here"></div>
+			    <div class="slider" title="Scale factor for the ring width"></div>
+			   </dd>
+
 			  </dl>
 
 			  <div id="options" class="col">

demo/360-player/demo-slider-controls.js

@@ -216,6 +216,8 @@ function Controller(o) {
 	  threeSixtyPlayer.config.eqDataLineRatio = parseInt((self.controls[3].value/100)*3*1000)/1000;
 
 	  threeSixtyPlayer.config.eqDataDownsample = (self.controls[4].value);
+
+    threeSixtyPlayer.config.scaleArcWidth = (self.controls[5].value);
 
 	  threeSixtyPlayer.config.useEQData = (document.getElementById('disabled-1').checked?true:false);
 

demo/360-player/script/360player.js

@@ -102,6 +102,8 @@ function ThreeSixtyPlayer() {
 
     fontSizeMax: null, // set according to CSS
 
+    scaleArcWidth: 1, // thickness factor
+
     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)
 
   };
@@ -809,6 +811,7 @@ function ThreeSixtyPlayer() {
   this.updatePlaying = function() {
 
     var timeNow = (this._360data.showHMSTime?self.getTime(this.position,true):parseInt(this.position/1000, 10));
+    var ringScaleFactor = self.config.scaleArcWidth / 100;
 
     if (this.bytesLoaded) {
       this._360data.lastValues.bytesLoaded = this.bytesLoaded;
@@ -823,13 +826,15 @@ function ThreeSixtyPlayer() {
       this._360data.lastValues.durationEstimate = this.durationEstimate;
     }
 
-    self.drawSolidArc(this._360data.oCanvas,self.config.backgroundRingColor,this._360data.width,this._360data.radius,self.deg2rad(fullCircle),false);
+    // background ring
+    self.drawSolidArc(this._360data.oCanvas,self.config.backgroundRingColor,this._360data.width,this._360data.radius * ringScaleFactor,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);
+    // loaded ring
+    self.drawSolidArc(this._360data.oCanvas,(this._360data.metadata?self.config.loadRingColorMetadata:self.config.loadRingColor),this._360data.width,this._360data.radius * ringScaleFactor,self.deg2rad(fullCircle*(this._360data.lastValues.bytesLoaded/this._360data.lastValues.bytesTotal)),0,true);
 
     // don't draw if 0 (full black circle in Opera)
     if (this._360data.lastValues.position !== 0) {
-      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);
+      self.drawSolidArc(this._360data.oCanvas,(this._360data.metadata?self.config.playRingColorMetadata:self.config.playRingColor),this._360data.width,this._360data.radius * ringScaleFactor,self.deg2rad((this._360data.didFinish===1?fullCircle:fullCircle*(this._360data.lastValues.position/this._360data.lastValues.durationEstimate))),0,true);
     }
 
     // metadata goes here