$(document).ready(function () {
    // set variablen en startwaarden.
    var HoogteVerschil = $(".RotatingSideBannerList li").outerHeight(true); 					// HoogteVerschil = hoogte van een li element
    $(".RotatingSideBannerList").css("top", -HoogteVerschil); 								// ga één stap omhoog 
    $(".RotatingSideBannerImage").html($(".RotatingSideBannerList li:first span").html()); 	// plaats de eerste img

    // verplaats functie om images en li te verplaatsen
    Verplaatsen = function () {
        $(".RotatingSideBannerImageBackground").html($(".RotatingSideBannerImage").html()); 	// verplaats img naar achtergrond div
        $(".RotatingSideBannerImage").fadeTo(0, 0).html(""); 									// maak de img div leeg		

        Eerste = $(".RotatingSideBannerList li:first"); 										// sla de bovenste li op in een tijdelijke var
        $(".RotatingSideBannerList li:first").remove(); 										// verwijder bovenste li
        Eerste.appendTo($(".RotatingSideBannerList")); 										    // voeg li toe onder aan de lijst	
        $(".RotatingSideBannerList").css("top", "0px"); 										// reset css waarden
    }

    // functie om tekst in en uit de highlight te animeren
    txtflow = function () {
        $(".RotatingSideBannerActive").css("top", "22px");                 	        			// top naar beneden zetten voor de komende animate 
        $(".RotatingSideBannerActive").html($(".RotatingSideBannerList li:first").html());      // poep de html van de eerste li in de highlight, 	
        $(".RotatingSideBannerActive").animate({ top: '0px' }, 500); 							// schuif de tekst omhoog	
    }

    //Interval functie
    RotatingSideBanner = function () {
        timer2 = setInterval(function () {
            $(".RotatingSideBannerImage").html($(".RotatingSideBannerList li:first span").html()); 		// kopieer de html tussen de <span>-tags naar de img div
            $(".RotatingSideBannerActive").animate({ top: -HoogteVerschil }, 500, 							// animeer highlight naar boven
			    function () {
			        txtflow(); 																			// voer deze functie uit wanneer animatie gedaan is	
			    }
		    );
            $(".RotatingSideBannerImage").fadeTo(400, 1); 												// fade de img div in
            $(".RotatingSideBannerList").animate({ top: -HoogteVerschil }, 1000, 								// animeer de UL omhoog
			    function () {
			        Verplaatsen(); 																		// voer deze functie uit wanneer animatie gedaan is									
			    }
		    )
        }, 8000); 																						// herhaal deze functie om de X milliseconden
    };

    //here we go !!

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;


if (is_chrome){
	txtflow();
    	Verplaatsen();
    	RotatingSideBanner();

	window.addEventListener("focus", function() { 
		RotatingSideBanner();
	 },false);  
	
	window.addEventListener("blur", function() {
		clearInterval(timer2);
	},false); 
} else {	
    txtflow();
    Verplaatsen();
    RotatingSideBanner();
}



});