window.onblur=function() {
	$('body').removeClass('focus');
	$('body').addClass('blur');
};

window.onfocus=function() {
	$('body').removeClass('blur');
	$('body').addClass('focus');
};

$(document).ready(function() {

	$('body').addClass('focus');
	$('.loading').append('<div class="loader"></div>');

function slideinnav() {
	$('.mac.loading > header')
		.css('top', '-42px')
		.delay(500)
		.animate({ top: '0' }, 250);
	$('.mac.loading > nav h1').css('top', '-42px').delay(500).animate({ top: '0' }, 250);
	$('.mac.loading > nav')
		.css('left', '-21%')
		.animate({ left: '0%' }, 500);
	$('.mac.loading > aside')
		.css('left', '-21%')
		.animate({ left: '0%' }, 500);
	$('.mac.loading > aside footer')
		.css('marginBottom', '-23px')
		.delay(500)
		.animate({ marginBottom: '0' }, 250);
	$('.mac.loading > #content')
		.css('width', '100%')
		.animate({ width: '80%' }, 500)
		.animate({ marginTop: '42px', marginBottom: '62px' }, 'medium');
	$('.mac.loading > footer.glossy')
		.css('bottom', '-23px')
		.delay(500)
		.animate({ bottom: '0' }, 250).parent()
		.find('#breadcrumbs')
		.css('bottom', '-23px')
		.delay(500)
		.animate({ bottom: '23px' }, 500);
	$('.mac.loading > footer.flat')
		.css('bottom', '-62px')
		.delay(500)
		.animate({ bottom: '0' }, 250)
		.parent()
		.find('#breadcrumbs')
		.css('bottom', '-23px')
		.delay(500)
		.animate({ bottom: '56px' }, 500);
	$('.mac.loading > footer.gradient')
		.css('bottom', '-46px')
		.delay(500)
		.animate({ bottom: '0' }, 250)
		.parent()
		.find('#breadcrumbs')
		.css('bottom', '-23px')
		.delay(500)
		.animate({ bottom: '46px' }, 500);
	$('.mac.loading')
		.delay('medium')
		.removeClass('loading');
	$('.mac article#placeholder')
		.delay(2000)
		.fadeIn('slow');
}

// Slide in navigation
	setTimeout(function() {
		slideinnav();
	}, 500);



//	$('nav').resizable({
//		handles: 'e',
//		alsoResize: 'aside'
//	});

	$('nav ul').sortable();
	$('nav ul').disableSelection();
	
	$('.alert').draggable({ handle: 'header' });
	
	$('aside > ul li:nth-child(odd)').addClass('odd');

// Show/hide aside	
	$('aside .toggleaside button').toggle(function() {
		$('aside > ul, aside > header').slideUp('250');
		$(this).find('img').replaceWith('<img src="icon/show_aside.png" alt="show_aside" />');
	},
	function() {
		$('aside > ul, aside > header').slideDown('250');
		$(this).find('img').replaceWith('<img src="icon/hide_aside.png" alt="hide_aside" />');
	});
	
// Adjust content height
	var headerheight = $('body > header').height();
	var footerheight = $('body > footer').height();
	var windowheight = $(window).height()-43;
	var contentheight = windowheight - footerheight;

	if (window.navigator.standalone == false) {
		$('#content').css('height', contentheight).css('marginTop', '42px');
	}

// Get current url
	var here = window.location;

// Add bookmark
	$('aside .add button').click(function() {
		$('nav').append('<ul id="bookmarks"><h2>Bookmarks</h2><li class="bookmark"><a href="' + here + '">Untitled</a></li><ul>');
	});

// Breadcrumb arrow
	$('.mac > #breadcrumbs ul li').append('<span>&#9658;</span>');

// Auto list item currenter
	$('body > nav ul li a[href="' + here + '"]').parent().addClass('current');

// Collapse arrow
	$('.mac > nav ul h2').prepend('<span>&#9660;</span>');

// Collapse fold (should only trigger on span, use live?)
	$('.mac > nav ul h2').toggle(function() {
		$(this).find('span').replaceWith('<span>&#9658;</span>');
		$(this).parent().find('li').css('display', 'none');
	},
	function() {
		$(this).find('span').replaceWith('<span>&#9660;</span>');
		$(this).parent().find('li').css('display', 'block');
	});

//Temp collapse following
	$('.mac > nav ul#following h2').find('span').replaceWith('<span>&#9658;</span>');
	$('.mac > nav ul#following li').css('display', 'none');

// Show dialog box
	$('.mac > footer a').click(function() {
		var dialog = $(this).attr('href');
		$('.mac > footer a').animate({ opacity: 0.5 }, 100)
		$('.dialog').slideUp(250);
		$('.dialog' + dialog + '').slideDown(250);
		$('.alert' + dialog + '').css('display', 'block');
	});

	$('.mac > .dialog button').click(function() {
		$('.mac > footer a').animate({ opacity: 1 }, 100)
		$(this).parent().slideUp(250);
	});

	$('.mac > .alert button').click(function() {
		$('.mac > footer a').animate({ opacity: 1 }, 100)
		$(this).parent().css('display', 'none');
	});

});

$(document).load(function() { 
	$('#intro .wheel').addClass('go');
});