// 				jQuery Flower Menu
$(document).ready(function() {
// Aangeven aan welke lijst het menu toegevoegd moet worden					   
	var bc = $('.bloemenLijst'); 
// Aangeven welke div er geshuffeld moet worden
	var $container = $('#shuffle').cycle({ 
		// Methode om de content te shuffelen -> http://jquery.malsup.com/cycle/browser.html --> alleen fx: 'dit' veranderen voor de andere shuffle methode :]
		fx:     'fade', 
		speed:   1000, 
		timeout: 0,
		next:   '#next2', 
		prev:   '#prev2',
		pager:  '#nav'
	});
	
// Totale aantal bloemen;
	var aantal_items = $("#shuffle > div").size();
	
//We beginnen altijd bij plaatje 1
	var total_click = 1;
	
		   //Als er op vorige bloem wordt gedrukt dan 
	$("a#prev2").click(function(event){
		   	// Het getal kan niet negatief zijn want het aantal divs kan niet lager zijn als 1
		 if(total_click <= 1){
			 	// Als het getal lager is als 1 dan gaat de slider naar de laatste div
				total_click = aantal_items;
				// Actieve class meegeven
				$("#"+total_click+"").each(function(index) {
					$('li').removeClass();
					 $(this).parent().toggleClass('activeSlide');
				 });
				return false;  
		} else {
				total_click = total_click - 1;
				$("#"+total_click+"").each(function(index) {
					 $('li').removeClass();
					 $(this).parent().toggleClass('activeSlide');
				 });

				return false;
				}
		   });
		   $("a#next2").click(function(event){
			// Het getal kan niet hoger zijn dan het aantal divjes die we hebbben
		   	 if(total_click > aantal_items-1){
			 	// Als het getal lager is als 1 dan gaat de slider naar het laatste plaatje
				total_click = 1;
				$("#"+total_click+"").each(function(index) {
					  $('li').removeClass();
					 $(this).parent().toggleClass('activeSlide');
				 });
				return false;  
			} else {
				// Als de foto wel hoog genoeg is dan kun je wel gewoon terug.
				total_click = total_click + 1;
				$("#"+total_click+"").each(function(index) {
					$('li').removeClass();
					$(this).parent().toggleClass('activeSlide');
				 });
				}
		   }); 
	// Creeer menu op basis van het aantal gevonden divjes
	$container.children().each(function(i) {

	// Get the title of the flower 
	var title = document.getElementById('menu_'+(i+1)).innerHTML;
    	// create input 
		if(i+1 == 1){ 
			var start = 'class="activeSlide"'
		} else{
			var start =	'class=""'
		}
    		$('<li '+start+'><a rel="bMenu" class="bloemNaam" id="'+(i+1)+'" target="_self">'+title+'</a></li>')
				// append it to button container 
        		.appendTo(bc) 
        		// bind click handler 
        		.click(function() { 
           		// cycle to the corresponding slide 
           		$container.cycle(i);
					total_click = (i+1);
					$("#"+total_click+"").each(function(index) {
				 		$('li').removeClass();
   				 		$(this).parent().toggleClass('activeSlide');
 			 });
	}
);
});			
});