/* DOM READY
--------------------------------------------------------------------------------------------------------------------------------------*/

$ (function(){
	// Menu
	var hover = $('#menu-hover');
	var active = $('#menu .active a');
	hover.css({'display':'block', 'opacity':0});
	
	if(active[0]){
		hover.animate({'left':active.position().left, 'width':active.innerWidth(), 'opacity':1}, 300);
	}
	
	$('#menu a').bind('mouseover', function(){
		hover.stop().css('display', 'block').animate({'left':$(this).position().left, 'width':$(this).innerWidth(), 'opacity':1}, 300);
	}).bind('click', function(){
		$('#menu li').removeClass('active');
		active = $(this);
		active.parent().addClass('active');
		
		switch($(this).attr('class')){
			case 'works' : 
				$('#about, #contact, #illu').fadeOut(500);
				$('#thumbs a').eq(0).trigger('click');
				$('#thumbs').animate({'marginTop' : '30px'}, 500);
				break;
			case 'about' : 
				$('.project, #contact, #illu').fadeOut(500);
				$('#about').fadeIn(500);
				$('#thumbs').animate({'marginTop' : '-120px'}, 500);
				break;
			case 'contact' : 
				$('.project, #about, #illu').fadeOut(500);
				$('#thumbs').animate({'marginTop' : '-120px'}, 500);
				$('#contact').fadeIn(500);
				break;
		}
		

	});
	
	$('#menu').bind('mouseleave', function(){
		if(active[0]){
			hover.stop().animate({'left':active.position().left, 'width':active.innerWidth(), 'opacity': 1}, 500);
		}else{
			hover.stop().animate({'left':'250px', 'opacity': 0}, 500);
		}
	});
	
	// Colors
	$('#color-picker .btn').click(function(){
		$('body').attr('class', 'color-'+$(this).attr('id'));
		$('#color-picker li').removeClass('active');
		$(this).parent().addClass('active');
	});
	
	// Thumbs
	$('#thumbs a').hover(function(){
		$(this).find('img').stop(true, true).animate({'marginTop': 0}, 300);
		$(this).find('span').stop(true, true).animate({'top': '90px'}, 300)
	}, function(){
		$(this).find('img').stop(true, true).animate({'marginTop': '-124px'}, 300);
		$(this).find('span').stop(true, true).animate({'top': '124px'}, 300)
	}).bind('click', function(){
		$('#illu, #contact, #about').fadeOut(500);
		$('#content .project').stop(true, true).fadeOut(500);
		$($(this).attr('href')).stop(true, true).css('left', 0).fadeIn(500);
		
		$('#thumbs').animate({'marginTop' : '30px'}, 500);
		$('html,body').animate({scrollTop:0}, 500); 
		
		return false;
	});
	
	// Index link
	$('#logo a').click(function(){
		$('#illu').fadeIn(500);
		$('.project, #about, #contact, #menu-hover').fadeOut(500);
		$('#thumbs').animate({'marginTop' : '-110px'}, 500);
		$('#menu li').removeClass('active');
		active = $('#menu .active a');
		
		return false;
	});
	
		   })