/*
  John Nunemaker's Fancy Zoom + lazy loading
*/

(function($){
$.fn.fancyZoom = function(options){

  var options   = options || {};
  var directory = options && options.directory ? options.directory : 'images';
  var zooming   = false;

  if ($('#zoom').length == 0) {
    var ext = $.browser.msie ? 'gif' : 'png';
    var html = '<div id="zoom" style="display:none; background: transparent;"> \
                  <div id="zoom_content" style="background-color: #ffffff; padding: 1em; margin: 2em; border: 1px solid #999;"> \
                  </div> \
                  <a href="#" title="Close" id="zoom_close"> \
                    <img /> \
                  </a> \
                </div>';

    $('body').append(html);

    $('html').click(function(e){if($(e.target).parents('#zoom:visible').length == 0) hide();});
    $(document).keyup(function(event){
      if (event.keyCode == 27 && $('#zoom:visible').length > 0) hide();
    });

    $('#zoom_close').click(hide);
  }

  var zoom          = $('#zoom');
  var zoom_close    = $('#zoom_close');
  var zoom_content  = $('#zoom_content');
  var middle_row    = $('td.ml,td.mm,td.mr');

  this.each(function(i) {
    $($(this).attr('href')).hide();
    $(this).click(show);
  });

  return this;

  function show(e) {
    if (zooming) return false;

    zooming         = true;
    zoom            = $(this);
    var content_div = $(zoom.attr('href'));

    // lazy loading
    if (zoom.hasClass('lazy-load')) {
      var zoomParent = zoom.parent('td');
      var zoomThumb = zoom.children('img');
      var zoomImg = content_div.children('img');
      var zoomSrc = zoomImg.attr('data-src');

      // show loading gif for a moment
      zoomParent.addClass('loading');
      zoomThumb.fadeTo(400, 0.3);

      // replace data-src with src to lazy load the image
      zoomImg.load(function() {
        $(this).unbind('load');
        // remove loading gif
        zoom.removeClass('lazy-load');
        zoomParent.removeClass('loading');
        zoomThumb.fadeTo(400, 1.0);
        // zoom the image
        showImage(e, content_div);
      }).attr('src', zoomSrc);
    } else {
      // just zoom the image
      showImage(e, content_div);
    }
    return false;
  };

  function showImage(e, content_div) {
    var zoom_width  = options.width;
    var zoom_height = options.height;

    var width       = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
    var height      = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
    var x           = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
    var y           = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
    var window_size = {'width':width, 'height':height, 'x':x, 'y':y}

    var width              = (zoom_width || content_div.width()) + 60;
    var height             = (zoom_height || content_div.height()) + 60;
    var d                  = window_size;

    // ensure that newTop is at least 0 so it doesn't hide close button
    var newTop             = Math.max((d.height/2) - (height/2) + y, 0);
    var newLeft            = (d.width/2) - (width/2);
    var curTop             = e.pageY;
    var curLeft            = e.pageX;

    zoom_close.attr('curTop', curTop);
    zoom_close.attr('curLeft', curLeft);
    zoom_close.attr('scaleImg', options.scaleImg ? 'true' : 'false');

    $('#zoom').hide().css({
      position  : 'absolute',
      top       : curTop + 'px',
      left      : curLeft + 'px',
      width     : '1px',
      height    : '1px'
    });

    zoom_close.hide();

    if (options.closeOnClick) {
      $('#zoom').click(hide);
    }

    if (options.scaleImg) {
      zoom_content.html(content_div.html());
      $('#zoom_content img').css('width', '100%');
    } else {
      zoom_content.html('');
    }

    $('#zoom').animate({
      top     : newTop + 'px',
      left    : newLeft + 'px',
      opacity : "show",
      width   : width,
      height  : height
    }, 500, null, function() {
      if (options.scaleImg != true) {
        zoom_content.html(content_div.html());
      }
      zoom_close.show();
      zooming = false;
    })
    return false;
  }

  function hide() {
    if (zooming) return false;
    zooming         = true;
    $('#zoom').unbind('click');
    if (zoom_close.attr('scaleImg') != 'true') {
      zoom_content.html('');
    }
    zoom_close.hide();
    $('#zoom').animate({
      top     : zoom_close.attr('curTop') + 'px',
      left    : zoom_close.attr('curLeft') + 'px',
      opacity : "hide",
      width   : '1px',
      height  : '1px'
    }, 500, null, function() {
      if (zoom_close.attr('scaleImg') == 'true') {
        zoom_content.html('');
      }
      zooming = false;
    });
    return false;
  }
}
})(jQuery);