var xScale;			
var yScale;
var halfSize;			//half size of zoom square
var xOffset;			//offset of the image area
var yOffset;
var zoomAreaSize;		
var zoomActive = 0;

function getImageUrl(img){
	if($(img).length > 0){
		index = $(img).attr('src').indexOf("?");
		if($(img).attr('src').indexOf("?") < 0)
			return $(img).attr('src');
		else{
			return $(img).attr('src').substring(0,index);	
		}
	}
	return '';
}

function startZoom(){
	
	if(!zoomActive){
	
		zoomActive = 1;
	
		zoomAreaSize = $('.selected-image').width();
	
		xOffset = $('.selected-image').offset().left;
		yOffset = $('.selected-image').offset().top;

		$('.scaled-area').show();
		$('.zoom-overlay').show();
		$('.zoom-square').show();
	
		//half size of zoom square
		halfSize = $('.zoom-square').width() / 2 + 3;
		
		xScale = $('.scaled-area img').width() / zoomAreaSize;
		yScale = $('.scaled-area img').height() / zoomAreaSize;
		if(xScale < 1 && yScale < 1) hideZoom();
	}
}

function checkZoom(e){
	
	if(zoomActive){
		//Cursor position
		xPos = e.pageX - xOffset;
		yPos = e.pageY - yOffset;
	
		//Position of zoom square
		if(xPos < halfSize ){
			zoomXPos = 0;
		}else{
			if(xPos > (zoomAreaSize - halfSize)){
				zoomXPos = zoomAreaSize - halfSize * 2;
			}else{
				zoomXPos = xPos - halfSize;
				}
		}
		if(yPos < halfSize ){
			zoomYPos = 0;
		}else{
			if(yPos > (zoomAreaSize - halfSize)){
				zoomYPos = zoomAreaSize - halfSize * 2;
			}else{
				zoomYPos = yPos - halfSize;
				}
		}
	
		//Moving small area on the image
		$('.zoom-square').css('left', zoomXPos).css('top', zoomYPos);
	
		//Changing image in the small area	
		$('.zoom-square img').css('left', zoomXPos * (-1) - 3).css('top', zoomYPos * (-1) - 3);
	
		//Moving large image in the right zone
		$('.scaled-area img').css('left', zoomXPos * xScale * (-1) - 3).css('top', zoomYPos * yScale * (-1) - 3);
	}
}

function hideZoom(){
	if(zoomActive){
		//hiding all zoom elements
		$('.zoom-overlay').hide();
		$('.zoom-square').hide();
		$('.scaled-area').hide();
	
		zoomActive = 0;
	}
}

function InitZoom(){

	imgUrl = getImageUrl($('img.img-fixed'));

	//Create zoom elements
	$('.product-images').append('<div class="scaled-area"></div>');
	$('.scaled-area').append("<img src='" + imgUrl + "?width=1441' alt=''/>");
		
	$('.selected-image').append('<div class="zoom-overlay"></div>');
	$('.selected-image').append('<div class="zoom-square"></div>');
	
	$('.zoom-square').append("<img src='" + imgUrl + "?width=465' alt=''/>");
	
	//Choose correct size of zoom square
	$('.scaled-area img').load(function() {  
		$('.scaled-area').css('visibility','hidden').show();
    	scale = $('.scaled-area img').width() / $('.selected-image').width();
    	$('.zoom-square').width( $('.selected-image').width() / scale ).height( $('.selected-image').height() / scale );
    	$('.scaled-area').hide().css('visibility','visible');
	});
		
	//Zoom events

	$('.selected-image').mouseenter(startZoom).mousemove(checkZoom).mouseleave(hideZoom);
	
}

function InitProductImages(){
	
	if($('.product-images').length > 0 && $('img.img-fixed').attr('src').indexOf('Default.jpg') == -1){
	
		hoverImg = "<img src='" + getImageUrl($('img.img-fixed')) + "?width=465' alt='' class='img-hover'/>";
		$('img.img-fixed').after(hoverImg);
	
		$('.product-images ul.thumbnails img').mouseenter(function(){
		$('img.img-hover').attr('src', getImageUrl(this).replace('w75', 'original') + '?width=465').css('visibility', 'visible');
		}).click(function(){
			imgUrl = getImageUrl(this);
			$('img.img-fixed').attr('src', imgUrl.replace('w75', 'original') + '?width=465');
			$('.zoom-square img').attr('src', imgUrl.replace('w75', 'original') + '?width=465');
			$('.scaled-area img').attr('src', imgUrl.replace('w75', 'original') + '?width=1441');
			$('img.img-hover').css('visibility','hidden');
		}).mouseleave(function(){
			$('img.img-hover').css('visibility','hidden');
		});
	
		InitZoom();
	}
}