$(document).ready(function() {

    // Function ShowContent 

    function showContent(layer, animate) {

        $("#background").show();
        $("#footer").hide();
        $("#announcement").hide();

        $("#content").html($("#" + layer + "_html").comments());

        $("#nav").children().each(function() {
            if ($(this).attr("id").search(layer) == -1) {
                $(this).addClass("inactive");
            } else {
                $(this).removeClass("inactive");
            }
        });

        if (animate == true) {
            $('html,body').animate({ scrollTop: $("#nav").offset().top - 16 }, 200, "swing");
        }

        // setUpHover();

        setupFullScreen();
        setupImageViewers();
        setupHovers();

        // Load analytics tracking
        setTimeout(function() {
            $("#tracker").attr("src", "/track/" + layer + "/")
        }, 500);

        window.location.hash = layer;
    }

    
    //test = $("wrapper").hasClass("pictureplace")
    
    //if ($('#wrapper').hasClass('.pictureplace') == 'true') {
        
        
    //     $("#nav").children().each(function() {

    //        $(this).addClass("inactive");

    //    });
    //}


	// start met de gallery te laden 
	/*
	$('#gallery').galleryView({
			show_captions: true,
			show_overlays: true,
			frame_width: 120,
			frame_height: 120
		});

*/
    $("#menu_producten").click(function() { window.location = "/producten/"; });
    $("#menu_verbeteringen").click(function() { window.location = "/projecten"; });
    $("#menu_specialist").click(function() { window.location = "/diensten"; });
    $("#menu_contact").click(function() { window.location = "/contact/"; });

    // If there is a location has we open the layer with the content and scroll to it,
    // but only if we're not coming from the same url, because then we'd like to end up
    // at the scroll position we were.
    if (window.location.hash && document.referrer != window.location) {
        showContent(window.location.hash.replace("#", ""), false);
    }

    // =========================
    // = Preloading of content =
    // =========================

    preloadContentDelay = 1000;

    setTimeout(function() {

        preloadNode = $("<div></div>");

        preloadNode.css({
            "position": "absolute",
            "left": "-100000px",
            "top": "-100000px",
            "height": "1px",
            "width": "1px",
            "overflow": "hidden"
        })

        //preloadNode.append($("#software_html").comments())
        //preloadNode.append($("#design_html").comments())
        //preloadNode.append($("#company_html").comments())
        //preloadNode.append($("#blog_html").comments())

        $("body").append(preloadNode);

        // setUpHover();

    }, preloadContentDelay);

    // ==================================
    // = Set up hovering for mouseovers =
    // ==================================

    // function setUpHover() {
    // 
    //	$(".hover").each(function() {
    //		var parentNode = $(this);
    //		var imageNode = parentNode.children("img");
    // 
    //		if (!imageNode.length) {
    //			imageNode = $("<img>");
    //			imageNode.attr("src", parentNode.css("background-image").replace("off", "on"));
    //			imageNode.css({"position": "relative", "opacity": "0.0"}); 
    //			imageNode.appendTo(parentNode);
    //		}
    //	});
    // 
    //	$(".hover").hover(function() {
    //		$(this).children("img").stop().fadeTo(150, 1.0);
    //	}, function() {
    //		$(this).children("img").stop().fadeTo(150, 0.0);
    //	});
    // 
    // }

    // =========================
    // = Main page menu hovers =
    // =========================

    function setupHovers() {
        $(".hoverable").hover(
			function() { $(this).addClass("hover") },
			function() { $(this).removeClass("hover") }
		);

        //$(".gallery .thumbnail").hover(
        //	function() { $(this).children("img.fade").stop().fadeTo(200, 1) },
        //	function() { $(this).children("img.fade").stop().fadeTo(50, 0) }
        //);

        /* $(".profile").hover(
        function() { $('img.fade', this).stop().fadeTo(200, 1) },
        function() { $('img.fade', this).stop().fadeTo(50, 0) }
        );*/

    };

    setupHovers();
	
	
});