var listFlow = {
	
	'diashow': false,
	'effectDuration': 500,
	'element': false,
	'activeElement': false,
	'animationRunning' : false,
	
	'init': function(element_id)
	{
		// set element
		this.element = $('#'+element_id);
		
		// wrap with div container
		this.element.wrap('<div id="list_flow_container" />');
		this.listElements = $('#'+element_id+" li");
		
		var next_click_function = function()
		{
			listFlow.showNextElement();
			return false;
		};
		
		// insert next link
		var next_link = $('<a href="#" id="list_flow_next">&gt;</a>');
		next_link.click(next_click_function);
		this.element.after(next_link);
		
		// make elements clickable when we don’t have a diashow
		if(!this.diashow) 
		{	
			this.listElements.addClass("clickable");
			this.listElements.click(next_click_function);
		}
		
		// add class active to first element
		$(this.listElements[0]).addClass("active");
		this.activeElement = $(this.listElements[0]);
		if(jQuery.browser.msie) this.activeElement.get(0).style.removeAttribute('filter');
		
		// get propteries for active and inactive element
		this.activeWidth = $(this.listElements[0]).outerWidth(true);
		this.activeCssWidth = $(this.listElements[0]).width();
		this.inactiveWidth = $(this.listElements[1]).outerWidth(true);
		this.inactiveCssWidth = $(this.listElements[1]).width();
		this.activeFontSize = $(this.listElements[0]).css("font-size");
		this.activeOpacity = $(this.listElements[0]).css("opacity");
		this.inactiveFontSize = $(this.listElements[1]).css("font-size");
		this.inactiveOpacity = $(this.listElements[1]).css("opacity");
		
		// calculate of container width
		var width = this.activeWidth+this.inactiveWidth*(this.listElements.length-1);

		// set width
		$(this.element).width(width+"px");
		
		if(this.diashow)
			setTimeout('listFlow.showNextElement()', this.diashow);
	},
	
	'reloadElements': function()
	{
		// remove active element from dom and reset styles
		$(this.activeElement).removeClass("active");
		$(this.activeElement).css("margin-left", 0);
		$(this.activeElement).detach();
		
		// append at end
		$(this.element).append($(this.activeElement));
		
		// reload list elements
		this.listElements = $('#'+this.element.attr('id')+" li");
		this.activeElement = $(this.listElements[0]);
		this.activeElement.addClass("active");
		if(jQuery.browser.msie) this.activeElement.get(0).style.removeAttribute('filter');
		
		// animation is completed here so new clicks are excepted
		this.animationRunning = false;
		
		if(this.showNextOnFinish) 
		{
			// for impatient users we fire the showNexElement
			// here cause he clicked when we were animating stuff
			
			this.showNextOnFinish = false;
			this.showNextElement()
		}
		else if(this.diashow)
		{
			// if we have a diashow start over
			setTimeout('listFlow.showNextElement()', this.diashow);
		}
	},
	
	'showNextElement': function()
	{
		// check if we have an animation running
		if(this.animationRunning == false)
		{
			// set that we have an animation running
			this.animationRunning = true;
			
			// hide current
			$(this.activeElement).animate(
				{
					'margin-left': this.activeWidth*-1, 
					'opacity': this.inactiveOpacity,
					'font-size': this.inactiveFontSize,
					'width': this.inactiveCssWidth
				}, 

				this.effectDuration
			);

			// show new
			$(this.listElements[1]).animate(
				{
					'opacity': this.activeOpacity,
					'font-size': this.activeFontSize,
					'width': this.activeCssWidth
				}, 

				this.effectDuration,

				function()
				{
					listFlow.reloadElements();
				}
			);
		}
		else
		{
			// for impatient users save that he has clicked
			// when we were animating stuff so we can fire
			// the showNextElement when we're finished
			
			this.showNextOnFinish = true;
		}
		
	}
	
}


$(document).ready(function()
{
	if($('#list_flow').length)
	{
		listFlow.init("list_flow");
	}
	
	$('textarea.grow').elastic();
	
	$("#eligibility_requirements").hide();
	
	$('a[href=#eligibility_requirements]').click(function()
	{
		$("#eligibility_requirements").toggle(500);
		return false;
	});
	
	var is_ie6 = /MSIE 6/i.test(navigator.userAgent);
	
	if(!is_ie6) $('.products_overview').jcarousel();
	
	
	storeSearch.init('#store_search', {
		countries: 
		{
			'DE': __("Germany"),
			'IT': __("Italy"),
			'NL': __("Netherlands"),
			'CH': __("Switzerland"),
			'AT': __("Austria")
		}, 
		center: 
		{
			lat: 48,
			lng: 11
		},
		detailsButton: __("Details"),
		image: new google.maps.MarkerImage('/custom/designs/kaikkialla/media/kaikkialla_map_point.png',
		      // This marker is 20 pixels wide by 32 pixels tall.
		      new google.maps.Size(33, 44),
		      // The origin for this image is 0,0.
		      new google.maps.Point(0,0),
		      // The anchor for this image is the base of the flagpole at 0,32.
		      new google.maps.Point(0, 44)),
		zoom: 4
	});
});

$(window).load(function()
{
	slideshow.init();
});

var slideshow = {
	
	'imageCount': 0,
	'currentImage': 0,
	'speed': 3000,
	'transition': 1000,
	'showNextTimeout': false,
	
	'init': function()
	{
		// check if we have a slideshow on the page
		if($('ul.slideshow').length)
		{
			// get image count
			this.imageCount = $('ul.slideshow li').length;
			
			// only start if we have more than one image
			if(this.imageCount > 1)
			{
				$('ul.slideshow li').css('overflow', 'hidden');
				$('ul.slideshow li').css('width', $('ul.slideshow').width());
				$('ul.slideshow li').css('position', 'absolute');

				// get slideshow height from first image
				var height = $('ul.slideshow li:first img').height();
				$('ul.slideshow').height(height);
				$('ul.slideshow li').height(height);

				// show next image on click
				$('ul.slideshow li').click(function()
				{
					slideshow.showNextImage();
				})

				// start slideshow
				this.showNextTimeout = setTimeout(slideshow.showNextImage, slideshow.speed);
			}
		}
	},
	
	'showNextImage': function()
	{
		// clear timeout to prevent overlapping of click event and timeer
		clearTimeout(this.showNextTimeout);
		
		// calculate next image
		var next = (slideshow.currentImage + 1 < slideshow.imageCount) ? slideshow.currentImage + 1 : 0;
		
		// fade in/out images
		$('ul.slideshow li').eq(next).fadeIn(slideshow.transition);
		$('ul.slideshow li').eq(slideshow.currentImage).fadeOut(slideshow.transition);
		
		// set current image and fire next timeout
		slideshow.currentImage = next;
		this.showNextTimeout = setTimeout(slideshow.showNextImage, slideshow.speed+slideshow.transition);
	}
}