$(document).ready(function() {		
	jQuery('.examples, .examples *').fadeTo(0, 0.01);

	function mycarousel_initCallback(carousel) {
		jQuery('#mycarousel-next').bind('click', function() {
			carousel.next();
			carousel.startAuto(0);
			return false;
		});
		
		jQuery('#mycarousel-next').bind('focus', function() {
			jQuery('#mycarousel-next').blur();
			carousel.startAuto(0);
			return false;
		});

		jQuery('#mycarousel-prev').bind('click', function() {
			carousel.prev();
			return false;
		});
		
		jQuery('#mycarousel-prev').bind('focus', function() {
			jQuery('#mycarousel-prev').blur();
			return false;
		});
		
		jQuery('#carouselNumber').html('1 / ' + mycarousel_itemList.length);
		jQuery('.examples').load("index.php?page=FrontData&catID=" + mycarousel_itemList[0].cid, '', fadeExamples);
		
	};
	
	function mycarousel_itemLoadCallback(carousel, state)
	{
		for (var i = carousel.first; i <= carousel.last; i++) {
			if (carousel.has(i)) {
				continue;
			}

			if (i > mycarousel_itemList.length) {
				break;
			}

			carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1]));
		}
	};
	
	function mycarousel_itemVisibleInCallbackBeforeAnimation(carousel, item, idx, state) {
		
		  
		jQuery('#carouselNumber').html( idx + ' / ' + mycarousel_itemList.length);
		
		if (state != 'init'){
			jQuery('.examples, .examples *').fadeTo('fast', 0.01);
			jQuery('#map').fadeTo('fast', 0.01);
		}
		
		if (state == 'init'){
			jQuery('.examples').removeClass("loading");
		}
		
		jQuery('.changeArea').addClass('loading');
		
		jQuery('.examples').load("index.php?page=FrontData&catID=" + mycarousel_itemList[idx-1].cid + "&idx=" + idx, '', fadeExamples);
		jQuery('.logo').children().filter('img').attr('src','wcf/images/categories/' + mycarousel_itemList[idx-1].logo);
		
		
		
		jQuery('.showAll').html('zeige alle Einträge der Kategorie <b>' + mycarousel_itemList[idx-1].name + '</b>');
		jQuery('.showAll').attr('href','index.php?page=Category&catID=' + mycarousel_itemList[idx-1].cid);
		jQuery('.moreArrow').attr('href','index.php?page=Category&catID=' + mycarousel_itemList[idx-1].cid);
		
		jQuery('.showAll, .moreArrow').css('color', mycarousel_itemList[idx-1].color);			
	};
	
	function fadeExamples() {
		jQuery('.examples, .examples *').fadeTo('fast', 1);
		jQuery('.changeArea').removeClass('loading');
	}

	function mycarousel_getItemHTML(item)
	{
		return '<img src="' + item.url + '" alt="" />';
	};


	jQuery('#mycarousel').jcarousel({
		size: mycarousel_itemList.length,
		scroll: 1,
		auto:10,
		wrap: 'both',
		initCallback: mycarousel_initCallback,
		itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback },
		itemVisibleInCallback: {
			onBeforeAnimation: mycarousel_itemVisibleInCallbackBeforeAnimation
		},
		animation:'normal'	
	});
});