$(document).ready(function(){
  
    var ProductsPerPage = 4;
    var ScrollerItems = new Array();
  
    // Grab products from all tabs to arrays
    $("#scroller > div.scroller-products").each(function(index){
        var TabIndex = index;
        ScrollerItems[TabIndex] = new Array();
        if($(this).find("div.scroller-item").length > ProductsPerPage){
            // Only if current tab has more products than products per page
            $(this).find("div.scroller-item").each(function(index){
                ScrollerItems[TabIndex][index] = $(this).detach();
            });
        }
    });

    // Globals because of navigation buttons
    var currentTabIndex = 0;
    var currentProductIndex = 0;
    var timeOutHanlder;
    var timeOutValue = 10000;
  
    function scroll_products(direction) {

        var activeScroller = $("div.ui-tabs-selected");

        if(direction == 'back'){
            currentProductIndex = currentProductIndex - 2 * ProductsPerPage;
        }

        if(currentProductIndex < 0){
            currentProductIndex = ScrollerItems[currentTabIndex].length + currentProductIndex;
        }

        if(activeScroller.index() == currentTabIndex+1){
            // If current tab is opened
            activeScroller.find("div.scroller-item").remove(); // Remove all products
            for(i=0; i< ProductsPerPage; i++){
                if(currentProductIndex == ScrollerItems[currentTabIndex].length){
                  currentProductIndex = 0;
                }
                activeScroller.find("div.clear").before(ScrollerItems[currentTabIndex][currentProductIndex].clone().fadeIn(600));
                currentProductIndex++;
            }
        }

        // Recursive
        timeOutHanlder = setTimeout(function() {
            if(ScrollerItems[currentTabIndex].length > ProductsPerPage){
                scroll_products(direction);
            }
        }, timeOutValue);
    };

  $("#scroller").tabs({
    show: function(event, ui) { 
      clearTimeout(timeOutHanlder); // Stop scrolling
      currentTabIndex = ui.index;  // Set new tab index
      currentProductIndex = 0;    // Show from beginning
      
      // Mark panel with products as selected
      $('div.scroller-products').removeClass('ui-tabs-selected');
      $(ui.panel).addClass('ui-tabs-selected');
      
      // Change color of navigation buttons
      var tabName = $(ui.tab).attr('class');
      $('#scroller-navigator-forward').css('background-image', "url('/pics/scroller/scroller_navigator_" + tabName + "_forward.gif')");
      $('#scroller-navigator-back').css('background-image', "url('/pics/scroller/scroller_navigator_" + tabName + "_back.gif')");
      
      if(ScrollerItems[currentTabIndex].length > ProductsPerPage){
          $('#scroller-navigator-forward').show();
          $('#scroller-navigator-back').show();
          scroll_products('forward'); // Start scrolling
      }else{
          $('#scroller-navigator-forward').hide();
          $('#scroller-navigator-back').hide();
      }
    }
  });
  
  $("#scroller-navigator-forward").live('click', function(){
    clearTimeout(timeOutHanlder); // Stop current scrolling
    if(ScrollerItems[currentTabIndex].length > ProductsPerPage){
        scroll_products('forward'); // Start scrolling
    }
    return false;
  });
    
  $("#scroller-navigator-back").live('click', function(){
    clearTimeout(timeOutHanlder);  // Stop current scrolling
    if(ScrollerItems[currentTabIndex].length > ProductsPerPage){
        scroll_products('back'); // Start scrolling
    }
    return false;
  });

});