//
// Configuration
//

var mediumImageId = 'zoom_mediumimg'

var containerSmallImagesId = 'zoom_additionalimages';

var smallPrefix = "_size3"
var mediumPrefix = "_size2"


//
// initLightbox()
//
function initPopup()
{
	if(!$(mediumImageId)){
		return;
	}

	var mediumImageObj = $(mediumImageId)
	var smallImages = $$("#" + containerSmallImagesId + " img")
	
	
	var mediumImagesNames = new Array(smallImages.length)
	
	for(var i = 0; i< smallImages.length; i++){
		mediumImagesNames[i] = smallImages[i].src.replace(smallPrefix, mediumPrefix)
	}
			
	function smallImageMouseOver(event){
		var obj = Event.element(event)
		if(obj.nodeName == "TD"){
			obj = obj.getElementsByTagName("img").item(0)
		}
		var currentTd = obj.up("td.zoom_maintd");
		$$(".zoom_loop .zoom_maintd").each(function(td){
			if(td == currentTd){
				td.addClassName("active")
			}else{
				td.removeClassName("active")
			}
		})
		var index = obj.getAttribute("index")
		mediumImageObj.setAttribute("index", index) 
		mediumImageObj.title = obj.title
		mediumImageObj.src = mediumImagesNames[index]
		
	}
		
	for(var i = 0; i< smallImages.length; i++){
		smallImages[i].setAttribute("index", i)
		smallImages[i].observe("mouseover", smallImageMouseOver)
	}
		
	mediumImageObj.setAttribute("index", 0)	
		
	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]
	}
}	
Event.observe(window, "load", initPopup)

function prevImages(){
	if($("prev").hasClassName("disabled")){
		return;
	}
	
	var tbl = $("zoom_additionalimages");
	newLeft = parseInt(tbl.getStyle("left"))
	if(!newLeft){
		newLeft = 0;
	}
	
	newLeft += 76;
	
	tbl.setStyle({left: newLeft + "px"})
	
	if(newLeft == 38){
		$("prev").addClassName("disabled")
	}else{
		$("prev").removeClassName("disabled")
	}
	
	if(tbl.getWidth() + newLeft == 266){
		$("next").addClassName("disabled")
	}else{
		$("next").removeClassName("disabled")
	}
}
function nextImages(){
	if($("next").hasClassName("disabled")){
		return;
	}
	
	var tbl = $("zoom_additionalimages");
	newLeft = parseInt(tbl.getStyle("left"))
	if(!newLeft){
		newLeft = 0;
	}
	
	newLeft -= 76;
	
	tbl.setStyle({left: newLeft + "px"})
	
	if(newLeft == 38){
		$("prev").addClassName("disabled")
	}else{
		$("prev").removeClassName("disabled")
	}
	
	if(tbl.getWidth() + newLeft == 266){
		$("next").addClassName("disabled")
	}else{
		$("next").removeClassName("disabled")
	}
	console.log(tbl.getWidth() + newLeft)
}