//
// Configuration
//

var mediumImageId = 'zoom_mediumimg'

var containerSmallImagesId = 'zoom_additionalimages';

var showZoom = true;

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


//
// hidePopup()
//
function hidePopup()
{
	$('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;
	}	
	
	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)
		var tdElement = null;
		if(obj.nodeName == "TD"){
			obj = obj.getElementsByTagName("img").item(0)
			tdElement = obj;
		}else{
			tdElement = obj.up("td")
		}
		$$("#" + containerSmallImagesId + " .zoom_loopimage td").each(function(o){
			if(o == tdElement){
				o.addClassName("active")
			}else{
				o.removeClassName("active")
			}
		})
		var newColor = tdElement.down("img").readAttribute("alt");
		if(newColor == ""){
			newColor = "&nbsp;";
		}
		$("zoomcolor").update(newColor)
		
		
		var index = obj.getAttribute("index")
		mediumImageObj.setAttribute("index", index) 
		mediumImageObj.title = obj.title
		mediumImageObj.src = mediumImagesNames[index]
		$("xlimage").src = XLImagesNames[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(){		
		showImgPopup()		
		return false;
	}

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

function initImgPopup(){
	$$("#zoom_additionalimages2 .zoom_loopimage img").each(function(tbl){
		tbl.observe("click", updateImgPopup)
	})
}

function updateImgPopup(e){
	var img = Event.element(e);	
	$$("#zoom_additionalimages2 .zoom_loopimage td.active").each(function(td){td.removeClassName("active")})	
	img.up("td").addClassName("active");
	$("imgpopup_img").src = img.src.replace("_size3", "_size0");
	var newColor = img.readAttribute("alt");
	if(newColor.length == 0){
		newColor = "&nbsp;"
	}
	$("imgpopup_color").update(newColor)
}

function showImgPopup(){
	var src = $("zoom_mediumimg").src.replace("_size2", "_size3")
	$$("#zoom_additionalimages2 .zoom_loopimage td").each(function(td){
		if(td.down("img").src == src){
			td.addClassName("active")
			var newColor = td.down("img").readAttribute("alt");
			if(newColor.length == 0){
				newColor = "&nbsp;"
			}
			$("imgpopup_color").update(newColor)
			$("imgpopup_img").src = td.down("img").src.replace("_size3", "_size0")
			
			
			
		}else{
			td.removeClassName("active")
		}
	})
	
	
	showOverlay({onclose: closeImgPopup});
	$('imgpopup').slideDown({duration: 0.4});
}
function closeImgPopup(){
	hideOverlay()	
	$('imgpopup').slideUp({duration: 0.4});
}

function hideXLOverlay(){
	$("xlimagebox").hide();
	$("medoverlay").hide();
}
function adjustPosition(e){
	$("xlimagebox").show();
	$("medoverlay").show();
	var offset = $("zoom_medium").cumulativeOffset()
	var overlay = $("medoverlay")
	
	var x = Math.min(Math.max(overlay.getWidth()/2 + 2, Event.pointerX(e) - offset.left), 448 - overlay.getWidth()/2);
	var y = Math.min(Math.max(overlay.getHeight()/2 + 2, Event.pointerY(e) - offset.top), 448 - overlay.getHeight()/2);
	
	var newLeft = x - overlay.getWidth()/2;
	var newTop = y - overlay.getHeight()/2;
	
	overlay.setStyle({left: newLeft + "px", top: newTop + "px"})
	
	var xlimage = $("xlimage") 
	
	newLeft *= 872/448;
	newTop *= 872/448;
	
	xlimage.setStyle({left: -newLeft + "px", top: -newTop + "px"})
	
}





function getImageSrc(src, size){
	var path = src.substring(0, src.lastIndexOf("/"));
	var name = src.substring(src.lastIndexOf("/"));
	var filename = name.substring(0, name.lastIndexOf("."))
	var extension = name.substring(name.lastIndexOf("."))
	
	return path + "/resized" + filename + "_size" + size + extension;
}
function activateSmallDefault(){
	$$("#zoom_additionalimages .zoom_loopimage td").each(function(o, index){
		if(index == 0){
			o.addClassName("active")
		}else{
			o.removeClassName("active")
		}
	})
}
function activateSmallImage(src){
	$$("#zoom_additionalimages .zoom_loopimage td img").each(function(o){
		if(o.src == src){
			o.up("td").addClassName("active")
		}else{
			o.up("td").removeClassName("active")
		}
	})	
}
function updateImage(src, color){
	if($("zoom_mediumimg")){
		$("zoom_mediumimg").writeAttribute("width", null)
		$("zoom_mediumimg").writeAttribute("height", null)
		$("zoom_mediumimg").src = getImageSrc(src, 2)
		$("xlimage").src = getImageSrc(src, 0)
		activateSmallImage(getImageSrc(src, 3));
		$("zoom_mediumimg").setAttribute("index", -1)
		$("zoomcolor").update(color)
	}
}
var defaultImage = null;
var defaultPrice = null;
function updateImageOnclick(obj){
	if($("zoom_mediumimg")){
		var src = null;
		$(obj).select("option").each(function(e){
			if(e.selected){
				if(e.value == -1){
					$("price").update(defaultPrice);
				}else{
					if(defaultPrice == null){
						defaultPrice = $("price").innerHTML;
					}
					src = e.readAttribute("img");
					$("price").update(e.readAttribute("price"))
					$("zoomcolor").update(e.readAttribute("color"))
				}
			}
		})
		
		if(defaultImage == null){
			defaultImage = $("zoom_mediumimg").src;
		}
		if(src == null){
			$("zoom_mediumimg").writeAttribute("width", null)
			$("zoom_mediumimg").writeAttribute("height", null)
			$("zoom_mediumimg").src = defaultImage
			$("xlimage").src = defaultImage.replace("_size2", "_size0");
			activateSmallDefault();
			$("zoom_mediumimg").setAttribute("index", 1)
		}else{
			$("zoom_mediumimg").writeAttribute("width", null)
			$("zoom_mediumimg").writeAttribute("height", null)
			$("zoom_mediumimg").src = getImageSrc(src, 2)
			$("xlimage").src = getImageSrc(src, 0)
			activateSmallImage(getImageSrc(src, 3));
			$("zoom_mediumimg").setAttribute("index", -1)
		}
	}
}

var cellWidth = 77*5
function previousImages(){
	var tbl = $("zoom_additionalimages")
	var left = parseInt(tbl.getStyle("left"));
	var width = tbl.getWidth();	
	var newLeft = Math.min(left + cellWidth, 38)
	
	if(newLeft == 38){
		$$("#zoom_images .previous")[0].addClassName("previous-disabled");
	}else{
		$$("#zoom_images .previous")[0].removeClassName("previous-disabled");
	}
	if(newLeft == 423-width){
		$$("#zoom_images .next")[0].addClassName("next-disabled");
	}else{
		$$("#zoom_images .next")[0].removeClassName("next-disabled");
	}
	
	tbl.setStyle({left: newLeft + "px"})
}
function nextImages(){
	var tbl = $("zoom_additionalimages")
	var left = parseInt(tbl.getStyle("left"));
	var width = tbl.getWidth();	
	
	var newLeft = Math.max(left - cellWidth, 423-width);
	
	if(newLeft == 38){
		$$("#zoom_images .previous")[0].addClassName("previous-disabled");
	}else{
		$$("#zoom_images .previous")[0].removeClassName("previous-disabled");
	}
	if(newLeft == 423-width){
		$$("#zoom_images .next")[0].addClassName("next-disabled");
	}else{
		$$("#zoom_images .next")[0].removeClassName("next-disabled");
	}
	
	
	tbl.setStyle({left: newLeft + "px"})
}