var _photoPopup = null;

function showPhotoPopup(range, selectedIndex)
{	
	_photoPopup = new PhotoPopup({
		items : range
	});
	_photoPopup.createContainer();	
	_photoPopup.fadeUp();
	_photoPopup.prepareShow();
	
	if (_photoPopup != null) { _photoPopup.showPhoto(selectedIndex); }
	
	
	setContainerPosition();
	
}

function setContainerPosition()
{
	var oPopupContainerBackground = document.getElementById("__photoPopupContainerBackground");
	var oPopupContainer = document.getElementById("__photoPopupContainer");
	
	if (oPopupContainerBackground)
	{
		oPopupContainerBackground.style.marginTop = document.body.scrollTop.toString() + "px";
		oPopupContainer.style.marginTop = document.body.scrollTop.toString() + "px";
	}
}

function navigatePhotoPopup(direction)
{
	if (_photoPopup != null)
	{
		if (direction == 'right')
		{
			_photoPopup.navigateForward();		
		}
		else if (direction == 'left')
		{
			_photoPopup.navigateBackward();
		}
	}
}

function closePhotoPopup()
{
	document.body.removeChild(document.body.childNodes[0]);
	document.body.removeChild(document.body.childNodes[0]);
	_photoPopup = null;
}

function fadeUpPhotoContainer(oObject)
{
	var iCurrentOpacity = 0;
	
	if (oObject.getAttribute('currentOpacity') != null)
	{
		iCurrentOpacity = parseInt(oObject.getAttribute('currentOpacity'),10);
	}
	
	if (iCurrentOpacity <= 40)
	{
		var browserName = navigator.appName; 
		
		iCurrentOpacity = iCurrentOpacity + 10;
		
		if (browserName == "Netscape")
		{
			oObject.style.opacity = (iCurrentOpacity/100);
		}
		else if (browserName == "Microsoft Internet Explorer")
		{
			oObject.style.filter = "alpha(opacity=" + iCurrentOpacity + ")";
		}
		
		oObject.setAttribute('currentOpacity', iCurrentOpacity);

		window.setTimeout(function() { this.fadeUpPhotoContainer(oObject) }, 50);	
	}
}

function PhotoPopup(cfg)
{
	this.items = cfg.items;
	this.selectedIndex = 0
	
	this.createContainer = function()
	{		
		this.oPopupContainer = document.createElement("div");
		this.oPopupContainer.id = "__photoPopupContainerBackground"
		this.oPopupContainer.className = "photoPopupContainer";
		this.oPopupContainer.style.width = "100%";
		this.oPopupContainer.style.height = "100%";
		this.oPopupContainer.style.zIndex = 998;
		document.body.insertBefore(this.oPopupContainer, document.body.childNodes[0]);
	}

	this.fadeUp = function()
	{
		fadeUpPhotoContainer(this.oPopupContainer);
	}
	
	this.navigateForward = function()
	{
		if ((this.selectedIndex+1) < this.items.length)
		{
			this.showPhoto(this.selectedIndex+1);
		}
	}
	
	this.navigateBackward = function()
	{
		if (this.selectedIndex>0)
		{
			this.showPhoto(this.selectedIndex-1);
		}
	}
	
	this.showPhoto = function(photoIndex)
	{
		this.oImageToShow.style.display = "none";
		this.oLoadingAnim.style.display = "block";
		
		//this.oPhotoContainer.style.height = "576px";
		//this.oPhotoContainer.style.width = "950px";	
		
		this.selectedIndex = photoIndex;
		
		document.getElementById("__photoPopupImageToShow").src = this.items[this.selectedIndex];
				
		if ((this.selectedIndex+1) == this.items.length)
		{
			this.oArrowRight.className = "button_disabled";
		}
		else
		{
			this.oArrowRight.className = "";
		}
		
		if (this.selectedIndex == 0)
		{
			this.oArrowLeft.className = "button_disabled";
		}
		else
		{
			this.oArrowLeft.className = "";
		}
	}
	
	this.prepareShow = function()
	{
		// loading image
		this.oLoadingAnim = new Image();
		this.oLoadingAnim.id = "__photoPopupLoader";
		this.oLoadingAnim.src = "dangerousgreen/images/loader.gif";
		//this.oLoadingAnim.style.marginTop = "25px";
		this.oLoadingAnim.style.marginTop = "-6px";
		this.oLoadingAnim.style.marginLeft = "-6px";
		this.oLoadingAnim.style.position = "absolute";
		this.oLoadingAnim.style.left = "50%";
		this.oLoadingAnim.style.top = "50%";
		this.oLoadingAnim.align = "center";
				
		// create a container for the photo
		this.oOuterPhotoTable = document.createElement("div");
		this.oOuterPhotoTable.id = "__photoPopupContainer"
		this.oOuterPhotoTable.style.width = "100%";
		this.oOuterPhotoTable.style.height = "100%";
		this.oOuterPhotoTable.style.position = "absolute";
		this.oOuterPhotoTable.style.zIndex = 999;
		
		// the close button
		var oCloseButton = new Image();
		oCloseButton.src = "dangerousgreen/images/photopopup_close.gif";
		oCloseButton.style.cursor = "pointer";
		if (oCloseButton.addEventListener)
		{
			oCloseButton.addEventListener('click', function(){
				closePhotoPopup();
			}, false);
		}
		else if (oCloseButton.attachEvent)
		{
			oCloseButton.attachEvent('onclick', function(){
				closePhotoPopup();
			});
		}
		
		// arrow to the left
		this.oArrowLeft = new Image();
		this.oArrowLeft.style.marginRight = "15px";
		this.oArrowLeft.src = "dangerousgreen/images/photopopup_arrow_left.gif";
		this.oArrowLeft.style.cursor = "pointer";
		if (this.oArrowLeft.addEventListener)
		{
			this.oArrowLeft.addEventListener('click', function(){
				navigatePhotoPopup('left');
			}, false);
		}
		else if (this.oArrowLeft.attachEvent)
		{
			this.oArrowLeft.attachEvent('onclick', function(){
				navigatePhotoPopup('left');
			});
		}
		
		// arrow to the left
		this.oArrowRight = new Image();
		this.oArrowRight.style.marginRight = "15px";
		this.oArrowRight.src = "dangerousgreen/images/photopopup_arrow_right.gif";
		this.oArrowRight.style.cursor = "pointer";
		if (this.oArrowRight.addEventListener)
		{
			this.oArrowRight.addEventListener('click', function(){
				navigatePhotoPopup('right');
			}, false);
		}
		else if (this.oArrowRight.attachEvent)
		{
			this.oArrowRight.attachEvent('onclick', function(){
				navigatePhotoPopup('right');
			});
		}
		
		// new table to align in the middle of the window
		this.oPhotoTable = document.createElement("table");
		this.oPhotoTable.style.width = "100%";
		this.oPhotoTable.style.height = "100%";
		var oRow = this.oPhotoTable.insertRow(0);
		var oCell = oRow.insertCell(0);
		oCell.style.verticalAlign = "middle";
		oCell.style.textAlign = "right";
		this.oOuterPhotoTable.appendChild(this.oPhotoTable);
		
		// create a div around the image
		this.oPhotoContainer = document.createElement("table");
		this.oPhotoContainer.id = "__photoPopupPhotoContainer";
		//this.oPhotoContainer.style.height = "760px";
		//this.oPhotoContainer.style.width = "480px";	
		this.oPhotoContainer.className = "photoContainer";
		this.oPhotoContainer.insertRow(0);
		this.oPhotoContainer.rows[0].insertCell(0);
		this.oPhotoContainer.rows[0].cells[0].appendChild(this.oLoadingAnim);
		// add close button
		this.oPhotoContainer.insertRow(0);
		this.oPhotoContainer.rows[0].insertCell(0);
		this.oPhotoContainer.rows[0].cells[0].appendChild(this.oArrowLeft);
		this.oPhotoContainer.rows[0].cells[0].appendChild(this.oArrowRight);
		this.oPhotoContainer.rows[0].cells[0].appendChild(oCloseButton);
		this.oPhotoContainer.rows[0].cells[0].style.textAlign = "right";
		this.oPhotoContainer.rows[0].cells[0].style.verticalAlign = "top";
		this.oPhotoContainer.rows[0].cells[0].style.height = "12px";
		this.oPhotoContainer.align = "center";
		oCell.appendChild(this.oPhotoContainer);
		
		// append the container for the photo to the body document
		document.body.insertBefore(this.oOuterPhotoTable, document.body.childNodes[1]);
		
		// the image to show
		this.oImageToShow = new Image();
		this.oImageToShow.id = "__photoPopupImageToShow";
		this.oImageToShow.style.display = "none";
		this.oImageToShow.style.cursor = "pointer";
		
		if (this.oImageToShow.addEventListener)
		{
			this.oImageToShow.addEventListener('click', function(){
				closePhotoPopup();
			}, false);
		}
		else if (this.oImageToShow.attachEvent)
		{
			this.oImageToShow.attachEvent('onclick', function(){
				closePhotoPopup();
			});
		}
		// add the photo to the cell
		this.oPhotoContainer.rows[1].cells[0].appendChild(this.oImageToShow);
			
		if (this.oImageToShow.readyState == "complete")
		{
			var oImageToShow = document.getElementById("__photoPopupImageToShow");
			var oLoader = document.getElementById("__photoPopupLoader");
			var oPhotoContainer = document.getElementById("__photoPopupPhotoContainer");
			
			oPhotoContainer.style.width = oImageToShow.width.toString() + "px";
			oPhotoContainer.style.height = oImageToShow.height.toString() + "px";
			
			oLoader.style.display = "none";
			oImageToShow.style.display = "inline";
		}	
		else if (this.oImageToShow.addEventListener)
		{
			this.oImageToShow.addEventListener('load', function(){
				var oImageToShow = document.getElementById("__photoPopupImageToShow");
				var oLoader = document.getElementById("__photoPopupLoader");
				var oPhotoContainer = document.getElementById("__photoPopupPhotoContainer");
								
				oPhotoContainer.style.width = oImageToShow.width.toString() + "px";
				oPhotoContainer.style.height = oImageToShow.height.toString() + "px";
				
				oLoader.style.display = "none";
				oImageToShow.style.display = "inline";
			}, false);
		}
		else if (this.oImageToShow.attachEvent)
		{			
			this.oImageToShow.attachEvent('onload', function(oEvent){
			
				var oImageToShow = document.getElementById("__photoPopupImageToShow");
				var oLoader = document.getElementById("__photoPopupLoader");
				var oPhotoContainer = document.getElementById("__photoPopupPhotoContainer");
				
				//oPhotoContainer.style.width = "958px";
				//oPhotoContainer.style.height = "587px"; //(parseInt(oImageToShow.height,10) + 20 + 12) + "px"; // add the height of the close button
				
				oLoader.style.display = "none";
				oImageToShow.style.display = "inline";
			});
		}
	}

}