var SmallWidth = 60;
var MiddleWidth = 110;
var BigWidth = 440;
var SideMargin = 5;
var SmallTopMargin = 186;
var MiddleTopMargin = 180;

var NumSmall = 3;

var FlipTime = 500;

var FlipWaitTime = 5000;

var Easing = "easeOutCubic";

var ContainerName = "TackFlode";

var Parameters = new Array();
var Slides = new Array();


var FlipTimer = null;

var DOMReady = false;
var SlideDataReady = false;


function InitTackFlodesvy(){
	// Only start if *both* are done.
	if(!DOMReady || !SlideDataReady) return false;
	
	

	// Set up al widths and positions, etc.

	var Left = -NumSmall*(SmallWidth+SideMargin) - SmallWidth/2;

	for(var i=0; i<2*NumSmall; ++i){
		var Ratio = Math.max(i-NumSmall, 0)/(NumSmall-1);
		var Width = MiddleWidth*Ratio+SmallWidth*(1-Ratio);
		var Top = MiddleTopMargin*Ratio+SmallTopMargin*(1-Ratio);
		var Opacity = 0.75*Ratio+0.25*(1-Ratio);
		Parameters.push({
			'width': Width+"px",
			'left': Left+"px",
			'top': Top+"px",
			'opacity': Opacity
		});
		Left += Width + SideMargin;
	}

	Parameters.push({
		'width': BigWidth+"px",
		'left': Left+"px",
		'top': 0+"px",
		'opacity': 1
	});
	Left += BigWidth + SideMargin;

	for(var i=0; i<2*NumSmall; ++i){
		var Ratio = (NumSmall-1-Math.min(i, (NumSmall-1)))/(NumSmall-1);
		var Width = MiddleWidth*Ratio+SmallWidth*(1-Ratio);
		var Top = MiddleTopMargin*Ratio+SmallTopMargin*(1-Ratio);
		var Opacity = 0.75*Ratio+0.25*(1-Ratio);
		Parameters.push({
			'width': Width+"px",
			'left': Left+"px",
			'top': Top+"px",
			'opacity': Opacity
		});
		Left += Width + SideMargin;
	}

	// Create a set of images with these parameters.
	BuildSlides();
	

	FlipTimer = setInterval(CreateSwitchHandler(NumSmall*2+1), FlipWaitTime);
}

function BuildSlides(){
	// Clean up.
	$("."+ContainerName).empty();

	// Create the images and apply the parameters.
	for(var i=0; i<Parameters.length; ++i)
		$("<div><img class='Small' src='"+Slides[i%(Slides.length)].SmallImage+"' alt='' /></div>")
			.appendTo("."+ContainerName)
			.css(Parameters[i])
			.bind("click", CreateSwitchHandler(i))
			.one("click", function(){clearInterval(FlipTimer);})
			.children("img").css("width", Parameters[i]["width"])
		;


	// Add in high-res.
	var ActiveSlide = Slides[NumSmall*2%(Slides.length)];
	var Container = $("."+ContainerName+" div").eq(NumSmall*2);
	$("<img class='Big' style='display:none;' src='"+ActiveSlide.Image+"' alt='' title='"+ActiveSlide.Photographer+"' />")
		.appendTo(Container)
		.load(function(){
			$(this)
				.fadeIn(0, function(){
					Container.children().filter("img")
					.eq(0).css("display", "none").end()
					.eq(1).removeClass("Covering");
				});
		});
	
	

	// Replace fullsize event handler.
	Container.unbind();
	Container.bind("click", function(){
		clearInterval(FlipTimer);
	})
	
	$("<div id='FadeLeft'></div>")
		.bind("click", CreateSwitchHandler(NumSmall))
		.one("click", function(){clearInterval(FlipTimer);})
		.appendTo("."+ContainerName);
	$("<div id='FadeRight'></div>")
		.bind("click", CreateSwitchHandler(NumSmall*3))
		.one("click", function(){clearInterval(FlipTimer);})
		.appendTo("."+ContainerName);
		
		
		
	// Info
	$(".TackFlodesvy .Text")
		.css("display", "none")
		.html("<p><a target='_blank' href='"+ActiveSlide.Link+"'><span class='Headline'>"+ActiveSlide.Header+"</span>"+ActiveSlide.Content+"</a></p>")
		.fadeIn(FlipTime);

	// Ad
	if(ActiveSlide.SponsorLink && ActiveSlide.SponsorImageID)
		$(".TackFlodesvy .Ad")
			.css("display", "none")
			.html("<a href='"+ActiveSlide.SponsorLink+"'><img src='"+ActiveSlide.SponsorImage+"' alt=''/></a>")
			.fadeIn(FlipTime);
}

function CreateSwitchHandler(Pos){
	return function(Event){
		// Remove high-res.
		var Container = $("."+ContainerName+" div").eq(NumSmall*2).children("img.Big").remove();

		// Set new target parameters.
		var Elements = $("."+ContainerName+" div");
		var MovingRangeStart = Math.min(Pos-NumSmall, NumSmall);
		var MovingRangeEnd = Math.max(Pos+3, NumSmall*3);
		for(var i=MovingRangeStart; i<=MovingRangeEnd; ++i){
			var ParameterIndex =  i+(2*NumSmall-Pos);
			if(ParameterIndex >= 0 && ParameterIndex < Elements.length){
				Elements.eq(i).animate(Parameters[ParameterIndex], FlipTime, Easing);
				Elements.eq(i).children("img").animate({"width": Parameters[ParameterIndex]["width"]}, FlipTime, Easing);
			}
		}
		
		// Info
		$(".TackFlodesvy .Text").fadeOut(FlipTime);

		// Ad
		$(".TackFlodesvy .Ad").fadeOut(FlipTime);

		setTimeout(CircleImages(Pos), FlipTime);
	}
}


function LoadSlides(Season, Language){
	$.ajax({
		"dataType": "xml",
		"url": "web/customer_specific/028/coverflowxml.php?Season="+Season+"&Language="+Language,
		"success": function(XML){
			// Purge.
			Slides = new Array();
			
			// Fill with image urls.
			$(XML).find("image").each(function(){
				Slides.push({
					"Image": "images.php/440x330/"+($(this).find("PictureID").text())+"/image.jpg",
					"SmallImage": "images.php/300x225/"+($(this).find("PictureID").text())+"/image.jpg",
					"Photographer": $(this).find("Photographer").text(),
					"Header": $(this).find("Header").text(),
					"Content": $(this).find("Content").text(),
					"Link": $(this).find("Link").text(),
					"SponsorImage": "images.php/200x60/"+($(this).find("SponsorPictureID").text())+"/image.jpg",
					"SponsorImageID": $(this).find("SponsorPictureID").text(),
					"SponsorLink": $(this).find("SponsorLink").text()
				});
			});
			
			SlideDataReady = true;
			InitTackFlodesvy();
		}
	});
}


function CircleImages(Pos){
	return function(){
		var Offset = NumSmall*2 - Pos;

		Slides = rotate(Slides, Offset);

		BuildSlides();
	}
}

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/array/rotate [v1.0]
rotate = function(a /*array*/, p /* integer, positive integer rotate to the right, negative to the left... */){ //v1.0
    for(var l = a.length, p = (Math.abs(p) >= l && (p %= l), p < 0 && (p += l), p), i, x; p; p = (Math.ceil(l / p) - 1) * p - l + (l = p))
        for(i = l; i > p; x = a[--i], a[i] = a[i - p], a[i - p] = x);
    return a;
};



// Parse image list XML.
LoadSlides(CurrentSeason, CurrentLanguage);

$(document).ready(function(){
	DOMReady = true;
	InitTackFlodesvy();
});