//Define available view types
var types = new Array();
types[0] = ["All","Shipping Forecasts & Gale Warnings"];
types[1] = ["Gales","Gale Warnings"];
types[2] = ["Forecast","Shipping Forecasts"];

//Remove any query string if it exists
if (location.search !== ""){
	//?area=Rockall&x=11&y=11&type=Storms
	var queryStr = location.search.split('&');
	//remove the first ? character
	queryStr[0] = queryStr[0].replace('?','');
	//Set defaults to fall back on
	var area = "All";
	var type = "All";
	//Extract parmas from query string
	for (i in queryStr){
		if (queryStr[i].split('=')[0] === "area") {
			area = queryStr[i].split('=')[1];
		}else if (queryStr[i].split('=')[0] === "type") {
			type = queryStr[i].split('=')[1];
		}
	}
	//Reload the page with the hash (#) string 
	location.replace(location.pathname + "#" + type + "~" +area);
}
$(document).ready(function(){
	//Clear place holder options
	$('#seaArea').html('');
	$('#forecastType').html('');
	//Check for an anchor reference and process it if there is one
	address = location.hash;
	if (address !== ""){
		//Read the first two values into an array
		address = address.split('~',2);
		//remove the # character (\ to escape it)
		address[0] = address[0].replace('\#','');
	}
	for (var j=0;j<types.length;j++) {
		//populate the forecast types dropdown, adding selected if it was found in the address
		if (address !== "" && types[j][0] === address[0]){
			$('#forecastType').append('<option selected="selected" value="'+types[j][0]+'">'+types[j][1]+'<\/option>');
		}else{
			$('#forecastType').append('<option value="'+types[j][0]+'">'+types[j][1]+'<\/option>');
		}
	}
	for (var i=0;i<area.length;i++) {
		//populate the area dropdown, adding selected if it was found in the address
		if (address !== "" && key[i] === address[1]){
			$('#seaArea').append('<option selected="selected" value="'+key[i]+'">'+area_presentation[i]+'<\/option>');
		}else{
			$('#seaArea').append('<option value="'+key[i]+'">'+area_presentation[i]+'<\/option>');
		}
		//create tintpanels for all areas apart from all
		if (key[i] !== "All") {
		
			var topPanel = "<div id='"+key[i]+"ForecastAndGale' class='tintpanel forecastAndGale'><h2 class='ghead470 jqCorner";
			//add a warning class to the title if gale warnings are in force
			if (gale_in_force[i] > 0) {
				topPanel += " warningHeading'>"+area_presentation[i]+"<\/h2>";
			}else{
				topPanel += "'>"+area_presentation[i]+"<\/h2>";
			}		
			var galeWarning = "<div class='galeWarning";
			if (!(gale_in_force[i] > 0)) {
				//If a storm warning isn't in force add a class to the div.
				galeWarning += " galeNotInForce";
			}
			galeWarning += "'><h3>Gale warnings - Issued: "+galeIssueTime[i]+"<\/h3><p>"+gale[i]+"<\/p><\/div>";
			var areaForecast = "<div class='areaForecast'><h3>Shipping Forecast - Issued: "+shipIssueTime[i]+"<\/h3>"
			areaForecast += "<dl><dt>Wind<\/dt><dd>"+wind[i]+"<\/dd><dt>Sea State<\/dt><dd>"+seastate[i]+"<\/dd><dt>Weather<\/dt><dd>"+weather[i]+"<\/dd><dt>Visibility<\/dt><dd>"+visibility[i]+"<\/dd><\/dl><\/div>";
			var endPanel = "<\/div>";
			//Add the created html
			$('#forecastAndGales').append(topPanel+galeWarning+areaForecast+endPanel);
			$('#forecastAndGales').append("<div id='noGalesMessage' style='display:none;'><p class='bold'>There are no gale warnings currently in force for the selected sea area.<\/p><\/div>");
		}
	}
	//Set the information to display initially
	changeVis();
	//Override the href link and change the displayed forecasts. (go button)
	$('#submitArea').click(function(event){
		event.preventDefault();
		changeVis();
	});
		
	//Override the href link and change the displayed forecasts. (go button)
	$('#submitType').click(function(event){
		event.preventDefault();
		changeVis();
	});
	
	//Override the href link and change the displayed forecasts by area. (area map)
	$('#Map area').click(function(event){
		
		event.preventDefault();
		var target = $(this).attr("href");
		//show all areas if the href isn't a specific area
		if (target === "#00"){
			target = "All";
		}else{
			//use the href to get the key value
			target = key[parseInt(target.replace("#",""),10)];
		}
		//set the dropdownbox value to match the displayed area
		document.getElementById('seaArea').value = target;
		changeVis();
	});
});
function changeVis(){
	//get dropdown menu values and call showType
	var type = document.getElementById("forecastType").value;
	var area = document.getElementById("seaArea").value;
	showType(type,area);
}
function showType(type,area){
	//update the anchor
	location.hash="#"+type+"~"+area;
	//hide all gales and forecasts
	$('.galeWarning').hide();
	$('.areaForecast').hide();
	switch (type){
		case "All":
			//show all area forecasts and current gales
			$('.galeWarning').show();
			$('.galeNotInForce').hide();
			$('.areaForecast').show();
			//call showArea to show / hide the relevant areas.
			showArea(area);
			break;
		case "Gales":
			//show all gale warnings
			$('.galeWarning').show();
			//mark areas with no gale warning
			$('.galeNotInForce').each(function (){
				$(this).parent().addClass("hideForGalesOnly");
			});
			//call showArea to show / hide the relevant areas.
			showArea(area,true);
			break;
		case "Forecast":
			//show all area forecasts
			$('.areaForecast').show();
			//call showArea to show / hide the relevant areas.
			showArea(area);
			break;
	}
}
function showArea(area,galesOnly){
	//hide all areas
	$('.forecastAndGale').hide();
	//hide no storms message
	$('#noGalesMessage').hide();
	if(galesOnly){
		//remember if any regions are displayed
		var noDivsShown = true;
		//Check if all is selected
		if(area === "All"){
			//Show all regions if they have a gale warning
			$('.forecastAndGale').each(function (){
				if(!($(this).hasClass("hideForGalesOnly"))){
					$(this).fadeIn();
					noDivsShown = false;
				}
			});
		}else{
			//Show a specific region if they have a gale warning
			if(!($('#'+area+"ForecastAndGale").hasClass("hideForGalesOnly"))){
				$('#'+area+"ForecastAndGale").fadeIn();
				noDivsShown = false;
			}
		}
		if(noDivsShown){
			$('#noGalesMessage').fadeIn();
		}
	}else{
		//Check if all is selected
		if(area === "All"){
			//Show all regions
			$('.forecastAndGale').fadeIn();
		}else{
			//Show a specific region
			$('#'+area+"ForecastAndGale").fadeIn();
		}
	}
}