<html>
<head>
<title>SoundManager Demo</title>
<meta name="robots" content="noindex" />
<style type="text/css">

html, body {
 margin:0px;
 padding:0px;
}

body {
 color:#fff;
 font-size:75%;
 text-shadow:0 0 0 #fff; /* Safari nonsense */
 font-family:verdana,arial,tahoma,"sans serif";
}

h1, h2, h3 {
 font:300 3em "Helvetica Neue",georgia,"times new roman","Arial Rounded MT Bold",helvetica,verdana,tahoma,arial,"sans serif";
 font-weight:normal;
 margin-bottom:0px;
}


h1 {
 margin-top:0px;
}

h1, h2 {
 letter-spacing:-1px; /* zomg web x.0! ;) */ 
}

h2 {
 font-size:2em;
 margin-top:0px;
 color:#fff;
}

h2 span {
 text-indent:1em;
 font-family:verdana,tahoma,arial;
 font-size:small;
}

p {
 position:absolute;
 left:1em;
 bottom:0px;
 font-size:x-small;
 opacity:0.5;
}

#instructions {
 position:absolute;
 left:1em;
 top:0px;
}

#canvas {
 position:absolute;
 left:0px;
 top:0px;
 width:100%;
 height:100%;
 overflow:hidden;
}

#horizon {
 position:relative;
 height:50%;
 background:transparent url(bg-sky.png) 0px 0px repeat-x;
}

#land {
 position:absolute;
 bottom:0px;
 left:0px;
 width:100%;
 height:50%;
 border-top:1px solid #339933;
 margin-bottom:0px;
 background:#669966 url(bg-land.png) 0px 0px repeat-x;
}

#content {
 position:relative;
 border-top:1px solid #ccc;
}

#cursor-shade {
 position:absolute;
 left:-100px;
 top:-100px;
 margin:0px 0px 0px -2px;
 width:20px;
 height:24px;
 opacity:0.75;
}

#sun {
 position:absolute;
 top:50%;
 width:100%;
 height:128px;
 margin-top:-66px;
 background:transparent url(sun-test.png) 50% 0px no-repeat;
 display:none;
}

.dot {
 position:absolute;
 width:32px;
 height:32px;
}

#overlay {
 position:absolute;
 left:0px;
 top:0px;
 width:100%;
 height:100%;
 cursor:url(cursor-11.cur),default;
}

</style>
<script type="text/javascript" src="../../script/soundmanager2-nodebug-jsmin.js"></script>
<script type="text/javascript">

function _id(sID) {return document.getElementById(sID);}

function Cursor() {
  var self = this;
  this.o = null;
  this.offX = 20;
  this.offY = 40;
  this.screenX = null;
  this.screenY = null;
  this.screenXHalf = null;
  this.screenYHalf = null;
  this.lastCursor = null;
  this.cursorRange = 9;
  this.oDots = _id('dots');

  this.painting = 0;

  this.sounds = [];
  this.soundIndex = 0;
  this.soundTimer = null;

  this.oDot = document.createElement('img');
  this.oDot.className = 'dot';
  this.oDot.src = 'dot.png';

  this.refreshCoords = function() {
    self.screenX = (window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth);
    self.screenY = (window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight);
    self.screenXHalf = parseInt(self.screenX/2);
    self.screenYHalf = parseInt(self.screenY/2);
  }

  this.mousedown = function(e) {
    self.painting = true;
    return false;
  }

  this.mouseup = function(e) {
    self.painting = false;
    return false;
  }

  this.mousemove = function(e) {
    var evt = e?e:event;
    var x = evt.clientX;
    var y = evt.clientY;
    var xHalf = self.screenXHalf;
    var yHalf = self.screenYHalf;
    var scaleX = (x>xHalf?(x-xHalf)/xHalf:-((xHalf-x)/xHalf));
    var scaleY = (y>yHalf?(y-yHalf)/yHalf:0);
    var xScale = (self.offX*scaleY)*scaleX;
    var yScale = self.offY*scaleY;
    var cursor = parseInt(self.cursorRange*scaleY);
    if (cursor != self.lastCursor) {
      var curString = 'cursor-'+(Math.min(11,cursor+3))+'.cur';
      document.documentElement.style.cursor = 'url("'+curString+'"),default';
      _id('overlay').style.cursor = 'url("'+curString+'"),default';
      self.lastCursor = cursor;
    }
    var xDiff = (x+xScale);
    self.o.style.left = (xDiff)+'px';
    self.o.style.top = (y+yScale)+'px';
    self.o.style.width = ((20*scaleY)+'px');
    self.o.style.height = ((24*scaleY)+'px');
    self.o.style.opacity = Math.max((scaleY-0.33),0.33);
    if (self.painting && scaleY>0) self.paint(x,y,scaleX,scaleY);
    return false;
  }

  this.paint = function(x,y,scaleX,scaleY) {
    var oD = self.oDot.cloneNode(false);
    var size = 32*scaleY;
    oD.style.left = (x-size)+'px';
    oD.style.top = (y-size)+'px';
    oD.style.width = (size+'px');
    oD.style.height = (size+'px');
    oD.style.opacity = Math.min(1,Math.max(scaleY*1.5,0.1));
    self.oDots.appendChild(oD);

    // var sID = self.sounds[0].id;
    if (!self.soundTimer) {
      // self.soundTimer = window.setTimeout(function(){soundManager.play(sID,{volume:100*scaleY,pan:100*scaleX});self.soundTimer=null;},20);
      self.sounds[Math.random()>0.5?1:0].play({pan:100*scaleX,volume:100*scaleY});
    }
    // if (self.soundIndex++>=self.sounds.length-1) self.soundIndex = 0;
  }

  this.createSounds = function() {
    self.sounds[0] = soundManager.createSound('paint','../animation/audio/fingerplop.mp3');
    self.sounds[1] = soundManager.createSound('paint2','../animation/audio/fingerplop2.mp3');
  }

  this.createSounds();

  this.o = _id('cursor-shade');
  this.refreshCoords();

  window.onresize = this.refreshCoords;
  _id('overlay').onmousedown = this.mousedown;
  _id('overlay').onmouseup = this.mouseup;  
  document.onmousemove = this.mousemove;

}

var cursor = null;

var sounds = [];

function doEvil() {

// HIGHLY EXPERIMENTAL (and dangerous) optimation testing - attempting to override Flash's ExternalInterface JS. :D - The below may have only been relevant to Flash 8.

if (typeof window.__flash__argumentsToXML !== 'undefined') {

	window.__flash__argumentsToXML = function(obj,index) {
		var s = ["<arguments>"];
		for (var i=index, j=obj.length; i<j; i++) {
			s[s.length] = __flash__toXML(obj[i]);
		}
	        s[s.length] = "</arguments>";
	        // console.log('argumentsToXML: '+s.length+' items');
		return s.join('');
	}

	window.__flash__arrayToXML = function(obj) {
		var s = ["<array>"];
		for (var i=0,j=obj.length; i<j; i++) {
			s[s.length] = "<property id=\"" + i + "\">" + __flash__toXML(obj[i]) + "</property>";
		}
	        s[s.length] = "</array>";
	        // console.log('arrayToXML: '+s.length+' items');
		return s.join('');
	}

	window.__flash__escapeXML = function(s) {
	        // console.log('escapeXML'); //  '+s.length);
		return s; // s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
	}

	window.__flash__objectToXML = function(obj) {
	        console.log('objectToXML');
		var s = ["<object>"];
		for (var prop in obj) {
			s[s.length] = "<property id=\"" + prop + "\">" + __flash__toXML(obj[prop]) + "</property>";
		}
	        s[s.length] = "</object>";
		return s.join('');
	}

	window.__flash__toXML = function(value) {
	   // console.log('toXML');
	   var type = typeof(value);
		if (type == "string") {
			return "<string>" + __flash__escapeXML(value) + "</string>";
		} else if (type == "undefined") {
	        return "<undefined/>";
		} else if (type == "number") {
	        return "<number>" + value + "</number>";
		} else if (value == null) {
	        return "<null/>";
		} else if (type == "boolean") {
	        return value ? "<true/>" : "<false/>";
		} else if (value instanceof Date) {
	        return "<date>" + value.getTime() + "</date>";
	   } else if (value instanceof Array) {
	       return __flash__arrayToXML(value);
	   } else if (type == "object") {
	       return __flash__objectToXML(value);
	   } else {
		    return "<null/>"; //???
		}
	}

	// this one non-IE, only?

	if (!navigator.userAgent.match(/MSIE/i)) {
	  window.__flash__request.prototype = function(name) {
	    return "<invoke name=\"" + name + "\" returntype=\"javascript\">" + __flash__argumentstoXML(arguments, 1) + "</invoke>";
	  }
	}
}

}

function doInit() {
  doEvil(); // NOTE: highly experimental, only a performance test; probably doesn't apply to Flash 9, and/or does nothing, or bad things.
  cursor = new Cursor();
}

soundManager.setup({
  preferFlash: true,
  flashVersion: 9,
  url: '../../swf/',
  useHighPerformance: true,
  wmode: 'transparent',
  debugMode: false,
  onready: doInit
});

</script>
</head>

<body>

<div>

<div id="canvas">

 <div id="horizon"></div>
 <div id="land">
  <div id="content">
  </div>
 </div>

 <div id="sun"></div>
 <div id="dots"></div>
 <img id="cursor-shade" src="cursor-shadow.png" alt="" />

</div>

<div id="instructions">
 <h1>SoundManager 2: JS/DOM + Sound Demo</h1>
 <h2>Heavy DOM manipulation + Javascript Sound <span>(see code for experimental ideas)</code></h2>
</div>

<p>Click and drag to draw.. Noisily.</p>
<div id="overlay"></div>

</div>

</body>
</html>