var $j = jQuery.noConflict();

$j(function(){
	
	$j.fn.dfsaZoom = function(slider_value){
		var lot_img = $j(this);
		var img = new Image();
		img.src = lot_img.attr('src');
		var img_width=img.width;
		var cur_width=lot_img.width();
		var cur_height=lot_img.height();
		var img_height=img.height;
		var diff_percnt=img_width-200;
		//651
		if(img_width>200){
			//if original image size is bigger than 200 px
			
			//make sur zoomed draggable image is closed
			$j('.lot_img_drag').dblclick();
			
			//calculate new width
			var new_width=200+((slider_value/100)*diff_percnt);
			//for slide value 5
			//200+((0.05)*651)=233.5
			
			//if new width is smaller than 200px (img box size) set it to 200px
			if(new_width<200) new_width=200;
			//if new width is biffer than original image set it to original image width (to avoid quality lose)
			if(new_width>img_width) new_width=img_width;
			
			//apply new width
			if(new_width==200){
				$j(this).dfsaZoomInitialize();
			}
			lot_img.css('width',new_width);

			var positions=lot_img.position();
			//determine new left position
			var cur_left=lot_img.css('left').replace("px", "");

			//what can debord the max
			var test_left=-(cur_left/(cur_width-200));

			var new_left=test_left*(200-lot_img.width());
			if(cur_left==0) new_left=(200-lot_img.width())/2;
			
			
			//(200-233.5)/2=-16.75
			var cur_top=lot_img.css('top').replace("px", "");
			//what can debord the max
			var test_top=-(cur_top/(cur_height-200));
			var new_top=test_top*(200-lot_img.height());
			if(cur_top==original_img_top) new_top=(200-lot_img.height())/2;
			

			lot_img.css('left',new_left+'px');
			lot_img.css('top',new_top+'px');

		}
	}
	
	$j.fn.dfsaZoomInitialize = function(){
		var lot_img = $j(this);
		var img = new Image();
		img.src = lot_img.attr('src');
		img.onload = function(){
			var img_width=img.width;
			var cur_width=lot_img.width();
			var img_height=img.height;
			var diff_percnt=img_width-200;
			if(img_width>200){
				$j('.lot_img_drag').dblclick();

				var new_width=200;

				lot_img.css('width',new_width);

				var new_left=(200-lot_img.width())/2;
				var new_top=(200-lot_img.height())/2;
				lot_img.css('left',new_left+'px');
				lot_img.css('top',new_top+'px');
				original_img_top=lot_img.css('top').replace("px", "");
			}
		}

	}
	var original_img_top=0;
	$j('.lot_img').dfsaZoomInitialize();
	
	$j('.back_history').click(function(){
		window.history.back();
		return;
	});
	
	$j('.lot_img_cont').draggable( "option", "disabled", true );
	$j('.lot_img').draggable({ cursor: 'crosshair',
		drag: function(event, ui) {
			var img = new Image();
			img.src = $j(this).attr('src');
			var real_img_width=img.width;
			var real_img_height=img.height;
			var img_width=$j(this).width();
			var img_height=$j(this).height();
			
			
		    var newTop = ui.position.top;
		    var newLeft = ui.position.left;
			
			if(newLeft<(-(img_width-200))) newLeft=-(img_width-200);
			if(newLeft>0) newLeft=0;
			
			if(newTop<(-(img_height-200))) newTop=-(img_height-200);
			if(newTop>0) newTop=0;

		    ui.position.top = newTop;
		    ui.position.left = newLeft;
		}
	
	});
	
	$j('.lot_img').dblclick(function(){
		$j(this).parent().parent().find('.lot_img_drag').css('top',$j(this).parent().position().top);
		$j(this).parent().parent().find('.lot_img_drag').css('left',$j(this).parent().position().left);
		$j(this).parent().parent().find('.lot_img_drag').draggable({ cursor: 'crosshair' });
		$j(this).parent().parent().find('.lot_img_drag').draggable('enable');
		$j(this).parent().parent().find('.lot_img_drag').show();

	});
	$j( "#zoom_slider" ).slider({
		min: 0, 
		max: 100,
		animate: true,
		slide: function(e,ui){
			$j(this).parent().parent().find('.lot_img').dfsaZoom(ui.value);
		}
	});
	$j('.lot_img_drag').dblclick(function(){
		$j(this).parent().parent().find('.lot_img_drag').hide();
		$j(this).draggable('disable');
	});
	$j('#zoom_plus').click(function(){
		$j( "#zoom_slider" ).slider("option", "value", $j( "#zoom_slider" ).slider("option", "value")+10);
		$j(this).parent().parent().find('.lot_img').dfsaZoom($j( "#zoom_slider" ).slider("option", "value"));
	});
	$j('#zoom_less').click(function(){
		$j( "#zoom_slider" ).slider("option", "value", $j( "#zoom_slider" ).slider("option", "value")-10);
		$j(this).parent().parent().find('.lot_img').dfsaZoom($j( "#zoom_slider" ).slider("option", "value"));
	});
	
	$j('.lot_thumbs').click(function(){
		var new_img=$j(this).attr('href');
		var old_img=$j('.lot_img').attr('src');
		var old_img_thumb=$j('.lot_img_thumb').attr('src');
		
		$j('.lot_img').attr('src',new_img);
		$j('.lot_img').dfsaZoomInitialize();
		
		$j('.lot_img_drag').find('img').attr('src',new_img);
		$j('.lot_img_thumb').attr('src',$j(this).find('img').attr('src'));
		
		$j(this).attr('href',old_img);
		$j(this).find('img').attr('src',old_img_thumb);
		$j( "#zoom_slider" ).slider("option", "value", 0);
		
		
		return false;
	});
	
	

});