var Elementen;
var aantalElementen = 0;
var timer = null;
var currentElement  = 0;
var getTimer = 10;

function clickedItem(image) {
    clearTimeout(timer);    
    var liElementen = jQuery('#bannermover ul li');
    jQuery(liElementen).removeClass('clicked');
    jQuery(liElementen[image]).addClass('clicked');
    timer=setTimeout("changeImage()",(10000));
	fillTimer();
}

function changeImage() {
    clearTimer();
	
	var randomWaarde = 0;
	
    if(currentElement!=aantalElementen-1) {
        randomWaarde=currentElement+1;
    }
        
    jQuery(Elementen[currentElement]).fadeOut(1000);
    jQuery(Elementen[randomWaarde]).fadeIn(1000);
    currentElement = randomWaarde;    
    clickedItem(randomWaarde);   
}

function fillTimer() {
    var newImage = 0;
    
    if(currentElement!=aantalElementen-1) {
        newImage=currentElement+1;
    }
	
	jQuery('#bannermover ul li .span_' + newImage).animate( { top: '0px' }, 10200);
}

function clearTimer() {
	var element = 0;
	
    if(currentElement!=aantalElementen-1) {
        element=currentElement+1;
    }

	jQuery('#bannermover ul li span').css('top','28px');
	jQuery('#bannermover ul li .span_' + element).stop();
}

function gotoThis(image) {
	clearTimer();
    
    if(image!=currentElement) {
        jQuery(Elementen[currentElement]).fadeOut(1000);
        jQuery(Elementen[image]).fadeIn(1000);
    }
    currentElement = image;    
	clickedItem(image);
}

function gotoPrevious() {
    clearTimer();

	var previous = 0;
    
    if(currentElement>0) {
        previous = currentElement-1;
    } else {
        previous = aantalElementen-1;
    }
    
    jQuery(Elementen[currentElement]).fadeOut(1000);
    jQuery(Elementen[previous]).fadeIn(1000);
    currentElement =previous;
    clickedItem(previous);
}

function gotoNext() {
    clearTimer();
	
	var Next = 0;
    
    if(currentElement<aantalElementen-1) {
        Next = currentElement+1;
    }
    
    jQuery(Elementen[currentElement]).fadeOut(1000);
    jQuery(Elementen[Next]).fadeIn(1000);
    currentElement = Next;
	clickedItem(Next);
}

jQuery(function() {
    Elementen = jQuery('#bannerimage .articlelistblock ul li');
    aantalElementen = Elementen.length;
    
    if(aantalElementen>1) {
        for(var x=0; x<aantalElementen;x++) {
            var liElement = Elementen[x];
            var anchor = jQuery('.articlelist_thumbnail',liElement);
            var image = jQuery('img',liElement);
            if(jQuery('.source a').length>0) {
                var anchorSource = jQuery('.source a',liElement)[0].href;
                if(jQuery('.articlelist_link a',liElement).length>0){
                    jQuery('.articlelist_link a',liElement)[0].href = anchorSource;
                    jQuery('.articlelist_link a',liElement)[0].innerHTML = 'Kijk hoe het werkt';
                }
            }
            jQuery(liElement).append(jQuery(image[0]));
            jQuery(anchor[0]).remove();
            jQuery('.clear',liElement).remove();
        }

        var bannermover = jQuery('#bannermover')[0];
        jQuery(bannermover).mouseover(function() { jQuery(this).addClass('hover');}).mouseout(function() { jQuery(this).removeClass('hover');});
        
        for (var x=1; x<=aantalElementen; x++) {
            if(x==1) { 
                var tekst = "<ul><li class=\"fc clicked\" onclick=\"gotoThis("+(x-1)+")\"><span class='span_" + (x-1) + "'></span><label>" + x + "</label></li>";
            } else if (x==aantalElementen) {
                tekst+="<li class=\"lc\" onclick=\"gotoThis("+(x-1)+")\"><span class='span_" + (x-1) + "'></span><label>" + x + "</label></li>";
                tekst+="</ul>";
            } else {
                tekst+="<li onclick=\"gotoThis("+(x-1)+")\"><span class='span_" + (x-1) + "'></span><label>" + x + "</label></li>";
            }
        }    
        
        bannermover.innerHTML = tekst;

        timer=setTimeout("changeImage()",(10000));
		fillTimer();
            
        jQuery('#bannermover ul li').mouseover( function() { jQuery(this).addClass('itemhover');}).mouseout(function() { jQuery(this).removeClass('itemhover');});
    }        
});