var foto;
var fotos;
var foto2=0;
var sliden = true;
var volgendeSlide=5000;
var fadeEffecten=400;

$(document).ready(function () {
    if($("#fotobalk").length){
        fotos = jQuery.parseJSON($('#json_fotobalk').val());
        var img = new Image();
        $(fotos).each(function(key,value){
            $(img).attr("src",value);
        });
        $("#fotobalk li:first").addClass('active');
        $("#fotobalk li").mouseenter(function(){
            if(sliden==true){
                sliden = false;
                $("#fotobalk li").each(function(){
                    $(this).removeClass('active');
                });
                $(this).addClass('active');
                foto = $(this).html();
                foto2=foto-1;
                if($('#fotobalk img').attr("src")!=fotos[foto-1]){
                    $('#fotobalk img').fadeTo(fadeEffecten,0.1,function(){
                        $('#fotobalk img').attr("src",fotos[foto-1]);
                        $('#fotobalk img').fadeTo(fadeEffecten,1,function(){
                            //fix de zwarte randen om de png
                            $('#fotobalk img').css('filter', 'none');
                        });
                    });
                }
                setTimeout('sliden=true;',1000);
            }
        });
        setTimeout('gallerie()',volgendeSlide);
    }
});

function gallerie(){
    if(sliden==true){
        foto2+=1;
        if(foto2==fotos.length){foto2=0;}
        $("#fotobalk li").each(function(){
            if($(this).html()==(foto2+1)){
                $(this).addClass('active');
            }
            else{
                $(this).removeClass('active');
            }
        });
        $('#fotobalk img').fadeTo(700,0.1,function(){
            $('#fotobalk img').attr("src",fotos[foto2]);
            $('#fotobalk img').fadeTo(400,1,function(){
                //fix de zwarte randen om de png
                $('#fotobalk img').css('filter', 'none');
            });
        });
    }
    setTimeout('gallerie()',volgendeSlide);
}