var xmlHttp;
var thumbnialsLeft = 0;
var thumbnialsTest = 5;
var thumbnailsWidth = 0;
var scrollThumbnailsTimer;
var step = 3;
var speed = 5;
var bigimageIsSet = false;
var elementWithBorder;
var xmlHttpform;
var popupcontent;

function closeFullSizeImage(url, alt){
	document.getElementById("popupbg").style.zIndex = '2';
	document.getElementById("popupbg").innerHTML = '';
}

function openFullSizeImage(url, alt){
	document.getElementById("popupbg").style.zIndex = '4';
	document.getElementById("popupbg").innerHTML = '<img id="popupbgimg" src="' + url + '" alt="' + alt + '">';
}

function imgBorder(element){
	if(elementWithBorder!=null){
		elementWithBorder.style.border='2px solid #FFFFFF';
	}
	element.style.border='2px solid #FF0000';
	elementWithBorder = element;
}

function calcThumbnailsWidth(){
	var allthumbnails = document.getElementById("thumbnails");
	if(allthumbnails != null){
		var thumbnails = allthumbnails.getElementsByTagName("div");
		var width = 0;

		for ( var i=0; i < thumbnails.length ; i++){
			width += thumbnails[i].offsetWidth;
		}

		if (width > 702){
			document.getElementById("arrowleft").style.visibility = 'visible';
			document.getElementById("arrowright").style.visibility = 'visible';
		} 

		if (width == thumbnailsWidth)
		{
			if(thumbnialsTest == 5 && thumbnails[0] != null){
				popupSetFirstImage(thumbnails[0]);
			}
			if(thumbnialsTest > 0){
				thumbnialsTest = thumbnialsTest-1;
				setTimeout("calcThumbnailsWidth()",500);
			}
		} else {
			thumbnailsWidth = width;
			setTimeout("calcThumbnailsWidth()",200);
		}
	} else {
		setTimeout("calcThumbnailsWidth()",200);
	}
}

function popupSetImage(url, alt){
	document.getElementById("bigimage").innerHTML = '<a href="'+url+'" target="_blank" onclick="openFullSizeImage(\'' + url + ',' + alt + '\'); return false;"><img src="' + url + '" alt="' + alt + '"></a>';
	bigimageIsSet = true;
	var image = document.getElementById("bigimage").getElementsByTagName("img");
	if (image[0] != null)
	{		
		if (image.offsetWidth > 490 ){
			image.style.width = 490;
		}
		if (image.offsetHeight > 320 ){
			image.style.height = 320;
		}
	}
	document.getElementById("bigimage").style.background = "#FFFFFF";
}

function popupSetFirstImage(thumbnail){
	elementWithBorder = thumbnail.getElementsByTagName("img")[0];
	var bigimagedata = elementWithBorder.getAttribute("onmousedown").toString();
	var bigimagedataurl = bigimagedata.substring(bigimagedata.indexOf("popupSetImage(") +15 , bigimagedata.indexOf(",") -1 )
	var bigimagedataalt = bigimagedata.substring(bigimagedata.indexOf(",") +2 , bigimagedata.length );
	bigimagedataalt = bigimagedataalt.substring(0, bigimagedataalt.indexOf(")")-1);
	if (!bigimageIsSet){
		popupSetImage(bigimagedataurl , bigimagedataalt);
		elementWithBorder.style.border='2px solid #FF0000';
	}
	document.getElementById("bigimage").style.background = "#ffffff";
}

function stateChanged() { 
	if (xmlHttp.readyState==4) { 
		popupcontent.style.background = "#ffffff";
		popupcontent.innerHTML = xmlHttp.responseText;
		xmlHttp=null;
		elementWithBorder = null;
		savePopupOriginals();
		translatePopup(language);
		thumbnialsLeft = 0;
		thumbnialsTest = 5;
		bigimageIsSet = false;
		calcThumbnailsWidth();
	} 
}

function GetXmlHttpObject(){
	var xmlHttp=null;
	try {
		// Firefox, Opera 8.0+, Safari
		xmlHttp=new XMLHttpRequest();
	} catch (e) {
		// Internet Explorer
		try {
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		} catch (ex) {
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xmlHttp;
}

function openPopup(url){
	document.getElementById("popupbg").style.visibility = 'visible';
	document.getElementById("popuparea").innerHTML = '<div id="popup"><div id="popupclose" onClick="closePopup()">&nbsp;</div><div id="popupcontent" /></div>';
	document.getElementById("popuparea").style.visibility = 'visible';

	popupcontent = document.getElementById("popupcontent");

	xmlHttp = new GetXmlHttpObject();
	if (xmlHttp===null) {
		alert ("Your browser does not support AJAX!");
		return;
	} 
	xmlHttp.onreadystatechange = stateChanged;
	xmlHttp.open("GET",url + "?popup=true",true);
	xmlHttp.send(null);
}

function closePopup(){
	document.getElementById("popuparea").innerHTML = '';
	document.getElementById("popuparea").style.visibility = 'hidden';
	document.getElementById("popupbg").style.visibility = 'hidden';
}

/* Scroll the content by stating side and direction */
function scrollThumbnails(direction) {
	if ( thumbnialsLeft + (step * direction) > 0){
		thumbnialsLeft = 0;
		document.getElementById("thumbnails").style.left = thumbnialsLeft + "px";
	} else if ( thumbnialsLeft + (step * direction ) + thumbnailsWidth < 700){
		thumbnialsLeft = 700 - thumbnailsWidth;
		document.getElementById("thumbnails").style.left = thumbnialsLeft + "px";
	} else {
		thumbnialsLeft = thumbnialsLeft + (step * direction );
		document.getElementById("thumbnails").style.left = thumbnialsLeft + "px";
	}
}

/* scroll by using the arrows */
function startScrollThumbnails(direction){
	scrollThumbnailsTimer = setInterval('scrollThumbnails(' + -direction +')', speed);
}

function stopScrollThumbnails(){
	clearInterval(scrollThumbnailsTimer);
}

function formStateChanged(){
	if (xmlHttpform.readyState==4) { 
		document.getElementById("popupform").innerHTML = xmlHttpform.responseText;
		document.getElementById("popupform").style.visibility = 'visible';
	}
}

function openPopupForm(url){
	xmlHttpform = new GetXmlHttpObject();
	if (xmlHttpform===null) {
		alert ("Your browser does not support AJAX!");
		return;
	} 
	xmlHttpform.onreadystatechange = formStateChanged;
	xmlHttpform.open("GET",url,true);
	xmlHttpform.send(null);
}

function closePopupForm(){
	document.getElementById("popupform").style.visibility = 'hidden';
	xmlHttpform = null;
}