$(document).ready(function() {
			
//	jQuery(function() {
		// show a simple loading indicator
	$('body').children(':firts').before('<div style=\'display:none\' id=\'message_box\'><img id=\'closeMessage\' style=\'float:right;cursor:pointer\'  src=\'images/12-em-cross.png\' /><p></p></div>');
	var $divMessage = $('#message_box');
	var $closeMessage = $('#closeMessage');
	var hideMessage;	
	
		var loader = jQuery('<div id="loader"><img src="images/loading.gif" alt="Procesando..." /></div>')
			.css({position: "relative", top: "1em", left: "25em"})
			.appendTo("twitter_form")
			.hide();
		jQuery().ajaxStart(function() {
			loader.show();
		}).ajaxStop(function() {
			loader.hide();
		}).ajaxError(function(a, b, e) {
			throw e;
		});
		
		var v = jQuery("#twitter").validate({
			submitHandler: function(form) {
				jQuery(form).ajaxSubmit({
					success: showTwResponse,
					dataType: 'json'
				});
			}
		});
		
			//when the close button at right corner of the message box is clicked 
	$closeMessage.click(function()
	{
			//the messagebox gets scrool down with top property and gets hidden with zero opacity 
  		$divMessage.animate({'opacity':'.5', 'height': 0, 'class':''}, '200', '', function(){ $divMessage.hide(); });
	});
	
	var showTwResponse = function(response)
	{		
		if(typeof($hideMessage) !== 'undefined') clearTimeout($hideMessage);
		
		var $divMessage = $('#message_box');
		$divMessage.addClass(response.type);
		$divMessage.find('p').empty().html(response.message);
		$divMessage.show().animate({ opacity: .9, height:'50px'});
		$hideMessage = setTimeout(function(){$closeMessage.trigger('click');}, 5000);
		if(response.type == 'success') $("#twitter").resetForm();
	}	
			
});