/*
Javascript Photoviewer script by Peter Brachwitz

Version: 1.0
Date: Aug 4 2010

Email: fateastray@gmail.com
Skype: fateastray
MSN: fateastray@gmail.com
*/

/*
getFiles.php    !required

<?php
	$folder = $_POST['folder'];
	$amount = count(glob("photos/$folder/*"));
	echo $amount;
?>
*/

var filesCount;
var imageArray;
var mainImage;
var prevImage;
var nextImage;
var newOpacity;
var onSwitch = 0;
var arrowDimensions = 19;
var textFont = "Verdana";

var arrowSize = arrowDimensions + "px";

function loadPage(theFolder){
	getNumberOfPictures(theFolder);
	document.getElementById("content").removeChild(document.getElementById("homephoto"));
}

function buildArray(folder, amount){
	imageArray = new Array();
	
	for(var i = 0;i<amount;i++){
		var image = document.createElement("img");
		image.src = "photos/" + folder + "/" + (i+1) + ".jpg";
		imageArray[i] = image;
	}
	buildViewer(0);
}

function buildViewer(currentImage){
if(onSwitch==1) document.getElementById("photoContainer").innerHTML = "";
	var containerDiv = document.createElement("div");
	containerDiv.id = "containerDiv";
	containerDiv.style.height = "550px";
	containerDiv.style.width = "750px";
	
	var photoCon = document.createElement("div");
	photoCon.id = "photoContainer";
	document.body.appendChild(photoCon);
	//document.getElementById("photoContainer").style.border = "1px solid black";
	document.getElementById("photoContainer").style.width = "750px";
	document.getElementById("photoContainer").style.height = "550px";
	document.getElementById("photoContainer").style.position = "absolute";
	document.getElementById("photoContainer").style.top = "110px";
	document.getElementById("photoContainer").style.left = "50%";
	document.getElementById("photoContainer").style.marginLeft = "-300px";
	document.getElementById("photoContainer").appendChild(containerDiv);
	
	
	if(currentImage > 0){
		prevImage = document.createElement("img");
		prevImage.src = "img/arrow_left.png";
		prevImage.id = "prevImage";
		prevImage.style.marginLeft = "-450px";
		prevImage.style.opacity = "1";
		prevImage.style.position = "absolute";
		prevImage.style.left = "50%";
		prevImage.style.top = "200px";
		prevImage.style.width = arrowSize;
		prevImage.style.height = arrowSize;
		prevImage.setAttribute("onMouseOver", "javascript: overLeft();");
		prevImage.setAttribute("onMouseOut", "javascript: outLeft();");
		prevImage.onclick = function(){
		if(currentImage > 0){
			document.getElementById("photoContainer").innerHTML = "";
			buildViewer(currentImage - 1);
		}
	}
		containerDiv.appendChild(prevImage);
	}
	
	loadImage = document.createElement("img");
	loadImage.src = "img/nowloading.gif";
	loadImage.id = "loadImage";
	loadImage.style.position = "absolute";
	loadImage.style.top = "240px";
	loadImage.style.left = "280px";
	loadImage.style.zIndex = "10";
	document.getElementById("photoContainer").appendChild(loadImage);
	
	mainImage = document.createElement("img");
	mainImage.src = imageArray[currentImage].src;
	mainImage.id = "currentImage";
	mainImage.style.position = "absolute";
	mainImage.style.opacity = "0";
	mainImage.style.left = "50%";
	mainImage.style.zIndex = "99";
	
            setTimeout('javascript: appendMainImage(mainImage);', 70);
	
	if(currentImage < (imageArray.length - 1)){
		nextImage = document.createElement("img");
		nextImage.src = "img/arrow_right.png";
		nextImage.id = "nextImage";
		nextImage.style.marginLeft = "340px";
		nextImage.style.opacity = "1";
		nextImage.style.position = "absolute";
		nextImage.style.top = "200px";
		nextImage.style.left = "50%";
		nextImage.style.width = arrowSize;
		nextImage.style.height = arrowSize;
		nextImage.setAttribute("onMouseOver", "javascript: overRight();");
		nextImage.setAttribute("onMouseOut", "javascript: outRight();");
		nextImage.onclick = function(){
		if(currentImage < imageArray.length - 1){
			document.getElementById("photoContainer").innerHTML = "";
			buildViewer(currentImage + 1);
		}
	}
		containerDiv.appendChild(nextImage);
	}

	var infoDiv = document.createElement("div");
	infoDiv.style.fontFamily = textFont;
	infoDiv.style.color = "#5f5f5f";
	infoDiv.style.width = "100px";
	infoDiv.style.fontSize = "9pt";
	infoDiv.style.position = "absolute";
	infoDiv.style.left = "50%";
	infoDiv.style.marginLeft = "-35px";
	infoDiv.style.bottom = "0px";
	infoDiv.innerHTML = (currentImage + 1) + " / " + imageArray.length;
	infoDiv.style.border = "0px";
	document.getElementById("photoContainer").appendChild(infoDiv);
	
	onSwitch = 1;
	
}

function appendMainImage(mainImage){
	document.getElementById("containerDiv").appendChild(mainImage);

if(mainImage.width > mainImage.height){	
		mainImage.style.width = "auto";
		mainImage.style.height = "500px";
		mainImage.style.top = "20px";
		mainImage.style.marginLeft = "-420px";
	}else if(mainImage.height > mainImage.width){
		mainImage.style.height = "500px";
		mainImage.style.width = "auto";
		mainImage.style.top = "25px";
		mainImage.style.marginLeft = "-200px"; //edit this value if things look off centre
	}else{
		mainImage.style.height = "500px";
		mainImage.style.width = "500px";
		mainImage.style.top = "25px";
		mainImage.style.marginLeft = "-270px";
	}

	setTimeout('javascript: setOpacity(0.1);', 25);
}

function setOpacity(opacity){
	if(opacity < 1){
		document.getElementById("currentImage").style.opacity = opacity;
		document.getElementById("currentImage").style.filter = "alpha(opacity:"+(opacity*100)+")";
		newOpacity = opacity + 0.1;
		setTimeout('javascript: setOpacity(newOpacity);', 25);
	}
}

function overLeft(){
	document.getElementById("prevImage").style.opacity = "0.4";
	document.getElementById("prevImage").style.filter = "alpha(opacity=40)";
	document.getElementById("prevImage").style.cursor = "pointer";
}

function overRight(){
	document.getElementById("nextImage").style.opacity = "0.4";
	document.getElementById("nextImage").style.filter = "alpha(opacity=40)";
	document.getElementById("nextImage").style.cursor = "pointer";
}

function outLeft(){
	document.getElementById("prevImage").style.opacity = "1";
	document.getElementById("prevImage").style.filter = "alpha(opacity=100)";
}

function outRight(){
	document.getElementById("nextImage").style.opacity = "1";
	document.getElementById("nextImage").style.filter = "alpha(opacity=100)";
}

function getNumberOfPictures(imagefolder){
	var ajaxRequest; 
 
		try{
		  ajaxRequest = new XMLHttpRequest();
		} 
		catch (e){
		  try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		  } 
		  catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} 
			catch (e){
				alert("Your browser broke!");
				return false;
			}
		  }
		}
		
		ajaxRequest.onreadystatechange = function(){
		  if(ajaxRequest.readyState == 4){
			if(ajaxRequest.status == 200){
					filesCount = ajaxRequest.responseText;
					buildArray(imagefolder, filesCount);
			}
			else {
				alert('Monkeyduck: ' + ajaxRequest.status + ' ' + ajaxRequest.statusText )
			}
		  }
		}
		
		var params = "folder=" + imagefolder;
		
		ajaxRequest.open("POST",  "php/getFiles.php", true);
		ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		ajaxRequest.setRequestHeader("Content-length",0);
		ajaxRequest.send(params);
}