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

var ie = document.all ? true : false;

function getObjPosition(element) {
	var r = { x: element.offsetLeft, y: element.offsetTop };
	if (element.offsetParent) {
		var tmp = getObjPosition(element.offsetParent);
		r.x += tmp.x;
		r.y += tmp.y;
	}
	return r;
};
function getCursorPosition(e) {
    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    } 
    else {
        var de = document.documentElement;
        var b = document.body;
        cursor.x = e.clientX + 
            (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
        cursor.y = e.clientY + 
            (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    }
    return cursor;
}	
function addLoadEvent(func)
{	
	var oldonload = window.onload;
	if (typeof window.onload != 'function'){
    	window.onload = func;
	} else {
		window.onload = function(){
		oldonload();
		func();
		}
	}
}
function inElement(obj, event){
	if(!obj){
		return false;
	}
	var pos = getCursorPosition(event)
	var coor = getObjPosition(obj)	
	if(ie){
		if(pos.x - 1 <= coor.x || pos.x - 1.5 >= coor.x + obj.clientWidth){		
			return false
		}
		if(pos.y - 1 <= coor.y || pos.y - 1.5 >= coor.y + obj.clientHeight){		
			return false
		}
	}else{
		if(pos.x+1 <= coor.x || pos.x  >= coor.x + obj.clientWidth){		
			return false
		}
		if(pos.y+1 <= coor.y || pos.y >= coor.y + obj.clientHeight){		
			return false
		}		
	}
	return true;
}
function getObjPosition(element) {
	var r = { x: element.offsetLeft, y: element.offsetTop };
	if (element.offsetParent) {
		var tmp = getObjPosition(element.offsetParent);
		r.x += tmp.x;
		r.y += tmp.y;
	}
	return r;
};
function getCursorPosition(e) {
    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    } 
    else {
        var de = document.documentElement;
        var b = document.body;
        cursor.x = e.clientX + 
            (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
        cursor.y = e.clientY + 
            (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    }
    return cursor;
}
function initPreview(){
		var mediumImageObj = document.getElementById(mediumImageId)
		if(maxMediumHeight != -1 || maxMediumWidth != -1){
			//creating table
			var table = document.createElement("table")
			table.setAttribute("cellPadding", 0)
			table.setAttribute("cellSpacing", 0)
			tbody = document.createElement("tbody")
			var tr = document.createElement("tr")
			tr.setAttribute("valign", "middle")
			
			var td = document.createElement("td")
			td.setAttribute("align", "center")
			mediumImageClone = mediumImageObj.cloneNode(mediumImageObj)
			td.appendChild(mediumImageClone)
			tr.appendChild(td)
			tbody.appendChild(tr)
			table.appendChild(tbody)
			mediumImageObj.parentNode.insertBefore(table, mediumImageObj)
			mediumImageObj.parentNode.removeChild(mediumImageObj)
			mediumImageObj = mediumImageClone

			if(maxMediumHeight != -1){
				table.style.height = maxMediumHeight + "px"
			}
			if(maxMediumWidth != -1){
				table.style.width = maxMediumWidth + "px"
			}
		}
				
		mediumImageObj.style.cursor = "pointer"
		
		var smallImages = new Array()
		if(containerSmallImagesId){
			var contanerObj = document.getElementById(containerSmallImagesId)
			var smallImages = contanerObj.getElementsByTagName("img")
		}else{
			var allImages = document.getElementsByTagName("img")			
			for(var i = 0; i< allImages.length; i++){			
				if(allImages[i].getAttribute("lightbox") == "true"){				
					allImages[i].style.cursor = "pointer"
					smallImages[smallImages.length] = allImages[i]					
				}
			}
		}
		
		var mediumImagesNames = new Array(smallImages.length)
		XLImagesNames = new Array(smallImages.length)
		
		var preloadImage = new Image();
		
		for(var i = 0; i< smallImages.length; i++){
			mediumImagesNames[i] = smallImages[i].src.replace(smallPrefix, mediumPrefix)
			XLImagesNames[i] = smallImages[i].src.replace(smallPrefix, hugePrefix)			
			preloadImage.src = mediumImagesNames[i]
		}
		//preloading medium images
		var preloadImage = new Image();
		var preloadImageMedium = new Array(mediumImagesNames.length)
		var preloadImageHuge = new Array(mediumImagesNames.length)
		for(var i = 0; i < mediumImagesNames.length; i++){
			preloadImageMedium[i] = new Image();
			preloadImageMedium[i].src = mediumImagesNames[i]
			preloadImageHuge[i] = new Image();
			preloadImageHuge[i].src = XLImagesNames[i]
		}
		smallImageMouseOver = function(obj){
			var index = obj.getAttribute("index")
			mediumImageObj.setAttribute("index", index) 
			mediumImageObj.src = mediumImagesNames[index]
			
			var preloadImage = new Image()
			var xlImage = new Image()
			preloadImage.src = XLImagesNames[index]
		}

		for(var i = 0; i< smallImages.length; i++){
			smallImages[i].setAttribute("index", i)
			if(ie){				
				smallImages[i].onclick = function(){smallImageMouseOver(this)}
			}else{
				smallImages[i].setAttribute("onclick", "smallImageMouseOver(this);")
			}
		}
		
		var overlay = document.getElementById("overlay")
		overlay.style.width = zoomframeWidth + "px"
		overlay.style.height = zoomframeHeight + "px"
		
		mediumImageObj.setAttribute("index", 0)
		mediumImageObj.onmouseover = showLargeImage;
		mediumImageObj.onmouseout = hideLargeImage;
		mediumImageObj.onmousemove = adjustPosition;
		overlay.onmousemove = adjustPosition		
		overlay.onmouseout = hideLargeImage
	}
	function adjustPosition(event){
		var loadingImg = document.getElementById("loadingimg");
		
		var overlay = document.getElementById("overlay");
		var mediumImg = document.getElementById(mediumImageId);
		var posImg = getObjPosition(mediumImg);
		var posCur = getCursorPosition(event);
		
		var newPosY = posCur.y - overlay.clientHeight/2;
		var newPosX = posCur.x - overlay.clientWidth/2;
		
		if(newPosX < posImg.x){
			newPosX = posImg.x
		}
		if(newPosX > posImg.x + mediumImg.clientWidth - overlay.clientWidth){
			newPosX = posImg.x + mediumImg.clientWidth - overlay.clientWidth
		}

		if(newPosY < posImg.y){
			newPosY = posImg.y
		}
		if(newPosY > posImg.y + mediumImg.clientHeight - overlay.clientHeight){
			newPosY = posImg.y + mediumImg.clientHeight - overlay.clientHeight
		}		
		
		overlay.style.top = newPosY +  "px";
		overlay.style.left = newPosX +  "px";

		var xlImage = document.getElementById("xlimage");
		var xlImageDiv = document.getElementById("xlimagediv");
		
		//(newPosX - posImg.x)
		newPosX -= posImg.x
		newPosY -= posImg.y
		
		var xx = xlImage.clientWidth/mediumImg.clientWidth * newPosX
		var yy = xlImage.clientWidth/mediumImg.clientWidth * newPosY
		
		xlImage.style.top = "-" + yy + "px"
		xlImage.style.left = "-" + xx + "px"
	}
	var hidedSelects = null;
	function showLargeImage(){		
		var overlay = document.getElementById("overlay")
		overlay.style.display = "block"
		
		var xlimagediv = document.getElementById("xlimagediv");
		
		xlimagediv.style.display = "block"
		if(ie){
			hidedSelects = new Array();
			var selects = document.getElementsByTagName("select");
			for(var i = 0; i < selects.length; i++){
				if(isCrossing(xlimagediv, selects[i])){
					hidedSelects[hidedSelects.length] = selects[i]
					selects[i].style.visibility = "hidden";
				}
			}
		}
		var xlimage = document.getElementById("xlimage");
		xlimage.style.display = "none"
		xlimage.top = "-5000px";
		
		var loadingImg = document.getElementById("loadingimg");
		
		xlimagediv.style.width = "375px"
		xlimagediv.style.height = "375px"
		loadingImg.style.top = xlimagediv.clientHeight/2 - loadingImg.clientHeight/2  + "px"
		loadingImg.style.left = xlimagediv.clientWidth/2 - loadingImg.clientWidth/2  + "px"
		var xlImage = new Image();
		xlImage.onload = function(){
			loadingImg.style.top = "-300px";
			xlimage.src = this.src
			xlimage.style.display = "block"
			var mediumImg = document.getElementById(mediumImageId);
			var w = zoomframeWidth * xlimage.clientWidth / mediumImg.clientWidth
			var w = 375*mediumImg.clientWidth/xlimage.clientWidth
			
			var popupblock = document.getElementById("overlay")
			popupblock.style.width = w
			popupblock.style.height = w
			
			//xlimagediv.style.width = "" + w + "px"
			//xlimagediv.style.height = "" + w + "px"
		}
		xlImage.src = XLImagesNames[this.getAttribute("index")]
	}
	function hideLargeImage(event){		
		var overlay = document.getElementById("overlay")
		var mediumImg = document.getElementById(mediumImageId);
		if(!inElement(mediumImg, event)){
			var xlimagediv = document.getElementById("xlimagediv");
			xlimagediv.style.display = "none"			
			overlay.style.display = "none"
			if(ie){
				if(hidedSelects){
					for(var i = 0; i < hidedSelects.length; i++){
						hidedSelects[i].style.visibility = "visible";
					}
				}
			}
		}
		if(inElement(overlay, event)){
			return false
		}
	}
	var zoomframeWidth = 105
	var zoomframeHeight = 105
	var loadedXLIMage = false
	var zoomframeLoadedSizes = false
	addLoadEvent(initPreview);