function addAreaForecast(area, from, to, text) {
	document.getElementById(area).getElementsByTagName("h3").item(0).innerHTML = area;
	document.getElementById(area).getElementsByTagName("h4").item(0).innerHTML = "From " + from + " to " + to;
	document.getElementById(area).getElementsByTagName("p").item(0).innerHTML = text;
}


function addAreaOption(key, area_presentation) {
	var browser = navigator.appName;
	var b_version = navigator.appVersion;
	var version = parseFloat(b_version);
	var menuOption = document.createElement("option");
	if (browser === "Microsoft Internet Explorer" && (version < 7)) {
		menuOption.value = key;
	} else {
		menuOption.setAttribute("value", key);
	}
	menuOption.innerHTML = area_presentation;
	document.getElementById("area").appendChild(menuOption);
}


function hideAreaAll() {
	$("#Cullercoats").hide();
	$("#Niton").hide();
	$("#Portpatrick").hide();
}


function setAreaAll() {
	document.getElementById("area").value = key[0];
	hideAreaAll();
	$("#Cullercoats").fadeIn();
	$("#Niton").fadeIn();
	$("#Portpatrick").fadeIn();
}


function setAreaCullercoats() {
	document.getElementById("area").value = "Cullercoats";
	hideAreaAll();
	$("#Cullercoats").fadeIn();
}


function setAreaNiton() {
	document.getElementById("area").value = "Niton";
	hideAreaAll();
	$("#Niton").fadeIn();
}


function setAreaPortpatrick() {
	document.getElementById("area").value = "Portpatrick";
	hideAreaAll();
	$("#Portpatrick").fadeIn();
}

$(document).ready(function(){
	//add id to default image
	$('#outlookRegions img:first').attr("id", 'noRegion');
	//add behaviour 
	$("#outlookRegions area").mouseover(function(event){
		$('#'+$(this).attr("class")).show();	  
		event.preventDefault();
	});
	$("#outlookRegions area").mouseout(function(event){
		$('#'+$(this).attr("class")).hide();	
		event.preventDefault();
	});
	$("#outlookRegions area").click(function(event){
		switch($(this).attr("class")){
			case "cullercoatsRegion":		
				setAreaCullercoats();
				break;
			case "nitonRegion":
				setAreaNiton();
				break;
			case "portpatrickRegion":
				setAreaPortpatrick();
				break;
		}
		event.preventDefault();
	});
});

$(document).ready( function() {
  	document.getElementById("area").innerHTML = "";
	var i;
    for (i = 1; i < 4; i++) {
        addAreaForecast(area[i], from[i], to[i], text[i]);
    }
    for (i = 0; i < 4; i++) {
        addAreaOption(key[i], area_presentation[i]);
    }
	$('#sumbitArea').click(function (event) {
	  event.preventDefault();
		var area = document.getElementById("area").value;
		switch (area) {
		  case "Cullercoats":
			setAreaCullercoats();
			break;
		  case "Niton":
			setAreaNiton();
			break;
		  case "Portpatrick":
			setAreaPortpatrick();
			break;
		  default:
			setAreaAll();
			break;
		}
	});
});