var mycarousel_itemList = [
    {url: 'sommer-highlights_17', id:"17"},
    {url: 'sommer-highlights_1', id:"1"},
    {url: 'sommer-highlights_2', id:"2"},
    {url: 'sommer-highlights_3', id:"3"},
    {url: 'sommer-highlights_4', id:"4"},
    {url: 'sommer-highlights_5', id:"5"},
    {url: 'sommer-highlights_6', id:"6"},
    {url: 'sommer-highlights_7', id:"7"},
    {url: 'sommer-highlights_8', id:"8"},
    {url: 'sommer-highlights_9', id:"9"},
    {url: 'sommer-highlights_10', id:"10"},
    {url: 'sommer-highlights_11', id:"11"},
    {url: 'sommer-highlights_12', id:"12"},
    {url: 'sommer-highlights_13', id:"13"},
    {url: 'sommer-highlights_14', id:"14"},
    {url: 'sommer-highlights_15', id:"15"},
    {url: 'sommer-highlights_16', id:"16"}
];

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt) {
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var idx = carousel.index(i, mycarousel_itemList.length);	
	jQuery.get(mycarousel_itemList[idx-1].url, function(data) {
		carousel.add(i, data);			
		if ($("body").hasClass("de")) { 
			$(".jcarousel-prev").attr("title","Zurück zum vorherigen Outfit"); 
			$(".jcarousel-next").attr("title","Weiter zum nächsten Outfit");
			}
		else if ($("body").hasClass("en")) { 
			$(".jcarousel-prev").attr("title","Previous outfit"); 
			$(".jcarousel-next").attr("title","Next outfit");
			}
		else if ($("body").hasClass("nl")) { 
			$(".jcarousel-prev").attr("title","Vorige outfit"); 
			$(".jcarousel-next").attr("title","Volgende outfit");
			}
	});
	if (state == "prev") {
		var data = parseInt(mycarousel_itemList[idx-1].id)+1;
		if (data == 0) { data = 18;}
		if (data == 18) { data = 1;}
		$('.jcarousel-control li > a').removeClass("aktiv");
		$(".hlt"+data).addClass("aktiv");
	}
	else {
		var data = parseInt(mycarousel_itemList[idx-1].id)-1;
		if (data == 0) { data = 17;}
		if (data == 17) { data = 17;}
		$('.jcarousel-control li > a').removeClass("aktiv");
		$(".hlt"+data).addClass("aktiv");
	}
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt) {
    carousel.remove(i);
	// alert("Raus mit ID: "+i);
};

$().ready(function() {
	/* str_replace Funktion für JavaScript */
	function str_replace(search, replace, subject) {
	    return subject.split(search).join(replace);
	}
	
	$("a.hlt1").addClass("aktiv"); // Standardmäßig das erste Thumbnail hervorheben
	
	/* Über die Klassen der Thumbnail Links, wird die jeweilige Sprung ID ausgelesen */
	function mycarousel_initCallback(carousel) {
		$('.jcarousel-control li a').bind('click', function() {
			var klasse = $(this).attr("class");
			var zahl2 = str_replace("hlt","",klasse);
			var zahl3 = parseInt(zahl2);
			carousel.scroll(jQuery.jcarousel.intval(zahl3));
			$('.jcarousel-control li > a').removeClass("aktiv");
			$(".hlt"+zahl2).addClass("aktiv");
			return false;
		});
	}
	
	/* Initialisieren des Carousels */
	 jQuery('#hlinhalt').jcarousel({
			start:start_num,
	        wrap: 'circular',
			scroll:1,
			visible:1,
	        itemVisibleInCallback: {onBeforeAnimation:mycarousel_itemVisibleInCallback},
	        itemVisibleOutCallback: {onAfterAnimation:mycarousel_itemVisibleOutCallback},
			initCallback: mycarousel_initCallback
	    });
});