// JavaScript Document

var path;
var album_id = new Array();
function createAlbumViewer(path_tmp, id) {
	path = path_tmp;

	var div = document.createElement("div");
	div.style.position = "relative";
	div.style.height = "200px";
	div.style.textAlign="center";
	div.style.border = "1px solid #FFF";
	
	var prev_control = document.createElement("div");
	prev_control.style.cssFloat = "left";
	prev_control.style.styleFloat = "left";
	prev_control.style.padding = "5px";
	prev_control.style.paddingTop = "20px";
	prev_control.style.paddingRight = "10px";	
	prev_control.id = "prev_control";
	prev_control.style.opacity = "0.5";
	prev_control.style.filter = "alpha(opacity=50)";
	if (!IE) {
		prev_control.addEventListener("click", albumScrollLeft, true);
	}
	else {
		prev_control.onclick = albumScrollLeft;
	}

	var prev = document.createElement("img");
	prev.src = path+'images/prv.jpg';
	
	prev_control.appendChild(prev);

	var album_cont = document.createElement("div");
	album_cont.style.cssFloat = "left";
	album_cont.style.styleFloat = "left";
	album_cont.style.width = "255px";
	album_cont.style.overflow = "hidden";

	
	var album = document.createElement("div");
	album.id = "album_list";
	album.style.marginLeft = "0px";
	
	
	album_cont.appendChild(album);
	
	
	
	var next_control = document.createElement("div");
	next_control.style.cssFloat = "left";
	next_control.style.styleFloat = "left";
	next_control.style.padding = "5px";
	next_control.style.paddingTop = "20px";
	next_control.style.paddingLeft = "10px";
	next_control.style.cursor = "pointer";
	if (!IE) {
		next_control.addEventListener("click", albumScrollRight, true);
	}
	else {
		next_control.onclick = albumScrollRight;
	}
	next_control.id = "next_control";

	var next = document.createElement("img");
	next.src = path+'images/nxt.jpg';
	
	next_control.appendChild(next);
	
	
	div.appendChild(prev_control);
	div.appendChild(album_cont);
	div.appendChild(next_control);
	
	var shadow = document.createElement("img");
	shadow.src = "images/selection_shadow.jpg";
	shadow.style.marginTop = "10px"
	
	div.appendChild(shadow);
	
	document.getElementById(id).appendChild(div);
}

function gotoAlbum(e) {
	var obj = "";
	if (e != null) {
		obj = e.target;	
	}
	else {
		obj = event.srcElement;
	}
	
	
	var pos = obj.alt;
	
	window.location= path+'music.php?id='+album_id[pos];
}


function loadAlbums (albums, id) {
	temp = albums.split(";");
	id_temp = id.split(";");
	
	album_id = id_temp;
	
	for (var i = 0; i < temp.length-1; i++) {
		


		var image_tmp = document.createElement("img");
		image_tmp.src = temp[i];
		image_tmp.style.cssFloat = "left";
		image_tmp.style.styleFloat = "left";
		image_tmp.style.paddingRight = "6px";
		image_tmp.style.paddingLeft = "6px";
		image_tmp.alt = i;
		image_tmp.style.cursor = "pointer";
		if (!IE) {
			image_tmp.addEventListener("click", gotoAlbum, true);
		}
		else {
			image_tmp.onclick = gotoAlbum;
		}
		
		image_tmp.onload = function() {
			var obj = document.getElementById("album_list");
			var width = 0;
			
			if (obj.childNodes && obj.childNodes.length > 0) {
				for (var x = 0; x < obj.childNodes.length; x++) {
					if (obj.childNodes[x].offsetWidth > 1 && obj.childNodes[x].offsetWidth != null) {
						   if (obj.childNodes[x].style.cssFloat == "left" | obj.childNodes[x].style.styleFloat == "left") {
						   		width += obj.childNodes[x].offsetWidth;
						   }
						
					}
				   }
			}
			else {
				// nothing exists in the drop	
			}
			
			obj.style.width = width+"px";	
		}

		document.getElementById("album_list").appendChild(image_tmp);

		
		
		
	
	
	}
	
	var image_break = document.createElement("div");
	image_break.style.clear = "both";
	document.getElementById("album_list").appendChild(image_break);
}


function albumScrollRight(e) {
	
	var orig = parseInt(document.getElementById("album_list").style.marginLeft.replace("px", ""));
	
	
	moveAlbumRight(orig, 100);
		
	document.getElementById("prev_control").style.opacity = "1";
	document.getElementById("prev_control").style.filter = "alpha(opacity=100)";
	document.getElementById("prev_control").style.cursor = "pointer";
	
}


function albumScrollLeft(e) {
	
	var orig = parseInt(document.getElementById("album_list").style.marginLeft.replace("px", ""));
	
	
	moveAlbumLeft(orig, 100);
		
	document.getElementById("next_control").style.opacity = "1";
	document.getElementById("next_control").style.filter = "alpha(opacity=100)";
	document.getElementById("next_control").style.cursor = "pointer";
	
}


function moveAlbumRight(orig, amount) {
	clearTimeout (moveTimer);
	
	var obj = document.getElementById("album_list");
	var marginLeft = parseInt(document.getElementById("album_list").style.marginLeft.replace("px", ""));
	var newpos = orig - amount;
	
	var maxi = 255-document.getElementById("album_list").offsetWidth;

	if (marginLeft > newpos & marginLeft > maxi) {
		var step = 10;
		
		if (marginLeft - step < newpos) {
			marginLeft = newpos;
		}
		else if (marginLeft - step <= maxi) {
			marginLeft = maxi;	
		}
		else {
			marginLeft -= step;	
		}
		
		obj.style.marginLeft = marginLeft+"px";
		
		moveTimer = setTimeout("moveAlbumRight("+orig+", "+amount+")", 20);
	}
	else {
		if (marginLeft == maxi) {
				document.getElementById("next_control").style.opacity = "0.5";
				document.getElementById("next_control").style.filter = "alpha(opacity=50)";
				document.getElementById("next_control").style.cursor = "pointer";
		}
	}
	
}



function moveAlbumLeft(orig, amount) {
	clearTimeout (moveTimer);
	
	var obj = document.getElementById("album_list");
	var marginLeft = parseInt(document.getElementById("album_list").style.marginLeft.replace("px", ""));
	var newpos = orig + amount;
	
	var mini = 0;

	if (marginLeft < newpos & marginLeft < mini) {
		var step = 10;
		
		if (marginLeft + step > newpos) {
			marginLeft = newpos;
		}
		else if (marginLeft + step >= mini) {
			marginLeft = mini;	
		}
		else {
			marginLeft += step;	
		}
		
		obj.style.marginLeft = marginLeft+"px";
		
		moveTimer = setTimeout("moveAlbumLeft("+orig+", "+amount+")", 20);
	}
	else {
		if (marginLeft == mini) {
				document.getElementById("prev_control").style.opacity = "0.5";
				document.getElementById("prev_control").style.filter = "alpha(opacity=50)";
				document.getElementById("prev_control").style.cursor = "pointer";
		}
	}
	
}