//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";
	//Extract parmas from query string
	for (i in queryStr){
		if (queryStr[i].split('=')[0] === "area" && queryStr[i].split('=')[1] !== "All") {
			area = queryStr[i].split('=')[1];
			try{
				area = key[parseInt(area)];
			}catch(err){
				area = "All";
			}
		}
	}
	//Reload the page with the hash (#) string 
	location.replace(location.pathname + "#" + area);
}
$(document).ready(function(){
	//Clear place holder option
	$('#Area').html('');
	//Check for an anchor reference and goto it if relevant.
	address = location.hash;
	if (address !== ""){
		//remove the # character (\ to escape it)
		address = address.replace('\#','');
	}
	
	for (var i=0;i<area.length;i++) {
		//populate the area dropdown, and set selected
		if (address !== "" && key[i] === address){
			$('#Area').append('<option selected="selected" value="'+key[i]+'">'+area_presentation[i]+'<\/option>');
		}else{
			$('#Area').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]+"InshoreForecast' class='tintpanel inshoreForecast'><h2 class='ghead470 jqCorner"
			//add a classto the title if a warning is in force
			if (strong_wind_in_force[i] > 0) {
				topPanel += " warningHeading'>"+area_presentation[i]+"<\/h2>";
			}else{
				topPanel += "'>"+area_presentation[i]+"<\/h2>";
			}
			//create a storm warning message if a warning is in force.
			var stormWarning = "";
			if (strong_wind_in_force[i] > 0) {
				stormWarning = "<p class='strongWinds'><strong>Strong winds are forecast<\/strong><\/p>";
			}
			//create html for the forecast and outlook
			if (id[1] != 17) {
			  var inshoreForecast = "<p>For coastal areas up to 12 miles offshore from "+is_issue[i]+" until "+is_expiry[i]+"<\/p>"; 
			   inshoreForecast += "<h3>"+is_header[i]+"<\/h3>";
			  inshoreForecast += "<dl><dt>Wind<\/dt><dd>"+is_wind[i]+"<\/dd><dt>Sea State<\/dt><dd>"+is_seastate[i]+"<\/dd><dt>Weather<\/dt><dd>"+is_weather[i]+"<\/dd><dt>Visibility<\/dt><dd>"+is_visibility[i]+"<\/dd><\/dl>";
			  var inshoreOutlook = "<h3>"+ol_header[i]+"<\/h3>";
			  inshoreOutlook += "<dl><dt>Wind<\/dt><dd>"+ol_wind[i]+"<\/dd><dt>Sea State<\/dt><dd>"+ol_seastate[i]+"<\/dd><dt>Weather<\/dt><dd>"+ol_weather[i]+"<\/dd><dt>Visibility<\/dt><dd>"+ol_visibility[i]+"<\/dd><\/dl>";
			  
			  var endPanel = "<\/div>";
			}
			if (id[i] == 17) {
			  var inshoreForecast = "<h3><a href=shetland.html title='Detailed forecast for Shetland Isles and 60 nm radius'>Shetland Isles and 60nm radius</a><\/h3>";
			  var inshoreOutlook = "&nbsp;";
			}
			//Add the created html
			$('#inshoreForecasts').append(topPanel+stormWarning+inshoreForecast+inshoreOutlook+endPanel);
		}
	}
	//Set the range to display
	showArea(document.getElementById("Area").value);
	
	//Override the href link and change the displayed forecasts by area. (go button)
	$('#submitArea').click(function(event){
		event.preventDefault();
		var selected = document.getElementById("Area").value;
		//get value from the dropdown box and call showArea
		showArea(selected);
	});
	
	//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"){
			showArea("All")
		}else{
			//use the href to get the key value and call showArea
			target = key[parseInt(target.replace("#",""),10)];
			showArea(target);
		}
	});
});

function showArea(area){
	//Update the hash (#) anchor
	location.hash="#"+area;
	//set the dropdownbox value to match the displayed area
	document.getElementById('Area').value = area;
	//Check if all is selected
	if(area === "All"){
		//Show all regions
		$('.inshoreForecast').hide();
		$('.inshoreForecast').fadeIn();
	}else{
		//Show a specific region
		$('.inshoreForecast').hide();
		$('#'+area+"InshoreForecast").fadeIn();
	}
}