var browser = new Browser();
var dragObj = new Object();

var dragFlag = false;
var dragStartFlag = false;

function Browser() {
	var ua, s, i;
	this.isIE    = false;
	this.isNS    = false;
	this.version = null;

	ua = navigator.userAgent;

	s = "MSIE";
	if ((i = ua.indexOf(s)) >= 0) {
		this.isIE = true;
		this.version = parseFloat(ua.substr(i + s.length));
		return;
	}

	s = "Netscape6/";
	if ((i = ua.indexOf(s)) >= 0) {
		this.isNS = true;
		this.version = parseFloat(ua.substr(i + s.length));
		return;
	}

	s = "Gecko";
	if ((i = ua.indexOf(s)) >= 0) {
		this.isNS = true;
		this.version = 6.1;
		return;
	}
}
function crop_dragStart(event, id) {
	current_image_crop_id = "previewimg" + id.substring(7,(id.length));
	current_id = id.substring(7,(id.length));
	if((dragStartFlag == false) && (dragFlag == false)) {
		dragStartFlag = true;
		var el;
		var x, y;
		if (id) {
			dragObj.elNode = document.getElementById(id);
		}else {
			if (browser.isIE)
				dragObj.elNode = window.event.srcElement;
			if (browser.isNS)
				dragObj.elNode = event.target;
			if (dragObj.elNode.nodeType == 3)
				dragObj.elNode = dragObj.elNode.parentNode;
		}
		if (browser.isIE) {
			x = window.event.clientX + document.documentElement.scrollLeft
			+ document.body.scrollLeft;
			y = window.event.clientY + document.documentElement.scrollTop
			+ document.body.scrollTop;
		}

		if (browser.isNS) {
			x = event.clientX + window.scrollX;
			y = event.clientY + window.scrollY;
		}

		dragObj.cursorStartX = x;
		dragObj.cursorStartY = y;

		dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
		dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);

		if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
		if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;

		dragObj.elNode.style.zIndex = ++dragObj.zIndex;

		if (browser.isIE) {
			document.attachEvent("onmousemove", crop_dragGo);
			document.attachEvent("onmouseup",   crop_dragStop);
			window.event.cancelBubble = true;
			window.event.returnValue = false;
		}

		if (browser.isNS) {
			document.addEventListener("mousemove", crop_dragGo,   true);
			document.addEventListener("mouseup",   crop_dragStop, true);
			event.preventDefault();
		}
	}
}

function crop_dragGo(event) {
	var x, y;
	if(div_obj.style.visibility == "hidden") {
		return;
	}

	if (browser.isIE) {
		x = window.event.clientX + document.documentElement.scrollLeft
		+ document.body.scrollLeft;
		y = window.event.clientY + document.documentElement.scrollTop
		+ document.body.scrollTop;
	}

	if (browser.isNS) {
		x = event.clientX + window.scrollX;
		y = event.clientY + window.scrollY;
	}

	var current_drag_point_x = (dragObj.elStartLeft + x - dragObj.cursorStartX);
	var current_preview_image_x = findPosX(document.getElementById(current_image_crop_id));
	var current_drag_point_y = (dragObj.elStartTop + y - dragObj.cursorStartY);
	var current_preview_image_y = findPosY(document.getElementById(current_image_crop_id));

	preview_img = document.getElementById('small_img');
	var current_preview_image_width = preview_img.width;
	var current_preview_image_height = preview_img.height;

	// Hide crop tool if we mouseout of the image

	if(x < current_preview_image_x || x > (current_preview_image_x + current_preview_image_width)) {
		hide_zoom();
	}

	if(y < current_preview_image_y || y > (current_preview_image_y + current_preview_image_height)) {
		hide_zoom();
	}


	if ( current_drag_point_x < current_preview_image_x) {
		dragObj.elNode.style.left = current_preview_image_x + "px";
	} else if (current_drag_point_x >= (current_preview_image_x + current_preview_image_width - dragObj.elNode.offsetWidth)) {
		dragObj.elNode.style.left = current_preview_image_x + current_preview_image_width - dragObj.elNode.offsetWidth;
	} else {
		dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
	}

	if ((dragObj.elStartTop  + y - dragObj.cursorStartY) <= findPosY(document.getElementById(current_image_crop_id))) {
		dragObj.elNode.style.top = findPosY(document.getElementById(current_image_crop_id)) + "px";
	} else if ((dragObj.elStartTop + y - dragObj.cursorStartY) >= (findPosY(document.getElementById(current_image_crop_id)) + document.getElementById(current_image_crop_id).offsetHeight) - dragObj.elNode.offsetHeight) {
		dragObj.elNode.style.top = (findPosY(document.getElementById(current_image_crop_id)) + document.getElementById(current_image_crop_id).offsetHeight - dragObj.elNode.offsetHeight);
	} else {
		dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";
	}
	
	img_obj = document.getElementById('crop_img');

	cur_left = dragObj.elNode.style.left.replace("px", "");
	cur_left = parseInt(cur_left, 10);
	cur_left = parseInt(current_preview_image_x) - cur_left;

	cur_top = dragObj.elNode.style.top.replace("px", "");
	cur_top = parseInt(cur_top, 10);
	cur_top = parseInt(current_preview_image_y) - cur_top;

	img_obj.style.marginLeft = cur_left + "px";
	img_obj.style.marginTop = cur_top + "px";

	// Change for large image box also.

	main_obj = document.getElementById('large_img');
	scale_factor = main_obj.width/img_obj.width;

	main_obj.style.marginLeft = parseInt((cur_left*scale_factor), 10) + "px";
	main_obj.style.marginTop = parseInt((cur_top*scale_factor), 10) + "px";

	if (browser.isIE) {
		window.event.cancelBubble = true;
		window.event.returnValue = false;
	}

	if (browser.isNS)
		event.preventDefault();
}


function crop_dragStop(event) {
	dragStartFlag = false;
	if (browser.isIE) {
		document.detachEvent("onmousemove", crop_dragGo);
		document.detachEvent("onmouseup",   crop_dragStop);
	}
	if (browser.isNS) {
		document.removeEventListener("mousemove", crop_dragGo,   true);
		document.removeEventListener("mouseup",   crop_dragStop, true);
	}
}

function findPosX(obj) {
	var curleft = 0;
	if (obj.offsetParent) 	{
		while (obj.offsetParent) {
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x) {
		curleft += obj.x;
	}
	return curleft;
}

function findPosY(obj) {
	var curtop = 0;
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y) {
		curtop += obj.y;
	}
	return curtop;
}

function check_cursor(event, obj) {
	if (browser.isIE) {
		cursor_x = window.event.clientX + document.documentElement.scrollLeft
		+ document.body.scrollLeft;
		cursor_y = window.event.clientY + document.documentElement.scrollTop
		+ document.body.scrollTop;
	}

	if (browser.isNS) {
		cursor_x = event.clientX + window.scrollX;
		cursor_y = event.clientY + window.scrollY;
	}
}

function changeOpac(opacity, obj) {
	obj.style.opacity = (opacity / 100);
	obj.style.MozOpacity = (opacity / 100);
	obj.style.KhtmlOpacity = (opacity / 100);
	obj.style.filter = "alpha(opacity=" + opacity + ")"; 
}


function show_zoom(e, obj) {
	if(document.getElementById('cartCont').style.visibility=='visible'){
		return;
	}
	div_obj = document.getElementById('cropbox');
	
	// Run mouseover only when the croptool is not visible
	// This is because each time crop tool moves it is a mouseover for the image which causes issues

	if(div_obj.style.visibility == "visible") {
		return;
	}

	// Check at what point cursor came on top of the image

	check_cursor(e, obj);
	img_left_pos = findPosX(document.getElementById('previewimg'));
	img_right_pos = img_left_pos + obj.width;
	img_top_pos = findPosY(document.getElementById('previewimg'));
	img_bottom_pos = img_top_pos + obj.height;

	// Try to form a rectangle for zooming with the cursor at the mid point

	tool_right = cursor_x + parseInt((zoomtool_width/2), 10);
	tool_left = cursor_x - parseInt((zoomtool_width/2), 10);

	if(tool_right > img_right_pos) {

		// this implies tool goes beyond image. Adjust accordingly

		tool_left = img_right_pos - zoomtool_width;
	}
	if(tool_left < img_left_pos) {

		// this implies tool goes beyond image. Adjust accordingly

		tool_left = img_left_pos;
	}

	tool_top = cursor_y - parseInt((zoomtool_height/2), 10);
	tool_bottom = cursor_y + parseInt((zoomtool_height/2), 10);
	if(tool_top < img_top_pos) {

		// this implies tool goes beyond image. Adjust accordingly

		tool_top = img_top_pos;
	}
	if(tool_bottom > img_bottom_pos) {

		// this implies tool goes beyond image. Adjust accordingly

		tool_top = img_bottom_pos - zoomtool_height;
	}
	div_obj.style.width = zoomtool_width;
	div_obj.style.height = zoomtool_height;
	div_obj.style.overflow = "hidden";
	div_obj.style.visibility = "visible";
	div_obj.style.display = "block";
	div_obj.style.border = "1px solid #000000";
	div_obj.style.left = tool_left;
	div_obj.style.top = tool_top;
	//alert(div_obj.style.left);
	div_obj.innerHTML = "<img src='" + obj.src + "' width='" + obj.width + "' height='" + obj.height + "' id='crop_img'>";
	img_obj = document.getElementById('crop_img');
	margin_posx = img_left_pos - tool_left;
	margin_posy = img_top_pos - tool_top;
	img_obj.style.marginLeft = margin_posx + "px";
	img_obj.style.marginTop = margin_posy + "px";
	changeOpac(40, obj);

	// Now show the larger image part

	large_obj = document.getElementById('largebox');
	large_obj.style.overflow = "hidden";
	large_obj.style.visibility = "visible";
	large_obj.style.display = "block";
	large_obj.style.left = img_right_pos + 10;
	large_obj.style.top = img_top_pos;

	main_obj = document.getElementById('large_img');
	
	// Find the scale factor between the two images

	scale_factor = main_obj.width/obj.width;
	large_width = parseInt((zoomtool_width*scale_factor), 10);
	large_height = parseInt((zoomtool_height*scale_factor), 10);
	large_obj.style.width = large_width;
	large_obj.style.height = large_height;
	main_obj.style.marginLeft = parseInt((margin_posx*scale_factor),10) + "px";
	main_obj.style.marginTop = parseInt((margin_posy*scale_factor),10) + "px";
}

function hide_zoom() {

	// Make crop box and the large img box hidden


	div_obj = document.getElementById('cropbox');
	div_obj.style.left = 800;
	div_obj.style.top = 800;
	div_obj.style.visibility = "hidden";
	div_obj.style.display = "none";

	div_obj = document.getElementById('largebox');

	div_obj.style.visibility = "hidden";
	div_obj.style.display = "none";

	img_obj = document.getElementById('small_img');
	changeOpac(100, img_obj);

}

function change_image(img_id) {
	smallimg = eval('img' + img_id + '_small');
	largeimg = eval('img' + img_id + '_large');
	div_obj = document.getElementById('previewimg');
	div_obj.firstChild.src = smallimg.src;
	div_obj = document.getElementById('largebox');
	div_obj.firstChild.src = largeimg.src;
}
function changeImage(img_id){
	smallimg = eval('img' + img_id + '_small');
	img_obj = document.getElementById('previewimg');
	img_obj.src = smallimg.src;
}
function changeUpsellImage(img_id, prod_id){
	smallimg = eval('img' + img_id + '_small');
	img_obj = document.getElementById('previewimg_'+ prod_id);
	img_obj.src = smallimg.src;
}