/* jquery Display Slider 
   
   Revision log:
   0.01 release, fade in
   0.02 Added slide transition 7/29/2011 5:01:21 PM
   
*/

(function($) {
  $.fn.extend({
    display_slider: function(options){
  
    var display = null;   
    var slides = null;
    var current_idx = 0;
    var playing = null;
    var play_timer = null;
    var navigation = null;
    
    
    var defaults = {
      autoplay :true,         
      show_navigation: true,
      delay:5000,
      transition:'fade', // fade , slide , carousel
      transition_speed: 1000,
      start_idx:0

    };
    var options = $.extend(defaults, options);

 
    display = this;
    
    init();
 
    
    function init(){
      
      n = 0;
      
      slides = display.children();
      navigation = $('<div class="slide-navigation"><ol></ol></div>');
      navigation.css({'position':'absolute'});
      current_idx = options.start_idx;
      slides.each(
        function(){
          $(this).css({'position':'absolute','top':0,'left':0});
          if(n!= current_idx ){
            $(this).hide();           
          }else{
            $(this).show();  
          }
          
          var bt = $('<a href="#">'+ (n+1)+'</a>');
          bt.data({'idx':n})
          bt.click(function(){
            show_slide($(this).data('idx'));
            return false;
          });
          var bt_item = $('<li></li>');
          if(n== current_idx){
            bt_item.addClass('current');  
          }
          bt_item.append(bt);
          navigation.find('ol').append(bt_item);
          
          n++;
        }
      );
      
      var bt_prev= $('<a href="#" class="prev">Prev</a>');
      var bt_next = $('<a href="#" class="next">Next</a>');
      bt_next.click(next);
      bt_prev.click(prev);
      
      navigation.append(bt_prev);
      navigation.append(bt_next);
      
      if(options.show_navigation){
        display.append(navigation);  
      }
      if(options.autoplay){
        play();  
      }
        
    }
    
    function play(){
      playing = true;
      play_timer = setTimeout(function(){next(); }, options.delay);
         
    }
    function next(){ 
 
      clearTimeout(play_timer);

      transition_out(current_idx,1);
       
      current_idx +=1;
      if(current_idx > slides.length-1)current_idx = 0 // back to 0
      
      transition_in(current_idx,1)
      
       
      if(playing){
        play();  
      }
      return false;
    }
    
    function prev(){
      
      clearTimeout(play_timer);

      transition_out(current_idx,-1);
       
      current_idx -=1;
      if(current_idx < 0 )current_idx = slides.length-1 // back to 0
      
      transition_in(current_idx,-1)
      
      return false;

    }

    function transition_out(idx,direction){
      if(options.transition == 'fade'){
        $(slides[idx]).fadeOut(options.transition_speed);
      }else if(options.transition == 'slide'){
        if(direction >0){
          $(slides[idx]).show().css({left:0}).stop().animate({left: '-' +  $(slides[idx]).width(),'opacity':0},function(){
            $(this).hide();
          });
        }else{
          $(slides[idx]).show().css({left:0}).stop().animate({left: $(slides[idx]).width(),'opacity':0},function(){
            $(this).hide();  
          });
        }
      }
      
      $(navigation.find('ol li')[idx]).removeClass('current');
      
    }
        
    function transition_in(idx,direction){
      if(options.transition == 'fade'){
        $(slides[idx]).fadeIn(options.transition_speed);
      }else if(options.transition == 'slide'){
        if(direction >0){
          $(slides[idx]).show().css({left:$(slides[idx]).width() }).stop().animate({left: 0,'opacity':1});
        }else{ 
          $(slides[idx]).show().css({ left: '-' + $(slides[idx]).width() + 'px' } ).stop().animate({left:0,'opacity':1});
        }
      }
      $(navigation.find('ol li')[idx]).addClass('current');
      
    }
    

    
    function show_slide(idx){
      clearTimeout(play_timer);
      play_timer = null;
      if(idx!= current_idx){
        var direction = idx - current_idx;
        transition_out(current_idx, direction);
        current_idx = idx;
        transition_in(idx,direction);  
      }
    }
    
 
  }
  });
})(jQuery);