// Configuration options
var ptconfig = {
  selector:         'li a img', // What elements to use -- must be a set of <img>-elements wrapped in <a>-elements
  animationspeed:   'medium',   // Speed of animation. Possible values: 'fast', 'medium', 'slow', or time in milliseconds
  shrinkhorizontal: true,       // Whether or not to shrink image horizontally to fit browser window
  shrinkvertical:   true,       // Whether or not to shring image vertically to fit browser window
  margin:           10,         // Minimum distance from image edge to edge of browser window
  resizewithwindow: true,       // Whether or not to resize image when browser is resized
  overlay:          false,      // Whether or not to display an overlay
  overlaycolor:     'black',    // Color of the overlay
  overlayopacity:   0.75        // Opacity of the overlay
};



if (jQuery) {
  
  jQuery(function() {
    jQuery(ptconfig.selector).popupable();
  });
  
  jQuery.extend(jQuery.fn, {
    popupable: function() {
      jQuery(this).live('click', function(evt) {
        evt.preventDefault();
        var origimg = jQuery(this);
        if (!origimg.attr('ptisopen')) {
          jQuery('.ptpopup').click();
          origimg.attr('ptisopen', 'true');
          var imgurl         = origimg.parent().attr('href');
          var imgalt         = origimg.attr('alt');
          var initialpostop  = origimg.offset().top  + (origimg.outerHeight() - origimg.height()) / 2;
          var initialposleft = origimg.offset().left + (origimg.outerWidth()  - origimg.width())  / 2;
          var initialheight  = origimg.height();
          var initialwidth   = origimg.width();
          
          
          var newimg = jQuery('<img class="ptpopup" src="'+imgurl+'" alt="'+imgalt+'">');
          newimg.hide();
          jQuery('body').append(newimg);
          
          newimg.load(function() {
            
            newimg.attr('fullheight', newimg.attr('height'));
            newimg.attr('fullwidth',  newimg.attr('width'));
            
            newimg.css({display: 'block', position: 'absolute', zIndex: 1000, top: initialpostop, left: initialposleft, width: initialwidth, height: initialheight, cursor: 'pointer', opacity: 0});
            
            if (ptconfig.overlay) {
              var overlay = jQuery('<div class="overlay"></div>');
              overlay.css({position: 'fixed', zIndex: 999, top: 0, left: 0, right: 0, bottom: 0, backgroundColor: ptconfig.overlaycolor, opacity: 0});
              jQuery('body').append(overlay);
              overlay.fadeTo(ptconfig.animationspeed, ptconfig.overlayopacity);
            }
            
            newimg.show();
            jQuery.fn._ptzoom(newimg);
            
            if (ptconfig.resizewithwindow) {
              var resizepopup = function() {
                var theptpopup = jQuery('.ptpopup');
                if (theptpopup.length == 1) {
                  jQuery.fn._ptzoom(theptpopup);
                }
              };
              var resizetimer = null;
              var resize      = function() {
                if (resizetimer) {
                  clearTimeout(resizetimer);
                }
                resizetimer = setTimeout(resizepopup, 100);
              }
              
              jQuery(window).resize(resize);
              jQuery(window).scroll(resize);
            }
            
            
            newimg.click(function() {
              var initialpostop  = origimg.offset().top  + (origimg.outerHeight() - origimg.height()) / 2;
              var initialposleft = origimg.offset().left + (origimg.outerWidth()  - origimg.width())  / 2;
              var initialheight  = origimg.height();
              var initialwidth   = origimg.width();
              
              newimg.stop();
              jQuery('.overlay').fadeOut(ptconfig.animationspeed, function() {
                jQuery('.overlay').remove();
              });
              newimg.animate({top: initialpostop, left: initialposleft, width: initialwidth, height: initialheight, opacity: 0}, {duration: ptconfig.animationspeed, complete: function() {
                newimg.remove();
                origimg.removeAttr('ptisopen');
              }});
              
              if (ptconfig.resizewithwindow) {
                jQuery(window).unbind('resize', resize);
                jQuery(window).unbind('scroll', resize);
              }
              
            });
            
          });
        }
      });
    },
    
    _ptzoom: function(newimg) {
      var screenheight = jQuery(window).height();
      var screenwidth  = jQuery(window).width();
      var finalheight  = parseInt(newimg.attr('fullheight'));
      var finalwidth   = parseInt(newimg.attr('fullwidth'));
      var screenratio  = screenwidth / screenheight;
      var imgratio     = finalheight / finalwidth;

      if (ptconfig.shrinkhorizontal) {
        if (finalwidth + ptconfig.margin*2 > screenwidth) {
          finalwidth  = screenwidth - ptconfig.margin*2;
          finalheight = finalwidth * imgratio;
        }
      }
      
      if (ptconfig.shrinkvertical) {
        if (finalheight + ptconfig.margin*2 > screenheight) {
          finalheight = screenheight - ptconfig.margin*2;
          finalwidth  = finalheight / imgratio;
        }
      }
      
      var finalpostop  = jQuery(window).scrollTop()  + jQuery(window).height() / 2 - finalheight / 2;
      var finalposleft = jQuery(window).scrollLeft() + jQuery(window).width()  / 2 - finalwidth  / 2;
      
      newimg.animate({top: finalpostop, left: finalposleft, width: finalwidth, height: finalheight, opacity: 1}, ptconfig.animationspeed);

    }
    
  });
}