$(document).ready(function(){
	
	var uri = window.location.href,
		url = uri.substr(uri.indexOf('#') + 1),
		haveancor = uri.indexOf('#') + 1;
		
	if(haveancor>0){
		window.location.replace('/#'+url);
	}
	$('#display').empty();
	loadAjax(url);

	switchLeftMenu($('#websites'));
   
	$('.togglehandler').click(function(e){
		e.preventDefault();
		var target = $(e.currentTarget),
			toshow = target.closest('li');
		switchLeftMenu(toshow);
	});

	$('a.websites').click(function(e) { //start function when any link is clicked
		switchLeftMenu($('#websites'));
	});	

	$('a.webdesign').click(function(e) { //start function when any link is clicked
		switchLeftMenu($('#webdesign'));
	});	
	
	$('a.travauxpersonnels').click(function(e) { //start function when any link is clicked
		switchLeftMenu($('#travauxpersonnels'));
	});	
	
	$('a.ajax').live("click", function(e) {
		addAjaxLinks(e);
	});
	
	
 });
 
function switchLeftMenu(toshow){
	var children = $('ul', toshow),
		grandparent = toshow.closest('ul'),
		cousins = grandparent.children('li').children('ul');
	$('.toggle').not(children).hide(300);
	children.show(300);
}

function addAjaxLinks(e){
	e.preventDefault();
	var target = $(e.currentTarget),
		url = target.attr("href");
	window.location.replace("#" + url);
	$('a.ajax').removeClass('selected')
			   .css('color', '#515151');
	target.addClass('selected');
	loadAjax(url);
}

function loadAjax(url){
	$.ajax({
		method: "get", url: url, data: "#display",
		beforeSend: function(){}, //show loading just when link is clicked
		complete: function(){}, //stop showing loading when the process is complete
		success: function(html){ //so, if data is retrieved, store it in html
			// $("#display").show(100); //animation
			
			var content = $('#display', html).html(),
				color = $('.color', html).text(),
				display = $('#display');
			$("#footer").fadeOut(60, function() {
				display.animate({"left" : "-590px"}, 200, function(){
					display.html(content);
					display.animate({"left" : "0px"}, 200)
					$('#top').stop(true, false).animate({ backgroundColor : color }, 700);
					$('#menu').stop(true, false).animate({ "border-bottom-color" : color }, 700);
					$('#footer').stop(true, false).animate({ "border-top-color" : color }, 700);
					$('.dotted').animate({ "border-left-color" : color }, 700);
					$('a.selected').stop(true, false).animate({ "color" : color }, 700);
					$("#footer").stop(true, true).fadeIn(1000); 
				});
			});
		}
	});
}