// Set current active class to corresponding span for each checked radio button
function setCurrentActiveRadioButton(){
    $("#personalise-control input[type=radio]:checked").each(function () {
        $(this).prev().addClass("active");
    });
}


var personalise_control_height;

$(document).ready(function () {

    // Replace radio buttons with spans with background images
    $("#personalise-control input[type=radio]").each(function () {
        var spanId = "rad-" + $(this).val();
        $(this).before('<span id="' + spanId + '"></span>').hide();
    });

    // Attach click event to spans to check corresponding radio button
    $("#personalise-control .rad-buttons span").click(function () {
        $(this)
            .addClass("active")
            .siblings()
            .removeClass("active")
        $(this)
            .next()
            .attr('checked', true);
    });

    // Cache control height for animating open
    personalise_control_height = $('#personalise-control').height();

    // Hide personalise control initially and bind open event to accessibility link
    $('#personalise-control').css({ 'height': '0px', 'overflow-y': 'hidden' });
    $('.open-link.acessibility-link').click(function () {
        openDisplayOptions();
        return false;
    });

});

function openDisplayOptions() {
    $('.open-link.acessibility-link').css('opacity', '0.5');
    $('#personalise-control').css('display', 'block');
    $('#personalise-control').animate({
        height: personalise_control_height + "px"
    }, 500);
}

function closeDisplayOptions() {
    $('#personalise-control').animate({
        height: '0px'
    }, 500, function() {
        $('.open-link.acessibility-link').css('opacity', '1');
        $(this).css('display', 'none');
    });
}


// Call this function on window load so all radio buttons already replaced
$(window).load(function () {
    setCurrentActiveRadioButton();
});