var makeMenuIndicator = function() {
	
	el = jQuery(document.createElement('div'));
	el.attr('id','menuIndicator');
	el.appendTo('ul#navigation').show();
}

var moveMenuIndicator = function(el) {
	var element = jQuery(el)
	var position = element.position();
	var posX = position.left;
	var posY = position.top;

	var width = element.width();
	var height = element.height();
	
	var menuIndicator = jQuery('ul#navigation #menuIndicator','div#header');	
	menuIndicator.stop().animate({
		'top': posY,
		'left' : posX,
		'width' : width ,
		'height' : height
	}, 400);
}

var hideContent = function() {
	var container = jQuery('.content');
	if (jQuery(container).length)
		container.remove();
}


var getContent = function(el) {
	
	clicked = jQuery(el).attr('class');
		hideContent();
	
		path = 'tpl/'+clicked+'.tpl';
		jQuery.ajax({
			dataType: "POST",
			cache: false,
			url: path,
			success: function(data) {
				jQuery(data)
					.hide()
					.appendTo('body')
					.fadeIn();
			}			
		});
}

var createAjaxLoader = function() {
	createLoader();
	
	jQuery(document).ajaxStart(function()
	{
		jQuery('#loader').show();
	})
	.ajaxStop(function()
	{
		jQuery('#loader').hide();
	});
}

var createLoader = function() {
	var el = jQuery(document.createElement('p'));
	el.attr('id','loader').hide().html('Loading...').appendTo('body');
}

jQuery().ready(function() {
	jQuery('ul#navigation li a').attr("href", "#")

	makeMenuIndicator();
	createAjaxLoader();
	
	jQuery('ul#navigation li', 'div#header').hover(function() {
		moveMenuIndicator(this);
	});
	
	jQuery('ul#navigation li', 'div#header').click(function(event) {
		getContent(this);
		event.preventDefault();
	});
	
	jQuery('.close').live('click', function() {
		hideContent();
	});
	
	jQuery(document).keyup(function(event){
		if (event.keyCode == 27) {
			hideContent();
		}
	});
	//jQuery('ul#navigation li:eq(1)').click();

});