var globalFlickr;
var main =  function() {
	 
	//script voor uitklapbare sitemap. Een boomstructuur met zowel klikbare list items als uitklapbare listitems die andere links bevatten. 
	//als er geklikt wordt op de header van de sitemap, toggle tussen zichtbaar en onzichtbaar
	$('#sitemap > h1').click(function(){
		  $('article').children('ul').toggle();		  
	  });
	//laat de uitklapbare list items gesloten zijn op het moment van het laden van de pagina
	  $('li.expand > ul').hide();
	  $('#sitemap > ul').hide();
	  //als er geklikt op een uitklapbaar item, toggle tussen zichtbaar en onzichtbaar
	  $('li.expand').click(function(){
		  $(this).children('ul').toggle();
		  return false;		  		  
	  });
	  //goede achtergrond en footer
		if (document.URL.match ("index.html") || document.URL.match("Conclusie.html") || document.URL.match("Contextmenu.html"))
		  {
		  $('head').append("<style type='text/css'>.wrap footer {position: absolute;*}</style>");	  
		  };
	  
	  //laad de data uit het externe bestand en teken de grafiek
	  $.getJSON("data.json", function(json) {       
	           var dataSet=json.dataSet;	           
	           var options = {
			    series: {
			    	
			        pie: {
			            show: true,
			            
			            label: {
			                show: true,
			                radius: 320,
			                
			                background: {
			                    opacity: 0.8,
			                    color: '#CDCDD1'
			                	}
			            	},
	  						stroke: {
	  								width: 1
	  						},
	  						combine: {
	  							threshold: 0.01,
	  							label: "Overige"
	  						}
			        	}	
			    },
			    legend: {
			        show: true
			    },
			    grid: {
			    	show: true,
			        hoverable: true,
			        borderWidth: 4,
			        backgroundColor: '#D9D9D9'
			    },
			    
			};
	  
	           var grafiek = $('#grafiek');
	           $.plot(grafiek, dataSet, options);
	  
	  //maak een div als tooltip en blijf onzichtbaar totdat er een hover event plaatsvindt
	  
	          $("<div id='tooltip'></div>").css({
	        	  position: "absolute",
	        	  width: "600px",
	        	  "text-align": "center",
	        	  display: "none",
	        	  border: "2px solid #fdd",
	        	  padding: "4px",
	        	  "background-color": "#BD0000",
	        	  opacity: 0.80
		}).appendTo("#grafiek");
	  });
	  
	  //laat de tooltip zien als er gehoverd wordt boven een item uit de grafiek
	  $("#grafiek").bind("plothover", function (event, pos, item) {
		  
		  if (item) {
			  //converteer het getal naar een string met ',' ertussen
			  var aantal =((item.series.data[0])[1]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
				$("#tooltip").html("Takedown Piracy heeft <b>" + aantal +"</b> <em>"+ item.series.label + "</em> verwijderd")
					.fadeIn(250);
			} else {
				$("#tooltip").hide();
			}
		  
		  
		  
	  });
	  
      
	  //code voor fotobrowser
      //variabele voor api_key die nodig is voor het benaderen van de Flickr API en fotoNr om een foto uit de zoekresultaten te benaderen
      var api_key ="224460843b644fc66afe71ab99174e92";
      var fotoNr = 0;
      
      /*Als de zoekbutten geklikt wordt, gebruik de tag in het zoekveld en roep de flickr.photos.search methode aan via de API.
       Benader de benodigde waarden uit de JSON om de srclink van de afbeelding te bouwen en sla deze op in de varialele globalFlickr.
       Append de url van de foto aan een img tag in de imgcontainer.
       Roep de functie preLoad() om de volgende foto uit de zoekresultaten te laden in een onzichtbare container (caching).
      */
      
      $('#nextButton').hide();
      $('#prevButton').hide();
      
      $('#zoekButton').click(function(){
          $('#nextButton').show();
          $('#prevButton').show();    	  
    	  var tag = $('#zoekterm').val();
    	  fotoNr = 0;
    	  $( "#imgcontainer" ).empty();
    	  
    	  $.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=" + api_key +"&tags="+tag+"&format=json&jsoncallback=?"
    		  ,function(data){
    		;
    			  globalFlickr = data;
    			  var farm = data.photos.photo[fotoNr].farm;
    			  var server = data.photos.photo[fotoNr].server;
    			  var id = data.photos.photo[fotoNr].id;
    			  var secret = data.photos.photo[fotoNr].secret;
    			  var photoSrc = "https://farm" + farm + ".staticflickr.com/" + server + "/"+ id + "_" + secret + "_z.jpg";
    			  $('<img/>').attr("src", photoSrc).appendTo('#imgcontainer');
    			  preLoad();
    			  
    		  });
    	  });
     //gebruik de globalFlickr variabele om de volgende foto uit de zoekresultaten weer te geven in de container als de nextbutton geklikt wordt    
     
      $('#nextButton').click(function(){  	  
    	  fotoNr++;
    	  $( "#imgcontainer").empty();		
    	  var farm = globalFlickr.photos.photo[fotoNr].farm;
    	  var server = globalFlickr.photos.photo[fotoNr].server;
    	  var id = globalFlickr.photos.photo[fotoNr].id;
    	  var secret = globalFlickr.photos.photo[fotoNr].secret;
    	  var photoSrc = "https://farm" + farm + ".staticflickr.com/" + server + "/"+ id + "_" + secret + "_z.jpg";
    	  $('<img/>').attr("src", photoSrc).appendTo('#imgcontainer');
    	  preLoad();
    	  
    	  });
      
      //als de prevbutton geklikt wordt, gebruik de globalFlickr variabele om de vorige afbeelding te weergeven
      $('#prevButton').click(function(){  
    	  if(fotoNr > 0)
    		 { 
    		  fotoNr--;
    		  $( "#imgcontainer" ).empty();		
    		  var farm = globalFlickr.photos.photo[fotoNr].farm;
    		  var server = globalFlickr.photos.photo[fotoNr].server;
    		  var id = globalFlickr.photos.photo[fotoNr].id;
    		  var secret = globalFlickr.photos.photo[fotoNr].secret;
    		  var photoSrc = "https://farm" + farm + ".staticflickr.com/" + server + "/"+ id + "_" + secret + "_z.jpg";
    		  $('<img/>').attr("src", photoSrc).appendTo('#imgcontainer');
    		  
    		 }
    	  });
      
      //laad alvast de volgende afbeelding in een hidden container om deze sneller te kunnen weergeven als de volgende button geklikt wordt.
      function preLoad()
      {
    	  $('#hiddenimgcontainer').hide();
    	  var farm = globalFlickr.photos.photo[fotoNr + 1].farm;
		  var server = globalFlickr.photos.photo[fotoNr + 1].server;
		  var id = globalFlickr.photos.photo[fotoNr + 1].id;
		  var secret = globalFlickr.photos.photo[fotoNr + 1].secret;
		  var photoSrc = "https://farm" + farm + ".staticflickr.com/" + server + "/"+ id + "_" + secret + "_z.jpg";
		  $('<img/>').attr("src", photoSrc).appendTo('#hiddenimgcontainer');
    	  
      };
      
      
     
      
      
    	   
      /*code voor bronvermelding, voor elke link naar een externe bron, maak een entry in de footer voor de bronvermelding.
       * op de plek van de bron maak een link in de vorm van een klein getal naar de externe website
       * in de bronvermelding maak een interne link naar de plaats waar de link staat (klein getal)
       * in de bronvermelding geef de volledige url van de externe website
      */
      $( ".bron" ).each( function( index, element ){
    	    var bronNr = index + 1;
    	    $(this).attr("id" , "bron" + bronNr);
    	    
    	    
    	    var $bron = $(this).attr("id");
    	    $(this).html(bronNr);
    	    
    	    $('#bronvermelding').append( "<a href=\"#" + $bron + "\" class= \"scroll\">" + "[" + bronNr + "]</a> <a href=\"" + this + "\">" + this + "</a>" + "<br/>");

    	    		
    	     	    
      });

      
    	    
    	  

      
};

  
$(document).ready(main);