/*************************************

	Core Interactive of Metro Dynamis

**************************************/

// Environment stuff
Screen = {
	Width: $(window).width(),
	Height: $(window).height()
}

function ShowApp() {
	$('#App').fadeIn(500);
	ShowHeader(); // Also show the nav
}

function ShowHeader() {
	$('header #Identity').animate({
			opacity : 1,
			marginLeft : '0px'
		}, 500, ActNav
	);
}

function ActNav() {
	$('nav ul li').animate({
			opacity: 1,
			marginTop: '0px'
		}, 400, ShowMain
	);
	// Set events
	$('nav ul li a').click(function(){
		if (!$(this).hasClass('selected')) {
			$('nav ul li a').removeClass('selected');
			$(this).parent().parent().parent().children('a').addClass('selected');
			if ($(this).parent().parent().parent().is('nav')) $('nav ul li ul').fadeOut(500);
			$('#Main article').animate({ opacity : 0 }, 300);
			$(this).addClass('selected');
			$(this).parent().find('ul').children('li:first-child').children().addClass('selected');
			$(this).parent().find('ul').fadeIn(500);
			var target = new String($(this).attr('mdn:linkTo'));
			$('#' + target).marginLeft = '64px';
			$('#' + target).animate({
					opacity : 1,
					marginLeft : '0px'
				}, 500
			);
		}
	});
}

function ShowMain(){
	$('#Main article:first-child').animate({
			opacity : 1,
			marginLeft : '0px'
		}, 500
	);
}

// The fun starts here
function Metrodynamis() {
	ShowApp();
	// Call custom entry point
	App();
}

// Main entry point
$(document).ready(Metrodynamis);