/**
 *
 * 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@suuronen.org
 * @license     GPL
 * @version		1.0
 *  
 * 
 * 
 * Takes only img-elements (and custom pan-divs). Otherwise exception is thrown.
 *
 * Example: $j("img#mypic").panFullSize(300,200);
 *
 *
 *
 */
jQuery.fn.panFullSize = function(x, y){
this.each(function(){

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


    // Defaults from img-element
    if (!x) x = pic.width()
    if (!y) y = pic.height();

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

    if ( !exists ) {
        // new pan-div
        // The space in div is required
        pic.after('<div id="pan' + pic.attr("id") +'" class="panFullSize"> </div>');
        pan = getPan();
    }
    pic.hide();


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

    pan.css( 'background-image', 'url("' + pic.attr("src") + '")' )
    .css( 'background-repeat', "no-repeat" );
    




    
    var pic_orig_width = pic.width();
    var pic_orig_height = pic.height();
    
    pic.removeAttr("width");
    pic.removeAttr("height");

    var pic_real_width = pic.width();
    var pic_real_height = pic.height();

    pic.width(pic_orig_width).height(pic_orig_height);

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

    pan.mousedown(function(e){
        mousedown = true;
        
        box_width = pan.width();
        box_height = pan.height();

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

    $j(document.body).mousemove(onpan);

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

        prevX = newX;
        prevY = newY;

    });





    /**
     * FIX: 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( {'background-position':  newX.toString() +"px " + newY.toString() + "px"} );


         }

     }

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


});

// palautetaan vain niiden kuvien divit jotka valittiin
return $j(this).next("div.panFullSize");


};


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

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

    }

 });


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

};