// Slidertool Plus
// Author: Christian Studer <christian.studer@meteotest.ch>

var currentProject;
var currentFullProject;
var currentType;
var currentLocation;
var currentParameter;
var oldParameter;
var currentImagelist;
var currentIndex = 0;
var serviceurl = 'service.php?action=';
var webdirs = {};
var imageWidth = 550;

var typeTranslations = {"gfs_expweb":"GFS",
						"wrf_expweb":"WRF 10km",
						"ensemble":"Ensemble",
						"satellite":"Satellite",
						"gfs":"Meteogram"
						};

var parameterTranslations = {"prec":"Precipitation",
							 "rh":"Relative Humidity",
							 "rain_big":"Precipitation",
							 "temp":"Temperature",
							 "hum350":"Relative Humidity 350hPa",
							 "hum400":"Relative Humidity 400hPa",
							 "hum450":"Relative Humidity 450hPa",
							 "hum500":"Relative Humidity 500hPa",
							 "wind":"Wind",
						     "wind350":"Wind 350hPa",
						     "wind400":"Wind 400hPa",
						     "temp350":"Temperature 350hPa",
						     "temp400":"Temperature 400hPa",
						     "FF350":"Wind 350hPa",
						     "FF400":"Wind 400hPa",
						     "FF500":"Wind 500hPa",
						     "FF700":"Wind 700hPa",
						     "FF850":"Wind 850hPa",
						     "big":"Satellite Overview",
						     "zoom":"Satellite Zoom",
					    	 "Meteogram":"Meteogram",
				    		 "cape":"CAPE",
				    		 "div":"Divergence 200hPa"
							};

$(document).ready(function () {
	// Add event handlers	
	$('button').hover(
			function(){ 
				$(this).addClass("ui-state-hover"); 
			},
			function(){ 
				$(this).removeClass("ui-state-hover"); 
			}
		);
	
	$('#slider').slider();
	
	$('button').click(handleButtons);
	$('#project').change(projectChange);
	$('#location').change(locationChange);
	$('#type').click(typeChange);
	$('#parameter').click(parameterChange);	

	// Initial population and stuff
	populateProjects();
});


function handleButtons() {
	if(! $(this).hasClass('ui-state-disabled')) {
		switch($(this).val()) {
			default:
				break;
			case 'm1h':
				currentIndex -= 1;
				break;
			case 'm3h':
				currentIndex -= 3;
				break;
			case 'm1d':
				currentIndex -= 24;
				break;
			case 'p1h':
				currentIndex += 1;
				break;
			case 'p3h':
				currentIndex += 3;
				break;
			case 'p1d':
				currentIndex += 24;
				break;
		}		
	}
	
	showCurrentImage();
	return false;
}

function projectChange() {
	currentProject = $('#project').val();
	
	// Populate locations field
	$.getJSON(serviceurl + 'getFullProject&project=' + currentProject, function(json) {
		currentFullProject = json;
		$('#location').empty();
		
		for(var id in json) {
			// Special case: Replace 'region'.
			var value = id;
			var name = id;
			var selected = '';
			
			if(name == 'region') {
				name = 'Overview';
				selected = ' selected="selected"';
			}
			
			name = firstLetterUpperCase(name.replace(/_/g, ' '));
			
			$('#location').append('<option value="' + value + '"' + selected + '>' + name + '</option>');
		}
		
		// Enable and fill parameters field
		$('#type').removeAttr('disabled');
		locationChange();	
	});
}


function locationChange() {
	currentLocation = $('#location').val();
	
	// Populate types field
	$('#type').empty();
	var selected = ' selected="selected"';
		
	for(var id in currentFullProject[currentLocation]) {
		$('#type').append('<option value="' + id + '"' + selected + '>' + typeTranslations[id] + '</option>');
		selected = '';
	}
		
	// Load types
	typeChange();
}

function typeChange() {
	currentType = $('#type').val();
	
	// Populate parameters field
	$('#parameter').empty();
	var selected = ' selected="selected"';
	
	if(currentType) {
		for(var id in currentFullProject[currentLocation][currentType]) {
			$('#parameter').append('<option value="' + id + '"' + selected + '>' + parameterTranslations[id] + '</option>');
			selected = '';
		}
	}
	
	// Load parameters
	$('#parameter').removeAttr('disabled');
	parameterChange();
}

function parameterChange() {
	currentParameter = $('#parameter').val();
	
	// Get current image list
	if(currentParameter) {
		$.getJSON(serviceurl + 'getImagelist&project=' + currentProject + '&location=' + currentLocation + '&type=' + currentType + '&parameter=' + currentParameter + '&oldParameter=' + oldParameter + '&oldIndex=' + currentIndex, function(json) {
			currentImagelist = json['imageList'];
			currentIndex = json['newIndex'];
			oldParameter = currentParameter;
			
			// Load initial image
			showCurrentImage();
			
			// Add slider
			$('#slider').slider('destroy');
			$('#slider').slider({
				min: 0,
				max: ($(currentImagelist).length - 1),
				slide: function(event, ui) {
							if(currentImagelist[ui.value]) {
								currentIndex = ui.value;
								showCurrentImage();
							}
						},
				value: currentIndex
			});
		});
	}
}

function noData() {
	// Show no data indicator
	$('#image').html('<img src="design/error.png" alt="No map" />');
}

function populateProjects() {
	// Populate projects field
	$.getJSON(serviceurl + 'getProjects', function(json) {
		for(var id in json) {
			var name = json[id]['name'];
			var display = firstLetterUpperCase(name.replace(/_/g, ' '));
			
			$('#project').append('<option value="' + name + '">' + display + '</option>');
			webdirs[name] = json[id]['webdir'];
		}
		
		// Enable and fill locations field
		$('#location').removeAttr('disabled');
		projectChange();
	});	
}

function showCurrentImage() {
	// Load current image into the div
	if(currentImagelist[currentIndex]) {
		var imageSrc = webdirs[currentProject] + currentImagelist[currentIndex];
		var imageAlt = currentProject + ' - ' + currentLocation + ' - ' + currentType + ' - ' + currentParameter + ' (' + currentIndex + ')';
		var imageTag = '<a href="' + imageSrc + '" rel="lightbox"><img src="' + imageSrc + '" alt="' + imageAlt + '" title="' + imageAlt + ' (Click for larger view.)" width="' + imageWidth + '" /></a>';
		$('#image').html(imageTag);
		$('#image a').lightBox({
				imageLoading: 'http://weblib.meteotest.ch/jquery/plugins/lightbox-0.5/images/lightbox-ico-loading.gif',
				imageBtnClose: 'http://weblib.meteotest.ch/jquery/plugins/lightbox-0.5/images/lightbox-btn-close.gif',
				imageBtnPrev: 'http://weblib.meteotest.ch/jquery/plugins/lightbox-0.5/images/lightbox-btn-prev.gif',
				imageBtnNext: 'http://weblib.meteotest.ch/jquery/plugins/lightbox-0.5/images/lightbox-btn-next.gif',
				imageBlank: 'http://weblib.meteotest.ch/jquery/plugins/lightbox-0.5/images/lightbox-blank.gif',
				txtImage: 'Picture',
				txtOf: 'of'
 	   });
	} else {
		noData();
	}
	
	// Enable/disable buttons
	$('button').addClass('ui-state-disabled');
	if(currentImagelist[currentIndex - 1]) {
		$('button[value="m1h"]').removeClass('ui-state-disabled');
	}
	if(currentImagelist[currentIndex - 3]) {
		$('button[value="m3h"]').removeClass('ui-state-disabled');
	}
	if(currentImagelist[currentIndex - 24]) {
		$('button[value="m1d"]').removeClass('ui-state-disabled');
	}
	if(currentImagelist[currentIndex + 1]) {
		$('button[value="p1h"]').removeClass('ui-state-disabled');
	}
	if(currentImagelist[currentIndex + 3]) {
		$('button[value="p3h"]').removeClass('ui-state-disabled');
	}
	if(currentImagelist[currentIndex + 24]) {
		$('button[value="p1d"]').removeClass('ui-state-disabled');
	}
	
	// Move slider
	$('#slider').slider('value', currentIndex);
}

function firstLetterUpperCase(myString) {
	return myString.substr(0, 1).toUpperCase() + myString.substr(1);
}