//@REQUIRE source/js/xthumb/jquery.xthumb.css
(function($) {

  var params = function($img, w_img, h_img) {
    var w_layer = $(window).width(),
         h_layer = $(window).height();

    var h = h_img, w = w_img;

    if (h_img > (h_layer - 100)) {
      var ratio = h_img / w_img;
      h = h_layer > 300 ? h_layer - 100 : 200;
      
      if (h_img > w_img) {
        w = parseInt(h / ratio);
      }
      else {
        w = parseInt(h / ratio);
      }
    }
    
    return {h:h, w:w, l:(w_layer-w)/2, t:(h_layer-h)/2}
  };

  var resize = function() {
    var $inner = $('#xthumb .xthumb-inner');
    var $img = $inner.find('img').removeAttr('height').removeAttr('width');
    var p = params($img, $img[0]['width'], $img[0]['height']);
    $inner.css({left:p.l, top: p.t, height:p.h, width:p.w});
    $img.attr({width:p.w, height: p.h});
  };

  var preload = function(src, cbk) {
  
    var i = new Image();
    i.onload = function() {
      cbk({width:i.width,height:i.height, src:i.src});
    };
    
   
    
    i.src=src;
    
  };
  
  var animate = function($this, $layer, $inner) {
  
    if ($inner.find('img').size()) {
      $inner.append('<i class="xthumb-indicator"/>').find('img').remove();
      $inner.find('.xthumb-indicator').css({top:($inner.height()-16)/2, left: ($inner.width() - 16) / 2});
      $inner.find('.xthumb-alt').remove();
      
    }
    else {
      $inner.css({left:($layer.width()-$inner.width())/2, top: ($layer.height()-$inner.height())/2});
    }
  
        preload($this.attr('href'), function(attr) {
        
          $('#xthumb .xthumb-indicator').remove();
          
          var $img = $('<img src="'+$this.attr('href')+'"/>');
          
          var p = params($img, attr.width, attr.height);
        
          $inner.animate({width:p.w, height:p.h, left:p.l, top:p.t}, 300, function() {
          
          $img.appendTo($inner)
                 .css({opacity: 0})
                 .attr({height:p.h, width:p.w})
                 .animate({opacity:1}, 'fast');
                             
            if ($this.find('img').attr('alt')) {
              $inner.append('<div class="xthumb-alt">'+$this.find('img').attr('alt')+'</div>');
            }
              
          });
        
        });
  };


  $.fn.xthumb = function(conf) {
  
    return $.each(this, function() {

      var $this = $(this);
      
      $this.click(function(e) {
            
        if (!$(e.target).parent().hasClass(conf['class']) && !$(e.target).hasClass(conf['class'])) {
          return;
        }
        
        if ($(e.target).parent().get(0).nodeName != 'A') {
          return;
        }
        
        var $this = $(e.target).parent();
      
        var rel = $this.attr('rel');
        var has_queue = rel && $this.parent().find('[rel='+rel+']').size() > 1;
        var $cur = $this;
        
        var $div = $('<div id="xthumb"><div class="xthumb-layer"></div><div class="xthumb-inner"><div class="xthumb-nav"><a href="#" class="xthumb-prev"></a><a href="#" class="xthumb-next"></a><a href="#" class="xthumb-close"></a></div><i class="xthumb-indicator"></i></div></div>').appendTo('body');
        
        var $layer = $div.find('.xthumb-layer').css({opacity:0.8});
        var $inner = $div.find('.xthumb-inner');
        
        if (!has_queue) {
          $div.find('.xthumb-next,.xthumb-prev').css('display', 'none');
        }
        
        animate($cur, $layer, $inner);

        $div.find('.xthumb-next').click(function() {
          $cur = $cur.next('[rel='+rel+']').size() ? $cur.next('[rel='+rel+']') : $cur.parent().find('[rel='+rel+']:first');
          animate($cur, $layer, $inner);
          return false;
        });
        

        $div.find('.xthumb-prev').click(function() {
          $cur = $cur.prev('[rel='+rel+']').size() ? $cur.prev('[rel='+rel+']') : $cur.parent().find('[rel='+rel+']:last');
          animate($cur, $layer, $inner);
          return false;
        });      

        
        $div.find('.xthumb-close,.xthumb-layer').one('click', function() {
          $div.remove();
          $(window).unbind('resize', resize);
          return false;
        });

        $(window).bind('resize', resize);
        
        return false;
      });
            
      
      return this;
    });
    
  };

})(jQuery);