$(window).bind('load', function () {
       $("div#navigation ul li a span.vertbar").css({"opacity" : "0.3"});
    });

$(document).ready(
  
	
    function(){
        $("#galNav a").click(function () {
				$("#galNav a").removeClass("active");
				$(this).addClass("active");
				return false;
			}).filter(":first").click();
       
	   
        // On click events gallery
		$('ul#thumbs1 li a').append('<span class="block"></span>');

		$("ul#thumbs1 li a").hover(
			function () {
				$("span.block", this).stop().animate({ height: "25" }, "fast" );
			},
			function () {
				$("span.block", this).stop().animate({ height: "5" }, "fast" );
			}
		);
		
        $(".section a").click (
			
            function() {   

               	//Set current image
				var currentImg = $("#photo2 img");
               
                //New image attributes
                var newImg = $(this).attr("href");
                var newAlt = $(this).attr("title");
               
                //Create new image
                var newPic = new Image();
                $(newPic).attr({ src: newImg, alt: newAlt });
               
                $("#photo1 img").remove();
                $("#photo2").hide('fast',loadContent);
                $("#photo1").append(currentImg);
				
				//Display Loader
				$('#loader').remove();
				$('#mainPhoto').append('<div id="loader">Chargement...</div>');
				$('#loader').fadeIn('normal');
               
                
				function loadContent() {
					$('#photo2').load(newPic,'',hideLoader())
				}
				function hideLoader() {
					$('#loader').fadeOut('normal',showNewContent());
				}
				function showNewContent() {
					$("#photo2 img").remove();
					$("#photo2").append(newPic);
					$("#photo2").fadeIn("slow");
				}
                return false;
            }
               
        ).filter(":first").click();

   });