var $currentPic = 1;
var intervalId;

function initProjektButtons() {
	var $projekte = jQuery('#start-projekte div.start-projekt');
	var $buttonContainer = jQuery('#projekt-buttons');
	
	for($i=0;$i<$projekte.length;$i++) {
		$projekt = jQuery($projekte[$i]);
		$projektName = $projekt.children('input').attr('value');
		$opacity = ($i==0) ? "opacity: 0;" : "opacity: 1;";
		$active = ($i==0) ? "active-btn" : "";
		$buttonContainer.append("<div style='background: url(/templates/rootconnect/images/start-projekte/btn-"+$projektName+"-active.jpg) no-repeat top right;'><img class='"+$active+"' style='"+$opacity+" cursor: pointer;' onclick='breakInterval(); showProjekt("+($i+1)+")' id='projekt-button-"+($i+1)+"' src='/templates/rootconnect/images/start-projekte/btn-"+$projektName+"-inactive.jpg' /></div>")
	}
}

function projektAnimation() {
	var $anzahlBilder = jQuery('#start-projekte div.start-projekt').length;
	if ((($currentPic + 1) > $anzahlBilder)) showProjekt(1);
	else showProjekt($currentPic + 1);
}

function showProjekt($number) {
	if ($currentPic == ($number)) return false;
	
	var $active = jQuery('#start-projekte div.start-projekt.active');
	var $next = jQuery(jQuery('#start-projekte div.start-projekt')[$number-1]);
	
	jQuery('#projekt-buttons img.active-btn').toggleClass('active-btn').animate({opacity: 1.0}, 1000);
	jQuery('#projekt-button-'+$number).toggleClass('active-btn').animate({opacity: 0.0}, 1000);
	
	$active.css({zIndex: 10})
	$next.css({opacity: 0.0, display: "block", zIndex: 11}).addClass('active').animate({opacity: 1.0}, 1000, function() {
		$active.removeClass('active');
		$active.css({display: "none"});
	});
	
	$currentPic = $number;
}

function breakInterval() {
	clearInterval(intervalId);
}

function teaserPicOff(obj) {
	jQuery(obj).children('.one').css({opacity: 0.14});
}

function teaserPicOn(obj) {
	jQuery(obj).children('.one').css({opacity: 1});
}

jQuery(document).ready( function() {
	if(jQuery('#start-projekte').length > 0) {
		initProjektButtons();
		intervalId = setInterval("projektAnimation()", 5000);
	}
});