/**
 * Zoom JS
 */
 
var zoom;
var increment;
var left, top;

$(document).ready(function(){
	zoom = 20;
	increment = 10;
	$("#zoom-link")
		.click(function(){
			var active = $(this).hasClass("product-tool-active");
			$(".product-tool").removeClass("product-tool-active");
			$(".rich-media-window").hide();
			$(".product-thumbnails .thumbnail").eq(0).trigger("click");
			if(!active) {
				$(this).addClass("product-tool-active");	
				$("#zoom").show();
			}
		});
	$(".zoom-image .main-image img")
		.draggable({
			drag:function(event, ui) {
				$(this).trigger("change");
			},
			stop:function(event, ui) {
				$(".zoom-image .dragbox").trigger("change");
			}
		})
		.change(function(){
			var thisObj = this;
			var a = Math.round($(this).css("top").replace("px", ""));
			var b = Math.round($(this).css("left").replace("px", ""));
			var c = Math.round($(this).css("height").replace("px", "")) / 2;
			var d = Math.round($(this).css("width").replace("px", "")) / 2;
			var g = a + c;
			var h = b + d;
			$(this)
				.css({
					width:3200 * ( zoom / 100 ),
					height:2000 * ( zoom / 100 )
				});
			c = Math.round($(this).css("height").replace("px", "")) / 2;
			d = Math.round($(this).css("width").replace("px", "")) / 2;	
			a = g - c;
			b = h - d;
			$(this)
				.css({
					left:b,
					top:a
				});
			$(".zoom-image .dragbox")
				.css({
					width:2000 / zoom,
					height:2000 / zoom,
					left:( $(thisObj).css("left").replace("px","") ) * -1 / ( zoom / 5 ) + 10,
					top:$(thisObj).css("top").replace("px","") * -1 / ( zoom / 5 ) + 280
				}) 
		});
	$(".zoom-image .dragbox")
			.draggable({
				containment:'.zoom-image .thumbnail img',
				drag:function(event, ui) {
					$(this).trigger("change");
				}
			})	
			.change(function(){
				var thisObj = this;
				if ( $(this).css("left").replace("px","") < 10 ) {
					 $(this).css("left", 10 );
				}
				if ( $(this).css("top").replace("px","") < 280 ) {
					 $(this).css("top", 280 );
				}
				if ( $(this).css("left").replace("px","") > ( 170 - $(this).css("width").replace("px","") ) ) {
					 $(this).css("left", 170 - $(this).css("width").replace("px","") );
				}
				if ( $(this).css("top").replace("px","") > ( 380 - $(this).css("height").replace("px","") ) ) {
					 $(this).css("top", 380 - $(this).css("height").replace("px","") );
				}
				$(".zoom-image .main-image img")
					.css({
						"left":- ( ( $(thisObj).css("left").replace("px","") - 10 ) * zoom / 5 ),
						"top":- ( ( $(thisObj).css("top").replace("px","") - 280 ) * zoom / 5 )
					});
			});
	$("#slider").slider({
			min:20,
			max:100,
			step:increment,
			slide:function(event, ui){
				zoom = ui.value;
				$(".zoom-image .main-image img").trigger("change");
				$(".zoom-image .dragbox").trigger("change");
			},
			change:function(event, ui){
				zoom = ui.value;
				$(".zoom-image .main-image img").trigger("change");
				$(".zoom-image .dragbox").trigger("change");
			}
		});
	$("#btn-zoom-in")
			.click(function() {
				$("#slider").slider('value', $("#slider").slider('value') + increment);
				$("#slider").trigger('change');
			});
	$("#btn-zoom-out")
		.click(function() {
			$("#slider").slider('value', $("#slider").slider('value') - increment);
			$("#slider").trigger('change');
		});
});