//Define available view types
var types = new Array();
types[0] = ["All","High Seas Forecasts & Storm Warnings"];
types[1] = ["Storms","Storm Warnings"];
types[2] = ["Forecast","High Seas 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[i]+'<\/option>');
		}else{
			$('#seaArea').append('<option value="'+key[i]+'">'+area[i]+'<\/option>');
		}
		
		//create tintpanels for all areas apart from all
		if (key[i] !== "All") {
			var topPanel = "<div id='"+key[i]+"ForecastAndWarning' class='tintpanel forecastAndWarning'><h2 class='ghead470 jqCorner";
			//add a warning class to the title if storm warnings are in force
			if (storm_in_force[i] > 0) {
				topPanel += " warningHeading'>"+area[i]+"<\/h2>";
			}else{
				topPanel += "'>"+area[i]+"<\/h2>";
			}	
			var stormWarning = "<div class='stormWarning";
			if (!(storm_in_force[i] > 0)) {
				//If a storm warning isn't in force add a class to the div.
				stormWarning += " stormNotInForce";
			}
			stormWarning += "'><h3>Storm warnings - Issued: "+stormIssueTime[i]+"<\/h3><p>"+storm[i]+"<\/p><\/div>";
			var areaForecast = "<div class='areaForecast'><h3>Area Forecast - Issued: "+highseasIssueTime[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
			$('#forecastAndWarnings').append(topPanel+stormWarning+areaForecast+endPanel);
		}
	}
	$('#forecastAndWarnings').append("<div id='noStormsMessage' style='display:none;'><p class='bold'>There are no storm warnings currently in force for the selected sea area.<\/p><\/div>");
	//Add outlook text
	$('#outlook').append("<h2>Outlook until " + outlook_until + "<\/h2>");
	$('#outlook').append("<p>" + outlook + "<\/p>");
	$('#outlook').append("<p>" + infotext + "<\/p>");
	
	//change visible information based on current options
	changeVis();
	//alert(address);
	//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 storm warnings and forecasts
	$('.stormWarning').hide();
	$('.areaForecast').hide();
	//alert(type);
	switch (type){
		case "All":
			//show all area forecasts and current storms
			$('.stormWarning').show();
			$('.stormNotInForce').hide();
			$('.areaForecast').show();
			//call showArea to show / hide the relevant areas.
			showArea(area);
			break;
		case "Storms":
			//show all storm warnings
			$('.stormWarning').show();
			//mark areas with no storm warning
			$('.stormNotInForce').each(function (){
				$(this).parent().addClass("hideForStormsOnly");
			});
			//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,stormsOnly){
	//hide all areas
	$('.forecastAndWarning').hide();
	//hide no storms message
	$('#noStormsMessage').hide();
	if(stormsOnly){
		//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
			$('.forecastAndWarning').each(function (){
				if(!($(this).hasClass("hideForStormsOnly"))){
					noDivsShown = false;
					$(this).fadeIn();
				}
			});
		}else{
			//Show a specific region if they have a gale warning
			if(!($('#'+area+"ForecastAndWarning").hasClass("hideForStormsOnly"))){
				$('#'+area+"ForecastAndWarning").fadeIn();
				noDivsShown = false;
			}
		}
		if(noDivsShown){
			$('#noStormsMessage').fadeIn();
		}
	}else{
		//Check if all is selected
		if(area === "All"){
			//Show all regions
			$('.forecastAndWarning').fadeIn();
		}else{
			//Show a specific region
			$('#'+area+"ForecastAndWarning").fadeIn();
		}
	}
}