var length = 0;
$(function(){

	length = $('#timeline .event').length;
	drawLandingBackground();
	preload ();
	initTimeline();
	placeBlocks();
	initSwitches();

	$('#timeline .event').click (function (){
 		rollTo($('#timeline .event').index(this)+1);
	});
	$('#data-container .text .text-close').click(function(){
		$(this).parent().toggleClass('collapsed');
	});
	$('#timeline .time-next').click (function (){
		if (currentIndex<length) rollTo(currentIndex+1);
	});
	$('#timeline .time-prev').click (function (){
		if (currentIndex>1) rollTo(currentIndex-1);
	});
	$(window).resize (placeBlocks);

	initScrollers();
	rollTo(1);
});

function drawLandingBackground(){
	var canvas = document.getElementById('grad-background');

	if (canvas.getContext){
		var ctx = canvas.getContext('2d');
		var lingrad = ctx.createRadialGradient (500, 500, 0, 500, 500, 500);
		lingrad.addColorStop(0, '#808080');
		lingrad.addColorStop(1, '#4e4e4e');
		ctx.fillStyle = lingrad;
		ctx.fillRect(0,0,1000,1000);
	} else {
		alert('You need Chrome, Safari or Firefox 1.5+ to see this page.');
	}
}

function preload() {
	var numImages = $('img').length;
	var imagesLoaded = 0;
	$('img').load(function() {
		imagesLoaded++;
		$('.progress-percent').css('margin-right', (100-100*(imagesLoaded/numImages))+'%');
		if (imagesLoaded == numImages)
			$('#preloader').delay(200).fadeOut(1000, start);
	});
}

function start(){
	$('#header')
		.css('top', '20px')
		.css('right', '20px')
		.css('margin-top', 0)
		.css('margin-right', 0);

	$('#bg-wrapper').delay(500).fadeOut(1000, function(){
		$('#header').addClass('item-header');
	});
}

function initTimeline(){
	$('#timeline .event').each(function (index){
		year = $(this).attr('date');
		$(this).css('left', (year-1890)*9);
	});
}

var screenW;
var screenH;
function placeBlocks(){
	screenW = $(window).width();
	screenH = $(window).height();
	$('#images-container').width (($('#images-container .item').length + 1)*screenW/2);
	$('#images-container .item').width (screenW);
	$('#images-container .item').css ('margin-right', (-screenW/2)+'px');
	if (screenW/screenH < 16/9)
		$('.item .item-bg').css('width', 'auto').css('height', '100%').css('margin-left', ((screenW - 16*screenH/9)/2)+'px');
	else
		$('.item .item-bg').css('height', 'auto').css('width', '100%').css('margin-left', 0);
	$('#data-container').width (($('#data-container .item').length + 1)*screenW);
	$('#data-container .item').width (screenW).height (screenH);
}

function initScrollers(){
	$(".body").mCustomScrollbar();
}

var currentIndex = 0;
function rollTo(index) {
	$('#images-container').animate({left: -(index-1)*screenW/2}, 1000);
	$('#data-container').animate({left: -(index-1)*screenW}, 1000);

	$('#images-container .item:nth-child('+index+') .inside-wrapper').fadeIn(1000);
	$('#images-container .item:nth-child('+(index+1)+') .inside-wrapper').fadeOut(1000);
	if (currentIndex!=index && currentIndex+1!=index)
		$('#images-container .item:nth-child('+(currentIndex+1)+') .inside-wrapper').fadeIn(1000);
	currentIndex = index;

	$('#header .item-title').html($('#timeline .event:nth-child('+index+')').attr('alt'));
	$('#header .item-date').html($('#timeline .event:nth-child('+index+')').attr('desc'));

	$('#timeline .event').removeClass('selected');
	$('#timeline .event:nth-child('+index+')').addClass('selected');
	if (currentIndex==1) $('#timeline .time-prev').addClass('disabled'); else $('#timeline .time-prev').removeClass('disabled');
	if (currentIndex==length) $('#timeline .time-next').addClass('disabled'); else $('#timeline .time-next').removeClass('disabled');
}

function initSwitches(){
	$('.switch').click(function (){
		$this = $(this);
		$this.parent().find('.switch').removeClass('selected');
		$this.addClass('selected');
		$item = $this.parent().parent();
		itemNo = $item.parent().find('.item').index($item)+1;
		index = $this.parent().find('.switch').index($this)+1;
		$('#images-container .item:nth-child('+itemNo+') .image-wrapper').stop().fadeOut(1000);
		$('#images-container .item:nth-child('+itemNo+') .image-wrapper:nth-child('+index+')').stop().fadeIn(1000);
	});
}