$icon_padding_normal = 13; //no animation
$icon_padding_min = 8; //item not selected
$icon_padding_max = 30; //item selected
$image_ratio = 122 / 124;
$image_max_height = 115;


function prepareSlideshow() {
	var div_icon1 = $("#slideshow_box #icon_1");
	var div_icon2 = $("#slideshow_box #icon_2");
	var div_icon3 = $("#slideshow_box #icon_3");
	var div_icon4 = $("#slideshow_box #icon_4");
	div_icon1.css({'background': 'url(\''+ div_icon1.attr('titleImage') +'\') 0 0'});
	div_icon2.css({'background': 'url(\''+ div_icon2.attr('titleImage') +'\') 0 0'});
	div_icon3.css({'background': 'url(\''+ div_icon3.attr('titleImage') +'\') 0 0'});
	div_icon4.css({'background': 'url(\''+ div_icon4.attr('titleImage') +'\') 0 0'});	

	$icon_sets = $("#slideshow_box #controls DIV.icon_set");
	
	$slideInterval = setInterval( "fadeToNextSlide()", 3000 );
	
	$("#slideshow_box #controls .icon_set > DIV.icon").mouseenter($enterIcon).mouseleave($leaveIcon);
}

function fadeToSlide(nextSlide) {
	var $active = $('#slideshow DIV.active');

    if ( $active.length == 0 ) $active = $('#slideshow DIV:first');

    $active.addClass('last-active');

    nextSlide.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

function fadeToNextSlide() {

    var $active = $('#slideshow DIV.active');

    if ( $active.length == 0 ) $active = $('#slideshow DIV:first');

    // use this to pull the divs in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow DIV:first');

	fadeToSlide($next);
	
	//show over icon
	var slide_index = $('#slideshow DIV').index($next);
	var icon = $("#slideshow_box #controls DIV.icon_set DIV.icon").eq(slide_index);
	overIcon(icon);
		
	$("#slideshow_box #controls DIV.icon_set").stop().animate({ paddingTop: $icon_padding_normal, paddingBottom: $icon_padding_normal});
}

/* selects icon in over state */
function overIcon(icon) {
	$("#slideshow_box #controls DIV.icon_set DIV.icon").removeClass("icon_over");

	
	if (icon != null) {
		icon.addClass("icon_over");
	}
}

$enterIcon = function() {
	
	var icon = $(this);
	
	//adjust vertical spaces for icons
	$("#slideshow_box #controls DIV.icon_set").not(icon.parent()).stop().animate({ paddingTop: $icon_padding_min, paddingBottom: $icon_padding_min});
	
	icon.children().show().stop().animate({ opacity: 1, height: $image_max_height, width: ($image_ratio*$image_max_height), top: "-30"});
	icon.parent().stop().animate({ paddingTop: $icon_padding_max, paddingBottom: $icon_padding_max});

	clearInterval($slideInterval);
	
	overIcon(null);
	
	//get slide for recent button position and fade to it
	var button_index = $icon_sets.index(icon.parent());
	var nextSlide = $('#slideshow DIV').eq(button_index);
	fadeToSlide(nextSlide);
}

$leaveIcon = function() {
		
	var icon = $(this);
	
	icon.children().show().stop().animate({ opacity: 0, height: 80, width: $image_ratio*80, top : "-20"}, 200, function() {
		icon.parent().stop().animate({ paddingTop: $icon_padding_normal, paddingBottom: $icon_padding_normal});
	});
		
	$slideInterval = setInterval( "fadeToNextSlide()", 3000 );
}



/* *********************************** */
/* Methods for multi language scroller */
/* *********************************** */

function prepareLanguageScroller() {
	$langOrderInImage = ['de','cn','en-us','fr','jp','es','se']
	var scrollSpeed = 3000;

 	createLanguageListItems($langOrderInImage);
	$scroll_flags = $("ul#text-scroller-control li");
	
	$scroll_flags.mouseenter(function() {
		clearInterval($langScrollInterval);
		
		var flag = $(this);
		
		var flag_index = $scroll_flags.index(flag);
		scrollToLanguage(flag_index);
	})
	
	$scroll_flags.mouseleave(function() {
		$langScrollInterval = setInterval( "scrollToNextLanguage()", scrollSpeed );
	})
	
	$("div#text-scroller").attr("recent-index", "0");
	$("div#text-scroller").animate({scrollTop: 0});
	
	$langScrollInterval = setInterval( "scrollToNextLanguage()", scrollSpeed );
}

function scrollToLanguage(index) {
	var scrollPartHeigth = 300; //height in px of text for a single language
	var topPos = index * scrollPartHeigth;

	$("div#text-scroller").stop().animate({ scrollTop: topPos }, 500, "swing", function() {
		$("div#text-scroller").attr("recent-index", index);
	});
}

function scrollToNextLanguage() {
	var recent_index = parseInt($("div#text-scroller").attr("recent-index"));
	var index = [(recent_index < $scroll_flags.length-1 ? recent_index+1 : 0)];
	scrollToLanguage(index);
}

function createLanguageListItems(langArray) {
	$.each(langArray, function(index, value) {
		$('ul#text-scroller-control').append('<li id="' + value + '" href="#"><img src="fileadmin/templates/img/icon_' + value + '.png" width="19" height="12" border="0" alt="' + value + '" style="padding-left: 4px; padding-bottom: 2px" /></li>');		
	});
}



// When Document is ready, set the CSS-Background Image which URL
// can be found in the titleImage-Attribute of the icon_n-div
$(document).ready(function(){
	prepareSlideshow();
	
	prepareLanguageScroller();
});