$(document).ready(function() {
  lightbstory();
});

function lightbstory() {
  var linkstory = $('a[rel^=lightbstory]');
  var overlaystory = $(jQuery('<div id="overlaystory" style="display: none"></div>'));
  var containerst = $(jQuery('<div id="lightbstory" style="display: none"></div>'));
  var closest = $(jQuery('<a href="#closest" class="close">&times; Close</a>'));
  var targetstory = $(jQuery('<div class="targetstory"></div>'));
  var prevstory = $(jQuery('<a href="#prevstory" class="prev">&laquo; Previous</a>'));
  var nextstory = $(jQuery('<a href="#nextstory" class="next">Next &raquo;</a>'));

  $('body').append(overlaystory).append(containerst);
  containerst.append(closest).append(targetstory).append(prevstory).append(nextstory);
  containerst.show().css({'top': Math.round((($(window).height() > window.innerHeight ? window.innerHeight : $(window).height()) - containerst.outerHeight()) / 2) + 'px', 'left': Math.round(($(window).width() - containerst.outerWidth()) / 2) + 'px', 'margin-top': 0, 'margin-left': 0}).hide();
  closest.click(function(c) {
    c.preventDefault();
    overlaystory.add(containerst).fadeOut('normal');
  });

  prevstory.add(nextstory).click(function(c) {
    c.preventDefault();
    var current = parseInt(linkstory.filter('.selected').attr('lb-position'),10);
    var to = $(this).is('.prevstory') ? linkstory.eq(current - 1) : linkstory.eq(current + 1);
    if(!to.size()) {
      to = $(this).is('.prevstory') ? linkstory.eq(linkstory.size() - 1) : linkstory.eq(0);
    }
    if(to.size()) {
      to.click();
    }
  });

  linkstory.each(function(index) {
    var link = $(this);
    link.click(function(c) {
      c.preventDefault();
      open(link.attr('href'));
      linkstory.filter('.selected').removeClass('selected');
      link.addClass('selected');
    });
    link.attr({'lb-position': index});
  });
  
  var open = function(url) {
    if(containerst.is(':visible')) {
      targetstory.children().fadeOut('normal', function() {
        targetstory.children().remove();
        loadImage(url);
      });
    } else {
      targetstory.children().remove();
      overlaystory.add(containerst).fadeIn('normal',function(){
        loadImage(url);
      });
    }
  }
  
  var loadImage = function(url) {
    if(containerst.is('.loading')) { return; }
    containerst.addClass('loading');
    var img = new Image();
    img.onload = function() {
      img.style.display = 'none';
      
      var maxWidth = ($(window).width() - parseInt(containerst.css('padding-left'),10) - parseInt(containerst.css('padding-right'), 10)) - 100;
      var maxHeight = (($(window).height() > window.innerHeight ? window.innerHeight : $(window).height()) - parseInt(containerst.css('padding-top'),10) - parseInt(containerst.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;
        }
      }
      
      containerst.animate({'width': img.width,'height': img.height, 'top': Math.round((($(window).height() > window.innerHeight ? window.innerHeight : $(window).height()) - img.height - parseInt(containerst.css('padding-top'),10) - parseInt(containerst.css('padding-bottom'),10)) / 2) + 'px', 'left': Math.round(($(window).width() - img.width - parseInt(containerst.css('padding-left'),10) - parseInt(containerst.css('padding-right'),10)) / 2) + 'px'},'normal', function(){
        targetstory.append(img);
        $(img).fadeIn('normal', function() {
          containerst.removeClass('loading');
        });
      })
    }
    img.src = url;
  }
}