/**
 * @author SeViR
 */


/*
 *  Add a pan viewer in images
 *  @param {integer} width of the window
 *  @param {integer} height of the window
 */
jQuery.fn.panview = function(width, height){
	num = 0;
	return this.each(function(){
		new jQuery.panview(this, width, height, num++);
	});
}

jQuery.panview = function(obj, width, height, num){
	posicionx = 0;
	posiciony = 0 - (height + 2) ;
		
	posicionLeft = posicionx + width - 100;
	icony = posiciony + height;
	iconx = posicionLeft + 0;

	cuadroimagen = "<div id='panview' style='position:absolute; left:0;top:19px; width:450px;height:418px;overflow:hidden; border:1px solid red;'><img src='"+obj.href+"'/></div>";
	browserimagen = "<div id='browserpan' style='width:400px;height:400px;cursor: crosshair' class='panviewer'><img src='"+$("img",obj).get(0).src+"' style='width:400px;height:400px;' /></div>";
	$(obj).after("<div id='click_zoom_img'>"+cuadroimagen + browserimagen+"</div>");
	
	$("#browserpan").get(0).scaley = Math.round($("#panview img").get(0).offsetHeight / $("#browserpan img").get(0).offsetHeight);
	$("#browserpan").get(0).scalex = Math.round($("#panview img").get(0).offsetWidth / $("#browserpan img").get(0).offsetWidth);
	$("#browserpan").get(0).bigimage = $("#panview").get(0); 
	
	$("#browserpan").hover(function(){
		$(document.body).get(0).browserpan = this;
		$(document.body).mousemove(function(e){
			mouse = new MouseEvent(e);
			var tmp_offsetX = Math.round((document.body.clientWidth-960) / 2) + 115;
		
			scrolly = mouse.y - this.browserpan.offsetTop - 300; 
			this.browserpan.bigimage.scrollTop = scrolly * this.browserpan.scaley;
			
			scrollx = mouse.x - this.browserpan.offsetLeft - tmp_offsetX; 
			this.browserpan.bigimage.scrollLeft = scrollx * this.browserpan.scalex;
			
		});
	},function(){
		$(document.body).unbind("mousemove");
		$('div').remove('#click_zoom_img');
		$('.panview').show();
	});
	$(document).resize(function(){
		$(document).unbind("resize");
		$(".panviewer").remove();
		$(obj).get(0).style.display = "block";
		
	});	
	obj.style.display = "none";	
	function MouseEvent(e) {
		this.e = e ? e : window.event; 
		this.source = e.target ? e.target : e.srcElement;
		this.x = this.e.pageX ? this.e.pageX : this.e.clientX;
		this.y = this.e.pageY ? this.e.pageY : this.e.clientY;
		if(window.event) {
			this.x = (document.body.scrollLeft) ? this.x + document.body.scrollLeft : this.x;
			this.y = (document.body.scrollTop) ? this.y + document.body.scrollTop : this.y;
		}
	}	
}