//image preloading
loadingImage = new Image(); 
reddotImage = new Image(); 
selecteddotImage = new Image(); 

loadingImage.src = "/gfx/loading.gif";
reddotImage.src = "/gfx/reddot.gif";
selecteddotImage.src = "/gfx/selecteddot.gif";




//when page loaded:
	//set load images in content and nieuws
$("#content").html('<img class="center" id="loading" src="/gfx/loading.gif" >');
$("#nieuws").html('<img class="center" id="loading" src="/gfx/loading.gif" >');
$("#nieuws").html('<img class="center" id="loading" src="/gfx/loading.gif" >');
$(document).ready(function() {
		
	//get nieuws
	jQuery.get("content.php", { label: 'nieuws'},
		function (data){		
		$("#nieuws").html(data);
		},"html");
		
		//get welcome text
	jQuery.get("content.php", { label: 'welkom'},
		function (data){		
		$("#content").html(data);
		},"html");
				
				
	//Hover image for red dots
	$('#dot0').hover(
	    function(){
	        this.src = '/gfx/selecteddot.png';
	         $(this).css("margin-left", parseInt($(this).css("margin-left"))-5 );
	         $(this).css("margin-top", parseInt($(this).css("margin-top"))-5  );
	    },
	    function(){
	   		 $(this).css("margin-left", parseInt($(this).css("margin-left"))+5 );
	         $(this).css("margin-top", parseInt($(this).css("margin-top"))+5  );
	         this.src = '/gfx/reddot.png';
	    }
	);
	
		$('#dot1').hover(
	    function(){
	    	 $(this).css("visibility","hidden");
	         this.src = '/gfx/selecteddot.png';
	         $(this).css("margin-left", parseInt($(this).css("margin-left"))-5 );
	         $(this).css("margin-top", parseInt($(this).css("margin-top"))-5  );
	         $(this).css("visibility","visible");
	    },
	    function(){
	    	 $(this).css("visibility","hidden");
	   		 $(this).css("margin-left", parseInt($(this).css("margin-left"))+5 );
	         $(this).css("margin-top", parseInt($(this).css("margin-top"))+5  );
	         this.src = '/gfx/reddot.png';
	         $(this).css("visibility","visible");
	    }
	);
	
	$('#dot2').hover(
	    function(){
	    	 $(this).css("visibility","hidden");
	         this.src = '/gfx/selecteddot.png';
	         $(this).css("margin-left", parseInt($(this).css("margin-left"))-5 );
	         $(this).css("margin-top", parseInt($(this).css("margin-top"))-5  );
	         $(this).css("visibility","visible");
	    },
	    function(){
	    	 $(this).css("visibility","hidden");
	   		 $(this).css("margin-left", parseInt($(this).css("margin-left"))+5 );
	         $(this).css("margin-top", parseInt($(this).css("margin-top"))+5  );
	         this.src = '/gfx/reddot.png';
	         $(this).css("visibility","visible");
	    }
	);
	
	$('#dot3').hover(
	    function(){
	    	 $(this).css("visibility","hidden");
	         this.src = '/gfx/selecteddot.png';
	         $(this).css("margin-left", parseInt($(this).css("margin-left"))-5 );
	         $(this).css("margin-top", parseInt($(this).css("margin-top"))-5  );
	         $(this).css("visibility","visible");
	    },
	    function(){
	    	 $(this).css("visibility","hidden");
	   		 $(this).css("margin-left", parseInt($(this).css("margin-left"))+5 );
	         $(this).css("margin-top", parseInt($(this).css("margin-top"))+5  );
	         this.src = '/gfx/reddot.png';
	         $(this).css("visibility","visible");
	    }
	);
	
	$('#dot4').hover(
	    function(){
	    	 $(this).css("visibility","hidden");
	         this.src = '/gfx/selecteddot.png';
	         $(this).css("margin-left", parseInt($(this).css("margin-left"))-5 );
	         $(this).css("margin-top", parseInt($(this).css("margin-top"))-5  );
	         $(this).css("visibility","visible");
	    },
	    function(){
	    	 $(this).css("visibility","hidden");
	   		 $(this).css("margin-left", parseInt($(this).css("margin-left"))+5 );
	         $(this).css("margin-top", parseInt($(this).css("margin-top"))+5  );
	         this.src = '/gfx/reddot.png';
	         $(this).css("visibility","visible");
	    }
	);
	
	$('#dot5').hover(
	    function(){
	    	 $(this).css("visibility","hidden");
	         this.src = '/gfx/selecteddot.png';
	         $(this).css("margin-left", parseInt($(this).css("margin-left"))-5 );
	         $(this).css("margin-top", parseInt($(this).css("margin-top"))-5  );
	         $(this).css("visibility","visible");
	    },
	    function(){
	    	 $(this).css("visibility","hidden");
	   		 $(this).css("margin-left", parseInt($(this).css("margin-left"))+5 );
	         $(this).css("margin-top", parseInt($(this).css("margin-top"))+5  );
	         this.src = '/gfx/reddot.png';
	         $(this).css("visibility","visible");
	    }
	);
	
	$('#dot6').hover(
	    function(){
	    	 $(this).css("visibility","hidden");
	         this.src = '/gfx/selecteddot.png';
	         $(this).css("margin-left", parseInt($(this).css("margin-left"))-5 );
	         $(this).css("margin-top", parseInt($(this).css("margin-top"))-5  );
	         $(this).css("visibility","visible");
	    },
	    function(){
	    	 $(this).css("visibility","hidden");
	   		 $(this).css("margin-left", parseInt($(this).css("margin-left"))+5 );
	         $(this).css("margin-top", parseInt($(this).css("margin-top"))+5  );
	         this.src = '/gfx/reddot.png';
	         $(this).css("visibility","visible");
	    }
	);
	
	$('#dot7').hover(
	    function(){
	    	 $(this).css("visibility","hidden");
	         this.src = '/gfx/selecteddot.png';
	         $(this).css("margin-left", parseInt($(this).css("margin-left"))-5 );
	         $(this).css("margin-top", parseInt($(this).css("margin-top"))-5  );
	         $(this).css("visibility","visible");
	    },
	    function(){
	    	 $(this).css("visibility","hidden");
	   		 $(this).css("margin-left", parseInt($(this).css("margin-left"))+5 );
	         $(this).css("margin-top", parseInt($(this).css("margin-top"))+5  );
	         this.src = '/gfx/reddot.png';
	         $(this).css("visibility","visible");
	    }
	);
	
	$('#dot8').hover(
	    function(){
	    	 $(this).css("visibility","hidden");
	         this.src = '/gfx/selecteddot.png';
	         $(this).css("margin-left", parseInt($(this).css("margin-left"))-5 );
	         $(this).css("margin-top", parseInt($(this).css("margin-top"))-5  );
	         $(this).css("visibility","visible");
	    },
	    function(){
	    	 $(this).css("visibility","hidden");
	   		 $(this).css("margin-left", parseInt($(this).css("margin-left"))+5 );
	         $(this).css("margin-top", parseInt($(this).css("margin-top"))+5  );
	         this.src = '/gfx/reddot.png';
	         $(this).css("visibility","visible");
	    }
	);
	
	});
	
	
	function getContent(labelstring){
	//get content when clicked on red dot
	
	
		$("#content").html('<img class="center" id="loading" src="/gfx/loading.gif" >');
		jQuery.get("content.php", { label: labelstring},
		function (data){
				
		$("#content").html(data);
		
		},"html");
		$("#content").fadeIn("slow");
	}