Event.observe(window, 'load', function() { //SE TILL ATT SIDAN LADDAT KLART
	// 1. SÄTT FOKUS PÅ FÖRSTA INMATNINGSFÄLTET
	Form.focusFirstElement('kontakt');
	
	// 2. LYSSNARE. LYSSNA EFTER SPECIFIKA HÄNDELSER
	Event.observe('kontakt', 'submit', submitForm); // skicka formuläret
	Event.observe('namn', 'blur', function(e){ checkValue('namn'); });
	Event.observe('tel', 'blur', function(e){ checkValue('tel'); });
	//Event.observe('security_code', 'blur', function(e){ checkValue('security_code'); });
	//Event.observe('epost', 'blur', function(e){ checkValue('epost'); });
	Event.observe('meddelande', 'blur', function(e){ checkValue('meddelande'); });
});

	// 3. DEFINIERA FELMEDDELANDEN
	var errMess = new Array();
	errMess['namn'] = "<img alt='' src='../images/form_warning_namn.gif' />";
	//errMess['epost'] = "<img alt='' src='../images/form_warning_epost.gif' />";
	errMess['tel'] = "<img alt='' src='../images/form_warning_tel.gif' />";
  //errMess['epost2'] = "Ogiltig e-postadress";
  //errMess['security_code'] = "Skriv en hälsning";
	errMess['meddelande'] = "<img alt='' src='../images/form_warning_meddelande.gif' />";

	// 4. FUNKTION FÖR ATT VALIDERA INMATNING I ETT FÄLT
	// SVARAR TRUE ELLER FALSE OM VALIDERINGEN LYCKADES
	function checkValue(valName) // tar emot id-namnet på fältet som ska valideras
	{
	
		
		// 4a. VALIDERA ATT FÄLTET ÄR IFYLLT
		var valFlag = ($F(valName))?true:false;
		infoMess = ($F(valName))?"<img alt='' src='../images/form_ok.gif' />":errMess[valName]; // Sätt OK eller felmeddelande
		
		/*
		// 4b. EXTRA VALIDERING AV E-POSTFÄLTET
		if (valName == 'epost' && valFlag)
		{
			if (!(($F(valName).indexOf(".") > 2) && ($F(valName).indexOf("@") > 0))) //ogiltig e-postadress?
			{
				infoMess = errMess['epost2']; valFlag = false; // Sätt felmeddelande
			}
		}
		*/
		
		/*
		// 4b. EXTRA VALIDERING AV E-POSTFÄLTET
		if (valName == 'security_code' && valFlag) {
			if( $_SESSION['security_code'] != ($F(valName)) || empty($_SESSION['security_code'] ) ){
				infoMess = errMess['security_code']; valFlag = false; // Sätt felmeddelande
			}
		}
		*/
		
		// 4c. SKRIV FELMEDDELANDE TILL SKÄRMEN I INFO-ELEMENTET
		Element.update(valName+'info',infoMess); // id-namnet är samma som inmatningsfältet + tillägget info

		// 4d. UPPDATERA CLASS-NAMNET PÅ INFO-ELEMENTET TILL TRUE ELLER FALSE (DET BLIR OLIKA FÄRGER PÅ TEXTEN)
		$(valName+'info').removeClassName('true'); $(valName+'info').removeClassName('false');
		if (valFlag) {$(valName+'info').addClassName('true');} else {$(valName+'info').addClassName('false');}
		return valFlag; // true or false
	}
	
	// 5. SKICKA FORMULÄRET SOM EN AJAX-REQUEST
	function submitForm(e)
	{
		// 5a. STOPPA SKICKANDET (så att vi får kontroll)
		if (e && e.preventDefault)
		e.preventDefault(); // DOM style

		e.cancelBubble = true;
		e.returnValue = false; // IE STYLE

		if (e.stopPropagation) { 	//Firefox style
			e.stopPropagation();
			e.preventDefault();
		}

		// 5b. SÄTT IGÅNG SKICKANDE ENDAST OM ALLA FÄLT VALIDERAR TILL TRUE
		//if ((checkValue('namn')) && (checkValue('security_code')) && (checkValue('meddelande'))){
		if ((checkValue('namn')) && (checkValue('meddelande'))){
			$('kontakt').request({ // Inbyggd Ajax-request
			onCreate: function(){Element.update('content','<img src="../ajaxloader.gif"/>');}, // Ersätt formuläret med en loader-bild
			onComplete: function(){ Element.update('content','<p>Tack för ditt meddelande</p>'); } // Slutmeddelande
			})	
		}
	}