var Navigation = Base.extend({

	constructor: function() {
		this.quickhide();
		this.addLinks();
		this.addSubmissionForm();
		this.addCandy();
	},
	
	quickhide : function() {
		$("#content").css({'top': this.contentHiddenTop() + 'px'});
	},
	
	contentHiddenTop : function() {
		return parseInt($(window).height());
	},
	
	addLinks : function() {
		var me = this;
		var myAboutLink = this.addLink("show_about", "ABOUT", "#content");
		$(myAboutLink).click(function() { me.showContent(); });
		var mySubmitLink = this.addLink("show_submit", "SUBMIT WEBSITE", "#content");
		$(mySubmitLink).click(function() { me.showContent(); });
		var myCloseLink = this.addLink("close_content", "CLOSE", "#content");
		$(myCloseLink).click(function() { me.hideContent(); $("#submission_state").remove(); });
	},
	
	addLink : function(theId, theText, theAppendTo) {
		var myLink = document.createElement('a');
		$(myLink).attr("id", theId);
		$(myLink).text(theText);
		$(theAppendTo).append(myLink);
		return myLink;
	},
	
	addSubmissionForm : function() {
		var me = this;
		$("#content").append('<div id="submission_form"></div>');
		$("#submission_form").load("data/submission_form.php", function() {
			$("#submit_website").click(function() { me.submitWebsite(); });
		});
	},
	
	addCandy : function() {
		var myJackson = document.createElement('img');
		$(myJackson).attr("src", "layout/images/jacksondance.gif");
		$(myJackson).attr("id", "jackson");
		$("#content #about h2").append(myJackson);
	},
	
	showContent : function() {
	// changing the body's class would restart the midi
	$("#content").addClass("showContent");
	$("#interface").addClass("noBackground");
	
	var myAbout = $("#about");
	var myWidthMinus = myAbout.width();
	myWidthMinus += parseInt($("#content").css("left"));
	myAbout.css({'height': parseInt($(window).height()) + "px"});
	myAbout.css({'padding-right': parseInt($(window).width() - myWidthMinus) + "px"});
	
		$("#content").animate(
			{top: 0},
			1600,
			"swing",
			function() {}
		);
		$("#interface").animate(
			{left: '380px'},
			1600,
			"swing",
			function() {}
		);
	},
	
	hideContent : function() {
		$("#content").animate(
			{top: this.contentHiddenTop() + "px"},
			1600,
			"swing",
			function() {}
		);
		$("#interface").animate(
			{left: 0},
			1600,
			"swing",
			function() {
				$("#content").removeClass("showContent");
				$("#interface").removeClass("noBackground");
			}
		);
	},
	
	submitWebsite : function() {
		var me = this;
		var myUrl = $("#website").attr("value");
		this.showSubmissionState("sending");
		$.post("data/submit_website.php",
		{ url: myUrl },
  		function(theResponse){
    		me.showSubmissionState(theResponse);
  		},
  		"text");
  	},
  	
  	showSubmissionState : function(theState) {
  		if ($("#submission_state").length == 0) {
  			$("#submission_form h2").after('<p id="submission_state"></p>');
  		}
  		var myStateP = $("#submission_state");
  		switch(theState) {
  			case 'sending':
  				myStateP.text("Submitting data...");
  				break;
   			case 'notvalid':
   				myStateP.text("The url you submitted doesn't seem to be valid.");
  				break;
  			case 'error':
  				myStateP.text("An error occurred. This message doesn't help much, does it? Well, try again :-)");
  				break;
  			case 'duplicate':
  				myStateP.text("Thanks but this MIDI is already playing on heavy rotation ;-)");
  				break;
   			case 'ok':
   				myStateP.text("Thanks!");
   				$("#website").attr("value", "");
  				break;
  		}
  	}

	
});