/**
 * @author Joel
 */


//-----------------------------------------------------------
// THE MODEL
//-----------------------------------------------------------

/* initialise the model */
enterModel = new $.model();


//-----------------------------------------------------------
// THE VIEW
//-----------------------------------------------------------

/* initialise the view */
enterView = new $.view();


//-----------------------------------------------------------
// THE CONTROLLER
//-----------------------------------------------------------

/* initialise the controller */
enterController = new $.controller(enterModel, enterView);

enterController.doAnimation = function()
{
	//$("div#enter_outer").hide();
	$("div#logo_inner").hide();
	$("#current_user, #new_user, .login").hide();
	$("div#enter_container ul").css("width", "0");
	$("body, html").css("background-color", "#72A696");
	
	$("div#logo_inner").fadeIn({
		duration: 500,
		easing: 'easeOutBounce',
		complete: function(){
		
			$("div#enter_container ul").animate({
				width: "375"
			}, {
				duration: 500,
				easing: 'easeOutElastic',
				complete: function(){
				
					$("#current_user, #new_user").fadeIn({
						duration: 500
					});
					
					if (window.location.hash == "#login") {
						enterController.showLogin();
					}
					
				}
			});
			
		}
	});
}

/* enable rounded corners */
enterController.enableRoundedCorners = function()
{
	$("div#enter_container").corner("25px");
	$("div.login").corner("#72a696 bottom 15px");
}

enterController.showLogin = function()
{
	$("li#current_user").addClass("active");
	$(".login").slideDown();
}

enterController.hideLogin = function()
{
	$("li#current_user").removeClass("active");
	$(".login").slideUp();
}

enterController.toggleLogin = function()
{
	if($("li#current_user").hasClass("active")) enterController.hideLogin();
	else enterController.showLogin();
}

enterController.showWhatsThis = function()
{
	$(".what-view").fadeIn();
	$(".what-view").css("cursor", "pointer");
	$(".what-view").unbind("click").bind("click", function(){
		enterController.hideWhatsThis();
	});
}

enterController.hideWhatsThis = function()
{
	$(".what-view").fadeOut();
}

/* the setup function */
enterController.setup = function()
{

	enterController.enableRoundedCorners();
	enterController.doAnimation();
	
	$(".login input#un").css("color", "#999999");
	$(".login input#un").livequery(function(){
		$(this).focus(function(){
			if($(this).val() == "username")
			{
				$(this).val("");
				$(this).css("color", "#000000");
			}
			else
			{
				$(this).css("color", "#000000");
			}
		});
		$(this).blur(function(){
			if($(this).val() == "" || $(this).val() == "username")
			{
				$(this).val("username");
				$(this).css("color", "#999999");
			}
			else
			{
				$(this).css("color", "#000000");
			}
		});
	});
	
	$(".login input#pw").css("color", "#999999");
	$(".login input#pw").livequery(function(){
		$(this).focus(function(){
			if($(this).val() == "password")
			{
				$(this).val("");
				$(this).css("color", "#000000");
			}
			else
			{
				$(this).css("color", "#000000");
			}
		});
		$(this).blur(function(){
			if($(this).val() == "" || $(this).val() == "password")
			{
				$(this).val("password");
				$(this).css("color", "#999999");
			}
			else
			{
				$(this).css("color", "#000000");
			}
		});
	});
	
	$("a[href=#login]").click(function(e){
		e.preventDefault();
		enterController.toggleLogin();
	});
	
	$("a[href=#whats-this]").click(function(e){
		e.preventDefault();
		enterController.showWhatsThis();
	});
}


//-----------------------------------------------------------
// AND AWAY WE GO
//-----------------------------------------------------------

$(document).ready(function(){
	enterController.setup();
});