// configuration for fading
	var fadeSpeed = 800;
	var textStaysFor = 6000;
	var positionSpeed = fadeSpeed * 2;

	// init for first displayed category
	var currentCat = 0;
	currentCat = Math.floor(Math.random() * catDescriptions.length);


	/*
	 *local used variables
	 */
	var ccDescription;
	var ccCatDecorator;
	var shuffleTimeout;
	// ids of the images
	var logoNames = new Array("logoCC1", "logoCC2", "logoCC3", "logoCC4", "logoOD");
	var continueFade = true;
	
	
	
	$(document).ready(function() {
		// 69 = 4 + 130 /2 - central position of first category logo
		$("#ccImageContainer").append(
			  "<div style=\"margin-top: 10px; margin-left: 69px; text-align: left; \" id=\"ccCatDecorator\">"
			+ "<img src=\"/skin/vgborgDev/images/arrow_3up.gif\"/>"
			+ "</div>");
		ccDescription = $("#ccDescription");
		ccCatDecorator = $("#ccCatDecorator");
		
		for (i = 0; i < logoNames.length; i++) {
			$("#" + logoNames[i])
				.hover(hoverInCat, hoverOutCat)
				.attr('ccId', i)
				.click(clickCcLogo);
		}
		ccDescription.click(clickDescription);
		
		positionDecoratorToCat(currentCat);
		fadeInToCategory(currentCat);
	});
	
	
	function clickDescription() {
		var cat = currentCat;
		var url = catUrls[cat];
		document.location.href = url;
	}
	
	
	function clickCcLogo() {
		var cat = $(this).attr('ccId');
		var url = catUrls[cat];
		document.location.href = url;
	}
	
	
	
	function hoverInCat() {
		$(this).animate({
			opacity: 0.7
		}, 300);
		
		var cat = $(this).attr('ccId');

		continueFade = false;
		clearTimeout(shuffleTimeout);
		ccCatDecorator.stop(true, false);
		ccDescription.stop(true, true);

		positionDecoratorToCat(cat);
		setDescriptionForCat(cat);
		
		currentCat = cat;
	}
	
	function hoverOutCat() {
		$(this).animate({
			opacity: 1.0
		}, 300);
		
		var cat = $(this).attr('ccId');
		continueFade = true;
		//fadeToNextCategory();
		
		fadeInToCategory(currentCat);
	}
	
	function positionDecoratorToCat(cat) {
		var leftMargin =  65 + cat * 130;
		ccCatDecorator.animate({
			marginLeft: leftMargin + "px"
		}, positionSpeed);
	
	}
	
	
	function setDescriptionForCat(cat) {
		var desc = catDescriptions[cat] + " [<a href=\"" + catUrls[cat] + "\">" + tWeiter + "</a>...]";
		ccDescription.html(desc);
		ccDescription.fadeIn(fadeSpeed);
	}
	
	function fadeInToCategory(cat) {
		setDescriptionForCat(cat);
		//positionDecoratorToCat(cat);
		
		if (continueFade) {
			shuffleTimeout = setTimeout(function() {
					fadeToNextCategory();
				}, textStaysFor + fadeSpeed);
		}
	}
	
	function fadeToNextCategory() {
		currentCat++;
		if (currentCat >= catDescriptions.length) {
			currentCat = 0;
		}
		
		fadeOverToCategory(currentCat);
	}
	
	function fadeOverToCategory(cat) {
		ccDescription.fadeOut(fadeSpeed, function() {
			fadeInToCategory(cat);
		});	
		positionDecoratorToCat(cat);		
	}