var viewportwidth;
var viewportheight;
var img = document.getElementById("galleryImage");
var thumbs = document.getElementById("photoGalleryThumbs");
var thumbsContainer = document.getElementById("photoGalleryThumbsContainer");
var thumbsContainerRegion = document.getElementById("photoGalleryThumbContainerRegion");
var photoGalleryContainer = document.getElementById("photoGalleryContainer");
var gallery = document.getElementById("photoGallery");
var thumbRegion = document.getElementById("photoGalleryThumbContainerRegion");
var imgInnerContainer = document.getElementById("galleryImageInnerContainer");
var imgContainer = document.getElementById("galleryImageContainer");
var closeButton = document.getElementById("photoGalleryClose");

function GetViewPortSize()
{
	if (typeof window.innerWidth != 'undefined')
	{
		viewportwidth = window.innerWidth,
		viewportheight = window.innerHeight
	}
	else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
	{
		viewportwidth = document.documentElement.clientWidth,
		viewportheight = document.documentElement.clientHeight
	}
	else
	{
		viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
		viewportheight = document.getElementsByTagName('body')[0].clientHeight
	}
}

function SetGalleryThumbs(images)
{
	if (images <= 1)
	{
		thumbsContainerRegion.style.display = 'none';
	}
	else
	{
		thumbsContainerRegion.style.display = 'inline-block';
	}
	thumbs.style.height = thumbSize + 'px';	
	thumbs.style.padding = innerPadding + 'px';
	thumbsContainer.style.width = (images * (thumbSize + (thumbBorder * 2))) + 1 + 'px';
}

function SetThumbSize(thumbImg)
{
	if (thumbImg.width > thumbImg.height)
	{
		thumbImg.style.width = 'auto';
		thumbImg.style.maxHeight = thumbSize + 'px';
	}
	else
	{
		thumbImg.style.height = 'auto';
		thumbImg.style.maxWidth = thumbSize + 'px';
	}
}

function GallerySetImage()
{
	var thumbSetSize = thumbSize + (thumbBorder * 2) + (innerPadding * 2);
	var w = this.viewportwidth;
	var h = this.viewportheight;
	var boxWidth = w - (outerPadding * 2);
	var boxHeight = h - (outerPadding * 2);
	var imgBoxWidth = boxWidth - (innerPadding * 2);
	var imgBoxHeight = boxHeight - (innerPadding * 2) - thumbSetSize;
	img.style.maxWidth = imgBoxWidth + 'px';
	img.style.maxHeight = imgBoxHeight + 'px';
	imgContainer.style.maxWidth = boxWidth + 'px';
	imgContainer.style.maxHeight = boxHeight + 'px';
	imgInnerContainer.style.padding = innerPadding + 'px';
	if (img.width < imgBoxWidth)
	{
		imgContainer.style.maxWidth = (img.width + (innerPadding * 2)).toString() + 'px';
	}
	if (img.height < imgBoxHeight)
	{
		imgContainer.style.maxHeight = (img.height + (innerPadding * 2)).toString() + 'px';
	}
	photoGalleryContainer.style.marginTop = outerPadding + thumbSetSize + 'px';
}

function PositionCloseButton()
{
	closeButton.style.top = Math.floor(((thumbSize + (innerPadding * 2)) - 24) / 2) + 'px';
	closeButton.style.right = ((innerPadding * 2) + 24) + 'px';
}

function NewImageLoaded()
{
	UpdateGalleryLayout();
	FadeImageIn();
}

function SelectImage(newImg)
{
	img.src = '';
	SetOpacity(0);	
	img.src = newImg;
}

function FadeImageIn()
{
	var timer = 0;
	for (var i = 0; i < 100; i++)
	{
		setTimeout('SetOpacity('+ i + ')', timer * 2);
		timer++;
	}
}

function SetOpacity(opacity)
{
	img.style.opacity = opacity / 100;
	img.style.filter = 'alpha(opacity = ' + opacity + ')';
}

function ShowGallery(array)
{
	var thumbs = '';
	thumbRegion.innerHTML = '';
	for (var t = 0; t < array.length; t++)
	{
		var img = array[t][0];
		var imgThumb = array[t][1];
		thumbs += '<li class="thumbPhotoGallery"><img onload="javascript:SetThumbSize(this);" onclick="javascript:SelectImage(\'' + img + '\');" src="' + imgThumb + '"/></li>';
	}
	thumbRegion.innerHTML = thumbs;
	SetGalleryThumbs(array.length);
	gallery.style.display = 'block';
	SelectImage(array[0][0]);
}

function HideGallery()
{
	gallery.style.display = 'none';
}

function UpdateGalleryLayout()
{
	GetViewPortSize();
	GallerySetImage();
	PositionCloseButton();
}

function AttachPhotoGallery()
{
	if (window.addEventListener)
	{
		window.addEventListener('resize', UpdateGalleryLayout, false);
		img.addEventListener('load', NewImageLoaded, false);
	}
	else
	{
		window.attachEvent('onresize', UpdateGalleryLayout);
		img.attachEvent('onload', NewImageLoaded);
	}
	UpdateGalleryLayout();
}