$(document).ready(function(){

	$(".group").attr('id',function(z){
		return 'g_'+z;					   
	});
	
	//Hides all the previews excepted the very first one
	var thumbs = $("#thumbs li > img").length;
	for(i=1; i<thumbs; i++){
		$('#g_'+i).hide();
	}
	
	//Fade all the thumbnails to 55% opacity, only fade back to 100% when hover over
	$("#thumbs li > img").fadeTo("normal","0.55").attr('id',function(x){
		return 't_'+x;
	}).each(function(e){
		$(this).click(function(){
			$(".group").stop().hide();
			$("#g_"+e).stop().fadeIn();				   
		});
		$(this).hover(
		function(){
			var src = $(this).attr('src').replace('/gray_thumbs/','/');
			$(this).attr('src',src);
			$(this).fadeTo('fast','1');	
			
		},
		function(){
			$(this).fadeTo('slow','0.55');
			var s = $(this).attr('src').replace('/works/','/works/gray_thumbs/')
			$(this).attr('src',s);
		});
	}).css("cursor","pointer");
			
			
	/********** Begin form validations - when the user leaves some fields blank ************************/
	$(".txt, .txtarea").each(function(){
		$(this).focus(function(){
			$(this).css('color',"#585756");
			$(this).css("border-color","#ebebd7");
			$("#error p").fadeOut();
			if($(this).val() == 'Your name' || $(this).val() == 'Your email' || $(this).val() == 'Your message' || $(this).val() == 'Required'){
				$(this).val('');
			}
		});
		
		$(this).blur(function(){
			if($(this).val() == ''){
				$(this).val('Required').css('color','#ed145b');
			}
		});
	});
	
	
	/********** When the user clicks on submit ************************/
	$("#submitBtn").click(function(){
		var hasError = false;
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
		
		//Name validation
		if($("#nom").val() == '' || $("#nom").val() == 'Your name' || $("#nom").val() == 'Required' || $("#nom").val().length < 5){
			$("#nom").css('border','2px solid #ed145b');
			$("#error").empty();
			$("#error").fadeIn().html("<p>Please fill in your full name</p>");
			hasError = true;
			return false;
		} 
		
		//Email validation
		var emailToVal = $("#email").val();
		if(emailToVal == '' || emailToVal == 'Your Email' || $("#email").val() == 'Required') {
			$("#email").val('Required').css('color','#ed145b');
			hasError = true;
			return false;
		} else if(!emailReg.test(emailToVal)) {
			$("#email").css('border','2px solid #ed145b');
			$("#error").empty();
			$("#error").fadeIn().html("<p>Invalid email address</p>");
			hasError = true;
			return false;
		}
		
		//Message box validation
		if($("#msg").val() == 'Your message' || $("#msg").val() == 'Required' || $("#msg").val().length < 15){
			$("#msg").css('border','2px solid #ed145b');
			$("#error").empty();
			$("#error").fadeIn().html("<p>Please write something more than 15 characters long.</p>");
			hasError = true;
			return false;
		}
		
		if(hasError == false){
			//Process form data via AJAX
			$("#contact_form").append("<p class='saving'></p>");
			var str = $("#contactform").serialize();
			$.ajax({  
			  type: "POST",  
			  url: "../lib/email_process.php",  
			  data: str,  
			  success: function(msg) {  
				$('#contact_form').fadeIn().after("<div id='message'></div>"); 
				$('#contact_form').hide();
				$("#contact_form").removeClass("saving");
				$('#message').html("<h2>Thank you!</h2>")  
				.append("<p>"+msg+"</p>")  
				.fadeIn()
				.delay(5000,function(){ 
					$("#message").fadeOut('slow').remove(); 
					$('#nom').val('Your name').css('color',"#999");
					$('#email').val('Your email').css('color',"#999");
					$('#msg').val('Your message').css('color',"#999");
					$("#contact_form").slideDown('slow'); 
				});
			  },
			  error: function(xhr,e){
				  if(xhr.status == 404){
					$('#error').fadeIn().html("<p>Uh oh! Hot dog! You can still <a href=mailto:web@designloper.com>email me</a>. Sorry about this!</p>");
				  }
			  }
			});  
			return false; 
		} 
		
	});
	
	//Smooth scroll
	$.localScroll();
	
	//Popup Credit box
	$('a.thanks').colorbox({inline:true, href:"#thanksbox"});
	$('.downsites').colorbox();
	
});