/* 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, .project, #orchestre').fadeOut(500);
				// $('#thumbs a').eq(0).trigger('click');
				$('#works, #thumbs').fadeIn(500);
				$('#thumbs').animate({'marginTop' : '-600px'}, 500);
				break;
			case 'about' : 
				$('.project, #contact, #illu, #works, #orchestre,#thumbs').fadeOut(500);
				$('#about').fadeIn(500);
				break;
			case 'contact' : 
				$('.project, #about, #illu, #works, #orchestre, #thumbs').fadeOut(500);
				$('#contact').fadeIn(500);

				break;
			case 'orchestre' : 
				$('#about, #contact, #illu, .project, #works, #thumbs').fadeOut(500);
				// $('#thumbs a').eq(0).trigger('click');
				$('#orchestre').fadeIn(500);
				break;			
			case 'home' : 
				$('.project, #about, #contact, #menu-hover, #works, #orchestre, #thumbss, #thumbs').fadeOut(500);
				$('#illu').fadeIn(500);
				active = $('#menu .active a');
				break;
		}
		
	
		return false;
	});
	
	$('#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': '146px'}, 300)
	}, function(){
		$(this).find('img').stop(true, true).animate({'marginTop': '0px'}, 300);
		$(this).find('span').stop(true, true).animate({'top': '180px'}, 300)
	}).bind('click', function(){
		$('#illu, #contact, #about, #works, #orchestre').fadeOut(500);
		$('#content .project').stop(true, true).fadeOut(500);
		$($(this).attr('href')).stop(true, true).css('left', 0).fadeIn(500);
		
		$('#thumbs').animate({'marginTop' : '0px'}, 500);
		$('html,body').animate({scrollTop:0}, 500); 
		
		return false;
	});
	
	
	// Thumbs
	$('#thumbss a').hover(function(){
		$(this).find('img').stop(true, true).animate({'marginTop': 0}, 300);
		$(this).find('span').stop(true, true).animate({'top': '146px'}, 300)
	}, function(){
		$(this).find('img').stop(true, true).animate({'marginTop': '0'}, 300);
		$(this).find('span').stop(true, true).animate({'top': '180px'}, 300)
	}).bind('click', function(){
		$('#illu, #contact, #about, #works, #orchestre').fadeOut(500);
		$('#content .project').stop(true, true).fadeOut(500);
		$($(this).attr('href')).stop(true, true).css('left', 0).fadeIn(500);
		
		$('#thumbss').animate({'marginTop' : '0px'}, 500);
		$('html,body').animate({scrollTop:0}, 500); 
		
		return false;
	});
	
	
	// Carousel
	$('.carousel').jcarousel({
		scroll: 1,
		animation: 800,
		easing: 'easeOutQuart', 
		buttonNextHTML: '<div><div></div></div>',
		buttonPrevHTML: '<div><div></div></div>',
		initCallback: initCarousel
	});
	
	// Index link
	$('#logo a').click(function(){
		$('#illu').fadeIn(500);
		$('.project, #about, #contact, #menu-hover, #works, #orchestre, #thumbss, #thumbs').fadeOut(500);
		$('#menu li').removeClass('active');
		active = $('#menu .active a');
		
		return false;
	});
	
	// Contact
	$('#contact form').validate();
});

/* FUNCTIONS
--------------------------------------------------------------------------------------------------------------------------------------*/

function initCarousel(){
	$('.jcarousel-prev, .jcarousel-next').hover(function(){
		$(this).find('div').stop(true, true).fadeIn(300);
	}, function(){
		$(this).find('div').stop(true, true).fadeOut(300);
	});
}