var isplaying = true;
function show_controls() {
    var T = '    ';
    var output = '';

    output += T+T+'<div id="controls">'+"\n";
    output += T+T+T+'<div id="nav"></div>'+"\n";
    output += T+T+T+T+'<a id="btn_stop" class="btn_stopstart_carrousel" title="Druk op de spatiebalk om de animatie stoppen."></a>'+"\n";
    output += T+T+T+T+'<a id="btn_start" class="btn_stopstart_carrousel" title="Druk op de spatiebalk om de animatie starten."></a>'+"\n";
    output += T+T+T+'</div>'+"\n";
    document.write(output);
}

var stop = function() {
    isplaying = false;
    $('div#slides').cycle('pause');
    $('div#controls a#btn_stop').hide();
    $('div#controls a#btn_start').show();
}

var start = function() {
    isplaying = true;
    $('div#slides').cycle('resume');
    $('div#controls a#btn_start').hide();
    $('div#controls a#btn_stop').show();
}

$(document).ready(function() {
    $("div#carrousel").addClass("has_js");

    $('div#slides').cycle({
        fx:         'fade',
        speed:      'slow',
        timeout:    6000,
        pager:      '#nav',
        pause:      1,
        height:     204
    });

    $('div#controls a#btn_start').hide();
    $('div#controls a#btn_stop').click(stop);
    $('div#controls a#btn_start').click(start);

    var focusflag = false;
    $("input").focus(function() {
        focusflag = true;
    });

    $("input").blur(function() {
        focusflag = false;
    });

    $(document).keypress(function(e) {
        if (e.which == 32 && focusflag === false) {
            e.preventDefault();
            (isplaying === true) ? stop() : start();
        }
    });

});