// JavaScript Document

var stepSize = 92; // Width of a single history box / 4
var trainSlide, siteCookie; // Global variables, as it were

Element.Events.extend({
	'wheelup': {
		type: Element.Events.mousewheel.type,
		map: function(event){
			event = new Event(event);
			if (event.wheel >= 0) this.fireEvent('wheelup', event)
		}
	},
	'wheeldown': {
		type: Element.Events.mousewheel.type,
		map: function(event){
			event = new Event(event);
			if (event.wheel <= 0) this.fireEvent('wheeldown', event)
		}
	}
});

window.addEvent('load', function() {
	var xmldata = new Ajax('timeline.xml',{method:'get'});
	var xsldata = new Ajax('timeline.xsl',{method:'get'});
	var group = new Group(xmldata, xsldata);
	group.addEvent('onComplete', function() {
		$('bar').setHTML('Parsing XML Data...');
		var xml = xmlParse(xmldata.response.text);
		var xslt = xmlParse(xsldata.response.text);
		
		$('bar').setHTML('Transforming XML Data...');
		var html = xsltProcess(xml,xslt);
		
		/* Find all the images and put them into an array
		$('bar').setHTML('Preloadng Images...');
		var images = [];
	
		new Asset.images(images, {
			onProgress: function(i) {
				$('bar').setHTML('Preloading Images: ' + (i + 1) + ' / ' + images.length);
			},
			onComplete: function() {
				$('bar').setHTML('Images Loaded!');
				// Do other stuff here
			}
		});*/
		
		$('bar').setHTML('Rendering...');
		$('time_box').setHTML(html);
		setTimeout("$('time_frame').effect('height',{duration:500}).start(473)",1000);
		
		// Count the number of records, then set the box to the necessary width
		var numRecords = $('time_box').getElements('div[class=history]').length;
		$('time_box').setStyle('width',(stepSize*4*numRecords)+'px');
		
		activateSlider(numRecords);
		
		$('progress').setHTML('Loading Complete!');
		$('progress').effect('color',{duration:300}).start('#009900');
		setTimeout("$('progress').effect('color',{duration:1000}).start('#000000')",2000);

		// Show the instruction box if there is no Cookie, or if it's set to "yes"
		if (Cookie.get("showing") != "no") {
			$('overlay').effect('opacity').start(0,1);
			Cookie.set("showing","yes");
		}
		
		// Set the train to the current position in case the page reloaded to a scrolled position
		trainSlide.set($('time_frame').scrollLeft/stepSize);
	});
	
	$('bar').setHTML('Downloading XML Data...');
	xmldata.request();
	xsldata.request();
	
	// Activate the mouse wheel over the time frame
	$('time_frame').addEvents({
		'wheelup': function(e){wheelEventHandler(e,-1);},
		'wheeldown': function(e){wheelEventHandler(e,1);}
	});

});
	
function wheelEventHandler(e,dir) {
	e = new Event(e).stop();
	var pos = $('time_frame').scrollLeft + (stepSize*dir);
	trainSlide.set(pos/stepSize);
}

function activateSlider(rec) {
	trainFx = new Fx.Style($('train'), 'left', {duration: 300, wait: false});
	trainSlide = new Slider($('traintrack'), $('train'), {
		steps: rec * 4,
		onTick: function(pos) {
			trainFx.custom(pos);
		},
		onChange: function(pos) {
			$('time_frame').scrollTo(pos*stepSize,0);
		}
	});
}

function toggleInstructions() {
	if (Cookie.get("showing") == "yes") {
		Cookie.set("showing", "no");
		$('overlay').effect('opacity').start(1,0);
	} else {
		Cookie.set("showing", "yes");
		$('overlay').effect('opacity').start(0,1);
	}
}