window.onload = function(){
	initAudioPlayer();
		
}
function initAudioPlayer(){

	/*
	 *	This conditional block gets a reference to the flash object contained within the
	 *		object and embed tags. The value "audio_player" is the ID attribute on the object
	 *		tag and the NAME attribute on the embed tag. These values can be renamed to anything
	 *		you would like them to be. If you do rename these values make sure they are changed
	 *		in this conditional block as well.
	 *
	 */
	var flashObject;
	if(navigator.appName.indexOf("Microsoft") != -1){
		flashObject = document.audio_player;
				
	}else{
		flashObject = window.document.audio_player;
				
	}


	//INIT VARIABLES
	var arr = [
		{name:"Smooth Jazz", mp3:"mp3/smoothJazz.mp3"},
		{name:"Soft Voices", mp3:"mp3/softVoices.mp3"},
		{name:"Lounge", mp3:"mp3/trumpetPiano.mp3"}					
	];
	var playBtn = document.getElementById("play-btn");
	var isPlaying = false;
	var isPaused = false;
	
	
	//CREATE TRACK LIST
	for(var i=0; i<arr.length; i++){
		var li = document.createElement("li");
		var a = document.createElement("a");
						
		a.appendChild(document.createTextNode(arr[i].name));
		a.href="javascript:void(0);";
		a.trackId = i;
		a.onclick = newTrackEvents;
		li.appendChild(a);
						
		document.getElementById("track-list").appendChild(li);
				
	}
		
	
	//REGISTER EVENTS
	document.getElementById("combo-box").onmouseover = comboBoxEvents;
	document.getElementById("combo-box").onmouseout = comboBoxEvents;
	document.getElementById("stop-btn").onclick = stopTrackEvents;
	document.getElementById("play-btn").onclick = playTrackEvents;
	document.getElementById("play-btn").onmouseover = playTrackEvents;
	document.getElementById("play-btn").onmouseout = playTrackEvents;
	
	
	//EVENT FUNCTIONS
	function comboBoxEvents(){
		var e = arguments[0] || window.event;
		
						
		if(e.type == "mouseover"){
			this.getElementsByTagName("span")[1].style.backgroundPosition = "-19px 0";
			this.getElementsByTagName("dl")[0].style.display = "block";
						
		}
		if(e.type == "mouseout"){
			this.getElementsByTagName("span")[1].style.backgroundPosition = "0 0";
			this.getElementsByTagName("dl")[0].style.display = "none";
						
		}
			
	}
	function newTrackEvents(){
		var e = arguments[0] || window.event;
	
		
		if(e.type == "click"){
			isPlaying = true;
			isPaused = false;
			playBtn.style.backgroundPosition = "-9px 0";
			document.getElementById("track-title").innerHTML = arr[this.trackId].name;
			flashObject.newSound(arr[this.trackId].mp3);
								
		}
						
	}
	function playTrackEvents(){
		var e = arguments[0] || window.event;
		
					
		if(e.type == "mouseover"){
			if(!isPlaying && !isPaused){
				this.style.backgroundPosition = "-9px 0";
				
			}
						
		}
		if(e.type == "mouseout"){
			if(!isPlaying && !isPaused){
				this.style.backgroundPosition = "0 0";
				
			}
						
		}
		if(e.type == "click"){
			if(isPlaying){
				isPlaying = false;
				isPaused = true;
				this.style.backgroundPosition = "-27px 0";
				flashObject.pauseSound();
								
			}else{
				isPlaying = true;
				isPaused = false;
				this.style.backgroundPosition = "-9px 0";
				flashObject.playSound();
								
			}
			
		}
							
	}
	function stopTrackEvents(){
		var e = arguments[0] || window.event;
		
						
		if(e.type == "click"){
			isPlaying = false;
			isPaused = false;
			playBtn.style.backgroundPosition = "0 0";
			flashObject.stopSound();
			
		}
	
	}
	
	
	//AUTO LOAD FIRST TRACK
	
	/*
	 *	Sets the "track-title" to display the first mp3's name
	 *
	 */
	document.getElementById("track-title").innerHTML = arr[0].name;
	/*
	 *	The flash object doesn't get registered immediately, so a delay is needed before 
	 *		the flash object will be recognized by the browser. Without this delay the first
	 *		track will not be initialized in the flash player. 500 milliseconds is not a magic
	 *		number to use in this scenario, it is just what I decided to use.  This number could
	 *		be less than this.
	 *
	 */
	var id = setInterval(function(){
		clearInterval(id);
		flashObject.newSound(arr[0].mp3);
		
	}, 500);
						
}