// 
// 
// Product image zoom functions
// 
// Copyright 2010 Capisce Design
//
var dragObject  = null;
var dragBounds  = null;
var dragWidthHalf   = null;
var dragHeightHalf  = null;
var mouseOffset = null;
var overZoom    = false;
var zoomOpen	= false;
var zoomBox = null;

var openSpeed = 1000;

var __zoom_image = null;

var __drag_image = null;
if(detail_image == 'undefined'){
	var detail_image = null;
}

function product_image_zoom() {
	
	document.onmousemove = mouseMove;	
	//alert("in window.onload");
	
	if(!document.images){
		
		__zoom_image = document.getElementById("__zoom_image");
		__drag_image = document.getElementById("__drag_image");
		if(detail_image == null) detail_image = document.getElementById("detail_image");
		
	}else{
		
		__zoom_image = document.images.__zoom_image;
		__drag_image = document.images.__drag_image;
		if(detail_image == null) detail_image = document.images.detail_image;
		
	}
	
	
	detail_image.onmouseover = function(ev){
		//alert("over");
		
		__drag_image.style.visibility = "visible";
		
		var leftOffset = (document.getElementById("main_cont").offsetLeft);
		var topOffset = (document.getElementById("main_cont").offsetTop);
		
		dragObject  = document.getElementById("__drag_image");
		
        mouseOffset = getMouseOffset(__drag_image, ev);
		
		var docPos    = getPosition(detail_image);
    	var mousePos  = mouseCoords(ev);
		
		
		dragBounds = getDragBounds(detail_image);
		
		//alert("x: "+dragBounds.x+" y: "+dragBounds.y+" width: "+dragBounds.width+" height: "+dragBounds.height);
		
		zoomBox = document.getElementById("zoomBox");
		
		dragWidthHalf = __drag_image.height/2;
		dragHeightHalf = __drag_image.height/2;
		
		__drag_image.style.left = (mousePos.x-(dragWidthHalf))+((mousePos.x>(dragBounds.x+dragBounds.width-dragWidthHalf))?((dragBounds.x+dragBounds.width-dragWidthHalf)-mousePos.x):(dragBounds.x-(mousePos.x-(dragWidthHalf))))+"px";
		
		__drag_image.style.top = (mousePos.y-(dragHeightHalf))+((mousePos.y>(dragBounds.y+dragBounds.height-dragHeightHalf))?((dragBounds.y+dragBounds.height-dragHeightHalf)-mousePos.y):(dragBounds.y-(mousePos.y-(dragHeightHalf))))+"px";
		
		overZoom = true;
		
		//alert((mousePos.y));
		
	
	}

	detail_image.onmouseout = function(){
		
		if(overZoom == false){
		
			__drag_image.style.visibility = "hidden";
			dragObject  = null;
			closeZoom();
			__drag_image.src = "images/zoomBox.png";
		
		}
		
	}
	
	__drag_image.onmouseover = function(){
		
		overZoom = true;
		
	}
	
	__drag_image.onmouseout = function(){
		
		overZoom = false;
		__drag_image.style.visibility = "hidden";
		dragObject  = null;
		closeZoom();
		__drag_image.src = "images/zoomBox.png";
		
	}
	
	__drag_image.onclick = function(){
		
		if(zoomOpen == false){
			openZoom();
		}else{
			closeZoom();
		}
		
		
	}
	
	
	
	
	
}

function getDragBounds(target){
	
	
	
	var docPos    = getPosition(target);
	
	var new_width = target.width;
	var new_height = target.height;
	
	return{x:docPos.x, y:docPos.y, width:new_width, height:new_height}
	
}

function openZoom(){
	
	//alert(dragBounds.width);
	
	
	
	zoomBox.style.visibility = "visible";
	zoomBox.style.height = dragBounds.height+"px";
	zoomBox.style.width = "0px";
	zoomBox.style.left = dragBounds.x+dragBounds.width+"px";
	zoomBox.style.top = (dragBounds.y - 1)+"px";
		
	var new_value = 1;
	
	expand();
	
	function expand(){
		
		zoomBox.style.width = parseInt(zoomBox.style.width)+(openSpeed/50)+"px";
		
		if(parseInt(zoomBox.style.width) < dragBounds.width){
			setTimeout(expand,1);
		}else{
			expanded();
		}
		
	}
	
	function expanded(){
		var large_src = null;
		if(detail_image.src.indexOf("img=") == -1){
			large_src = detail_image.src.replace("detail","large");
			if(large_src == "T.gif"){
			large_src = large_src.replace("T.gif",".gif");
			}else{
			large_src = large_src.replace("T.jpg",".jpg");
			}
		}else{
			large_src = detail_image.src.replace("w=300&h=300","w=500&h=500");
			
		}
		
		var docPos    = getPosition(detail_image);
		
		var heightPerc = ((parseInt(dragObject.style.top) - docPos.y) / (detail_image.height - (dragHeightHalf * 2))*1.05);
		var widthPerc = ((parseInt(dragObject.style.left) - docPos.x) / (detail_image.width - (dragWidthHalf * 2))*1.05);
		
		__zoom_image.src = large_src;
		
		zoomOpen = true;
		
//		__zoom_image.style.top = (((parseInt(dragObject.style.top) - (docPos.y)) * ((docPos.y + parseInt(dragObject.style.top)) / (detail_image.height - (dragHeightHalf * 2))))*(-.5))+"px";
//		
//		__zoom_image.style.left = (((parseInt(dragObject.style.left) - (docPos.x)) * ((docPos.x + parseInt(dragObject.style.left)) / (detail_image.width - (dragWidthHalf * 1.75))))*(-.5))+"px";
		
		
		
		__zoom_image.style.top = (heightPerc * (-100)) - ((heightPerc * dragHeightHalf))+"px";
		
		__zoom_image.style.left = (widthPerc * (-100)) - ((widthPerc * dragWidthHalf))+"px";
		
	}
	
	__drag_image.src = "images/zoomBoxActive.png";
	
	
}

function closeZoom(){
	
	zoomBox.style.visibility = "hidden";
	__zoom_image.src = "images/blank.png";
	__drag_image.src = "images/zoomBox.png";
	
	zoomOpen = false;
	
}

function mouseCoords(ev){
	if( !ev ) {
		if( window.event ) {
		  //Internet Explorer
		  ev = window.event;
		} else {
		  //total failure, we have no way of referencing the event
		  return;
		}
  	}

    if(typeof(ev.pageX) == 'number') {
        return {x:ev.pageX, y:ev.pageY};
    }
	var scrollY = document.body.scrollTop;
	switch(navigator.appName)
	{
	  case 'Microsoft Internet Explorer':
		//var myregex = /MSIE 7\.0/i;
		//var myArray = navigator.appVersion.match(myregex);
		//if(myArray != null){
			scrollY = document.documentElement.scrollTop;
		//}else{
		//	scrollY = document.body.scrollTop;
		//}
	 	break;
	  default:
		scrollY = document.body.scrollTop;
		break;
	}
	
    return {
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY + scrollY - document.body.clientTop
    };
}

function getMouseOffset(target, ev){
	
    if( !ev ) {
		if( window.event ) {
		  //Internet Explorer
		  ev = window.event;
		} else {
		  //total failure, we have no way of referencing the event
		  return;
		}
 	}

    var docPos    = getPosition(target);
    var mousePos  = mouseCoords(ev);
    return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
	if( typeof( e.offsetParent ) != 'undefined' ) {
		for( var posX = 0, posY = 0; e; e = e.offsetParent ) {
		  posX += e.offsetLeft;
		  posY += e.offsetTop;
		}
		if(document.getElementById("popup_main_section")){
			posY += 1;
		}
		return {x:posX, y:posY};
	} else {
		return {x:e.x, y:e.y};
	}

}

function mouseMove(ev){
	
	
    if( !ev ) {
		if( window.event ) {
		  //Internet Explorer
		  ev = window.event;
		} else {
		  //total failure, we have no way of referencing the event
		  return;
		}
 	}
    var mousePos = mouseCoords(ev);
	//alert(dragObject);
	
	var docPos    = getPosition(detail_image);
	
    if(dragObject != null){
		
        dragObject.style.position = 'absolute';
		
		
		var heightPerc = ((parseInt(dragObject.style.top) - docPos.y) / (detail_image.height - (dragHeightHalf * 2))*1.05);
		var widthPerc = ((parseInt(dragObject.style.left) - docPos.x) / (detail_image.width - (dragWidthHalf * 2))*1.05);
		
		
		
		if(((mousePos.y-(dragHeightHalf)) >= dragBounds.y) && ((mousePos.y-(dragHeightHalf)) <= (dragBounds.y + dragBounds.height - __drag_image.height))){
			//alert("inside");
        	dragObject.style.top = mousePos.y-(dragHeightHalf)+"px";
			
			if(zoomOpen == true){
				
				//__zoom_image.style.top = (((mousePos.y-(dragHeightHalf))-(detail_image.height))*((__zoom_image.height/detail_image.height)*(-1)))+"px";
				
				//__zoom_image.style.top = (((parseInt(dragObject.style.top) - (docPos.y)) * heightPerc)*(-.5))+"px";
				__zoom_image.style.top = (heightPerc * (-100)) - ((heightPerc * dragHeightHalf))+"px";
				
			}
			
		}else if((mousePos.y >= dragBounds.y) && (mousePos.y <= (dragBounds.y + dragHeightHalf))){
			
			dragObject.style.top = dragBounds.y+"px";
			
			//__zoom_image.style.top = (((parseInt(dragObject.style.top) - (docPos.y)) * heightPerc)*(-.5))+"px";
			__zoom_image.style.top = (heightPerc * (-100)) - ((heightPerc * dragHeightHalf))+"px";
			
		}else if((mousePos.y <= (dragBounds.y + dragBounds.height)) && (mousePos.y >= ((dragBounds.y + dragBounds.height) - dragHeightHalf))){
			
			dragObject.style.top = ((dragBounds.y + dragBounds.height) - (dragHeightHalf * 2))+"px";
			
			//__zoom_image.style.top = (((parseInt(dragObject.style.top) - (docPos.y)) * heightPerc)*(-.5))+"px";
			__zoom_image.style.top = (heightPerc * (-100)) - ((heightPerc * dragHeightHalf))+"px";
			
		}
		
		
		
		
		if(((mousePos.x-(dragWidthHalf)) >= dragBounds.x) && ((mousePos.x-(dragWidthHalf)) <= (dragBounds.x + dragBounds.width - __drag_image.width))){
        	
			dragObject.style.left = mousePos.x-(dragWidthHalf)+"px";
			
			if(zoomOpen == true){
				
				//__zoom_image.style.left = (((mousePos.x-(dragWidthHalf))-(detail_image.width))*((__zoom_image.width/detail_image.width)*(-1)))+"px";
				
				//__zoom_image.style.left = ((parseInt(dragObject.style.left)) - (docPos.x + detail_image.width))+"px";
				
				__zoom_image.style.left = (widthPerc * (-100)) - ((widthPerc * dragWidthHalf))+"px";
				
			}
			
		}else if((mousePos.x >= dragBounds.x) && (mousePos.x <= (dragBounds.x + dragWidthHalf))){
			
			dragObject.style.left = dragBounds.x+"px";
			
			
			
			__zoom_image.style.left = (widthPerc * (-100)) - ((widthPerc * dragWidthHalf))+"px";
			
		}else if((mousePos.x <= (dragBounds.x + dragBounds.width)) && (mousePos.x >= ((dragBounds.x + dragBounds.width) - dragWidthHalf))){
			
			dragObject.style.left = ((dragBounds.x + dragBounds.width) - (dragWidthHalf * 2))+"px";
			
			__zoom_image.style.left = (widthPerc * (-100)) - ((widthPerc * dragWidthHalf))+"px";
			
		}
		
		//alert(mouseOffset.x);
        return false;
    }
}
function mouseUp(){
    dragObject = null;
}

function makeDraggable(item){
    if(!item) return;
    item.onmousedown = function(ev){
        dragObject  = this;
        mouseOffset = getMouseOffset(this, ev);
        return false;
    }
}


addLoadEvent(product_image_zoom);