var SAFE_BORDER = 20;

var bZoomIsOn = false;
var bZoomIsInitiated = false;
var bZoomIsActivated = false;

var iPhotoWidth = 0;
var iPhotoHeight = 0;

var iZoomWidth = 0;
var iZoomHeight = 0;
var sZoomId = "";

var iDiffWidth = 0;
var iDiffHeight = 0;

var iOffsetTop = 0;
var iOffsetLeft = 0;

$(document).ready(function(){
	
	$.ajax({
		type: "GET",
		url: "getZoomJSON.php",
		data: {
			id: sZoomId
		},
		dataType: "json",
		success: function (data, textStatus) {
			if( data.err == '' ){
				//zoom exists, let's bind events and add cursor icons...
				//BUT we should wait image to be loaded by browser...
				var oPhoto = $('#photoImg');
				var src = oPhoto.attr("src");
				
				$('<img src="' + src + '"/>').load(function(){
					iPhotoWidth = oPhoto.innerWidth();
					iPhotoHeight = oPhoto.innerHeight();

					var offset = oPhoto.offset();
					iOffsetTop = offset.top;
					iOffsetLeft = offset.left;

					if( iPhotoWidth == 0 || iPhotoHeight == 0 ){
						//No size for #photoImg, we deactivate zoom
						return;
					}
					$(data.html)
						.load(function(){
							$('#zoom')
								.width(iPhotoWidth)
								.height(iPhotoHeight)
								.append( this );
							$('#photo')
								.append( '<img id="iconzoom" src="sysimg/zoom.gif" alt="+" />' )
								.css("cursor", "pointer")
								.click(function(e){
									toggleZoom(e.pageX, e.pageY);
								})
								.bind("mouseleave", function(e){
									stopZoom();
								});
							bZoomIsActivated = true;
						});
				});
			}
		}
	});
});

function initiateZoom(){
	var oZoomImg = $('#zoomImg');

	iZoomWidth = oZoomImg.width();
	iZoomHeight = oZoomImg.height();

	if( iZoomWidth == 0 || iZoomHeight == 0 ){
		//No size for #zoom, we deactivate zoom
		bZoomIsActivated = false;
		return;
	}

	iDiffWidth = iZoomWidth - iPhotoWidth;
	iDiffHeight = iZoomHeight - iPhotoHeight;
	bZoomIsInitiated = true;
}

function startZoom(x, y){
	bZoomIsOn = true;
	calculateZoom(x, y);
	$('#zoom')
		.css('cursor', 'move')
		.bind('mousemove', function(e){
			calculateZoom(e.pageX, e.pageY);
		})
		.css('visibility','visible');
}

function stopZoom(){
	if( bZoomIsOn ){
		bZoomIsOn = false;
		$('#zoom')
			.unbind('mousemove')
			.css('visibility','hidden');
	}
}

function toggleZoom(x, y){
	if( bZoomIsActivated ){
		if( bZoomIsOn ){
			stopZoom();
		} else {
			if( !bZoomIsInitiated ){
				initiateZoom();
			}
			startZoom(x, y);
		}
	}
}

function calculateZoom( x, y ){
	var iXrate = ( x - iOffsetLeft - SAFE_BORDER ) / (iPhotoWidth - (2 * SAFE_BORDER));
	var iYrate = ( y - iOffsetTop - SAFE_BORDER ) / (iPhotoHeight - (2 * SAFE_BORDER));
	if( iXrate < 0 ){
		iXrate = 0
	}
	if( iXrate > 1 ){
		iXrate = 1
	}
	if( iYrate < 0 ){
		iYrate = 0
	}
	if( iYrate > 1 ){
		iYrate = 1
	}

	var offsetX = Math.round(iXrate * iDiffWidth);
	var offsetY = Math.round(iYrate * iDiffWidth);

	var left = 0 - offsetX;
	var top = 0 - offsetY;

	$('#zoomImg')
		.css('left', left + 'px')
		.css('top', top + 'px');
}