/* Country Roads - Your Area - Richard Assar  */

/* Globals */

var overlay;
var content;
var content_data;
var background;
var data;
var close_button;
var title;
var casualty_count;

var gender_a;
var age_a;
var vehicles_a;
var day_a;
var time_a;
var year_a;
	
var active = false;
var expand_duration = 0.5;
var selected = ''

var colors = [
	{r:0, g:93, b:127},
	{r:101, g:214, b:230},
	{r:93, g:142, b:1},
	{r:220, g:226, b:100},
	{r:154, g:35, b:215},
	{r:213, g:171, b:235},
	{r:254, g:186, b:0},
	{r:254, g:239, b:170},
	{r:218, g:11, b:81},
	{r:255, g:133, b:174},
	{r:1, g:214, b:60},
	{r:142, g:237, b:171}
];

/* Animation for resizing */

Effect.Resize = Class.create();
		
Object.extend(Object.extend(Effect.Resize.prototype, Effect.Base.prototype), {	
	startWidth : 0,
	range : 0,
		
	initialize: function(element) {					
		var options = arguments[1];														
		this.element = $(element);
					
		this.startWidth = this.element.getWidth();		
		this.range = options.endWidth - this.startWidth;
		
		this.start(options);
	},
	
	update : function(position) {																														
		var width = this.startWidth + this.range * position;
		
		this.element.setStyle({			
			'width' : width + 'px'
		});								
	}		
});

/* */

function getUrlVars()
{
	var vars = [], hash;
	
	var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
	
	for(var i = 0; i < hashes.length; i++)
	{		
		hash = hashes[i].split('=');
		
		vars.push(hash[0]);
		
		vars[hash[0]] = hash[1];	
	}
		 	
	return vars;
}



/* */

function hide() {
	if(active) {
		active = false;
		
		content_data.fade({ duration : expand_duration / 2, from : 1, to : 0, afterFinish : function() {
				content_data.update();			
			}
		});				
				
		background.appear({ duration : expand_duration, from : 1, to : 0 });				
		content.appear({ duration : expand_duration, from : 1, to : 0 });					
		close_button.fade({ duration : expand_duration, from : 1, to : 0 });				
		$("rsLogo").remove();
		new Effect.Resize($('danger-road-map'), { duration : expand_duration, endWidth : 680, afterFinish : function() { 							
				$('content-related').appear({ duration : 0.25, from : 0, to : 1 });
			} 			
		});							
	}
}

function show() {
	if(!active) {
		active = true;		
		var rsLogo = new Element("a", {href: "http://www.roadsafetyanalysis.org/", id: "rsLogo", target: "_blank"});
		var rsLogoImg = new Element("img", {src: "/release/images/country-roads/icons/road-safety-analysis.gif", id: "rsLogo"});
		rsLogo.insert(rsLogoImg);
		$('content-related').fade({ duration : expand_duration / 4, from : 1, to : 0, afterFinish : function() {
				close_button.appear({ duration : expand_duration, from : 0, to : 1 });				
				background.appear({ duration : expand_duration, from : 0, to : 1 });				
				content.appear({ duration : expand_duration, from : 0, to : 1 });																
			
				new Effect.Resize($('danger-road-map'), { duration : expand_duration, endWidth : 970, afterFinish : function() { 
						$('danger-road-map').insert(rsLogo)						
					//	$('danger-road-map').appear({ duration : expand_duration, from : 0, to : 1 });
					} });
				
						
				
				activateMenuItem(year_a, function() { displayData(data.years, 'bar'); });																														
			} 		
		});
	}
}

/* */


function displayData(source, type) {		
	var key_list = new Element('ul', { 'class' : 'key' });
	
	var data_string = '';	
	
	var index = 0;
		
	for(key in source)
	{			
		key_list.insert(
			new Element('li')
				.update(key + ': ' + source[key])
				.insert(
					new Element('span')
						.setStyle({ background : 'rgb(' + colors[index].r + ',' + colors[index].g + ', ' + colors[index].b + ')'})
				)
			);
						
		data_string += source[key] + ', ';		
				
		index++;
	}							
	
	switch(type) {
		case 'bar':					
			content_data.update(
				new Element('img', {
					'src' : '/release/includes/php/country-roads/bar-chart.php?data=' + data_string + '&width=340&height=280'
				})	
			);
			
			break;
			
		case 'pie':
			content_data.update(
				new Element('img', {
					'src' : '/release/includes/php/country-roads/pie-chart.php?data=' + data_string + '&width=280&height=280'
				})
			);
			
			break;
	}	
	
	content_data.insert(key_list);														
}

/* */

function displayYearData() { selected='year'; displayData(data.years, 'bar'); }
function displayGenderData() { selected='gender'; displayData(data.gender, 'pie'); }
function displayWeekDayData() {	selected='day'; displayData(data.weekday, 'pie'); }
function displayAgeData() {	selected='age'; displayData(data.ages, 'bar'); }
function displayVehicleData() {	selected='vehicle'; displayData(data.types, 'bar');	}
function displayTimeOfDayData() { selected='time'; displayData(data.timeofday, 'pie'); }

/* */

function activateMenuItem(element, callback) {
	if(!element.up().hasClassName('active')) {
		element.up('ul').childElements().each(function(e) {
			e.removeClassName('active');		
		});	
		
		element.up().addClassName('active');		
		
		content_data.fade({ duration : expand_duration / 2, from : 1, to : 0, afterFinish : function() {
				callback();
				
				content_data.appear({ duration : expand_duration / 2, from : 0, to : 1 });
			}
		});		
	}
}

/* */

function updateAccidentData() {
	title.update(data.authority_name);
	casualty_count.update(data.casualty_count + " fatal and<br/>serious injuries");
}

function insertAccidentData() {									
	year_a = new Element('a', { href : '#' }).update('Year').observe('click', function(event) { 
		event.preventDefault();
		
		activateMenuItem(event.element(), displayYearData);						
	});
	
	var year_li = new Element('li')
		.insert(
			year_a
		);
		
	/* */
	
	gender_a = new Element('a', { href : '#' }).update('Gender').observe('click', function(event) { 
		event.preventDefault();
		
		activateMenuItem(event.element(), displayGenderData);				
	});
	
	var gender_li = new Element('li')
		.insert(
			gender_a
		);
		
	/* */
	
	time_a = new Element('a', { href : '#' }).update('Time of day').observe('click', function(event) { 
		event.preventDefault();
		
		activateMenuItem(event.element(), displayTimeOfDayData);										
	});
	
	var time_li = new Element('li')
		.insert(
			time_a
		);

	/* */
						
	age_a  = new Element('a', { href : '#' }).update('Age').observe('click', function(event) { 
		event.preventDefault();
		
		activateMenuItem(event.element(), displayAgeData);				
	});				
	
	var age_li = new Element('li')
		.insert(
			age_a
		);
		
	/* */
		
	vehicles_a = new Element('a', { href : '#' }).update('Mode of Transport').observe('click', function(event) { 
		event.preventDefault();
		
		activateMenuItem(event.element(), displayVehicleData);				
	});
	
	var vehicles_li = new Element('li')
		.insert(
			vehicles_a
		);
		
	/* */
		
	day_a = new Element('a', { href : '#' }).update('Day of week').observe('click', function(event) { 
		event.preventDefault();
		
		activateMenuItem(event.element(), displayWeekDayData);											
	});
	
	var day_li = new Element('li')
			.insert(
				day_a
			)
	
	/* */
			
	time_a = new Element('a', { href : '#' }).update('Time of day').observe('click', function(event) { 
		event.preventDefault();
		
		activateMenuItem(event.element(), displayTimeOfDayData);				
	});
	
	var time_li = new Element('li')
		.insert(
			time_a
		);
			
	/* */
	title = new Element('h2').update();
	casualty_count = new Element('p', { 'class' : 'casualties' }).update();
	
	content
		.update(title)		
		.insert(new Element('p', { 'class' : 'subtitle' }).update('Between 2005 and 2009, there have been:'))
		.insert(casualty_count)
		.insert(new Element('p', { 'class' : 'breakdown' }).update('Click a category to see further breakdown:'))
		.insert(
			new Element('ul', { 'class' : 'menu' })
				.insert(year_li)
				.insert(gender_li)
				.insert(age_li)
				.insert(vehicles_li	)
				.insert(day_li)
				.insert(time_li)				
		);
}

function getData() {
	if($('authority').getValue() == '' && $('postcode').getValue() == '') {
		$('authority').addClassName('error');
		$('postcode').addClassName('error');
	} else {									
		new Ajax.Request("/release/includes/php/country-roads/danger-road-map.php", {					
			method : "post",
			parameters : { postcode : $F('postcode'), authority : $F('authority') } ,
			onSuccess: function(transport) {							   							
				data = transport.responseJSON;				
													
				if(data.error !== undefined) {
					$('postcode').addClassName('error');
				
					hide();

					$$("div.background").each(function(div){
						var errorText = new Element('p', { 'class': 'scottish-only'}).update("Search available for Scottish postcodes only");
						div.insert({
							top: errorText
						});
					});	
				} else {																		
					updateAccidentData();
					$$("p.scottish-only").each(function(p){
						p.remove();
					});	
					if(active) {
						content_data.fade({ 
							duration : expand_duration, 
							from : 1, 
							to : 0, 
							afterFinish : function() {																											
								switch(selected) {
									case 'year':
										displayData(data.years, 'bar');
										break;
										
									case 'gender':
										displayData(data.gender, 'pie');
										break;
										
									case 'day':
										displayData(data.weekday, 'pie');
										break;
										
									case 'age':
										displayData(data.ages, 'bar');
										break;
								
									case 'vehicle':
										displayData(data.types, 'bar');
										break;
										
									case 'time':
										displayData(data.timeofday, 'pie');
										break;
										
									default:
										selected = 'year';
										displayData(data.years, 'bar');
										break;
								}
																
								content_data.appear({ duration : expand_duration, from : 0, to : 1 });
								$$("div#overlay div").each(function(contents){
									contents.show();
								});
							}
						});		
					} else {											
						show();		
					}																
				}
			}
		});
	}
}

function init() {
	// Insert the containers
	$('danger-road-map').insert(
		new Element('div', { 'class' : 'background' })
	)
	
	content = new Element('div', { 'class' : 'content' }).hide();
	
	content_data = new Element('div', { 'class' : 'content_data' }).hide();
	
	background = new Element('div', { 'class' : 'background' }).hide();
	
	close_button = new Element('a', { 'class' : 'close', 'href' : '#' })
		.hide()
		.observe('click', function(event) { event.preventDefault(); hide(); });
	
	overlay = new Element('div', { 'id' : 'overlay' })
		.insert(background)
		.insert(content)
		.insert(content_data)
		.insert(close_button);
									
 	$('danger-road-map').insert(overlay);
		
	// Observe form submission	
	$('location').observe('submit', function(event) {
		event.preventDefault();
		
		getData();						
	});
	
	// Clear fields and error status
	$('postcode')
		.observe('focus', function() {
			$('authority').setValue('');										
		})
		.observe('keydown', function() {
			$('authority').removeClassName('error');
			$('postcode').removeClassName('error');	
		});
	
	$('authority')
		.observe('focus', function() {
			$('postcode').setValue('');				
		})
		.observe('change', function() {
			$('authority').removeClassName('error');
			$('postcode').removeClassName('error');	
						
			getData();			
		});	
	insertAccidentData();
}

/* */

document.observe('dom:loaded',function(){		
	var get = getUrlVars();
	
	if(get['postcode']) {
		$('postcode').setValue(unescape(get['postcode']));
		
		getData();
	} else {				
		$('authority').setValue('');												
		$('postcode').setValue('');		
	}
	
	init();		
});