// JavaScript Document
var images = new Array();

var path = "";

var fadeTimer = "";

var scroll_x = 0;

function createViewer(path_tmp, id) {
	path = path_tmp;
	
	var div = document.createElement("div");
	div.style.textAlign = "center";
	
	
	var image = document.createElement("div");
	image.style.position = "relative";
	image.style.height = "326px";
	
	var loader = document.createElement("div");
	loader.innerHTML = "<img src='"+path+"images/loading.gif'>";
	loader.style.width = "261px";
	loader.style.left = "50%";
	loader.style.marginLeft = "-130px";
	loader.style.position = "absolute";
	loader.style.zIndex = "99";
	loader.style.top = "0px";
	
	var imageview = document.createElement("div");
	imageview.style.position = "absolute";
	imageview.style.left = "50%";
	imageview.style.zIndex = "100";
	imageview.style.top = "0px";
	imageview.id = "image_viewport";

	image.appendChild(loader);
	image.appendChild(imageview);

	var shadow = document.createElement("div");
	shadow.innerHTML = "<img src='"+path+"images/gallery_shadow.jpg'>";
	
	
	var control = document.createElement("div");
	control.style.width = "600px";
	control.style.paddingLeft = "50%";
	control.style.marginLeft = "-220px";
	
	var left = document.createElement("div");
	left.innerHTML = "<img src='"+path+"images/gallery_prv.jpg'>";
	left.style.cssFloat = "left";
	left.style.styleFloat = "left";
	left.style.backgroundColor = "#FFFFFF";
	left.style.padding = "2px";
	left.style.opacity = "0.5";
	left.style.filter = "alpha(opacity=50)";
	left.id = "left_control";
	if (!IE) {
		left.addEventListener("click", scrollLeft,  true);
	}
	else {
		left.onclick = scrollLeft;
	}


	var imagelist_cont = document.createElement("div");
	imagelist_cont.style.cssFloat = "left";
	imagelist_cont.style.styleFloat = "left";
	imagelist_cont.style.width = "400px";
	imagelist_cont.style.height = "37px";
	imagelist_cont.style.overflow = "hidden";

	var imagelist = document.createElement("div");
	imagelist.style.height = "37px";
	imagelist.id = "image_list";
	imagelist.style.marginLeft = "0px";
	
	imagelist_cont.appendChild(imagelist);
	
	var right = document.createElement("div");
	right.innerHTML = "<img src='"+path+"images/gallery_nxt.jpg'>";
	right.style.cssFloat = "left";
	right.style.styleFloat = "left";
	right.style.backgroundColor = "#FFFFFF";
	right.style.padding = "2px";
	right.style.cursor = "pointer";
	right.id = "right_control";
	if (!IE) {
		right.addEventListener("click", scrollRight, true);
	}
	else {
		right.onclick = scrollRight;
	}
	
	var clear = document.createElement("div");
	clear.style.clear = "both";
	
	control.appendChild(left);
	control.appendChild(imagelist_cont);
	control.appendChild(right);
	control.appendChild(clear);
	
	div.appendChild(image);
	div.appendChild(shadow);
	div.appendChild(control);
	
	document.getElementById(id).appendChild(div);
	
}

function setImg(e) {
	var obj = "";
	if (e != null) {
		obj = e.target;	
	}
	else {
		obj = event.srcElement;
	}
	
		
	document.getElementById("image_viewport").innerHTML = "";

	
	var pos = obj.alt;
	var image_tmp = document.createElement("img");
	image_tmp.src = path+'resize/imageport.php?img=../'+images[pos];
	image_tmp.id = "current_img";
	image_tmp.style.opacity = "0.0";
	image_tmp.style.filter = "alpha(opacity=0)";

	document.getElementById("image_viewport").appendChild(image_tmp);
	
	if (!image_tmp.complete) {
		image_tmp.onload = function() {
			var image_tmp = document.getElementById("current_img");
	
			document.getElementById("image_viewport").style.width = image_tmp.width+"px";
			document.getElementById("image_viewport").style.marginLeft = ((-1)*image_tmp.width/2)+"px";
			
			imagePortFadeIn("current_img");
			
		}
	}
	else {
			var image_tmp = document.getElementById("current_img");

			document.getElementById("image_viewport").style.width = image_tmp.width+"px";
			document.getElementById("image_viewport").style.marginLeft = ((-1)*image_tmp.width/2)+"px";
			
			imagePortFadeIn("current_img");
	}
	
	


	
	
	
}

function imagePortFadeIn(id) {
	clearTimeout(fadeTimer);
	
	var obj = document.getElementById(id);
	var current = parseInt(obj.style.opacity*100);
	if (current < 100) {
		var step = 10;
		if (current + step > 100) {
			current = 100;	
		}
		else {
			current += step;
		}
		obj.style.opacity = current/100;
		obj.style.filter = "alpha(opacity="+current+")";
		
		fadeTimer = setTimeout("imagePortFadeIn('"+id+"')", 20);
	}
	else {
		//done
	}
}

function loadImages(imgstring) {
	var temp = imgstring.split(";");
	images = temp;

	for (i = 0; i < temp.length-1; i++) {
		var image_tmp = document.createElement("img");
		image_tmp.src = path+'resize/thumbs.php?img=../'+temp[i];
		image_tmp.style.padding = "2px";
		image_tmp.style.paddingTop = "4px";
		image_tmp.style.paddingBottom = "4px";
		image_tmp.style.cursor = "pointer";
		if (!IE) {
			image_tmp.addEventListener("click", setImg, true);
		}
		else {
			image_tmp.onclick = setImg;
		}
		image_tmp.alt = i;
		
		image_tmp.onload = function() {
			var obj = document.getElementById("image_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) {
						
						   width += obj.childNodes[x].offsetWidth;
						
					}
				   }
			}
			else {
				// nothing exists in the drop	
			}
			
			obj.style.width = width+"px";	
		}
		
		document.getElementById("image_list").appendChild(image_tmp);
	}
	
	
	
	
	var image_tmp = document.createElement("img");
	image_tmp.src = path+'resize/imageport.php?img=../'+images[0];
	image_tmp.id = "current_img";
	image_tmp.style.opacity = "0.0";
	image_tmp.style.filter = "alpha(opacity=0)";
	
	document.getElementById("image_viewport").appendChild(image_tmp);
	
	image_tmp.onload = function() {
		var image_tmp = document.getElementById("current_img");
		document.getElementById("image_viewport").style.width = image_tmp.width+"px";
		document.getElementById("image_viewport").style.marginLeft = ((-1)*image_tmp.width/2)+"px";

		imagePortFadeIn("current_img");

	}
	
	
}



function scrollRight(e) {
	var orig = parseInt(document.getElementById("image_list").style.marginLeft.replace("px", ""));
	
	
	moveListRight(orig, 50);
		
	document.getElementById("left_control").style.opacity = "1";
	document.getElementById("left_control").style.filter = "alpha(opacity=100)";
	document.getElementById("left_control").style.cursor = "pointer";
}

function scrollLeft(e) {
	var orig = parseInt(document.getElementById("image_list").style.marginLeft.replace("px", ""));
	
	
	moveListLeft(orig, 50);
		
	document.getElementById("right_control").style.opacity = "1";
	document.getElementById("right_control").style.filter = "alpha(opacity=100)";
	document.getElementById("right_control").style.cursor = "pointer";
}

var moveTimer = "";

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

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


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

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