var div;
var img;

var divWidth;
var divHeight;
var imgWidth;
var imgHeight;
var divOffset;
var leftPos;
var topPos;

var zoomLevel = 0;
var largeImageLoaded = false;

var zoomInController;
var zoomOutController;

settings = jQuery.extend({
	smallImgWidth: 474,
	smallImgHeight: 566,
	mediumImgWidth: 732,
	mediumImgHeight: 875,
	largeImgWidth: 1464,
	largeImgHeight: 1749
});

function loadAlternateImage(newImg, aObj) {

	if (img.attr("src") != newImg) {
	    $("#CFDetail1_productVideoPanel").hide();
	    $("#CFDetail1_productImagePanel").show();
	    
		highlightThumbnail(aObj);

		img.fadeOut(250, function() {
			img.attr("src", newImg);
			img.fadeIn(1000);
			resetZoomLevel();
			largeImageLoaded = true;
		});

	}

}

function highlightThumbnail(aObj) {

	$('.altImg').each(function() {
		var current = $(this);
		current.fadeTo(500, 1);
	});

	$(aObj).fadeTo(250, 0.33);

}

function loadLargeImage(e, newImg) {

    if (largeImageLoaded != true) {

        //$(img).fadeOut(250);

        $(img).load(function() {
            setMediumImageScale();
            //getImagePosition(e);
            $(this).fadeIn(1000);
        }).attr("src", newImg);

        largeImageLoaded = true;

    }
    else {
        setMediumImageScale();
       // getImagePosition(e);
    }
}

function getImagePosition(e) {

	divWidth = div.width();
	divHeight = div.height();
	imgWidth = img.width();
	imgHeight = img.height();
	divOffset = div.offset();
	leftPos = (e.pageX - divOffset.left) * (divWidth - imgWidth) / (divWidth);
	topPos = (e.pageY - divOffset.top) * (divHeight - imgHeight) / (divHeight);

	img.css({ left: leftPos, top: topPos });

}

function resetZoomLevel() {
   // alert('resetZoomLevel');
    img.css({ width: settings.smallImgWidth + "px", height: settings.smallImgHeight + "px", left: "0px", top: "0px" });
	zoomLevel = 0
	//alert(img.css);
}

function setMediumImageScale() {

    img.css({ width: settings.mediumImgWidth + "px", height: settings.mediumImgHeight + "px", left: "0px", top: "0px" });

}

function setLargeImageScale() {

    img.css({ width: settings.largeImgWidth + "px", height: settings.largeImgHeight + "px", left: "0px", top: "0px" });

}


function setPanZoomEvents() {

	if (alternateImages == "true") {

		div = $("#PanZoom");
		img = div.children("img");
		span = div.children("span");

		div.css({ cursor: "url(Images/zoom.cur), pointer;" });
		span.css({ top: ((div.height() / 2) - (span.height() / 2)), left: ((div.width() / 2) - (span.width() / 2)) });

		//Pan Function
		div.mousemove(function(e) {

			if (zoomLevel != 0)
				getImagePosition(e);

		});

		//Zoom Function
		
		div.click(function(e) {

			zoomLevel++;

			switch (zoomLevel) {

				case 1:
					loadLargeImage(e, largeImage);
					break;
				case 2:
					setLargeImageScale();
					break;
				default:
					resetZoomLevel();

			}

		});

	}

}

$(document).ready(function() {

	setPanZoomEvents();

});