// JavaScript Document


var images = new Array();
var names = new Array();
var current = 0;

var resizeTimer = "";

function createImageViewer(path) {
	
	
	var overlay = document.createElement("div");
	overlay.style.position = "fixed";
	overlay.style.width = "100%";
	overlay.style.height = "100%";
	overlay.style.zIndex = "105";
	overlay.id = "overlay";
	overlay.style.display = "none";
	overlay.style.backgroundColor = "#000000";
	overlay.style.opacity = "0.5";
	overlay.style.filter = "alpha(opacity=50)";
	overlay.style.top = "0px";
	overlay.style.left = "0px";

	var div = document.createElement("div");
	
	div.style.position = "fixed";
	div.style.width = "500px";
	div.style.backgroundColor = "#CCC0A8";
	div.style.border = "5px solid #CCC0A8";
	div.style.display = "none";
	div.style.top = "100px";
	div.style.left = "50%";
	div.style.marginLeft = "-250px";
	div.style.zIndex = "106";
	div.style.overflow = "hidden";
	div.id = "image_viewer";
	div.onmouseover = fadeInControl;
	div.onmouseout = fadeOutControl;
	
	var divControl = document.createElement("div");
	divControl.style.position = "absolute";
	divControl.style.width = "98%";
	divControl.style.top = "42%";
	divControl.style.padding = "10px";
	divControl.id = "image_viewer_controls";
	divControl.style.opacity = "0.0";
	divControl.style.filter = "alpha(opacity=0)";
	divControl.style.zIndex = "109";
	
	var leftControl = document.createElement("div");
	leftControl.style.cssFloat = "left";
	leftControl.style.styleFloat = "left";
	leftControl.innerHTML = "<img src='"+path+"images/imageviewer/left_arrow.png'>";
	leftControl.onclick = previousImage;
	leftControl.style.cursor = "pointer";
	
	divControl.appendChild(leftControl);

	var rightControl = document.createElement("div");
	rightControl.style.cssFloat = "right";
	rightControl.style.styleFloat = "right";
	rightControl.innerHTML = "<img src='"+path+"images/imageviewer/right_arrow.png'>";
	rightControl.id = "right_control";
	rightControl.onclick = nextImage;
	rightControl.style.cursor = "pointer";
	
	divControl.appendChild(rightControl);
	
	var imageCont = document.createElement("div");
	imageCont.style.position = "absolute";
	imageCont.style.top = "0px";
	imageCont.style.height = "100%";
	imageCont.style.zIndex = "108";
	imageCont.id = "image_viewport";
	
	
	var loadCont = document.createElement("div");
	loadCont.style.position = "relative";
	loadCont.style.height = "100%";
	loadCont.style.width = "100%";
	loadCont.style.top = "0px";
	loadCont.style.zIndex = "107";
	loadCont.innerHTML = "<img src='"+path+"images/imageviewer/load.gif'>";
	
	var labelCont = document.createElement("div");
	labelCont.style.position = "absolute";

	labelCont.id = "image_viewport_label";
	labelCont.style.backgroundColor = "#000000";
	labelCont.style.marginTop = "5px";
	labelCont.style.padding = "5px";
	labelCont.style.fontFamily = "Verdana";
	labelCont.style.color = "#CCCCCC";
	labelCont.style.fontWeight = "bold";
	labelCont.style.fontSize = "11px";
	labelCont.style.textAlign = "center";
	labelCont.style.bottom = "0px";
	labelCont.style.opacity = "0.8";
	labelCont.style.filter = "alpha(opacity=80)";
	labelCont.style.width = "490px";
	labelCont.style.zIndex = "120";
	
	var closeCont = document.createElement("div");
	closeCont.style.position = "absolute";
	closeCont.style.backgroundColor = "#000000";
	closeCont.style.padding = "5px";
	closeCont.style.fontFamily = "Verdana";
	closeCont.style.fontWeight = "bold";
	closeCont.style.fontSize = "11px";
	closeCont.style.textAlign = "center";
	closeCont.style.top = "5px";
	closeCont.style.right = "5px";
	closeCont.style.opacity = "0.8";
	closeCont.style.filter = "alpha(opacity=80)";
	closeCont.style.zIndex = "120";
	
	closeCont.innerHTML = "<a href='javascript:closeImage()' style='color:#FFFFFF;'>close</a>";


	div.appendChild(imageCont);
	div.appendChild(labelCont);
	div.appendChild(divControl);
	div.appendChild(loadCont);
	div.appendChild(closeCont);
	
	document.getElementById("container").appendChild(div);
	document.getElementById("container").appendChild(overlay);
}

function addImage(image, name) {
	images[images.length] = image;	
	names[names.length] = name;	

}


function loadImage(count) {
	clearTimeout(resizeTimer);
	
	var overlay = document.getElementById("overlay");	
	var obj = document.getElementById("image_viewer");	
	var obj_img = document.getElementById("image_viewport");	
	var obj_lbl = document.getElementById("image_viewport_label");
	
	var theimage = document.createElement("img");
	theimage.src = images[count];
	
	theimage.onload = function() {
		var obj_img = document.getElementById("image_viewport");	
		resize(obj_img.offsetWidth);	
	}
	
	obj_img.innerHTML = "";
	obj_img.appendChild(theimage);
	obj_lbl.innerHTML = names[count]+" ("+(count+1)+"/"+images.length+")";
	
	overlay.style.display = "block";
	obj.style.display = "block";
	current = count;
	

	
}

var timer = "";



function resize(new_width) {
	var obj = document.getElementById("image_viewer");	
	var label = document.getElementById("image_viewport_label");	

	var current = parseInt(obj.style.width.replace("px", ""));
	
	if (current < new_width) {
		var step = 20;
		if (current + step > new_width) {
			current = new_width;	
		}
		else {
			current += step;	
		}
		
		obj.style.width = current+"px";
		obj.style.marginLeft = "-"+(current/2)+"px";
		
		label.style.width = current+"px";
		
		resizeTimer = setTimeout("resize("+new_width+")", 20);
	}
	else if (current > new_width) {
		var step = 20;
		if (current - step < new_width) {
			current = new_width;	
		}
		else {
			current -= step;	
		}
		
		obj.style.width = current+"px";
		obj.style.marginLeft = "-"+(current/2)+"px";
		label.style.width = current+"px";
		
		resizeTimer = setTimeout("resize('"+new_width+"')", 20);
	}
	else {
		//done	
	}
	
}



function fadeInControl() {
	clearTimeout(timer);
	var obj = document.getElementById("image_viewer_controls");
	var current = (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+")";
		timer = setTimeout("fadeInControl()", 20);
	}
	else {
		
	}
}

function fadeOutControl() {
	clearTimeout(timer);
	var obj = document.getElementById("image_viewer_controls");
	var current = (obj.style.opacity)*100;
	
	if (current > 0) {
		var step = 10;
		
		if (current - step < 0) {
			current = 0;	
		}
		else {
			current -= step;	
		}
		
		obj.style.opacity = current/100;
		obj.style.filter = "alpha(opacity="+current+")";
		timer = setTimeout("fadeOutControl()", 20);
	}
	else {
		
	}
}


function nextImage() {
	var total = images.length;
	if (current < total-1) {
		loadImage(current+1);
	}
	else {
		//no next image	
	}
}

function previousImage() {
	if (current > 0) {
		loadImage(current-1);
	}
	else {
		//no previous image	
	}
}


function closeImage() {
	var overlay = document.getElementById("overlay");	
	var obj = document.getElementById("image_viewer");	
	
	overlay.style.display = "none";
	obj.style.display = "none";
}