/* JavaScript fuer das Produkt-Karussell auf der Startseite */

var current_array = new Array();
// Richtung
var direction = -1;
// Auto-Rotation an/aus
var auto = 0;
// Geschwindigkeit der Rotation
var speed_auto;
// Geschwindigkeit des Positionswechsel von Bildern
var speed_images;
// Cleartime der Rekursion
var auto_clear;

function carrousel(direction, stop_auto, new_speed) {

	// Anhalten der Rotation
	if(stop_auto) {
		auto = 0;
	}
	// Beschleunigen der Rotation
	if(new_speed) {
		speed_auto = new_speed;
	}
	
	// Funktion abbrechen, falls schon eine Animation laeuft -> Vermeidung von Mehrfachklicks
	if($('#product' + current_array[0] + ' img:animated').length != 0) {
		// mach nix
	} else {
		// verschiebe die Produkte
		for(k=0; k<current_array.length; k++) {
			current_array[k] = ((current_array[k]+direction) + amount) % amount;
		}
	
		// Bild aus dem sichtbaren Bereich nach links schieben
		$('#product' + current_array[0] + ' img').animate({
			left: "-55px"
		}, speed_images);
	
		// Bild verkleinern und an die links Position schieben
		$('#product' + current_array[1] + ' img').animate({
			width: "55px",
			height: "89px",
			left: "0px"
		}, speed_images);
	
		// Bild vergroessern und an die mittlere Position schieben
		$('#product' + current_array[2] + ' img').animate({
			width: "70px",
			height: "113px",
			left: "65px"
		}, speed_images);
	
		// Bild verkleinern und an die rechte Position schieben
		$('#product' + current_array[3] + ' img').animate({
			width: "55px",
			height: "89px",
			left: "145px"
		}, speed_images);
	
		// alle restlichen Bilder rechts ausserhalb platzieren
		for(j=0; j<amount; j++) {
			if (j>3) {
				$('#product' + current_array[j] + ' img').animate({
					left: "200px"
				}, speed_images);
				// hide-Funktion, damit die Elemente nicht beim Wechsel von ganz rechts nach ganz links "durchs Bild fliegen"
				// aber erst ab dem 4. Element, sonst entsteht beim rausfahren des 3. Bildes ein Verschwinde-Effekt
				if (j>4) {
					$('#product' + current_array[j] + ' img').hide();
				}
			}
		}
	}
	
	if (auto) {
		auto_clear = setTimeout("carrousel("+direction+")", speed_auto);
	}
}

function carrousel_init() {
	// Produktbilder anordnen
//	$('#product0 img').css({ left:"0px" });
	current_array.push(0);
//	$('#product1 img').css({ left:"65px" });
	current_array.push(1);
//	$('#product2 img').css({ left:"145px" });
	current_array.push(2);
	for (var i=0; i<amount; i++) {
		// letztes Element links platzieren
		if (i == (amount-1)) {
			$('#product' + i + ' img').hide();
			$('#product' + i + ' img').css({ left:"-55px" });
			current_array.push(i);
		} else if (i > 2) {
			//$('#product' + i + ' img').css({ left:"200px" });
			current_array.push(i);
		}
	}
	// Start der Auto-Rotation
	auto_clear = setTimeout("start_carrousell()", 5000);
}

function start_carrousell() {
	clearTimeout(auto_clear);
	// Standardwerte setzen
	auto = 1;
	speed_auto = 5000;
	speed_images = 800;
	auto_clear = 0;
	// Anzeigen der Produkte
	carrousel(direction);
}

carrousel_init();

// linker Pfeil
$("#left_arrow").hover(
	function () {
		direction = 1;
		clearTimeout(auto_clear);
	}, 
	function () {
		auto_clear = setTimeout("start_carrousell()", 5000);
	}
);
$("#left_arrow").click(
	function () {
		carrousel(1, 0, 500);
	}
);
// rechter Pfeil
$("#right_arrow").hover(
	function () {
		direction = -1;
		clearTimeout(auto_clear);
	}, 
	function () {
		auto_clear = setTimeout("start_carrousell()", 5000);
	}
);
$("#right_arrow").click(
	function () {
		carrousel(-1, 0, 500);
	}
);
// mittlerer Container, der die 3 sichtbaren Bilder enthaelt
$("#product_container").hover(
	function () {
		clearTimeout(auto_clear);
		auto = 0;
	}, 
	function () {
		auto_clear = setTimeout("start_carrousell()", 5000);
	}
);