// Hilfsvariablen für den Slider
var act = 0;
var timeout = 10 * 1000;
var timer_aktiv;

// Hilfsvariablen für den Scroller
var scroll_aktiv = false;
var product_index = 0;
var product_count = 0;
var product_width = 0;

var velo_act = false;

jQuery(window).load(function() {
  jQuery("#front_images").append('<div id="front_image_pager"></div>');
  jQuery("#front_image_pager a").remove();
  jQuery(".front_image").hide();
  jQuery(".front_image").each(function(i) {  
    jQuery("#front_image_pager").append('<a href="#" onclick="slideTo('+i+'); return false;" onmouseover="stopTimer();"></a>');
    jQuery(this).mouseenter(function(){
      stopTimer();
    });
    jQuery(this).mouseleave(function(){
      startTimer();
    });
  });
  jQuery(".front_image").eq(act).show();
  jQuery("#front_image_pager A").eq(act).addClass("act");
  startTimer();
  
  // Anzahl Produkte im Scroller ermitteln
  product_count = jQuery(".product").length;
  // Breite einer produkt-Box ermitteln
  product_width = (jQuery(".product").width()+4);
  
  // ermitteln wie viele Produkte fehlen um die letzte Seite zu füllen
  product_needed = (product_count % 4)+8;
  
  // Scrollcontent Breite setzen
  jQuery("#scroller_content").width((product_count+product_needed) * product_width);
  
  // Produkte ermitteln welche vorne angehängt werden müssen
  // die letzten 4
  bevore_html = "";
  for(i = product_count-4; i < product_count; i++){
    bevore_html+='<div class="product">'+jQuery(".product").eq(i).html()+'</div>';
  }
  
  // Produkte ermitteln welche hinten angehängt werden müssen
  // Anzahl der fehlenden + 4
  after_html = "";
  for(i = 0; i < 4+(product_count % 4); i++){
    after_html+='<div class="product">'+jQuery(".product").eq(i).html()+'</div>';
  }
  
  // Scroller-Content erstellen
  jQuery("#scroller_content").prepend(bevore_html);
  jQuery("#scroller_content").append(after_html);
  
  // Start per Random finden ..
  product_index = Math.floor(Math.random()*product_count);
  // .. und anzeigen
  //product_index = 0;
  jQuery("#scroller_content").css('left', -((product_index+4) * product_width));
});

/*
* Diese Funtion ermöglicht das scrollen der Produkte
*/
function scroll(direction){
  // Falls noch aktiv warten
  if(!scroll_aktiv){
    scroll_aktiv = true;
    // Richtung bestimmen
    if(direction == 'left'){
      direction = '+';
    }
    else{
      direction = '-';
    }
      
    // Scrollen
    jQuery("#scroller_content").animate({
      left: direction+'='+(4*product_width)
      }, 
      1000, 
      function() {
        // wenn Animation fertig, dann neuer Index bestimmen
        if(direction == '+'){
          product_index -=4;
          // falls Index zu klein, sichtbarer Bereich und Index anpassen
          if(product_index < 0){
            product_index = product_count + product_index;
            jQuery("#scroller_content").css('left', -((product_index + 4 ) * product_width));
          }
        }
        else{
          product_index +=4;
          // falls Index zu gross, sichtbarer Bereich und Index anpassen
          if(product_index >= product_count-1){
            product_index = product_index - product_count;
            jQuery("#scroller_content").css('left', -((product_index + 4 ) * product_width));
          }
        }
        scroll_aktiv = false;
      }
    );
  }
}

function timer(){
  stopTimer();
  act++;
  if(act == jQuery(".front_image").length){
    act = 0;
  }
  slideTo(act);
  startTimer();
}

function slideTo(i){
  if(!jQuery("#front_image_pager A").eq(i).hasClass("act")){
    jQuery("#front_image_pager A").removeClass("act");
    jQuery(".front_image").fadeOut('slow');
    jQuery(".front_image").eq(i).fadeIn('slow');
    jQuery("#front_image_pager A").eq(i).addClass("act");
    act = i;
  }
}

/*
* diese Funktion startet den Timer für die Slider-Animation
*/
function startTimer(){
  timer_aktiv = window.setTimeout("timer()", timeout);
}

/*
* diese Funktion stopt den Timer für die Slider-Animation
*/
function stopTimer(){
  window.clearTimeout(timer_aktiv);
}