$(document).ready(function() {
	// Hide all the DIV in .boxBody
//	$('.boxBody div').slideUp('1500');
	$('.boxBody div.tab').addClass('hidden');
	$('.boxBody div.show').removeClass('hidden');

	// Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
	$('.boxBody div.tab:eq(' + $('#navigation ul > li a').index(this) + ')').slideDown('1500');

	// Get all the LI from the #navigation UL
	$('#navigation ul > li a').click(function(){
		// Perform the actions when it's not selected
		if (!$(this).hasClass('selected')) {
			//remove the selected class from all LI
			$('#navigation ul > li a').removeClass('selected');

			// Reassign the LI
			$(this).addClass('selected');

			// Hide all the DIV in .boxBody
			$('.boxBody div.tab').slideUp('1500');

			// Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
			$('.boxBody div.tab:eq(' + $('#navigation ul > li a').index(this) + ')').slideDown('1500');
		}
	}).mouseover(function() {
		// Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest
		$(this).addClass('mouseover');
		$(this).removeClass('mouseout');
	}).mouseout(function() {
		// Add and remove class
		$(this).addClass('mouseout');
		$(this).removeClass('mouseover');
	});

	// Add some simple styling to hide the tab.
    $("head").append("<link>");
    css = $("head").children(":last");
    css.attr({
      rel:  "stylesheet",
      type: "text/css",
//    href: "/visitekaartje/web/css/slide_tab_1.0.css"
      href: basePath + "css/slide_tab_1.0.css"
    });
});