$(document).ready(function() {
  globalbox();
  
  $('a#morePics').each(function(){
    $(this).mouseenter(function()
    {
      var detailPic = $(this).children('img').attr('id');
      var zoomPic = $(this).attr('href');
      $('#product_img').attr('src', detailPic);
      $('#product_img').parent('a').attr('href', zoomPic);
      $('#zoomy').attr('href', zoomPic);
    });
  });
  
});

function globalbox() {
  var links = $('a[rel^=globalbox]');
  var overlay = $(jQuery('<div id="overlay" style="display: none"></div>'));
  var container = $(jQuery('<div id="lightbox" style="display: none"></div>'));
  var close = $(jQuery('<a href="#close" class="close">&times;</a>'));
  var target = $(jQuery('<div class="target"></div>'));

  $('body').append(overlay).append(container);
  container.append(close).append(target);
  container.css({'top': Math.round((($(window).height() > window.innerHeight ? window.innerHeight : $(window).height()) - container.outerHeight()) / 2) + 'px', 'left': Math.round(($(window).width() - container.outerWidth()) / 2) + 'px', 'margin-top': 0, 'margin-left': 0});
  
  overlay.click(function(c){
    overlay.fadeOut('normal');
    container.fadeOut('normal');
  });
  
  close.click(function(c) {
    overlay.fadeOut('normal');
    container.fadeOut('normal');
  });

  links.each(function(index) {
    var link = $(this);
    link.click(function(c) {
      c.preventDefault();
      open(link.attr('href'));
      links.filter('.selected').removeClass('selected');
      link.addClass('selected');
    });
    link.attr({'lb-position': index});
  });
  
  var open = function(url) {
    if(container.is(':visible')) {
      target.children().fadeOut('normal', function() {
        target.children().remove();
        loadImage(url);
      });
    } else {
      target.children().remove();
      overlay.add(container).fadeIn(200,function(){
        loadImage(url);
      });
    }
  }
  
  var loadImage = function(url) {
    if(container.is('.loading')) { return; }
    container.addClass('loading');
    var img = new Image();
    img.src = url;
    img.onload = function() {
      img.style.display = 'none';
      
      var maxWidth = ($(window).width() - parseInt(container.css('padding-left'),10) - parseInt(container.css('padding-right'), 10)) - 100;
      var maxHeight = (($(window).height() > window.innerHeight ? window.innerHeight : $(window).height()) - parseInt(container.css('padding-top'),10) - parseInt(container.css('padding-bottom'), 10)) - 100;
      
      if(img.width > maxWidth || img.height > maxHeight) { // One of these is larger than the window
        var ratio = img.width / img.height;
        if(img.height >= maxHeight) {
          img.height = maxHeight;
          img.width = maxHeight * ratio;
        } else {
          img.width = maxWidth;
          img.height = maxWidth * ratio;
        }
      }
      
      var top = maxHeight + 100 - img.height;
      var left = maxWidth + 100 - img.width;
      
      target.append(img);
      
      container.animate({'width': img.width,'height': img.height, 'top': Math.round(top / 2) + 'px', 'left': Math.round(left / 2) + 'px'},'normal', function(){
        $(img).fadeIn('normal');
        container.removeClass('loading');
      })
    }
    
  }
}