$(document).ready(function() {
    // add div
    $('#snapshots').before('<div id="options"></div>');
    
    // hide elements
    $('th p').css('display', 'none');
    
    // mux info toggle
    $('#options').append('<label for="muxheadToggle">Extended muxliplex info</label> <input id="muxheadToggle" type="checkbox" />');
    var muxHidden = true;
    $('#muxheadToggle').click(
        function() {
            muxHidden ? $('.muxhead p').css('display', 'block') : $('.muxhead p').css('display', 'none');
            muxHidden = !muxHidden;
        }
    );
    
    // provider name toggle
    $('#options').append('<label for="providerToggle">Service provider names</label> <input id="providerToggle" type="checkbox" />');
    var providerHidden = true;
    $('#providerToggle').click(
        function() {
            providerHidden ? $('th:not(.muxhead) p').css('display', 'block') : $('th:not(.muxhead) p').css('display', 'none')
            providerHidden = !providerHidden;
        }
    );
    
    // statmux toggle
    if ($('#statmux').length) {
        var url = $('#statmux a').attr('href');
        $('#options').append('<label for="statmuxToggle">Individual video bitrates (requires page refresh)</label> ');
        if ($('#statmux').is('.demuxed')) {
            $('#options').append('<input id="statmuxToggle" type="checkbox" checked="checked" />');
        } else {
            $('#options').append('<input id="statmuxToggle" type="checkbox" />');
        }
        $('#statmux').remove();
        $('#statmuxToggle').click(
            function() {
                window.location.href = url;
            }
        );
    }
});