/*
  Script: SlideBox
  Author: Faisal Syafei Lutter
  Date: 10-05-2009
  
  Use this HTML markup:
    .slide_box
      .slide_item
        "Foo"
      .slide_item
        "Bar"
        
    OR
    
    .slide_box.img
      .slide_item
        "Foo"
      .slide_item
        "Bar"
        
  The script will generate:
    .slide_box#slide_box_1
      .slide_container
        .slide_item#slide_item_1-1
          "Foo"
        .slide_item#slide_item_1-2.hide
          "Bar"
      .slide_pagination
        ....
          
  Comment: Just make a normal list. The script will show the first item
           and generate a pagination. Done with cooking!
*/

$(document).ready(function(){
  // Show on (multiple) slide box only the first item
  $(".slide_box .slide_item:not(:first)").addClass('hide');
  
  // Select all slide boxes
  $(".slide_box").each(function(b, box){
      
    // Move all content-elements in a container
    var content_elements = $(box).children();
    var container = $("<div/>").attr('class', 'slide_container');
    content_elements.remove();
    container.append(content_elements);
    //$(box).append(container);
    container.appendTo(box);
    // Set all slide-boxes with unique ids
    $(box).attr({
      'id': "slide_box_" + (++b)
    });
    
    // Set all slide-items with unique ids
    $(box).find(".slide_item").each(function(i, item){
      $(item).attr({
        'id': "slide_item_" + b + "-" + (++i)
      });
    });
    
    // Create a pagination
    var pagination = $("<ul/>").attr({
      'class': "slide_pagination"
    });
    
    // Create Buttons incl. Event Handler
    $(box).find(".slide_item").each(function(i, item){
      
      var li_element   = $("<li/>");
      var a_element    = $("<a href='#'/>");
      var span_element = $("<span/>");
      
      // initialize current
      if(i == 0){
        $(li_element).addClass('current');
      }
      
      a_element.append(span_element.html(++i));
      a_element.click(function(){
        $(box).find(".slide_item:not(.hide)").addClass('hide');
        $(item).removeClass('hide');
        
        // set current
        $(box).find(".slide_pagination li.current").removeClass('current');
        $(this).parent().addClass('current');
        if(!$(box).hasClass("imgs")){
          clearInterval( nextHandlerIntervalId );
        };        
        return false;
      });
      
      li_element.append(a_element);
      pagination.append(li_element);
    });
    
    // Create Prev + Next Button incl. Event Handler
    var li_element_prev = $("<li/>").attr('class', 'prev');
    var a_element_prev  = $("<a href='#'/>");
    a_element_prev.html("&lt;");
    
    var li_element_next = $("<li/>").attr('class', 'next');
    var a_element_next  = $("<a href='#'/>");
    a_element_next.html("&gt;");
    
    // prev handler
    a_element_prev.click(function(){
      var current_item      = $(box).find(".slide_item:not(.hide)");
      var pagination        = $(box).find(".slide_pagination");      
      var current_button    = pagination.find("li.current");
      
      // 1. show previous item
      // 2. set current button
      if(current_item.prev().size() == 0) {
        $(box).find(".slide_item:last").removeClass('hide');
        pagination.find("li:not(.prev, .next):last").addClass('current');
      } else {
        current_item.prev().removeClass('hide');
        current_button.prev().addClass('current');
      }
      
      // reset current item & button
      current_item.addClass('hide');
      current_button.removeClass('current');
      return false;
    });
    
    // No append for images!
    if($(box).attr('class').match(/imgs/) == null){
      li_element_prev.append(a_element_prev);
      pagination.prepend(li_element_prev);
    }
    
    // next handler
    a_element_next.click(nextHandler)

    // No append for images!
    if($(box).attr('class').match(/imgs/) == null){
      li_element_next.append(a_element_next);
      pagination.append(li_element_next);
    }
    
    // Append all elements
    $(box).append(pagination);
  });
  
  var nextHandlerIntervalId = setInterval("nextHandler()",5000);
});

function nextHandler(){
  box_element = $("#slide_box_1");
  var current_item      = box_element.find(".slide_item:not(.hide)");
  var pagination        = box_element.find(".slide_pagination");      
  var current_button    = pagination.find("li.current");
  
  if(box_element.find(".slide_item").size() > 1){      
    if(current_item.next().size() == 0) {
      box_element.find(".slide_item:first").removeClass('hide');
      pagination.find("li:not(.prev, .next):first").addClass('current');
    } else {
      current_item.next().removeClass('hide');
      current_button.next().addClass('current');
    }
    
    // reset current_item & button
    current_item.addClass('hide');
    current_button.removeClass('current');
  }
  return false;
}