var aImages = new Array();

function ClsConfig()
{
	this.thumbgallerywidth = 720;
	this.thumbwidth = 80;
	this.thumbheight = 80;
	this.thumbstoshow = 8;
	this.padding = 10;
	this.windowmargin = 20;
	this.minimumwindowwidth = 300;
	this.minimumwindowheight = 300;
	this.scrollstep = 4;
	this.scrollfrequency = 20;
	this.timer = null;
	this.ua = navigator.userAgent.toLowerCase();
	this.bIsMSIE = ( this.ua != null && this.ua.indexOf( "msie" ) != -1 );
	this.SetThumbGalleryWidth = ClsConfig_SetThumbGalleryWidth;
	this.FixThumbsToShow = ClsConfig_FixThumbsToShow;
}

function ClsConfig_SetThumbGalleryWidth(iWidth)
{
	this.thumbgallerywidth = iWidth;
	this.FixThumbsToShow();
}
function ClsConfig_FixThumbsToShow()
{
	this.thumbstoshow = parseInt(this.thumbgallerywidth / (this.thumbwidth + this.padding));
}

function ClsImage(sName, sFileName, sComments, sSuperDiv)
{
	this.name = sName;
	this.divname = "div" + sName;
	this.superDiv = sSuperDiv;
	this.filename = sFileName;
	this.comments = sComments;
	this.image = new Image();
	this.download = ClsImage_Download;
	this.getcode = ClsImage_GetCode;
	this.getdivcode = ClsImage_GetDivCode;
}

function ClsImage_Download()
{
	this.image.src = this.sFileName;
	if (!bIsMSIE) this.image.onload = ShowImage(this.name);
}

function ClsImage_GetDivCode(iLeft)
{
	return "<div id=\"" + this.divname + "\" class=\"thumbnail\" style=\"left:" + (iLeft + oConfig.padding) + "px;\">Loading...</div>";
}

function ClsImage_GetCode(bSmallSize)
{
	return "<img id=\"" + this.name + "\" src=\"" + this.filename + "\"" + (bSmallSize ? " style=\"WIDTH:100%;HEIGHT:100%;\" onmouseover=\"ShowBigImage('" + this.name + "');EnlargeMe('" + this.name + "');\" onmouseout=\"ShrinkMe('" + this.name + "');\"" : " style=\"WIDTH:100%;\"") + ">";
}

function EnlargeMe(sImageName)
{
	var oImage = FindImage(sImageName);
	if (oImage != null)
	{
		var oDiv = document.getElementById(oImage.divname);
		if (oDiv)
		{
			oDiv.style.width = (oConfig.thumbwidth + oConfig.padding) + "px";
			oDiv.style.height = (oConfig.thumbheight + oConfig.padding) + "px";
			oDiv.style.top = (parseInt(oDiv.offsetTop) - parseInt(oConfig.padding / 2)) + "px";
			oDiv.style.left = (parseInt(oDiv.offsetLeft) - parseInt(oConfig.padding / 2)) + "px";
		}
	}
}

function ShrinkMe(sImageName)
{
	var oImage = FindImage(sImageName);
	if (oImage != null)
	{
		var oDiv = document.getElementById(oImage.divname);
		if (oDiv)
		{
			oDiv.style.width = oConfig.thumbwidth + "px";
			oDiv.style.height = oConfig.thumbheight + "px";
			oDiv.style.top = (parseInt(oDiv.offsetTop) + parseInt(oConfig.padding / 2)) + "px";
			oDiv.style.left = (parseInt(oDiv.offsetLeft) + parseInt(oConfig.padding / 2)) + "px";
		}
	}
}

function FindImage(sImageName)
{
	var i = 0;
	var oImage = null;
	while ((i < aImages.length) && (oImage == null))
	{
		if (aImages[i].name == sImageName) oImage = aImages[i]
		i++;
	}
	return oImage;
}

function ShowImage(sImageName)
{
	var oImage = FindImage(sImageName);
	if (oImage != null)
	{
		var oDiv = document.getElementById(oImage.divname);
		if (oDiv) oDiv.innerHTML = oImage.getcode(true);
	}
}




function AddNewImage(sName, sFileName, sComments, sDiv)
{
	aImages[aImages.length] = new ClsImage(sName, sFileName, sComments, sDiv);
	//aImages[aImages.length-1].download();
}

function ShowBigImage(sImageName)
{
	var oImage = FindImage(sImageName);
	if (oImage != null)
	{
		var oDiv = document.getElementById("divMainPicture");
		if (oDiv) oDiv.innerHTML = oImage.getcode(false);
		var oDiv2 = document.getElementById("divVariableComments");
		if (oDiv2) oDiv2.innerHTML = oImage.comments;
	}
}

function LoadSmallImages()
{
	//if (bIsMSIE)
	//{
		var oDiv = null;
		for (i = 0; i < aImages.length; i++)
		{
			oDiv = document.getElementById(aImages[i].divname);
			if (oDiv) oDiv.innerHTML = aImages[i].getcode(true);
		}
	//}
}


function MoveGalleryToLeft()
{
	var iLeft = 0;
	var oDivThumbnails = document.getElementById("divThumbnails");
	var oDivImageList = document.getElementById("divImageList");
	if (oDivThumbnails && oDivImageList)
	{
		iLeft = oDivThumbnails.scrollLeft - oConfig.scrollstep;
		if (iLeft < 0)
		{
			iLeft = 0;
		}
		oDivThumbnails.scrollLeft = iLeft;
	}
	oConfig.timer = setTimeout(MoveGalleryToLeft, oConfig.scrollfrequency);
}

function MoveGalleryToRight()
{
	var iLeft = 0;
	var oDivThumbnails = document.getElementById("divThumbnails");

	var oDivImageList = document.getElementById("divImageList");
	if (oDivThumbnails && oDivImageList)
	{
		iLeft = oDivThumbnails.scrollLeft + oConfig.scrollstep;
		if ((iLeft + oDivThumbnails.offsetWidth) > oDivImageList.offsetWidth)
		{
			iLeft = oDivImageList.offsetWidth - oDivThumbnails.offsetWidth;
		}
		oDivThumbnails.scrollLeft = iLeft;
	}
	oConfig.timer = setTimeout(MoveGalleryToRight, oConfig.scrollfrequency);
}

function StopTimer()
{
	clearTimeout(oConfig.timer);
}

function FixSizes()
{
	var oDivComments = document.getElementById("divComments");
	var oDivMainPicture = document.getElementById("divMainPicture");
	var oDivThumbnails = document.getElementById("divThumbnails");
	var oDivGoLeft = document.getElementById("divGoLeft");
	var oDivGoRight = document.getElementById("divGoRight");
	var oDivImageList = document.getElementById("divImageList");
	if (oDivComments && oDivMainPicture && oDivThumbnails && oDivGoLeft && oDivGoRight && oDivImageList)
	{
		if ((document.body.clientHeight > oConfig.minimumwindowheight) && (document.body.clientWidth > oConfig.minimumwindowwidth))
		{
			oDivComments.style.height = (document.body.clientHeight - parseInt(oDivThumbnails.offsetHeight) - (oConfig.windowmargin * 2) - oConfig.padding) + "px";
			oDivMainPicture.style.width = (document.body.clientWidth - parseInt(oDivComments.offsetWidth) - (oConfig.windowmargin * 2) - oConfig.padding) + "px";
			oDivMainPicture.style.height = (document.body.clientHeight - parseInt(oDivThumbnails.offsetHeight) - (oConfig.windowmargin * 2) - oConfig.padding) + "px";
			oDivGoLeft.style.top = (document.body.clientHeight - parseInt(oDivThumbnails.offsetHeight) - oConfig.windowmargin) + "px";
			oDivGoRight.style.top = (document.body.clientHeight - parseInt(oDivThumbnails.offsetHeight) - oConfig.windowmargin) + "px";
			oDivGoRight.style.left = (document.body.clientWidth - parseInt(oDivGoRight.offsetWidth) - oConfig.windowmargin) + "px";
			oDivThumbnails.style.left = (oDivGoLeft.offsetWidth + oConfig.windowmargin) + "px";
			oDivThumbnails.style.width = (document.body.clientWidth - oDivGoLeft.offsetWidth - oDivGoRight.offsetWidth - (oConfig.windowmargin * 2)) + "px";
			oDivThumbnails.style.top = (document.body.clientHeight - parseInt(oDivThumbnails.offsetHeight) - oConfig.windowmargin) + "px";
			oDivImageList.style.width = (i * (oConfig.thumbwidth + oConfig.padding) + oConfig.padding) + "px";
		}
	}
	oConfig.SetThumbGalleryWidth(document.body.clientWidth - (oConfig.windowmargin * 2));
}

function DrawDivs()
{
	var sDivSect1 = "";
	var iCont1 = 0;
	var sDivSect2 = "";
	var iCont2 = 0;
	var sDivSect3 = "";
	var iCont3 = 0;
	var sDivSect4 = "";
	var iCont4 = 0;
	var sDivSect5 = "";
	var iCont5 = 0;
	for (i = 0; i < aImages.length; i++)
	{
		switch (aImages[i].superDiv) {
			case 'divSect1':
				sDivSect1 += aImages[i].getdivcode(iCont1 * (oConfig.thumbwidth + oConfig.padding));
				iCont1++;
				break;
			case 'divSect2':
				sDivSect2 += aImages[i].getdivcode(iCont2 * (oConfig.thumbwidth + oConfig.padding));
				iCont2++;
				break;
			case 'divSect3':
				sDivSect3 += aImages[i].getdivcode(iCont3 * (oConfig.thumbwidth + oConfig.padding));
				iCont3++;
				break;
			case 'divSect4':
				sDivSect4 += aImages[i].getdivcode(iCont4 * (oConfig.thumbwidth + oConfig.padding));
				iCont4++;
				break;
			case 'divSect5':
				sDivSect5 += aImages[i].getdivcode(iCont5 * (oConfig.thumbwidth + oConfig.padding));
				iCont5++;
				break;
		}
	}

	var oDiv = document.getElementById('divSect1');
	oDiv.style.width = (iCont1 * (oConfig.thumbwidth + oConfig.padding) + oConfig.padding) + "px";
	oDiv = document.getElementById('divSect2');
	oDiv.style.width = (iCont2 * (oConfig.thumbwidth + oConfig.padding) + oConfig.padding) + "px";
	oDiv = document.getElementById('divSect3');
	oDiv.style.width = (iCont3 * (oConfig.thumbwidth + oConfig.padding) + oConfig.padding) + "px";
	oDiv = document.getElementById('divSect4');
	oDiv.style.width = (iCont4 * (oConfig.thumbwidth + oConfig.padding) + oConfig.padding) + "px";
	oDiv = document.getElementById('divSect5');
	oDiv.style.width = (iCont5 * (oConfig.thumbwidth + oConfig.padding) + oConfig.padding) + "px";

	var oDivImageList = document.getElementById("divImageList");
	if (oDivImageList)
	{
		var oInnerDiv = document.getElementById("divSect1");
		if (oInnerDiv) {
			oInnerDiv.innerHTML = sDivSect1;
		}
		oInnerDiv = document.getElementById("divSect2");
		if (oInnerDiv) {
			oInnerDiv.innerHTML = sDivSect2;
		}
		oInnerDiv = document.getElementById("divSect3");
		if (oInnerDiv) {
			oInnerDiv.innerHTML = sDivSect3;
		}
		oInnerDiv = document.getElementById("divSect4");
		if (oInnerDiv) {
			oInnerDiv.innerHTML = sDivSect4;
		}
		oInnerDiv = document.getElementById("divSect5");
		if (oInnerDiv) {
			oInnerDiv.innerHTML = sDivSect5;
		}
	}
}

function InitializePage()
{
	DrawDivs();
	FixSizes();
	LoadSmallImages();
	ShowBigImage('Picture1');
}

var oConfig = new ClsConfig();