/**
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 *
 * http://www.gnu.org/licenses/gpl.txt
 *
 *
 * Creates a image like div with the image as background with ability to
 * pan it with mouse.
 *
 * @name        panFullSize
 * @author      Esa-Matti Suuronen
 * @contact     esa-matti [a] suuronen [dot] org
 * @license     GPL
 * @version     1.02
 *
 *
 *
 * Takes only img-elements (and custom pan-divs). Otherwise exception is thrown.
 *
 * Example: $("img#mypic").panFullSize(300,200);
 *
 *
 *
 */
jQuery.fn.panFullSize = function(x, y){
this.each(function(){

	var pic;
	var pic_real_width;
	var pic_real_height;
	var picX_start = 0;
	var picY_start = 0;
	var prevX = 0;
	var prevY = 0;
	var newX = 0;
	var newY = 0;
	var mousedown = false;


	if ( $(this).is("img") ) {
		pic = $(this);
	}
	else if ( $(this).is("div.panFullSize")  ) { // from custom pan-div
		pic = $(this).prev("img"); // Get the real pic
	}
	else {
		throw "Not an image! panFullSize can only be used with images.";
	}

	var pan = getPan();
	//var exists = pan.length > 0 ;
	var exists = pan.is("*");

	if (exists) {
		if (!x) x = pan.width()
		if (!y) y = pan.height();
	}
	else {
		// Defaults from img-element
		if (!x) x = pic.width()
		if (!y) y = pic.height();
	}

	var box_width = x;
	var box_height = y;







	if ( !exists ) {
		// new pan-div
		// The space in div is required
		pic.after('<div id="pan' + pic.attr("id") +'" class="panFullSize"> </div>');
		pan = getPan().hide();
		// On creating pan-div, we need to wait for the image to load before we can initialize pan-div.
		// Otherwise getting the real image width&heigth fails...
		pic.load(initialize);
	}
	else {
		initialize();
	}



	function initialize(){

		pic.hide();

		pan.css( 'width', box_width + "px").css( 'height', box_height + "px" );
		pan.css( 'display', 'inline-block');  // Make div to act like img. inline-block does not work in FF2?
		// It's only needed to add size-attributes if we already have pan-div
		if ( exists ) return;

		//pan.css( 'background-color', "red" ); // For debugging. Should not be seen ever.
		pan.css( 'background-image', 'url("' + pic.attr("src") + '")' );
		pan.css( 'background-repeat', "no-repeat" );


		// Get the real size of the image
		var pic_orig_width = pic.width();
		var pic_orig_height = pic.height();
		pic.removeAttr("width");
		pic.removeAttr("height");
		pic_real_width = pic.width();
		pic_real_height = pic.height();
		pic.width(pic_orig_width).height(pic_orig_height);



		pan.mousedown(function(e){
			mousedown = true;

			box_width = pan.width();
			box_height = pan.height();

			picX_start = e.clientX;
			picY_start = e.clientY;
		});

		$(document).mousemove(onpan);

		$(document).mouseup(function(e){
			onpan(e);
			mousedown = false;

			prevX = newX;
			prevY = newY;

		});

	}



	/**
	 * BUG: Gets stuck in corners?
	 */
	function onpan(e){


		var diffX = e.clientX - picX_start;
		var diffY = e.clientY - picY_start;

		 if ( mousedown ){

		  var in_areaX = true;
		  var in_areaY = true;

		  if ( prevX + diffX >= 0 )
			  in_areaX = false;
		  if ( -(prevX + diffX) > pic_real_width - box_width )
			  in_areaX = false;
		  if (in_areaX)  newX = prevX + diffX;


		  if ( prevY + diffY >= 0 )
			  in_areaY = false;
		  if ( -(prevY + diffY) > pic_real_height - box_height )
			  in_areaY = false;
		  if (in_areaY)  newY = prevY + diffY;


			pan.css( {backgroundPosition:  newX.toString() +"px " + newY.toString() + "px"} )


		 }

	 }

	 function getPan(){
		 return pic.next("div.panFullSize");
	 }


});

// Lets return the new pan-divs
return $(this).next("div.panFullSize");


};


/**
 * Restores normal image view
 */
jQuery.fn.normalView = function(){
 this.each(function(){
	if ( $(this).is("div.panFullSize") ){
		$(this).hide();
		$(this).prev("img").show();

	}
	else if ( $(this).is("img") && $(this).next("div.panFullSize").is("*") ) {
		$(this).show();
		$(this).next("div.panFullSize").hide();

	}

 });


if ( $(this).is("div.panFullSize")  )
	return $(this).prev("img");
return $(this);

};