$(document).ready(function() {

//for toggling the divs (show and hide, binds the event to the click)
$('#firstdiv').hide();//hide it first
$('#seconddiv').hide();//hide it first
$('#thirddiv').hide();//hide it first
$('#fourthdiv').hide();//hide it first



$('#target1').toggle(function() {
  $('#firstdiv').fadeIn(500);
}, function() {
 $('#firstdiv').fadeOut(500);
});

$('#target2').toggle(function() {
  $('#seconddiv').fadeIn(500);
}, function() {
 $('#seconddiv').fadeOut(500);
});

$('#target3').toggle(function() {
  $('#thirddiv').fadeIn(500);
}, function() {
 $('#thirddiv').fadeOut(500);
});

$('#target4').toggle(function() {
  $('#fourthdiv').fadeIn(500);
}, function() {
 $('#fourthdiv').fadeOut(500);
});

//end toggling



//clickable divs
$("div.clickable").click( //this makes divs clickable (including any images in them), specify the url in the page , in the <div> tag. (in gallery.php for example)
function()
{
    window.location = $(this).attr("url");
});
//end clickable divs





$('.box').mouseover(function() { //when mouse over the box div change the border
 $(this).removeClass("box").addClass("boxhighlight");
});

$('.box').mouseleave(function() { //when mouse leaves set it back again
 $(this).removeClass("boxhighlight").addClass("box");
 });


$('#end').hide();// for hiding ajami desc then showing the rest of it.

 $('#more').click(function() { 
 $('#end').fadeIn(2000);
 });

$('#less').click(function() { 
 $('#end').fadeOut(1000);
 });


//for contact form
 $('.error').hide(); //hide error messages in contact form and mailing list form
 $('#successmessage').hide(); //hide success message


$('.text-input').focus(function() {//when focus on a field change the class to focus
$(this).removeClass('text-input').addClass('focus');
});

$('.text-input').blur(function() {//when moving away change the class back
 $(this).removeClass('focus').addClass('text-input');
});


$("#message").val("Your message"); //set text area prompt
//  $("#message").val(""); //clear field//clear comment prompt on focus, have done this in the html with //onFocus="this.value=''; this.onfocus=null;"
$('#message').focus(function() {//clear comment prompt on focus- this is the same as //onFocus="this.value=''; this.onfocus=null;"
  $("#message").val(""); //clear field
});

$("#name").val("Your name"); //set input area prompt
$('#name').focus(function() {//clear comment prompt on focus- this is the same as //onFocus="this.value=''; this.onfocus=null;"
  $("#name").val(""); //clear field
});

$("#email").val("Your email"); //set input area prompt
$('#email').focus(function() {//clear comment prompt on focus- this is the same as //onFocus="this.value=''; this.onfocus=null;"
  $("#email").val(""); //clear field
});

$('#submit').click(function() {
var name = $("#name").val();  //variables from the contact form
	var email = $("#email").val();  
	var message = $("#message").val();  
	var spam = $("#spam").val();  
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;

	
            if ((name == "") || (name == "Your name")) {  
			$("#name_error").fadeIn(500);  
			$("#name").focus();  
			 return false;  
			}  
/*
			 if ((email == "") || (email == "Your email")) {  
			$("#email_error").fadeIn(500);  
			$("#email").focus();  
			 return false;  
			}
	*/

			if (!email.match(emailExp)){		//if email is not valid
			$("#email_error").fadeIn(500);  
			$("#email").focus();  
			 return false;  
			}  	

			 if ((message == "") || (message == "Your message")) {  
			$("#message_error").fadeIn(500);  
			$("#message").focus();  
			 return false;  
			} 
			if (spam !="FODIP"){
			$("#spam_error").fadeIn(500);  
			$("#spam").focus();  
			 return false;  
			}


		
	/*		if ((spam !="fodip") && (spam !="FODIP")){  // AND needed here if you want 2 negative conditions		
			$("#spam_error").fadeIn(500);  
			$("#spam").focus();  
			 return false;  
			}*/  
					

document.getElementById('submit').disabled=true; //disable the button
var t=setTimeout("document.getElementById('submit').disabled=false", 5000);// re-enable the button after 5 seconds			


var dataString = 'name='+ name +'&email='+ email + '&message='+ message;
$.ajax({
		type: "POST",
		url: "processmail.php", 
		data: dataString,
		cache: false,
		success: function(html){

//$('#seeall').replaceWith(html);

$('#successmessage').fadeIn(1000);

$('.text-input').focus(function() { //if you focus on a field again the success message goes as do the errors
$("#successmessage").fadeOut(1000);
$('.error').hide();
});

//$("#placement").append(html);// is the placement
//$("#fromphp").fadeIn("slow");// comes from the php //have to hide it first for fade to work!!
//$('#newcomment').fadeOut(2000);
//$('#newcomment').empty(); //empty the div other wise any new comments are seen again

		}//html function
});//ajax
return false;

});//click function

 });//doc ready