$(document).ready(function() {
      
      		$.fn.supersized.options = {  
				startwidth: 640,  
				startheight: 480,
				vertical_center: 1,
				slideshow: 0,
				navigation: 0,
				transition: 0, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
				pause_hover: 0,
				slide_counter: 1,
				slide_captions: 1,
				slide_interval: 3000  
			};
	        $('#supersize').supersized(); 

      
        // Variabelen
        var hoogte = $(document).height();
        var width = $(document).width();

        // Menu
        var topMenu = hoogte - 230;
        var topMenuContent = hoogte - 230;
        $("#divMenu").animate({ opacity: 0.6, top: topMenu }, 500, function() { });
        $("#divMenuContent").animate({ top: topMenuContent }, 500, function() { });

        // Home
        $("#lnkHome").click(function() {
          hideMezelf();
          hideGalerijen();
          hideLinks();
        });

        // Mezelf
        $("#lnkMezelf").click(function() {
          showMezelf();
          hideGalerijen();
          hideLinks();
        });

        // Galerijen
        var widthGalerijen = width - 10 - 300 - 10 - 10;
        var widthGalerijenContent = width - 10 - 300 - 10 - 10 - 25;  // 25 = padding nabootsen
        var topGalerijen = topMenu;
        var topGalerijenContent = topMenu + 25;
        $("#divGalerijen").css('top', topMenu);
        $("#divGalerijenContent").css('top', topGalerijenContent);
        $("#lnkGalerijen").click(function() {
          hideMezelf();
          showGalerijen();
          hideLinks();
        });

        // Links
        $("#lnkLinks").click(function() {
          hideMezelf();
          hideGalerijen();
          showLinks();
        });

        // Mezelf Show or Hide
        function showMezelf() {
          $("#divMezelf").animate({ opacity: 0.4, top: 150, left: 300, width: 400, height: 375 }, 500, function() { });
          $("#divMezelfContent").css('display', 'inline');
          $("#divMezelfContent").animate({ top: 150, left: 325, width: 350, height: 350 }, 500, function() { });
        }

        function hideMezelf() {
          $("#divMezelf").animate({ opacity: 1, top: 1, left: 1, width: 0, height: 0 }, 500, function() { });
          $("#divMezelfContent").animate({ opacity: 1, top: 1, left: 1, width: 0, height: 0 }, 500, function() { $("#divMezelfContent").css('display', 'none'); });
        }

        // Galerijen Show or Hide
        function showGalerijen() {
          $("#divGalerijen").animate({ opacity: 0.4, width: widthGalerijen, height: 200, top: topGalerijen }, 500, function() { });
          $("#divGalerijenContent").css('display', 'inline');
          $("#divGalerijenContent").animate({ width: widthGalerijenContent, height: 175, top: topGalerijenContent }, 500, function() { });
        }

        function hideGalerijen() {
          $("#divGalerijen").animate({ opacity: 1, width: 0, height: 200, top: topGalerijen }, 500, function() { });
          $("#divGalerijenContent").animate({ opacity: 1, width: 0, height: 175, top: topGalerijenContent }, 500, function() { $("#divGalerijenContent").css('display', 'none'); });
        }

        // Links Show or Hide
        function showLinks() {
          $("#divLinks").animate({ opacity: 0.4, top: 200, right: 300, width: 250, height: 300 }, 500, function() { });
          $("#divLinksContent").css('display', 'inline');
          $("#divLinksContent").animate({ top: 225, right: 300, width: 225, height: 275 }, 500, function() { });
        }

        function hideLinks() {
          $("#divLinks").animate({ opacity: 1, top: 1, right: 1, width: 0, height: 0 }, 500, function() { });
          $("#divLinksContent").animate({ opacity: 1, top: 1, right: 1, width: 0, height: 0 }, 500, function() { $("#divLinksContent").css('display', 'none'); });
        }

      });