﻿
(function($) {                         //Create closure
   $.fn.pv_zoom = function(options) {  //Plugin definition
      var opts = $.extend({}, $.fn.pv_zoom.defaults, options);    //Build main options

      //Iterate and construct the image zoom
      return this.each(function() {
         $this = $(this);
         var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

         //Set up a background div the size of the browser window to darken
         var background = $('<div/>');
         $(background).attr('id', 'overlayBackground')
         .animate({ 'opacity': o.opacity }, o.fadeoutSpeed)
         .css({ 'width': $(document).width(), 'height': $(document).height() });
         $('body').append(background);

         //Create a new large image & get its source url from the preceding anchor tag
         var newImage = $('<img/>');
         var width = $('body').width();
         //An anchor tag with its href set to the large image url must immediately precede the smaller image
         $(newImage).attr('src', $this.prev().attr('href')).attr('id', 'largeImage')
         .css({ 'left': (width - o.imageWidth) / 2, 'border': '1px solid black', 'cursor': 'pointer' });
         $('body').append(newImage);
//         .children($this).hide();

         $(newImage).fadeIn(o.fadeinSpeed, function() {
            $(this).bind('click', function() {
               $(this).fadeOut(o.fadeoutSpeed);
               $('div#overlayBackground').fadeOut(o.fadeoutSpeed, function() {
                  $(this).remove();
               });
            });
         });
      });  //return this.each
   };    //pv_zoom

   $.fn.pv_zoom.defaults = {
      imageWidth: 600,
      fadeinSpeed: 2000,
      fadeoutSpeed: 1000,
      opacity: .8
   }; //defaults

})(jQuery);     //Closure

