var imgLarge;
var imgDescr;
var totalPhotos;
var cityId;

var root		= "http://www.stukafest.nl/";
var photoNo		= 0;

window.onload	= setOnLoad;

function setOnLoad()
{
	if (typeof initMap == "function")
	{
		initMap();
	}
	
	setTimeout(showContent, 500);
	
	setFocus();
	setImgSettings();
	setTotalPhotos();
	rollOverInit();
}

function showContent()
{
	if (document.getElementById("preloadImage"))
	{
		document.getElementById("wrapper").style.display		= "block";
		document.getElementById("preloadImage").style.display	= "none";
		
		document.body.style.background = "#00E100 fixed bottom right url(" + root + "images/background_day.jpg)";
	}
}

function setImgSettings()
{
	imgLarge	= document.getElementById("imgLarge");
	imgDescr	= document.getElementById("imgDescr");
	
	if (document.getElementById("photoCityId"))
	{
		cityId	= document.getElementById("photoCityId").innerHTML;
	}
}

function setFocus()
{
	var thisFocus = document.getElementById("thisFocus");
	
	if (thisFocus)
	{
		thisFocus.focus();
	}
}

function rollOverInit()
{
	for (var i = 0; i < document.images.length; i++)
	{
		if (document.images[i].parentNode.parentNode.className == "thumb")
		{
			setupRollOver(document.images[i], "imgThumb");
		}
		
		else if (document.images[i].parentNode.parentNode.id == "imgNav")
		{
			setupRollOver(document.images[i], "imgNav");
		}
	}
}

function setupRollOver(thisImage, type)
{
	var overImgSrc;
	
	thisImage.outImage				= new Image();
	thisImage.outImage.src			= thisImage.src;
	thisImage.onmouseout			= rollOut;
	
	if (type == "imgThumb")
	{
		overImgSrc = root + "images/fotos/small" + thisImage.src.substring(thisImage.src.lastIndexOf("/"));
	}
	
	else if (type == "imgNav")
	{
		overImgSrc = root + "images/" + thisImage.id + "_on" + thisImage.src.substring(thisImage.src.lastIndexOf("."));
	}
	
	if (thisImage.id == "icon_close")
	{
		thisImage.parentNode.onclick = hidePhoto;
	}
	
	else
	{
		thisImage.parentNode.onclick = setImage;
	}
	
	thisImage.overImage				= new Image();
	thisImage.overImage.src			= overImgSrc;
	thisImage.onmouseover			= rollOver;
}

function setImage()
{
	var ajaxRequest;
	
	switch (this.id)
	{
		case "prevImg":
		{
			photoNo--;
			break;
		}
		
		case "nextImg":
		{
			photoNo++;
			break;
		}
		
		default:
		{
			photoNo = this.id.substring(this.id.lastIndexOf("-") + 1);
			break;
		}
	}
	
	if (photoNo == 1)
	{
		document.getElementById("prevImg").style.display = "none";
	}
	
	else
	{
		document.getElementById("prevImg").style.display = "";
	}
	
	if (photoNo >= totalPhotos)
	{
		document.getElementById("nextImg").style.display = "none";
	}
	
	else
	{
		document.getElementById("nextImg").style.display = "";
	}
	
	imgLarge.innerHTML	= "";
	imgDescr.innerHTML	= "";
	
	try
	{
		ajaxRequest = new XMLHttpRequest();
	}
	
	catch(e)
	{
		try
		{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		}
		
		catch(e)
		{
			// something went wrong
			//alert ("Your browser broke!");
			return false;
		}
	}
	
	ajaxRequest.onreadystatechange = function()
	{
		if (ajaxRequest.readyState == 4)
		{
			var ajaxResponse	= ajaxRequest.responseText.split("|||");
			
			imgLarge.innerHTML	= "<img src=\"" + ajaxResponse[0] + "\" alt=\"" + ajaxResponse[1] + "\" title=\"" + ajaxResponse[1] + "\" />";
			imgDescr.innerHTML	= ajaxResponse[1];
			
			if (ajaxResponse[2])
			{
				imgLarge.innerHTML = "<a href=\"" + ajaxResponse[2] + "\" target=\"_blank\">" + imgLarge.innerHTML + "</a>";
			}
		}
	}
	
	var query	= "?page=" + photoNo + "&city_id=" + cityId;
	
	ajaxRequest.open("GET", root + "db/getimage.php" + query, true);
	ajaxRequest.send(null);
	
	showPhoto();
}

function setTotalPhotos()
{
	var ajaxRequest;
	
	try
	{
		ajaxRequest = new XMLHttpRequest();
	}
	
	catch(e)
	{
		try
		{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		}
		
		catch(e)
		{
			// something went wrong
			//alert ("Your browser broke!");
			return false;
		}
	}
	
	ajaxRequest.onreadystatechange = function()
	{
		if (ajaxRequest.readyState == 4)
		{
			totalPhotos	= parseInt(ajaxRequest.responseText);
		}
	}
	
	var query	= "?city_id=" + cityId;
	
	ajaxRequest.open("GET", root + "db/getimagestotal.php" + query, true);
	ajaxRequest.send(null);
}

function rollOut()
{
	this.src = this.outImage.src;
}

function rollOver()
{
	this.src = this.overImage.src;
}

function showPhoto()
{
	var obj = document.getElementById("contentLargeImg");
	
	if (obj)
	{
		obj.style.display = "";
	}
	
	return false;
}

function hidePhoto()
{
	var obj = document.getElementById("contentLargeImg");
	
	if (obj)
	{
		obj.style.display = "none";
	}
	
	return false;
}