//path to images dir
var imgPath = "";
var currentImage = 0;

function loadImages(){
	//Preload the imgs from the img array
	for (i=0; i < imgArray.length; i++) {
		var preload = new Image();
		preload.src = imgPath+imgArray[i][0];
	}
}

function showImage(id){
	for(i=0;i<imgArray.length;i++){
		var state = i==id ? "" : "none";
		document.getElementById("mainImage_"+i).style.display = state;
	}	
	document.getElementById("imageCaption").innerHTML = imgArray[id][1];
}

function nextImage() {
	currentImage++;
	showImage(currentImage);
	if(currentImage==1){document.getElementById('previousLink').style.display = "";}
	if(currentImage+1==imgArray.length){document.getElementById('nextLink').style.display = "none";}
}

function prevImage(){
	currentImage--;
	showImage(currentImage);
	if(currentImage==0){document.getElementById('previousLink').style.display = "none";}
	if(currentImage<imgArray.length){document.getElementById('nextLink').style.display = "";}
}
  
function getPageDimensions() {
	var xScroll, yScroll;
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ 
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { 
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}

	var windowWidth, windowHeight;
	if (self.innerHeight) {	
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { 
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { 
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}
	
	var pageDimensions = Array();
	
	pageDimensions.contentHeight = yScroll;
	pageDimensions.height = windowHeight;
	pageDimensions.width = windowWidth;
      
	if (document.all){
		if (!document.documentElement.scrollLeft)
			pageDimensions.scrollX = document.body.scrollLeft;
		else
			pageDimensions.scrollX = document.documentElement.scrollLeft;
	   
		if (!document.documentElement.scrollTop)
			pageDimensions.scrollY = document.body.scrollTop;
		else
			pageDimensions.scrollY = document.documentElement.scrollTop;
	}   
	else
	{
		pageDimensions.scrollX = window.pageXOffset;
		pageDimensions.scrollY = window.pageYOffset;
	}
	
	return pageDimensions;
}
function closeImageViewer(){
	var body = document.getElementsByTagName('body')[0];
	body.removeChild(document.getElementById("overlay"));
	body.removeChild(document.getElementById("containerDiv"));
}

function openImageViewer(vid){
	currentImage = 0;
	var overlay = document.createElement('div');
	overlay.setAttribute('id', 'overlay');
	pageDimensions = getPageDimensions();
	overlay.style.height = "100%";
	overlay.style.width = "100%";
	overlay.style.position = "absolute";
	
	if(navigator.userAgent.indexOf('MSIE 6') > -1){
		overlay.style.background = "#000000";
		overlay.style.filter = "alpha(opacity=70)";
	}else{
		overlay.style.background = "url(en-images/black-70.png)";
	}
	
	overlay.style.top = "0px";
	overlay.style.left = "0px";
	overlay.style.width = "100%";
	overlay.style.zIndex = "500";
		
	var body = document.getElementsByTagName('body')[0];
	body.appendChild(overlay);
	overlay.onclick = function() {closeImageViewer();};
	
	var containerDiv = document.createElement('div');
	containerDiv.setAttribute('id', 'containerDiv');
	containerDiv.style.top = "50px";
	containerDiv.style.left = (pageDimensions.width/2)-400 + "px";
	containerDiv.style.zIndex = "501";
	
	var imagePanel = document.createElement('div');
	imagePanel.setAttribute('id', 'imagePanel');
	
	var controls = document.createElement('div');
	controls.setAttribute('id', 'controls');
	controls.innerHTML = "<div id='previous'><a id='previousLink'><img src='en-images/prevArrow.gif' /> previous</a>&nbsp;</div><div id='imageCaption'>" + imgArray[0][1] + "</div><div id='next'>&nbsp;<a id='nextLink'>next <img src='en-images/nextArrow.gif' /></a></div>";
	
	var closeBtn = document.createElement('a');
	closeBtn.setAttribute('id','closeBtn');
	closeBtn.href = "javascript:closeImageViewer()"
	closeBtn.innerHTML = "x"
	
	//add the container div and close button to the DOM
	body.appendChild(containerDiv);
	var containerDiv = document.getElementById('containerDiv');
	containerDiv.appendChild(imagePanel);
	containerDiv.appendChild(closeBtn);
	
	//add the images and controls to the container div
	var imgDiv = document.getElementById('imagePanel');
	for(i=0;i<imgArray.length;i++){
		var imgObj = document.createElement('img');
		imgObj.setAttribute('id', 'mainImage_'+i);
		if(i>0){imgObj.style.display = "none";}
		imgObj.src = imgPath+imgArray[i][0];
		imgDiv.appendChild(imgObj);
	}
	imgDiv.appendChild(controls);
	
	//set the href and appearance of the prev/next links based on the contents of imgArray
	if(imgArray.length>1){document.getElementById('nextLink').href="javascript:nextImage()";}
	var prevLink = document.getElementById('previousLink');
	prevLink.href = "javascript:prevImage()";
	prevLink.style.display = "none";
}