$(document).ready(function(){

	$('.ok').toggle(function() {
		 $(this).siblings('ul').css({"display" : "block"});
		 $(this).removeClass('box_closed').addClass('box_open');
		}, function() {
		$(this).siblings('ul').css({"display" : "none"});
		$(this).removeClass('box_open').addClass('box_closed');
	});



	
	// LINKERMENU CLICKS ZETTEN  
	 $('#leftMenu a').click(function() { //start function when any link is clicked
		 	$("#middlePane").fadeOut('fast').remove();
		    var navigatieid = $(this).attr("title_id"); //retrieve title_id of link so we can compare with php file
			$.ajax({
					method: "get", cache: "false", url: webroot +"scripts/pagina.inc.php", data: "via=ajax_site&navigatieid="+navigatieid,
					success: function(html){ //so, if data is retrieved, store it in html
							//$("#middlePane").html(html); //show the html inside .content div
							$("#overlayDetail").append("#middlePane").html(html);
							$("#middlePane").fadeIn("slow"); //animation
							
							 
							//reload clickmeout because page is refreshed
							jQuery().ready(function(){
								
										$('.clickmeOut').click(function() {
									    		$('#middlePane').fadeOut('fast', function() {
													$('#putImageHere img').fadeTo('fast', 1 , function() {});
													$('#putImageHere a').show( 0, function() {});
									    		});// uitfaden voltooid
									      });

								  
								  // select ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
								  $(".jqTransformSelectWrapper ul li a").click(function(){
									$("#boxPhotoFrame").animate({
									"opacity": "toggle"
							    }, { "duration": 1000, "easing": "easeInOutExpo", queue: true });//Toon boxOverview
								});	
								$("form.jqtransform").jqTransform();
							// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
							});
							Cufon.replace("#middlePane h1");
							Cufon.replace("#middlePane h2");
							Cufon.replace("#middlePane h3");
				 	}
 			});
			
		 			
	 }); 
/************************************************* EINDE LINKERMENU POPUPS *************************************************************/	 


/************************************************ CENTRALE MAP POPUPS MAKEN ***********************************************************/
	 // CENTRALE CLICKS ZETTEN
	 $('#putImageHere a').click(function() { //start function when any link is clicked
		 $("#middlePane").fadeOut('fast').remove();
		 // ER WERD GEKLIKT OP EEN PROJECT 
		 if($(this).attr("rel") == "project"){
				 var navigatieid = $(this).attr("title_id"); //retrieve title_id of link so we can compare with php file
					$.ajax({
							method: "get", cache: "false", url:  webroot +"scripts/project.inc.php", data: "via=ajax_site&navigatieid="+navigatieid,
							success: function(html){ //so, if data is retrieved, store it in html
								$("#overlayDetail").append("#middlePane").html(html);
								$("#middlePane").fadeIn("slow"); //animation
						 	}
					});
			
		 }
	 
	 	// ER WERD GEKLIKT OP EEN ZONE 
		 else{
			 var zoneid = $(this).attr("title_id"); //retrieve title_id of link so we can compare with php file
				$.ajax({
						method: "get", cache: "false", url:  webroot +"scripts/zone.inc.php", data: "via=ajax_site&zoneid="+zoneid,
						success: function(html){ //so, if data is retrieved, store it in html
								$("#overlayDetail").append("#middlePane").html(html);
								$("#middlePane").fadeIn("slow"); //animation
					 	}
				});
		 }
		 			
	 }); 
	 
	 
/**************************************************************** EINDE LARGE MAP POPUPS *****************************************************************/
	 
/****************************************************************  STARTS RECHTERMENU POPUPS ************************************************************/
	// RECHTERMENU CLICKS ZETTEN
	 $('#rightMenu a').click(function() { //start function when any link is clicked
		 $("#middlePane").fadeOut('fast').remove();
		 // VOOR DE 3 PROJECTGROEPEN
		 if($(this).attr("rel") == "project"){
				 var navigatieid = $(this).attr("title_id"); //retrieve title_id of link so we can compare with php file
					$.ajax({
							method: "get", cache: "false", url:  webroot +"scripts/project.inc.php", data: "via=ajax_site&navigatieid="+navigatieid,
							success: function(html){ //so, if data is retrieved, store it in html
									$("#overlayDetail").append("#middlePane").html(html);
									$("#middlePane").fadeIn("slow"); //animation
									 
									
						 	}
					});
		 }
	 
	 	// VOOR DE ZONES 
		 else{
			 var zoneid = $(this).attr("title_id"); //retrieve title_id of link so we can compare with php file
				$.ajax({
						method: "get", cache: "false", url:  webroot +"scripts/zone.inc.php", data: "via=ajax_site&zoneid="+zoneid,
						success: function(html){ //so, if data is retrieved, store it in html
								$("#overlayDetail").append("#middlePane").html(html);
								$("#middlePane").fadeIn("slow"); //animation
					 	}
				});
		 }
		 			
	 }); 
	 
});