/**
 *
 * @requires jQuery
 * @optional jQuery Easing v1.2
 *
 * @name slideShow
 * @example $('ulid').slideShow();
 * 
 * @Semantic requirements:
 *    The structure fairly simple; the structure should consist
 *    of a ul > li > img structure.
 * 
 *  <ul>
 *    <li><img src="imagens/dsc_0001.jpg"/></li>
 *    <li><img src="common/img/dsc_0002.jpg"/></li>
 *  </ul>
 *
 * @param String ease
 *  refer to http://gsgd.co.uk/sandbox/jquery.easing.php for values
 * 
 * @example $('#banner').slideShow({speed:1000});
 *
 * @param String speed
 *    fast, slow, 1000, ext..
 * 
 * @example $('#banner').slideShow({speed:1000});
 *
 * @param String height
 *    the default height of your wrapper
 * 
 * @example $('#banner').slideShow({height:490});
 * 
 * @param String titleOpacity
 *    the opacity of your title bar (if present)
 * 
 * @example $('#banner').slideShow({titleOpacity:.70});
 *
 * @param String direction 
 *    vertical horizontal diagonal
 * 
 * @example $('#banner').slideShow({direction:'vertical'});
 * 
 */
(function($) {
  $.fn.slideShow = function(options){
    return this.each(function(i){
      var el = this
      el.jqthis = $(this).css({position:'relative'});
      el.jqchildren = el.jqthis.children();
      el.opts = $.extend({}, slideShow, options);
      el.index = i;
      el.totalChildren = el.jqchildren.size();
      var width,height;
      var timerId = 0;
      var current = 0;

      switch(el.opts.direction){
        case 'horizontal':
          width = el.totalChildren*el.opts.width;
          height = el.opts.height;
          break;
        case 'vertical':
          width = el.opts.width;
          height = el.totalChildren*el.opts.height;
          break;
        default:
          width = el.totalChildren*el.opts.width;
          height = el.totalChildren*el.opts.height;
          break;
      };
      
      //el.container = $('<div id="jqGS'+i+'" class="jqGSContainer">').css({position:'relative'});
      //el.ImgContainer = $('<div class="jqGSImgContainer" style="height:'+el.opts.height+'px;position:relative;overflow:hidden">')
      //          .css({height:el.opts.height,width:el.opts.width,position:'relative',overflow:'hidden'});
      //el.jqthis.css({height:height,width:width});
      
      //el.jqthis.wrap(el.container);
      //el.jqthis.wrap(el.ImgContainer);
      el.pagination = $('#slideshow-links-container');
      //el.jqthis.parent().parent().append(el.pagination);
      //var jqul = $('<ul>').appendTo(el.pagination);
      var pos = {x:0,y:0};
      
      el.jqchildren.each(function(j){
        var selected = '';
        if(j == 0) selected = 'selected';
        
        var $a = $('<a href="#'+(j)+'" class="'+selected+'"></a>').click(function(){
          current = j;
          stop();
          
          var href = this.index;//href.replace(/^.*#/, '');
          el.pagination.find('.selected').removeClass('selected');
          $(this).addClass('selected');
          
          var params = {};
          if( el.opts.direction == 'diagonal'){
            params = {right:(el.opts.width*href),bottom:(el.opts.height*href)}
          }
          else if( el.opts.direction == 'vertical'){
            params = {bottom:(el.opts.height*href)}
          }
          else if( el.opts.direction == 'horizontal'){
            params = {right:(el.opts.width*href)}
          };
          
          el.jqthis.stop().animate(params,el.opts.speed, el.opts.ease);
          index = href;
          return false;
        });

        var n = $a.get(0);

        n.index = j;

        $('.slideshow-link'+(j+1)).parent().append($a);
        $a.append($('.slideshow-link'+(j+1)));

        if( el.opts.direction == 'diagonal'){
          pos.x = j * el.opts.width;
          pos.y = j * el.opts.height;
        }
        else if( el.opts.direction == 'horizontal'){
          pos.x = j * el.opts.width;
        }
        else if( el.opts.direction == 'vertical'){
          pos.y = j * el.opts.height;
        };

        var jqchild = $(this).css({height:el.opts.height,width:el.opts.width,position:'absolute',left:pos.x, top:pos.y});

        var jqimg = jqchild.find('img').hide();
        
        /* removes link of image
        if(jqimg.parent().is('a')){
          var p = jqimg.parent();
          jqimg.get(0).linkHref = p.attr('href');
          p.remove();
          jqimg.appendTo(jqchild);
        };
        */

        //var $loader = $('<div class="loader">').appendTo(jqchild);
        //var $titleHolder = $('<div class="title">').appendTo(jqchild).css({opacity:el.opts.titleOpacity}).hide();
        var image = new Image();
        image.onload = function(){
          image.onload = null;
          //$loader.fadeOut();
          jqimg.css({marginLeft:-image.width*.5,marginTop:-image.height*.5,position:'absolute',left:'50%',top:'50%'}).fadeIn();
          var alt = jqimg.attr('alt');
          //if(typeof alt != 'undefined'){
          //  $titleHolder.text(alt).fadeIn();
          //}
        };
        image.src = jqimg.attr('src');
      });
      
      var stop = function() {
        clearTimeout(timerId);
        timerId = 0;
      };

      var banner = function() {
        current ++;
        if((current) == el.totalChildren ){
          current = 0;
          el.pagination.find('[href$=#0]').click();
        } else{
          el.pagination.find('[href$=#'+current+']').click();
        }
        resume();
      };

      var resume = function() {
        timerId = setTimeout(banner, el.opts.timeout);
      };

      resume();
      
    }); // end : this.each(function()
    
  };  // end : $.fn.slideShow
  slideShow = {
    ease: null,
    timeout: 5000,
    speed:0,
    height: 500,
    width: 500,
    titleOpacity : .60,
    direction : 'horizontal' // vertical horizontal diagonal
  };
})(jQuery);