/**
 * base javascript functionality for WebEffects.us
 * 
 */ 

$(document).ready(function(){
	// lazy loading for all example related images wherever they are 
	// shown (within elemont of 'project' class)
	$(".project img").lazyload({ 
	    placeholder : "/images/grey.gif",
	    effect : "fadeIn"
	});
	
	// overlay-blanket click - fadeOut modal
	$('#blanket').click(function(e) {
		$('#client').fadeOut();
		$('#contact').fadeOut();
		$('#overlay').fadeOut('fast');
	});
	
	// login popup treatment
	$('a.login').click(function(e){
		e.preventDefault();
		//$('#client').fadeOut();	
		//$('#contact').fadeOut();
		if ($('#client').is(':visible')) {
			$('#client').fadeOut();
			$('#overlay').fadeOut('fast');
		} else {
			$('#overlay').fadeIn('fast');
			var _offset = $('#wrapper').offset();
			var left = _offset.left + 483;
			$('#client').css({position: 'absolute', left: left}).fadeIn('fast');
		}
	  });
	
	$('a#forgotPassword').click(function(e) {
		e.preventDefault();
		alert('HEHEHEHE!!! go and fuck yourself!!!');
	});
	
    $('#username').focus(function(){if($(this).val()=='username'){$(this).val('');}});
    $('#username').blur(function(){if($(this).val()==''){$(this).val('username');}});
    //if ($('#username').val()==''){$('#username').val('username');}
    
    $('#password').focus(function(){if($(this).val() == 'password'){$(this).val('');}});
    $('#password').blur(function(){if($(this).val() == ''){$(this).val('password');}});
    //if ($('#password').val() == ''){$('#password').val('password');}
	
	
	$('a.contact').click(function(e){
		e.preventDefault();
		//$('#client').fadeOut();	
		//$('#contact').fadeOut();
		if ($('#contact').is(':visible')) {
			$('#contact').fadeOut();
			$('#overlay').fadeOut('fast');
		} else {
			$('#overlay').fadeIn('fast');
			var _offset = $('#wrapper').offset();
			var left = _offset.left + 318;
			$('#contact').css({position: 'absolute', left: left}).fadeIn('fast');
		}
	  });
    $('div#contactform .name').focus(function(){if($(this).val()=='Your name'){$(this).val('');}});
    $('div#contactform .name').blur(function(){if($(this).val()==''){$(this).val('Your name');}});
    var orig = {border : $('div#contactform .name').css('border'),
    			background : $('div#contactform .name').css('background')};
	
	//onFocus="if(this.value=='Your Email') this.value='';" onBlur="if(this.value=='') this.value='Your Email';" 
	$('div#contactform .email').focus(function(){if($(this).val()=='Your Email'){$(this).val('');}});
    $('div#contactform .email').blur(function(){if($(this).val()==''){$(this).val('Your Email');}});
	
	// onFocus="if(this.value=='Choose department') this.value='';" onBlur="if(this.value=='') this.value='Choose department';"
	$('div#contactform .dep').focus(function(){if($(this).val()=='Choose department'){$(this).val('');}});
    $('div#contactform .dep').blur(function(){if($(this).val()==''){$(this).val('Choose department');}});
	
	//onFocus="if(this.value=='Message subject') this.value='';" onBlur="if(this.value=='') this.value='Message subject';" 
	$('div#contactform .subj').focus(function(){if($(this).val()=='Message subject'){$(this).val('');}});
    $('div#contactform .subj').blur(function(){if($(this).val()==''){$(this).val('Message subject');}});
	
	//onFocus="if(this.value=='your message...') this.value='';" onBlur="if(this.value=='') this.value='your message...';" 
	$('div#contactform .msg').focus(function(){if($(this).val()=='your message...'){$(this).val('');}});
    $('div#contactform .msg').blur(function(){if($(this).val()==''){$(this).val('your message...');}});
    
    $('div#contactform .sendbtn').click(function(e) {
    	e.preventDefault();
    	// validate fields
    	var formOk = true;
    	if ($('div#contactform .name').val()=='Your name'){
    		highlightFormField($('div#contactform .name'));
    		formOk = false;
    	}
    	else {
    		resetFormField($('div#contactform .name'), orig);
    	}
    	if ($('div#contactform .email').val()=='Your Email'){
    		highlightFormField($('div#contactform .email'));
    		formOk = false;
    	}
    	else {
    		resetFormField($('div#contactform .email'), orig);
    	}
    	if ($('div#contactform .subj').val()=='Message subject'){
    		highlightFormField($('div#contactform .subj'));
    		formOk = false;
    	}
    	else {
    		resetFormField($('div#contactform .subj'), orig);
    	}
    	if ($('div#contactform .msg').val()=='your message...'){
    		highlightFormField($('div#contactform .msg'));
    		formOk = false;
    	}
    	else {
    		resetFormField($('div#contactform .msg'), orig);
    	}
    	if (formOk) {
    		var dpt = $('div#contactform .dep').val();
    		dpt = (dpt == 'Choose department')? '': dpt;
    		var formData = 
    			{ name: $('div#contactform .name').val(),
    			  email: $('div#contactform .email').val(),
    			  department: dpt,
    			  subject: $('div#contactform .subj').val(),
    			  message: $('div#contactform .msg').val()
    			};
    		$.ajax({
    		      type: "POST",
    		      url: "index/contactus",
    		      data: formData,
    		      dataType: 'json',
    		      success: function(data) {
    				if(data['result'] == 'OK') {
    					$('div#contactform .message').replaceWith('<p class="message">Message was sent. We will contact you soon.</p>');
    					$('div#contactform .name').val('Your name').attr('disabled','disabled');
    					$('div#contactform .email').val('Your Email').attr('disabled','disabled');
    					$('div#contactform .dep').val('Choose department').attr('disabled','disabled');
    					$('div#contactform .subj').val('Message subject').attr('disabled','disabled');
    					$('div#contactform .msg').val('your message...').attr('disabled','disabled');
    					$('div#contactform .detailed').fadeOut();
    					$('div#contactform .sendbtn').replaceWith('<input name="close" type="submit" value="Close Message Box" class="closebtn" />');
    					$('div#contactform .closebtn').click(function(e) {
    						e.preventDefault();
    						$('#contact').fadeOut();
    					});
    				}
    				else if (data['error'] == 'email') {
    					$('div#contactform .message').replaceWith('<p  class="message" style="color: red;">Email address submitted is invalid.</p>');
    					highlightFormField($('div#contactform .email'));
    				}
    				else if (data['error']== 'sending') {
    					$('div#contactform .message').replaceWith('<p  class="message" style="color: red;">There was a problem with sending the message, please try later.</p>');
    				}
    				else {
    					$('div#contactform .message').replaceWith('<p  class="message" style="color: red;">Our servers experienced unspecify problem while trying to send the message, please try later.</p>');
    				}
    		      }
    		    });    	   		
    	}
    	
    });
});

var highlightFormField = function(elem) {
	elem.css('backgroundColor', "#ff0000")
    .animate({ backgroundColor: "#ffffff" }, 800 )
    .animate( { border: "3px solid red" }, 200);
}

var resetFormField = function(elem, orig) {
	elem.css('background', orig.background)
	    .css('border', orig.border);
}