$(document).ready(function(){
	//References
	var sections = $("#menu li");
	var loading = $("#loading");
	var content = $("#content");
	var content2 = $("#content2");
	var content3 = $("#content3");
	
	// if would be nice to remove this form here, but where to put it ???
	$("#content").load("sections.html #section_home");
	
	//Manage click events
	sections.click(function(){
		//show the loading bar
		showLoading();
		// content.css("height", content.height());
		//load selected section
		switch(this.id){
			case "home":
				content.fadeOut(1000, "linear", function(){
					content.load("sections.html #section_home", hideLoading);
					content.fadeIn(1000, "linear");
				});
				break;
			case "order":
				content.fadeOut(1000, "linear", function(){
					content.load("order.html", hideLoading);
					content.fadeIn(1000, "linear");
				});
				break;
			case "game":		
				content.fadeOut(1000, "linear", function(){
					content.load("game.html", hideLoading);
					content.fadeIn(1000, "linear");
				});
				break;
			case "products":
				content.fadeOut(1000, "linear", function(){
					content.load("products.html", hideLoading);
					content.fadeIn(1000, "linear");
				});				
				break;
			default:
				//hide loading bar if there is no selected section
				hideLoading();
				break;
		}
		return false;
		
	});

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}
	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};

});