var blurbTemplate = '<h4>{{date}}</h4><h3>{{blurb}}</h3>';
var detailTemplate = 	'<div id="container" style="width: {{width}}px">'+
						'<p id="video" style="width: {{width}}px; height: {{height}}px"><img src="/_events/{{image}}" /></p>'+
						'</div>'+
						'<h5>{{description}}</h5>';

var blurbIdx = -1;
var eventCount = events.length;
var eventIdx = -1;
var eventWidth = 4;
var pageHeight = $('#page').height();

$(function(){
	
	$('#detail-overlay').height(pageHeight).hide();
	
	$(events).each(function(i)
	{
		var eventLink = $('<a href="#" class="'+this.page+'" id="'+i+'">&middot;</a>').appendTo(this.decade);
	});

});

$('.events a').live(
{
	click: function(e)
	{
		e.preventDefault();
		loadDetail(this);
	},
	
	mouseover: function(e)
	{
		e.preventDefault();
		setBlurb(this);
	}
});

$('#next').click(function(e)
{
	e.preventDefault();
	
	if (++eventIdx >= eventCount) eventIdx = 0;
	
	$('.events a').eq(eventIdx).mouseover().click();
});

$('#prev').click(function(e)
{
	e.preventDefault();
		
	if (0 > --eventIdx) eventIdx = eventCount-1;
	
	$('.events a').eq(eventIdx).mouseover().click();
});

$('#close').click(function(e)
{
	e.preventDefault();
	
	closeDetail();
});

$('#detail-overlay').click(function(e)
{
	e.preventDefault();
	
	closeDetail();
});

setBlurb = function(event)
{
	var id = $(event).attr('id');
	var page = $(event).attr('class');
	var offset = $(event).offset().left;
	    	
	if (blurbIdx != id)
	{
	    blurbIdx = id;
	    
	    $('#timeline-blurb')
	    	.hide()
	    	.removeClass('right home tv fest live')
	    	.addClass(page)
	    	.offset({ left: 0 })
	    	.html(Mustache.to_html(blurbTemplate, { date: events[id].date, blurb: events[id].blurb } ));
	    
	    if (events[id].align == 'right')
	    {
	    	$('#timeline-blurb').addClass('right').offset({ left: offset - $('#timeline-blurb').width() });
	    }
	    else
	    {
	    	$('#timeline-blurb').offset({ left: offset })
	    }
	    			
	    $('#timeline-blurb').fadeIn(200);
	}
}

loadDetail = function(event)
{
	$('.selected').removeClass('selected');
	$(event).addClass('selected');
	
	$('#detail-overlay').fadeTo(500, .975);
	
	var id = $(event).attr('id');
	
	eventIdx = id;		
	
	$('#detail')
	    .hide()
	    .html(Mustache.to_html(detailTemplate, { image: events[id].image[0], width: events[id].image[1], height: events[id].image[2], description: events[id].description } ));
	
	if (events[id].video)
	{
	    jwplayer('video').setup({
	    	flashplayer: '/js/player.swf',
	    	file: '/_events/'+events[id].video[0],
	    	image: '/_events/'+events[id].image[0],
	    	width: events[id].video[1],
	    	height: events[id].video[2],
	    	skin: '/images/glow.zip'
	    });
	}
	
	detailTop = pageHeight - events[id].image[2] - 100;
	
	$('#detail').center().css('top', detailTop).fadeIn(200);
}

closeDetail = function()
{	
	$('#detail').fadeOut();
	$('#detail-overlay').fadeOut();
	$('#timeline-blurb').fadeOut();
	$('.selected').removeClass('selected');
}