//click on menu functions //

     $(document).ready(function(){
	 			 $('.menuShow').load('food.php');	//by default initally load text from food.php
	 			 $('#submenu a').click(function() { //start function when any link is clicked
						    var food = $(this).attr("title"); //retrieve title of link so we can compare with php file
							$.ajax({
									method: "get", url: "food.php", data: "gerecht="+food,
									success: function(html){ //so, if data is retrieved, store it in html
												$(".menuShow").show("fast"); //animation
												$(".menuShow").html(html); //show the html inside .content div
								 	}
				 			});
				 			if(food == "Suggesties"){
				 					$("#suggestion").css({'display' : 'none'});
				 			}
				 			else{
				 					$("#suggestion").css({'display' : 'block'});
				 			}
         }); 
         
         $('#suggestion a').click(function() { 
							$.ajax({
									method: "get", url: "food.php", data: "gerecht=Suggesties",
									success: function(html){ 
										$(".menuShow").show("fast"); 
										$(".menuShow").html(html); 
										
							 		}
							 });
							 $("#suggestion").css({'display' : 'none'});
							 $('#submenu li a').css({'color' : '#91887e'}); //hoofdmenu
							 $('#submenu ul li a').css({'color' : '#797269'}); //submenu
							 $('#submenu li.last a').css({'color' : '#f24501'}); //laatste
         });
         initMenu();
        // var winWidth = $(window).width(); 
       //  prompt(winWidth)
	 }); 

	 
// show menu functions //
	 function initMenu() {
			  $('#submenu ul').hide(); //hide onderliggende submenu's
			  $('#submenu li a').click(
			    function() {
			    	
			    	
			    	$('#submenu ul li a').css({'color' : '#797269'}); //alles naar originele kleur
			    	var checkElement = $(this).next();
				    //set colors for aangeklikte item !!!
				   
			     
			      var opzoek = $(this).parent().parent();
			     
			      //als aangeklikte element HOOFDMENU is 
			      //zet dan hoofdmenu kleur op oranje + toon submenu if available
			      if( opzoek.is("#submenu")){
			    	  $('#submenu li a').css({'color' : '#91887e'}); //alles naar originele kleur
			      	  $('#submenu ul:visible').slideUp('fast');
			      	  $('#submenu li').css({'paddingBottom' : '10px'});
			      	  $('#submenu .last').css({'paddingBottom' : '10px'});
			      	  $('#submenu li ul li').css({'paddingBottom' : '5px'});
			      	  $(this).css({'color' : '#f24501'}); //aangeklikte op oranje
			      }
			      
			      //als submenu is maak dit ook oranje
			      else{
			    	  $(this).css({'color' : '#f24501'}); //aangeklikte op oranje
			      }
			      
			      //OOK HOOFDMENU  EN SUBMENU IS BESCHIKBAAR EN VISIBLE
			      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
			        return false;
			      }
			      
			      //OOK HOOFDMENU  EN SUBMENU IS BESCHIKBAAR EN NOT VISIBLE
			      else if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
			        $('#submenu ul:visible').slideUp('fast'); //alle submenus sluiten
			        $('#submenu li').css({'paddingBottom' : '10px'});
			        $('#submenu .last').css({'paddingBottom' : '10px'});
			        $('#submenu li ul li').css({'paddingBottom' : '5px'});
			        checkElement.slideDown('fast');
			        //checkElement.a.css({'color' : '#f24501'});
			        //$(this).parent().parent().parent().parent.css({'color' : '#f24501'});
			        return false;
			       }
			       
			       
			      }
			    );
			  }