$(document).ready(function(){

/* intro */

	

	$('header').hide().animate({'opacity' : 0, 'margin-top' : -100});
	$('header').show().delay(200).animate({
		'margin-top' : 0,
		'opacity' : 1,
		}, { duration: 1000 }
	);
	
	$('footer').hide().animate({'opacity' : 0});
	$('footer').show().delay(1500).animate({
		'opacity' : 1,
		}, { duration: 500 }
	);
	
	$('#projects .fleche').hide().animate({'opacity' : 0});
	$('#projects .fleche').delay(1500).show().animate({
		'opacity' : 1,
		}, { duration: 500 }
	);
	
	$('#monaccueil').hide().animate({'opacity' : 0});
	$('#monaccueil').show().delay(1000).animate({
		'opacity' : 1,
		}, { duration: 500 }
	);
	
	$('#accueil').hide().animate({'opacity' : 0, 'margin-top' : -100})
	$('#accueil').delay(200).show().animate({
		'margin-top' : 0,
		'opacity' : 1
		},{ duration: 500 }
	);

	
	$('#portfolio').hide().animate({'opacity' : 0, 'margin-top' : -100})
	$('#portfolio').delay(500).show().animate({
		'margin-top' : 0,
		'opacity' : 1
		},{ duration: 500 }
	);
	
	$('#monprofil').hide().animate({'opacity' : 0, 'margin-top' : -100})
	$('#monprofil').delay(800).show().animate({
		'margin-top' : 0,
		'opacity' : 1
		},{ duration: 500 }
	);
	
	$('#contact').hide().animate({'opacity' : 0, 'margin-top' : -100})
	$('#contact').delay(1100).show().animate({
		'margin-top' : 0,
		'opacity' : 1
		},{ duration: 500 }
	);
	
	$('#accueil span').hide().animate({'opacity' : 0})
	$('#accueil span').show().delay(1200).animate({
		'opacity' : 0.8,
		'margin-top' : -60
		},{ duration: 500 }
	);
	
	$('#portfolio span').hide().animate({'opacity' : 0})
	$('#portfolio span').show().delay(1300).animate({
		'opacity' : 0.8,
		'margin-top' : -60
		},{ duration: 500 }
	);
	
	$('#monprofil span').hide().animate({'opacity' : 0})
	$('#monprofil span').show().delay(1400).animate({
		'opacity' : 0.8,
		'margin-top' : -60
		},{ duration: 500 }
	);
	
	$('#contact span').hide().animate({'opacity' : 0})
	$('#contact span').show().delay(1500).animate({
		'opacity' : 0.8,
		'margin-top' : -60
		},{ duration: 500 }
	);
	
	$('nav li span').show().delay(1600).animate({
		'opacity' : 0,
		'margin-top' : -100
		},{ duration: 500 }
	);

/* navigation hover url */
	
	$("nav ul li").hover(function() {
		$(this).find("span").stop()
		.animate({
			'margin-top' : -55,
			'opacity' : 1
		}, "fast")
		.css("display","block")

	}, function() {
		$(this).find("span").stop()
		.animate({
			'margin-top' : -100,
			'opacity' : 0
		}, "fast")
	});
	
	
	$("nav ul li").hover(function() {
		$(this).stop()
		.animate({
			'margin-top' : 5,
			'opacity' : 0.8
		}, { duration : 100 })
		.css("display","block")

	}, function() {
		$(this).stop()
		.animate({
			'margin-top' : 0,
			'opacity' : 1
		}, { duration : 300 })
	});
	
/* fleche hover */

	$("#projects .fleche #next, #projects .fleche #back").hover(function() {
		$(this).animate({ 'opacity' : 0.5 }, { duration : 200 })
		}, function(){
   			$(this).animate({ 'opacity' : 1 }, { duration : 500 })
		});
		
/* fb like */

	$("#monprofil .like").animate({ 'opacity' : 0.6 });
	$("#monprofil .like").hover(function(){
		$(this).animate({ 'opacity' : 1 }, { duration : 300 });
		}, function(){
   			$(this).animate({ 'opacity' : 0.6 }, { duration : 500 });
		});
		

	
/* dl button hover */

	$("#projects .dl span").animate({ 'margin-left' : -100 });
	$("#projects .dl").hover(function() {
		$(this).find("span").stop()
		.animate({
			'margin-left' : -60,
			'opacity' : 1
		}, { duration : 100 })
		.css("display","block")

	}, function() {
		$(this).find("span").stop()
		.animate({
			'margin-left' : -100,
			'opacity' : 0
		}, { duration : 200 })
	});	
		
/* tabs */

	$(".tab").hide();
	$(".tab:first").show();

	$("nav ul li#accueil, nav ul li#portfolio, nav ul li#monprofil, nav ul li#config, header, #profil .questions ").click(function() {

		$("nav ul li").removeClass("active"); 
		$(this).addClass("active");
		$(".tab").hide();

		var activeTab = $(this).find("a").attr("href");
		$(activeTab).fadeIn({ duration: 1000 });
		return false;
	});
	
/* project img paginator */

	$("#projects .project .i2").hide().animate({
		'opacity' : 0,
		'margin-top' : 50
	});
	
	$("#projects .project .p1 a").addClass("active");
	
	$("#projects .project .p2").click(function () {
	
		$("#projects .project .i1").animate({
			'opacity' : 0,
			'margin-top' : 50
		}, { duration : 200 });
		
		$("#projects .project .i2").delay(600).show().animate({
			'opacity' : 1,
			'margin-top' : 0
		});
		
		$("#projects .project .p2 a").addClass("active");
		$("#projects .project .p1 a").removeClass("active");
		
		return false;
	
	});
	
	$("#projects .project .p1").click(function () {
	
		$("#projects .project .i2").animate({
			'opacity' : 0,
			'margin-top' : 50
		}, { duration : 200 });
		
		$("#projects .project .i1").delay(600).show().animate({
			'opacity' : 1,
			'margin-top' : 0
		});
		
		$("#projects .project .p2 a").removeClass("active");
		$("#projects .project .p1 a").addClass("active");
		
		return false;
	});
	
	$("#projects .fleche #next, #projects .fleche #back").click(function() {
		
		$("#projects .project .i2").animate({
			'opacity' : 0,
		}, { duration : 200 });
		
		$("#projects .project .i1").delay(600).show().animate({
			'opacity' : 1,
			'margin-top' : 0
		});
		
		$("#projects .project .i2").animate({
			'margin-top' : 50
		});
		
		$("#projects .project .p2 a").removeClass("active").delay(500);
		$("#projects .project .p1 a").addClass("active").delay(500);
				
	});
	
});

/* project img slideshow */
$(function () {

    $insert_nav = $('.projects');
	
	$elements = $('.project');
    $nfo = $('.info');
    
    $image = $('#projects .images .image');
    
    $elementsSize = $($elements).length;

    $n=0;
    $stop = false;

    loopelements();
           
    function loopelements (){
    
    	 $($elements).animate({ 'margin-left' : -100, 'opacity' : 0 });
   		 $($nfo).animate({ 'margin-right' : -80, 'opacity' : 0 });

        if ($stop == 'next'){
            if($n == $elementsSize){
                $n = 0;
            }
            $($elements).animate({
				'margin-left' : -100,
				'opacity' : 0
			}, { duration : 400 });
			$($nfo).delay(200).animate({
				'margin-right' : -30,
				'opacity' : 0
			}, { duration : 800 });
			
            $($elements[$n]).show().delay(300).animate({
				'margin-left' : 0,
				'opacity' : 1
			}, { duration : 800 });
			$($nfo[$n]).show().animate({
				'margin-right' : 0,
				'opacity' : 1
			}, { duration : 800 });
			
		}else if ($stop == 'back'){
            if($n == -1) {
                $n = $elementsSize -1;
            }
            
            $($elements).animate({
				'margin-left' : -100,
				'opacity' : 0
			}, { duration : 400 });
			$($nfo).delay(200).animate({
				'margin-right' : -30,
				'opacity' : 0
			}, { duration : 800 });
			
            $($elements[$n]).show().delay(300).animate({
				'margin-left' : 0,
				'opacity' : 1
			}, { duration : 800 });
			$($nfo[$n]).show().animate({
				'margin-right' : 0,
				'opacity' : 1
			}, { duration : 800 });

        } else {
        
            $($elements).hide().animate({
				'margin-left' : -100,
				'opacity' : 0
			}, { duration : 400 });
			$($nfo).delay(200).hide().animate({
				'margin-right' : -30,
				'opacity' : 0
			}, { duration : 800 });
			
            $($elements[$n]).show().delay(300).animate({
				'margin-left' : 0,
				'opacity' : 1
			}, { duration : 800 });
			$($nfo[$n]).show().animate({
				'margin-right' : 0,
				'opacity' : 1
			}, { duration : 800 });
       }
    }

    $('#next').live('click', function (){
        $n++;
        $stop = 'next';
        $(this).stop(true,true);
        loopelements();
        
    
        $('#projects .fleche #next').animate({ 'opacity' : 0.2 }, { duration : 300 });
    	$('#projects .fleche #next').delay(600).animate({ 'opacity' : 1 }, { duration : 700 });
    	
    	$('#projects .fleche #back').animate({ 'opacity' : 0 }, { duration : 300 });
    	$('#projects .fleche #back').delay(600).animate({ 'opacity' : 1 }, { duration : 700 });
        
        return false;
    });
    
    
    
    $('#back').live('click', function (){
        $n--;
        $stop = 'back';
        $(this).stop(true,true);
        loopelements();
        
        $('#projects .fleche #back').animate({ 'opacity' : 0.2 }, { duration : 300 });
    	$('#projects .fleche #back').delay(600).animate({ 'opacity' : 1 }, { duration : 700 });
    	
    	$('#projects .fleche #next').animate({ 'opacity' : 0 }, { duration : 300 });
    	$('#projects .fleche #next').delay(600).animate({ 'opacity' : 1 }, { duration : 700 });
        
        return false;
        
    });

});