var changeEvery = 4;
var pauseTime = 8;
var menuItemWidth = 10;
var zoneWidth = 600;
var fadeSpeed = 400;
//var easeType = 'easeInSine';
var xmlLocation = "/fileadmin/templates/xml/heroList.xml";


//====================================================================
//====================================================================
//====================================================================


var currentTime = new Date();

$(document).ready(function(){	
	$.ajax({
		type: "GET",
		url: xmlLocation,
		dataType: "xml",
		success: function(xml)
		{
			var slides = new Array();
			$(xml).find('zone').each(function()
			{
				
				//GOOD DATE
				/*var start = $(this).find('start').text().split('/');
				var end = $(this).find('end').text().split('/');
				
				start = new Date(start[2], start[0] - 1, start[1]);
				end = new Date(end[2], end[0] - 1, end[1]);*/
				
				
				//BAD DATE
				var yearStart = $(this).find('start').text().substring(0,2);
				var monthStart = $(this).find('start').text().substring(2,4);
				var dayStart = $(this).find('start').text().substring(4,6);
				var yearEnd = $(this).find('end').text().substring(0,2);
				var monthEnd = $(this).find('end').text().substring(2,4);
				var dayEnd = $(this).find('end').text().substring(4,6);
				
				start = new Date('20' + yearStart, monthStart - 1, dayStart);
				end = new Date('20' + yearEnd, monthEnd - 1, dayEnd);				
				
				if (start < currentTime && end > currentTime) {
					var slide = new Object();
					slide.url = $(this).find('url').text();
					slide.image = $(this).find('image').text();
					//alert(slides.length + " " + slide.url + " " + slide.image);
					slides[slides.length] = slide;					
				}
			
			});
			//alert(slides.length);

			for (var i = 0; i < slides.length; i++) {
				var slide = slides[i];			
				var url = slide.url;
				var image = slide.image;
				
				$('#slides').append('<div class="slide"><a href="' + url + '"><img src="' + image + '" alt="" width="' + zoneWidth + '" /></a></div>');
				
				if ($('.slide').length === 1 ){
					$('#menu ul').append('<li class="menuItem"><a href="" class="first"></a></li>');	
				} else if ($('.slide').length < slides.length ){
					$('#menu ul').append('<li class="menuItem"><a href=""></a></li>');	
				} else {
					$('#menu ul').append('<li class="menuItem"><a href="" class="last"></a></li>');	
				}
				
			}
			
			if (slides.length === 1) {
				$('#menu').css('display','none')
			}	
				
		init()
		}
	});
});

var totWidth=0;
var positions = new Array();
var advance = true;

function init() {
 
	/* Center Menu */
	
	var marginLeftMenu = zoneWidth/2 - ($('#menu ul li a').length * menuItemWidth/2) - 20;
	$('#menu').css('margin-left', marginLeftMenu);
	
	
	/* This code is executed after the DOM has been completely loaded */
	
	$('#slides .slide').each(function(i){
		
		/* Traverse through all the slides and store their accumulative widths in totWidth */
		
		positions[i]= totWidth;
		totWidth += $(this).width();
		
		/* The positions array contains each slide's commulutative offset from the left part of the container */
		
		if(!$(this).width())
		{
			
			return false;
		}
	});
	
	$('#slides').width(totWidth);

	/* Change the container div's width to the exact width of all the slides combined */

	$('#menu ul li a').click(function(e,keepScroll){

			/* On a thumbnail click */

			$('li.menuItem').removeClass('act').addClass('inact');
			$(this).parent().addClass('act');
			
			var pos = $(this).parent().prevAll('.menuItem').length;
			
			
			//$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},0);
			
			//$('#slidesCover').animate({marginLeft:-positions[pos]+'px', opacity:0}, 600);
			
			/* Start the sliding animation */
			/*$('#slidesCover').css('display','block');
			$('#slidesCover').stop(true, true).animate({
			    opacity:1,
			  }, fadeSpeed, 5, function() {
			    	$('#slides').animate({
				    marginLeft:-positions[pos]+'px',
				  }, 0, function() {
				  	$('#slidesCover').animate({
					    opacity:0,
					  }, fadeSpeed, 5, function() {
					    $('#slidesCover').css('display','none');
					});
				});
			/*});*/
			
			$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},fadeSpeed);
			
			e.preventDefault();
			/* Prevent the default action of the link */
			
			// Stopping the auto-advance if an icon has been clicked:
			
			if (!keepScroll) {	
				current = pos+1;
				advance = false;
				setTimeout(function(){resumeAdvance()},pauseTime*1000);
			}
	});
		
	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */
	
	/*****
	 *
	 *	Enabling auto-advance.
	 *
	 ****/
	 
	var current=1;
	
	function autoAdvance()
	{
		if(current==-1 || !advance )  return false;
		
		$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);	// [true] will be passed as the keepScroll parameter of the click function on line 28
		current++;
	}
	
	function resumeAdvance()
	{
		advance = true;
		clearInterval(itvl)
		itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
	}

	// The number of seconds that the slider will auto-advance in:
	
	

	var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);

	/* End of customizations */
	
	$('.arrowLeft a').click(function(e) 
	{		
		current--;
		
		if(current < 1) {
			current = $('#menu ul li a').length;
		}
		
		$('#menu ul li a').eq((current-1)%$('#menu ul li a').length).trigger('click',[true]);
		
		e.preventDefault();
		/* Prevent the default action of the link */
		
		clearInterval(itvl);
		itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
	});
	
	$('.arrowRight a').click(function(e) 
	{
		current++;
		
		if(current > $('#menu ul li a').length) {
			current = 1;
		}
		
		$('#menu ul li a').eq((current-1)%$('#menu ul li a').length).trigger('click',[true]);
		
		e.preventDefault();
		/* Prevent the default action of the link */
		
		clearInterval(itvl);
		itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
	});
}

$('#arrowContainer').mouseenter(function() 
{
	$('.arrowLeft').css('display', 'block');
	$('.arrowRight').css('display', 'block');
	advance = false;
});

$('#arrowContainer').mouseleave(function() 
{
	$('.arrowLeft').css('display', 'none');
	$('.arrowRight').css('display', 'none');	
	advance = true;
	itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
});