jQuery.fn.extend({
	labels: function(){
		return this.each(function(){
			var label = $(this),
				input = $('#' + label.attr('for'));
			
			input
				.focus(function(){ label.hide(); })
				.blur(function(){
					if(input.val() === ''){
						label.show(); 
					}
				});

			setTimeout(function() {
				if(input.val() !== ''){
					label.hide();
				}
			}, 50);
		});
	}
});

var Engine = {
	vars: {
		fade: $.browser.msie ? 0 : 400
	},
	
	utils: {
		webmailLogin: function() {
			var webmail = $('#webmail'),
				headerHeight = $('#header > div > div').height();
			
			webmail
				.find('form').hide().end()
				.find('label').labels().end()
				.find('> button').toggle(
					function() {
						$('<div />', {
							id: 'overlay',
							css: {
								height: $(document).height() - headerHeight
							},
							click: function() {
								$('> button', webmail).trigger('click');
							}
						}).appendTo('body').hide().fadeIn(Engine.vars.fade);
						
						$('form', webmail).fadeIn(Engine.vars.fade);
						$(this).addClass('active');
					},
					function() {
						$('#overlay').fadeOut(Engine.vars.fade, function() {
							$(this).remove();
						});
						$('form', webmail).fadeOut(Engine.vars.fade);
						$(this).removeClass('active');
					}
				)
		}
	}
}

$(function(){
	Engine.utils.webmailLogin();
});