var fadeSpeed = 400;   // time for fadeOut or fadeIn in milliseconds
var numKeyvisuals;
var currentKeyvisual = 0;
var nextKeyvisual = 0;
var autoToggleDelay;
var toggleWait;

/**
 * add jQuery action when DOM is ready
 *
 * @return	void
 */
$(document).ready(function(){
		//get number of keyvisual images
	numKeyvisuals = $('#keyvisual div').size();
	
		//set autoToggleDelay to value from first element
	autoToggleDelay = customToggleDelay[0];
	toggleWait = window.setInterval("autoToggleKeyvisual();", autoToggleDelay);
	
		// make span background transparent (for IE)
	$('#keyvisual span').css('opacity', '0.8');
	
		// click action for every li element
	$('#keyvisualnav li').click(function(event) {
			// set nextKeyvisual to current element for the autoToggle function
		nextKeyvisual = $(this).index();
			// toggle the keyvisual
		toggleKeyvisual();
	});
});

/**
 * automatic toggle of the keyvisual after a given time
 *
 * @return	void
 */
function autoToggleKeyvisual() {
	if (nextKeyvisual < numKeyvisuals - 1) {
		nextKeyvisual++;
	}
	else {
		nextKeyvisual = 0;
	}
	toggleKeyvisual();
}

/**
 * toggle the keyvisual
 *
 * @return	void
 */
function toggleKeyvisual() {
		// get current visible keyvisual
	currentKeyvisual = $('#keyvisual div:visible').index();
	bannerSrc='';
	if($('#kv'+currentKeyvisual+' img:first').length > 0){
		bannerSrc= $('base').attr('href') + $('#kv'+currentKeyvisual+' img:first').attr('src');
		// set new autoToggleDelay
	} else if($('#kv'+currentKeyvisual+' object:first').length > 0){
		bannerSrc=$('#kv'+currentKeyvisual+' object:first').attr('data');

		// set new autoToggleDelay
	}
	if (bannerSrc.length){
	 trackStage('playMovie',bannerSrc);
	//pet console.log(bannerSrc);
	}	

	autoToggleDelay = customToggleDelay[nextKeyvisual];
	window.clearInterval(toggleWait);
	toggleWait = setInterval("autoToggleKeyvisual();", autoToggleDelay);
	
		// fade out of active image, when read run callback function
	$('#keyvisual div').eq(currentKeyvisual).fadeOut(fadeSpeed, function() {
		
			// remove class="active" from all li elements
		$('#keyvisualnav li').removeClass('active');
		
			// highlight corresponding li element
		$('#keyvisualnav li').eq(nextKeyvisual).addClass('active');
		
			// fade in of new image
		$('#keyvisual div').eq(nextKeyvisual).fadeIn(fadeSpeed);
		
		
	});
		
	if($.browser.msie) {
		var xml = '<invoke name=\"';
		xml = xml + 'resetBanner';
		xml = xml + '\" returntype=\"javascript\">';
		xml = xml + '</invoke>';
		flash = document.getElementById('kv'+nextKeyvisual+'flash');
		if(typeof flash == 'object')
			var funcRes = flash.callFunction(xml);
	}
}