$(document).ready(function() {

	var bg_pos = [0, 68, 136, 204, 272, 340, 408, 476, 544];
	var year = $('#year-inner');
	year.html('<p class="loading">Loading timeline...</p>');

	var year_width = $('#year-window').width();
	var url = website_url + "admin_plugins/timeline/timeline_json.asp";
	var curr_page = 0;
	var max_page;

	highlightCurrYear();


	$.getJSON(url, function(data) {
		var num_pages = data.html.length;
		max_page = num_pages - 1;
		year.width(year_width * num_pages);
		year.html(data.html.join(""));

	    // give each div.year-page an id
	    $('div.year-page', year).each(function(i) {
			$(this).attr("id", i)
			//.css("position", "absolute")
			.css("left", i * year_width + "px");
	    });
	});


	$('#years a').click(function(){
	    var this_id = $(this).attr("id");
	    var jump_to = parseInt(this_id.substring(3));
		moveTo(jump_to);
	    return false;
	});

	function highlightCurrYear() {
		$('#years a').removeClass("here");
		$('#years #go-' + curr_page).addClass("here");
	}

	function moveTo(idx) {
	    curr_page = idx;
	    var new_pos = 0 - parseInt($('#'+idx, year).css("left"));
	    year.animate({ left : new_pos }, 1000);
	    $('#years').animate(
			{ backgroundPosition : bg_pos[idx] },
			{ duration: 1000, complete: highlightCurrYear }
	    );
	}
});