/*******Constants:*******/
/* top-offset of popup */
var popupTop = 100;

/* left-offset of popup */
var popupLeft = 225;
/************************/

function init(){

	bigImageBox = '<div id="bigImageBox" onclick="hideImageBox()" style="display:none;"><a href="javascript:hideImageBox()" title="Close" class="close">X Close</a><img id="bigImage" src="" alt="" title="" /><div id="bigImageCaption"></div></div>';
	overlay = '<div id="overlay" onclick="hideImageBox()" style="display: none;	opacity: 0.0; position: fixed;"></div>';
	Element.insert($('bottom'),{after: overlay});
	Element.insert($('overlay'),{after: bigImageBox});
	
}

function displayBigImage(imageSrcTemp, imageCaptionIdTemp){
	var imageSrc = imageSrcTemp;
	var imageCaptionId = imageCaptionIdTemp;
	fillLightBox(imageSrc, imageCaptionId);
	increaseOverlayOpacity();
	setImageBoxPosition();
}

function increaseOverlayOpacity(){
	var x = document.viewport.getDimensions().width;
 	var y = document.viewport.getDimensions().height;
	$('overlay').setStyle({
		width: x+"px",
		height: y+"px"
	});
	$('overlay').show();
	new Effect.Opacity('overlay', {duration:0.5, from:0.0, to:0.8});
}

function setImageBoxPosition(){
	$('bigImageBox').setStyle({
		top: popupTop+"px",
		left: popupLeft+"px"
	});
	$('bigImageBox').show();
	new Effect.Opacity('bigImageBox', {duration:0.5, from:0.0, to:1.0});
}

function hideImageBox(){
	new Effect.Opacity('overlay', {duration:0.5, from:0.8, to:0.0});
	timeoutOverlay = setTimeout('overlayTimeout()', 700);
	
	new Effect.Opacity('bigImageBox', {duration:0.5, from:1.0, to:0.0});
	timeoutImageBox = setTimeout('imageBoxTimeout()', 700);
}

function imageBoxTimeout(){
	$('bigImageBox').hide();
	clearTimeout(timeoutImageBox);
}

function overlayTimeout(){
	$('overlay').hide();
	clearTimeout(timeoutOverlay);
}

function fillLightBox(imageSrc, imageCaptionId){
	$('bigImage').src = imageSrc;
	$('bigImageCaption').innerHTML = $(imageCaptionId).innerHTML;
}