// JavaScript Document


 		function showModal(value){  
		// Display an external page using an iframe

		$.modal('<iframe src="' + value + '" height="450"   width="830" style="border:0">', {
			closeHTML: "<a href='#'> Sluiten   <strong>X</strong></a>",oopacity:80,
	overlayCss: {backgroundColor:"#333"}
,closeClass: "modalClose",
			containerCss:{
				borderColor:"#000",
				height:450,
				padding:20,
				width:830
			},
			overlayClose:true
		});

		 }
		 
		 //actions to take when document is loaded
      $(document).ready(function() {
		  //flash images to show that they are clickable
		
		 
		  flashImages();
		  
		  //attach on click on every item of class .nav
		 $(".nav").bind('click', function() {
			showModal($(this).attr("title"));
		});
		
		//bind evetns to img in photocontainer
		$("#photoContainer div")
		//.bind('click', function() {})
		.mouseover(function() {$(this).fadeTo("fast",0.8);})
		.mouseout(function() {$(this).fadeTo("fast",1);})
		.bind('click', function() {
			showModal($(this).attr("title"));
		})
		.css("cursor","pointer");
		


		
		//bind click event to fontsizeswitcher to change fonts dynamicly
		 $(".fontsizeSwitcher").bind('click', function() {
			 $("body").css("font-size", $(this).attr("value"));
	
		});
      });
	  	$(body).live('click', function() {
			$.modal.close();
		});

	  
		  
	 function flashImages(){
		  //flash each image in photocontainer
		 var img = $("#photoContainer div");
		
		$(img[0]).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
		$(img[1]).delay(700).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
		$(img[2]).delay(1400).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
		$(img[3]).delay(2100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);  
	}