/**
 * jGallery - jQuery plugin to scroll thorugh a gallery of images.
 * @requires jQuery v1.3.2 or above & jScrollHorizontalPane
 *
 * Copyright (c) 2010 Derek Herman (valendesigns.com)
 * Version: 1.0
 */
(function($){
  $.fn.jGallery = function(options) 
  {
    // Set deafults
    var defaults = {
      id: '',
      show_count: 6,
      thumb_w: 84,
      thumb_h: 60,
      margin_r: 5,
      scroll_h: 10,
      scroll_color: '#444',
      scroll_shadow: '#888',
      drag_w: 84,
      drag_color: '#111',
      round_drag: true,
      start: 1,
      auto: 0,
      top: true,
      bg_color: '#666',
      outline_color: '#999',
      bg_padding: 10,
      bg_marginBottom: 10,
      radius: 3
    };
  
    // Extend defaults
    var options = $.extend(defaults, options);
    
    // reset index
    var iCurrentIndex = 0;
    var no_slider = false;
  
    // Returns the element collection. 
    return this.each(function() {

      // variables
      var div           = $(this),
          items         = $('ul.items', div),
          each_li       = $('li', items),
          each_li_img   = $('img', each_li),
          preview       = $('.preview', div),
          scroller      = $('.scroller', div),
          iNum          = items.children('li').length,
          items_width   = ((options.thumb_w + options.margin_r) * iNum) - options.margin_r,
          content_width = ((options.thumb_w + options.margin_r) * options.show_count) - options.margin_r,
          timer         = null;
      
      // Container
      if (content_width >= items_width) {
        content_width = items_width;
        var no_slider = true;
      }
      
      if (options.radius > 0) {
        div.css({
          'display' : 'block', 
          'width' : content_width+'px', 
          'backgroundColor' : options.bg_color, 
          'padding' : options.bg_padding+'px', 
          'marginBottom' : options.bg_marginBottom+'px', 
          '-webkit-border-radius' : options.radius+'px', 
          '-moz-border-radius' : options.radius+'px', 
          'border-radius' : options.radius+'px'
        });
      } else {
        div.css({
          'display' : 'block', 
          'width' : content_width+'px', 
          'backgroundColor' : options.bg_color, 
          'padding' : options.bg_padding+'px', 
          'marginBottom' : options.bg_marginBottom+'px'
        });
      }
      
      // Scroller
      var scroll_padding = Math.ceil(options.margin_r + options.scroll_h);
      if (no_slider == true) {
        scroll_padding = options.bg_padding;
      }
      if (options.top == true) {
        scroller.css({'paddingBottom' : scroll_padding+'px'});
      } else {
        scroller.css({'paddingTop' : scroll_padding+'px'});
      }

      // Items
      items.css({'width' : items_width+'px', 'height' : options.thumb_h+'px'});
      each_li.css({'width' : options.thumb_w+'px', 'height' : options.thumb_h+'px', 'marginRight' : options.margin_r+'px'});
      each_li_img.css({'width' : options.thumb_w+'px', 'height' : options.thumb_h+'px'});
      items.children('li')[iNum - 1].style.marginRight = '0px';
      
      // Preview
      preview.css({'width' : content_width+'px', 'overflow' : 'hidden'});
      
      // Prepend navigation buttons
      preview.prepend('<a href="JavaScript:void(0);" class="left btn"><span>Prev</span></a><a href="JavaScript:void(0);" class="right btn"><span>Next</span></a>');
      
      // Add Scroller
      scroller.jScrollHorizontalPane({
        scrollbarHeight: options.scroll_h, 
        scrollbarMargin: 0,
        dragMaxWidth: options.drag_w
      });
      
      // Set scroll pane CSS
      var pane_margin = Math.ceil(options.margin_r);
      if (no_slider == true) {
        pane_margin = 0;
      }
      if (options.top == true) {
        $('.jScrollPaneContainer', div).css({'marginBottom' : pane_margin+'px'});
        $('.jScrollPaneTrack', div).css({'bottom' : '1px'});
      } else {
        $('.jScrollPaneContainer', div).css({'marginTop' : pane_margin+'px'});
        $('.jScrollPaneTrack', div).css({'top' : '0px'});
      }
      
      // Scroll corners
      if (options.round_drag == true) {
        $('.jScrollPaneTrack', div).css({
          'backgroundColor' : options.scroll_color,
          '-webkit-border-radius' : '15px', 
          '-moz-border-radius' : '15px', 
          'border-radius' : '15px'
        });
        $('.jScrollPaneDrag', div).css({
          'backgroundColor' : options.drag_color,
          '-webkit-border-radius' : '15px', 
          '-moz-border-radius' : '15px', 
          'border-radius' : '15px'
        });
      } else {
        $('.jScrollPaneTrack', div).css({'backgroundColor' : options.scroll_color});
        $('.jScrollPaneDrag', div).css({'backgroundColor' : options.drag_color});
      }
      
      // Scroll Shadow
      $('.jScrollPaneTrack', div).css({'box-shadow' : '0px 1px 0px '+options.scroll_shadow, '-moz-box-shadow' : '0px 1px 0px '+options.scroll_shadow, '-webkit-box-shadow' : '0px 1px 0px '+options.scroll_shadow});
  
      // Initiate gallery & start autoscroll
      goToIndex(options.start-1);
      startAuto();
      
      /**
       * previous button live click event.
       *
       * @return goToItem()
       */
      $('ul.items a', options.id).live('click', function(e)
      {
        e.preventDefault();
        e.stopPropagation();
        stopAuto();
        return goToItem(this);
      });
      
      /**
       * Left button live click event.
       *
       * @return prevItem()
       */
      $('.left.btn', options.id).live('click', function() 
      {
        stopAuto();
        return prevItem();
      });
      
      /**
       * Right button live click event.
       *
       * @return nextItem()
       */
      $('.right.btn', options.id).live('click', function() 
      {
        stopAuto();
        return nextItem();
      });
      
      /**
       * Starts autoscrolling.
       *
       * @method startAuto
       * @return undefined
       * @param s {Number} Seconds to periodically autoscroll the content.
       */
      function startAuto(s) 
      {
        if (s != undefined)
          options.auto = s;
    
        if (options.auto == 0)
          return stopAuto();
    
        if (timer != null)
          return;
  
        timer = setInterval(function() { nextItem(); }, options.auto * 1000);
      };
      
      /**
       * Stops autoscrolling.
       *
       * @method stopAuto
       * @return undefined
       */
      function stopAuto() 
      {
        if (timer == null)
          return;
    
        clearInterval(timer);
        timer = null;
      };
      
      /**
       * Moves the scroller backwards.
       *
       * @method prevItem
       * @return undefined
       */
      function prevItem()
      {
        goToIndex(--iCurrentIndex);
      };
      
      /**
       * Moves the scroller forward.
       *
       * @method nextItem
       * @return undefined
       */
      function nextItem()
      {
        goToIndex(++iCurrentIndex);
      };
      
      /**
       * Moves the scroller to a set position.
       *
       * @method goToIndex
       * @return undefined
       * @param index {Number} The index of the element to scoll to.
       */
      function goToIndex(index)
      {
        if(iNum)
        {
          while(iNum && index >= iNum) { index -= iNum }
          while(iNum && index < 0) { index += iNum }
        }
        var item = $(items.children('li')[index]).children('a')[0];
        if(item)
        {
          return goToItem(item);
        }
      };
      
      /**
       * Moves the scroller & replaces the image in the preview window.
       *
       * @method goToIndex
       * @return undefined
       * @param item {String} The path to the items image.
       */
      function goToItem(item) 
      {
        var test_regex = /image\_([0-9]+)\_anchor_(.*?)/;
        
        // variables
        var div_id = div.attr('id'),
            iAnchor = $(item, div_id),
            iLi = iAnchor.parents('li'),
            iImg = iAnchor.children('img'),
            iId = iAnchor.attr('id').match(test_regex)[1],
            galleryWrapper = $('#image_' + iId + '_wrap_'+div_id, div),
            pImg = $('#image_' + iId + '_full_'+div_id, div);
        
        // current id
        iCurrentIndex = Number(iId) - 1;
        
        scroller[0].scrollTo('li:has(#' + iAnchor.attr('id') + ')');
        
        /*
        if(iLi.hasClass('selected')) {
          preview.children('.full').removeClass('loading');
          iAnchor.addClass('loaded');
          return;
        }
        */
        
        items.children('li.selected').removeClass('selected');
        iLi.addClass('selected');
        
        $('li a', items).css({'borderBottom' : 'none'});
        $('li.selected a', items).css({'borderBottom' : '1px solid '+options.outline_color});
        
        preview.children('div.full').addClass('hidden');
        galleryWrapper.removeClass('hidden');
        
        preview.fadeIn(400, function(){
          if(!(iAnchor.hasClass('loaded'))){
            pImg.parents('.full').addClass('loading');
          }
          $('.left.btn', div).height(galleryWrapper.height());
          $('.right.btn'. div).height(galleryWrapper.height());
        });
        
        pImg.load(function(){
          $(this).css('visibility', 'visible');
          $(this).parents('.full').removeClass('loading');
          iAnchor.addClass('loaded');
        });
        
        // set source
        pImg.attr('src', iAnchor.attr('href'));
      };
    });
  };
})(jQuery);