$(document).ready(function () {
    //startwaarden
    var BannerCounter = 0; 																						// BannerCounter is de counter
	var AantalBanners = $(".BannerTriggers li").length;

	  ActiveBanner = $(".BannerTriggers .BannerTrigger:first").addClass("active"); 								// Maak de eerste Li actief.													
    $(".HomeBannerImage").html($(".BannerTriggers .BannerTrigger:first span").html()); 							// plaats de eerste img

    // functie om de banner img te veranderen
    BannerChanger = function (FadeTimer) {																			// FadeTimer = de duur van de fade in
        ActiveBanner = $(".BannerTriggers .BannerTrigger:eq(" + BannerCounter + ")"); 								// defenineer de nieuwe actieve banner
        $(ActiveBanner).addClass("active"); 																		// voeg active class aan actieve banner	
        $(".HomeBannerImageBackground").html($(".HomeBannerImage").html()); 										// kopeer plaatje naar achtergrond
        $(".HomeBannerImage").fadeTo(0, 0); 																		// verberg img div
        $(".HomeBannerImage").html($(".BannerTriggers .BannerTrigger:eq(" + BannerCounter + ") span").html()); 		// kopieer de HTML uit de active span naar de image div
        $(".HomeBannerImage").fadeTo(FadeTimer, 1); 																// fade in
    }

    // rotatiefunctie	
    HomeBanner = function () {
       timer = setInterval(function () {																			// zet de timer
            ActiveBanner.removeClass("active"); 																	// verwijder de active class 
            BannerCounter++;
            if (BannerCounter == AantalBanners) { BannerCounter = 0; };
            BannerChanger(400); 																					// voer deze functie uit met FaderTimer = 400
        }, 8000); 																								// herhaal deze functie om de X milliseconden	
    };

    // mouse events functies
    $(".BannerTriggers li").mouseover(function () {
        clearInterval(timer); 
																						// stop de timer
        ActiveBanner.removeClass("active"); 																		// verwijder de actiev class
        BannerCounter = ($(".BannerTriggers li").index(this)); 													// defineer i, kijk welke li is gehoverd
	
        BannerChanger(0); 																						// voer deze functie uit met FaderTimer = 0
    });

    $(".BannerTriggers li").mouseout(function () {
       	HomeBanner();																						// herstart de timer na mouseout
    });

    HomeBanner();
    
});