//jQuery No Conflict Mode
var J = jQuery.noConflict();

/*  Image Enlarge  */
var imageZoomStep = 50;
var maxImageZommWidth = 600;
var minImageZommWidth = 400;
var zoomBtnPressed = false;
var containerOffset = J('#image-container').offset();
var containerLeft = containerOffset.left; 
var containerTop = containerOffset.top;
var mouseStart = 0;
var imageMovable = false;

function moveImage(image,imageContainer,toX,toY){
	var imageLeft = parseInt(J(image).css('left'));
	var imageTop = parseInt(J(image).css('top'));
	J(image).css({'left':toX,'top':toY});
	
	//Move Nails
	if (J(imageContainer).find('.nail').length) {
		J(imageContainer).find('.nail').each(function(){
			var nailLeft = parseInt(J(this).css('left'));
			var nailTop = parseInt(J(this).css('top'));
			J(this).css('left',nailLeft-(imageLeft-toX));
			J(this).css('top',nailTop-(imageTop-toY));
		});
		
		var ringLeft = parseInt(J(imageContainer).find('.ring').css('left'));
		var ringTop = parseInt(J(imageContainer).find('.ring').css('bottom'));
		J(imageContainer).find('.ring').css('left',ringLeft-(imageLeft-toX));
		J(imageContainer).find('.ring').css('bottom',ringTop+(imageTop-toY));
	}
}
function resetEnlarge(image,imageContainer){
	//if (J.browser.msie && J.browser.version <= 6 && J('.hand').length) J('.hand IMG').iunfixpng();
	if (J('#image-enlarge').length)J('#image-enlarge').removeClass('zoomout');
	
	//Reset Nail Colour
	J('#nail-colour a[rel=plum]').click();
	
	J(imageContainer+','+image).css('cursor','default');
	//J(image).css({'width':J(imageContainer).width(),'height':J(imageContainer).height(),'left':'0px','top':'0px'});
	J(image).css({'width':J(imageContainer).width(),'left':'0px','top':'0px'});
	
	if (J(imageContainer).find('.nail').length) {	
		J(imageContainer).find('.nail').each(function(){
			var nailImage = J(this).find('img');
			J(nailImage).removeAttr('width');
			J(nailImage).removeAttr('height');
			J(nailImage).css({'width':'','height':''});
			J(this).css('left','');
			J(this).css('top','');
		});
		
		J('#image-container .ring img').each(function(){
			var ringImage = this;
			J(ringImage).removeAttr('width');
			J(ringImage).css({'width':''});
			J(ringImage).removeAttr('height');
			J(ringImage).css({'height':''});
			
			/*var ringClass = J(ringImage).attr('class');
			var ringImageMarginTop = 0;
			var ringImageMarginBottom = 0;
			if (ringClass && ringClass != '' && ringClass != 'empty') {
				ringClass = ringClass.split('_');
				ringImageMarginTop = ringClass[0];
				if (ringClass.length > 1) ringImageMarginBottom = ringClass[1]; 
			}
			
			if (ringImageMarginTop != 0) {
				var m = Math.round(ringImageMarginTop);
				J(ringImage).css('margin-top',m);
			}
			if (ringImageMarginBottom != 0) {
				var m = Math.round(ringImageMarginBottom);
				J(ringImage).css('margin-bottom',m);
			}*/
		});
		J(imageContainer).find('.ring').css('left','');
		J(imageContainer).find('.ring').css('bottom','');
	}
	
	imageMovable = false;
	
	//if (J.browser.msie && J.browser.version <= 6 && J('.hand').length) J('.hand IMG').ifixpng();
}
function makeImageMovable(image,imageContainer){
	imageMovable = true;
	J(image).css({'left':'0px','top':'0px','position':'relative'});
	J(imageContainer+','+image).css('cursor','move');
	
	J(image).bind('mousedown',function(e){
		zoomBtnPressed = true;
		mouseStart = e;
		J(imageContainer).css('z-index','100');
		return false; 
	});
	J(document).bind('mouseup',function(){
		zoomBtnPressed = false;
		mouseStart = null;
		J(imageContainer).css('z-index','');
	});
	J(image).bind('mousemove',function(e){
		imagePosLeft = parseInt(J(this).css('left'));
		imagePosTop = parseInt(J(this).css('top'));
		imageWidth = parseInt(J(this).width());
		imageHeight = parseInt(J(this).height());
		containerWidth = parseInt(J(imageContainer).css('width'));
		containerHeight = parseInt(J(imageContainer).css('height'));
		if (zoomBtnPressed){
			x = mouseStart.pageX-e.pageX;
			y = mouseStart.pageY-e.pageY;
			x = Math.round(x/15);
			y = Math.round(y/15);
			x = imagePosLeft-x;
			y = imagePosTop-y;
			if (x>0) {x = 0;}
			if (y>0) {y = 0;}
			if (x < -1*(imageWidth-containerWidth)) {x = containerWidth-imageWidth;}
			if (y < -1*(imageHeight-containerHeight)) {y = containerHeight-imageHeight;}
			if (imageHeight <= containerHeight) y = 0;
			if (imageWidth <= containerWidth) x = 0;

			moveImage(image,imageContainer,x,y);
		}
		return false;
	});
}
function zoomImage(){
	//if (J.browser.msie && J.browser.version <= 6) J('.hand IMG').iunfixpng();
	
	var delimiterNumber = (parseFloat(J('#image').width())/parseFloat(J('#image-container').width()));
	J('#image-container .nail').each(function(){
		 var nailImage = J(this).find('img');
		
		 //Reset nails to original width/height
		 J(nailImage).css({'width':'','height':''});
		 //J(nailImage).css({'width':''});
		 //Reset nails to original pos
		 J(this).css({'left':'','top':''});
		 
		 var nailImageWidth = parseInt(J(nailImage).width());
		 var nailImageHeight = parseInt(J(nailImage).height());
		 
		 J(nailImage).css('width',Math.round(nailImageWidth*delimiterNumber));
		 J(nailImage).css('height',Math.round(nailImageHeight*delimiterNumber));
		 
		 var nailLeft = parseInt(J(this).css('left'));
		 var nailTop = parseInt(J(this).css('top'));
		 J(this).css('left',Math.round(nailLeft*delimiterNumber)+parseInt(J('#image').css('left')));
		 J(this).css('top',Math.round(nailTop*delimiterNumber)+parseInt(J('#image').css('top')));
	});
	
	J('#image-container .ring img').each(function(){
		var ringImage = this;
		//Reset ring to original width/height
		J(ringImage).css({'width':'','height':''});
		var ringImageWidth = parseInt(J(ringImage).width());
		J(ringImage).css('width',Math.round(ringImageWidth*delimiterNumber));
		
		/*var ringClass = J(ringImage).attr('class');
		var ringImageMarginTop = 0;
		var ringImageMarginBottom = 0;
		if (ringClass && ringClass != '' && ringClass != 'empty') {
			ringClass = ringClass.split('_');
			ringImageMarginTop = ringClass[0];
			if (ringClass.length > 1) ringImageMarginBottom = ringClass[1]; 
		}
		
		if (ringImageMarginTop != 0) {
			var m = Math.round(ringImageMarginTop*delimiterNumber);
			J(ringImage).css('margin-top',m);
		}
		if (ringImageMarginBottom != 0) {
			var m = Math.round(ringImageMarginBottom*delimiterNumber);
			J(ringImage).css('margin-bottom',m);
		}*/
	});
	
	//Reset ring to original pos
	J('#image-container .ring').css({'left':'','bottom':''});		
	var ringLeft = parseInt(J('#image-container .ring').css('left'));
	var ringTop = parseInt(J('#image-container .ring').css('bottom'));
	J('#image-container .ring').css('left',ringLeft*delimiterNumber+parseInt(J('#image').css('left')));
	if(delimiterNumber<1.25)
	{
		J('#image-container .ring').css('bottom',ringTop-parseInt(ringTop*(delimiterNumber*0.98-1))+parseInt(J('#image').css('top')));
	}
	else if(delimiterNumber<1.35)
	{
		J('#image-container .ring').css('bottom',ringTop-parseInt(ringTop*(delimiterNumber*0.95-1))+parseInt(J('#image').css('top')));
	}
	else if(delimiterNumber<1.60)
	{
		J('#image-container .ring').css('bottom',ringTop-parseInt(ringTop*(delimiterNumber*0.93-1))+parseInt(J('#image').css('top')));
	}
	else 
	{
		J('#image-container .ring').css('bottom',ringTop-parseInt(ringTop*(delimiterNumber*0.91-1))+parseInt(J('#image').css('top')));
	}
	
	if ( (parseInt(J('#image').width()) >  parseInt(J('#image-container').width()) & !imageMovable) ) { makeImageMovable('#image','#image-container'); }
	if ( (parseInt(J('#image').width()) <= parseInt(J('#image-container').width()) & imageMovable) ) resetEnlarge('#image','#image-container');
	
/*	if (J.browser.msie && parseInt(J.browser.version) <= 6) {
		J('.hand IMG').ifixpng();
	}*/
}

J(document).ready(function () {
	J('#image-enlarge').attr('href',J("#image").attr('src'));
	 
	J('#image').css({'left':'0px','top':'0px'});
	J('#image-container,#image').dblclick(function(){
		resetEnlarge('#image','#image-container');
		return false;
	});
	
	J('#image-reset').click(function(){resetEnlarge('#image','#image-container');return false;});
	J('#zoomin').click(function(){
		var imageOldWidth = parseInt(J('#image').width());
		var imageOldHeight = parseInt(J('#image').height());
		if (imageOldWidth > maxImageZommWidth) return false; 
		J('#image').css('width',imageOldWidth+imageZoomStep+'px');
		J('#image').css('height','auto');
		//J('#image').css('height',imageOldHeight+imageZoomStep+'px');
		zoomImage();
		
		return false;
	});
	J('#zoomout').click(function(){
		var imageOldWidth = parseInt(J('#image').width());
		var imageOldHeight = parseInt(J('#image').height());
		if (imageOldWidth < minImageZommWidth) return false; 
		J('#image').css('width',imageOldWidth-imageZoomStep+'px');
		//J('#image').css('height',imageOldHeight-imageZoomStep+'px');
		J('#image').css('height','auto');
		
		
		var imageOldLeft = parseInt(J('#image').css('left'));
		var imageOldTop = parseInt(J('#image').css('top'));
		var imageWidth = parseInt(J('#image').width());
		var imageHeight = parseInt(J('#image').height());
		var containerWidth = parseInt(J('#image-container').css('width'));
		var containerHeight = parseInt(J('#image-container').css('height'));
				
		if ( imageWidth > containerWidth && ( (imageWidth+imageOldLeft) < containerWidth || (imageHeight+imageOldTop) < containerHeight ) ) moveImage('#image','#image-container',-(imageWidth-containerWidth),-(imageHeight-containerHeight));
		
		zoomImage();
		return false;
	});
});