//
// Configuration
//

var mediumImageId = 'zoom_mediumimg'

var containerSmallImagesId = 'zoom_additionalimages';

var showZoom = true;

var smallPrefix = "_size3"
var mediumPrefix = "_size2"
var largePrefix = "_size1"
var hugePrefix = "_size0"



function showTransparentBox(event){
	//initialize traqnsparent
	adjustPosition(event)
	$("zoomframe").setStyle({display: "block"})
	$("xlpreview").setStyle({display: "block"})
}
function hideTransparentBox(e){
	if(!inElement($("zoomframe"), e)){		
		$("zoomframe").setStyle({display: "none"})
		$("xlpreview").setStyle({display: "none"})
	}
}
//
// showLightbox()
// Preloads images. Pleaces new image in lightbox then centers and displays.
//

function showLightbox()
{	
	var obj = $(mediumImageId)
	// prep objects
	var objLightbox = $('lightbox');
	var objCaption = $('lightboxCaption');
	var objImage = $('lightboxImage');
	var objLoadingImage = $('loadingImage');
	var objLightboxDetails = $('lightboxDetails');
	
	showOverlay({onclose: hidePopup});

	// preload image
	imgPreload = new Image();
	imgPreload.onload=function(){
		$('overlayloadingImage').setStyle({display: "none"})
		
			var index = obj.getAttribute("index")			
			objImage.src = bigImagesNames[index];
						
			if(showZoom){				
				objImage.setAttribute("index", index)
				objImage.observe("mouseover", showTransparentBox).observe("mouseout", hideTransparentBox).observe("mousemove", adjustPosition)
			}

		// center lightbox and make sure that the top and left values are not negative
		// and the image placed outside the viewport
		var arrayPageScroll = document.viewport.getScrollOffsets();
		var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);
		var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2);
		if(showZoom){
			lightboxLeft -= 125;
		}
		objLightbox.setStyle({top: (lightboxTop < 0) ? "0px" : lightboxTop + "px", left: (lightboxLeft < 0) ? "0px" : lightboxLeft + "px"})


		objLightboxDetails.setStyle({width: imgPreload.width + 'px'})
		if(obj.getAttribute('title')){
			objCaption.setStyle({display: "block"}).update(obj.getAttribute('title'))
		} else {
			objCaption.setStyle({display: "none"})
		}
		
		if (ie6){
			window.setTimeout('$("lightbox").setStyle({display: "block"})', 250)
		}else{
			objLightbox.slideDown({duration: 0.2});
		}
		
		return false;
	}
	
	var index = obj.getAttribute("index")
	imgPreload.src = bigImagesNames[index];
}


function adjustPosition(event){
	var zoomframe = $("zoomframe")
	var lightboxImage = $("lightboxImage")
					
	var lightbox = $("lightbox");
	var scrollOffsets = document.viewport.getScrollOffsets();
	var pos = {x: Event.pointerX(event)-scrollOffsets.left, y: Event.pointerY(event)-scrollOffsets.top}
	var posObj = lightbox.viewportOffset();
	
//	var zoomframeWidth = 125;
	if(zoomframeLoadedSizes == false || ie6){
		
		var xlimage = $("xlimage")
		var width = xlimage.clientWidth
		if(width > 0 && false){
			var zoom = 250*$("lightboxImage").clientWidth/width
		
			if(zoom){
				//alert(""+width + "--" + $("lightboxImage").clientWidth)
				zoomframeLoadedSizes = true
				zoomframeWidth = zoom
				zoomframeHeight = zoom
				zoomframe.setStyle({width: zoom+"px", height: zoom+"px"})
			}else{
				zoomframeLoadedSizes = false			
				zoomframeWidth = 125
				zoomframeHeight = 125
				zoomframe.setStyle({width: "125px", height: "125px"})
			}			
		}
	}

	var newPosX = (pos.x - posObj.left) - zoomframeWidth/2
	if(newPosX <= 9){
		newPosX = 9
	}
	
	if(newPosX + zoomframeWidth > lightboxImage.clientWidth + 9){
		newPosX = lightboxImage.clientWidth - zoomframeWidth + 9
	}
	
	var newPosY = (pos.y - posObj.top) - zoomframeHeight/2	
	if(newPosY <= 9){
		newPosY = 9
	}
	
	if(newPosY + zoomframeHeight > lightboxImage.clientHeight + 9){
		newPosY = lightboxImage.clientHeight - zoomframeHeight + 9
	}
	
	
	zoomframe.style.left = newPosX + "px"
	zoomframe.style.top = newPosY + "px"
	
	var xlimage = $("xlimage")
	if(loadedXLIMage == false || xlimage.width == 0 || xlimage.height == 0){
		xlimage.style.top = "120px"
		xlimage.style.left = "50px"		
	}else{
		kx = (xlimage.width - 250)/(lightboxImage.width-zoomframeWidth)
		newPosX -= 9;
		newPosX *= kx
		xlimage.style.left = "-" + newPosX + "px"
		
	
		newPosY -= 9;
	
		ky = (xlimage.height - $("xlpreview").clientHeight)/(lightboxImage.height-zoomframeHeight)
		newPosY *= ky
		xlimage.style.top = "-" + newPosY + "px"
	}
}
//
// hidePopup()
//
function hidePopup()
{
	if(showZoom){
		$('lightboxImage').stopObserving("mouseover", showTransparentBox).stopObserving("mouseout", hideTransparentBox).stopObserving("mousemove", adjustPosition)
		$('zoomframe').setStyle({display: "none"})
	}
	hideOverlay()	
	$('lightbox').slideUp({duration: 0.2});
	
}




//
// initLightbox()
//
function initPopup()
{
	if(!$(mediumImageId)){
		return;
	}
	// the rest of this code inserts html at the top of the page that looks like this:
	//
	// <div id="lightbox">
	//		
	//		<img id="closeButton" />		
	//		<img id="lightboxImage" />
	//		
	//		<div id="lightboxDetails">
	//			<div id="lightboxCaption"></div>
	//			<div id="keyboardMsg"></div>
	//		</div>
	/*
			<div id="zoomframe" class="zoomframe"></div>
			<div id="xlpreview" class="xlpreview"><img id="xlimage" /></div>
	
	*/
	// </div>
	
	$(document.body).insert(
		(new Element("div", {id: "lightbox"})).setStyle({display: "none", position: "absolute", zIndex: "100"})
		.insert((new Element("img", {id: "closeButton", src: closeButton})).setStyle({position: "absolute", zIndex: 200}).observe("click", hidePopup))
		.insert((new Element("img", {id: "lightboxImage"})).observe("click", hidePopup))
		.insert((new Element("div", {id: "lightboxDetails"}))
			.insert(new Element("div", {id: "lightboxCaption"}))			
			.insert((new Element("div", {id: "keyboardMsg"})).update("press <kbd>x</kbd> to close"))		
		)
	)
	if(showZoom){
		
		$("lightbox").insert(
			(new Element("div", {id: "zoomframe"})).addClassName("zoomframe").observe("click", hidePopup).observe("mouseout", hideTransparentBox).observe("mousemove", adjustPosition)
		).insert(
			(new Element("div", {id: "xlpreview"})).addClassName("xlpreview").setStyle({display: "none"}).insert(
				new Element("img", {id: "xlimage"})
			)
		)
	}
	
	
	var mediumImageObj = $(mediumImageId)
	var smallImages = $$("#" + containerSmallImagesId + " img")
	
	
	var mediumImagesNames = new Array(smallImages.length)
	bigImagesNames = new Array(smallImages.length)
	XLImagesNames = new Array(smallImages.length)
	
	for(var i = 0; i< smallImages.length; i++){
		smallImages[i].parentNode.onclick = showPopup;
		mediumImagesNames[i] = smallImages[i].src.replace(smallPrefix, mediumPrefix)
		bigImagesNames[i] = smallImages[i].src.replace(smallPrefix, largePrefix)
		XLImagesNames[i] = smallImages[i].src.replace(smallPrefix, hugePrefix)
	}
			
	function smallImageMouseOver(event){
		var obj = Event.element(event)
		if(obj.nodeName == "TD"){
			obj = obj.getElementsByTagName("img").item(0)
		}
		var index = obj.getAttribute("index")
		mediumImageObj.setAttribute("index", index) 
		mediumImageObj.title = obj.title
		mediumImageObj.src = mediumImagesNames[index]
		var bigImage = new Image()
		bigImage.src = bigImagesNames[index]
		
		if(showZoom){
			var xlImage = new Image()
			xlImage.src = XLImagesNames[index]
		}
	}
		
	for(var i = 0; i< smallImages.length; i++){
		smallImages[i].setAttribute("index", i)
		smallImages[i].observe("mouseover", smallImageMouseOver)
	}
		
	mediumImageObj.setAttribute("index", 0)	
	
	var preloadLoading = new Image();
	preloadLoading.src = loadingImage;

	var preloadClose = new Image();
	preloadClose.src = closeButton;
	
	var preloadOverlay = new Image();
	preloadOverlay.src = overlayImg;
	
	var preloadImages = new Array(smallImages.length);//new Image();
	for(var i = 0; i< smallImages.length; i++){
		preloadImages[i] = new Image();
		preloadImages[i].src = mediumImagesNames[i]
	}
	var preloadBigImage = new Image();
	preloadBigImage.src = bigImagesNames[0]
	if(showZoom){
		var preloadXLImage = new Image();
		preloadXLImage.src = XLImagesNames[0]
	}
}

function inElement(obj, event){
	
	if(!obj){
		return false;
	}
	
	var scrollOffsets = document.viewport.getScrollOffsets();
	var pos = {x: Event.pointerX(event)-scrollOffsets.left, y: Event.pointerY(event)-scrollOffsets.top}
	var coor = $(obj).viewportOffset();
	if(pos.x+1 <= coor.left || pos.x -1 >= coor.left + obj.clientWidth){		
		return false
	}
	if(pos.y+1 <= coor.top || pos.y - 1 >= coor.top + obj.clientHeight){
		return false
	}
	
	return true;
}

	function showPopup(){
		if(showZoom){
			zoomframeLoadedSizes = false
			loadedXLIMage = false;
			var index = $(mediumImageId).getAttribute("index")
			var xlimage = $("xlimage")
			
			xlimage.src = loadingImage
			xlimage.setStyle({top: "120px", left: "50px"})
			
			var XLImageLoading = new Image()
			XLImageLoading.onload = function(){
				loadedXLIMage = true
				var xlimage = $("xlimage")
				xlimage.src = XLImagesNames[index]
				xlimage.setStyle({top: "0px", left: "0px"})
			}
			XLImageLoading.src = XLImagesNames[index]
		}			
		showLightbox();
		return false;
	}

/*
	Default values. They are ok, if xlimage 2 times bigger big image (each dimention) 
*/	
	var zoomframeWidth = 125
	var zoomframeHeight = 125
	
	var loadedXLIMage = false
	var zoomframeLoadedSizes = false
	
	Event.observe(window, "load", initPopup)