// 201110_malaria graphic

$(function() {
	$( "#slider" ).slider(
		{
			min: 1900,
			max: 2011 ,
			value: 1900 ,
			stop: function( event , ui ) {
					sliderEvent( ui.value );
			} ,
			stop: function( event , ui ) {
					sliderEvent( ui.value );
			}
		}
	);
});

var newValue = 0;
var newValueMin = 0;
var newValueMax = 0;

var images = new Array();
images[1900] = '/ucsf/201110_malaria/malaria_map_layer_1900.png';
images[1945] = '/ucsf/201110_malaria/malaria_map_layer_1945.png';
images[1970] = '/ucsf/201110_malaria/malaria_map_layer_1970.png';
images[1990] = '/ucsf/201110_malaria/malaria_map_layer_1990.png';
images[2011] = '/ucsf/201110_malaria/malaria_map_layer_2011.png';


var preload_image = new Image(580 , 266); 
for (year in images){
	preload_image.src = images[ year ]; 
}


function updateFurniture( year ){
	document.getElementById('header_year').innerHTML = year;
	if( year == 2011){
		document.getElementById('legend_planning').style.display = 'block';
	} else {
		document.getElementById('legend_planning').style.display = 'none';
	}
}


function updateAll( value ){
	document.getElementById('image_area').src = images[value];
	updateFurniture( value );
	console.log( 'updateAll: ' +  value );
	$( "#slider" ).slider( "option", "value", value );
}


function sliderEvent( value ){
	var newValue = 0;
	if( images[value] == undefined){
		for (year in images){
			if( value > year){
				newValue = year;
				//difference = (value - year);
				console.log( year + ' -> ' + value );
			}
		}
	
	} else {
		newValue = value;
	}
	
	updateAll( newValue );
}

var ctime;
var yearStart = 1900;
function play( yearStart ){
	updateAll( yearStart ); // go to frame
	
	if( yearStart != 2011){ // start delay 
		var loopRun = 1;
		
		for( year in images){
			if( yearStart < year && loopRun == 1){
				yearStart = year;
				loopRun = 0;
			}
		}
		
		var delay = function() { play( yearStart ) };
		clearTimeout(ctime);
		ctime = setTimeout( delay, 1000);
	}
}