var PlayerButton = function(buttonLabel, buttonAction, styleClass) {
    var enabledContent = $("<a href='#'>"+buttonLabel+"</a>");
    var disabledContent = $("<strong>"+buttonLabel+"</strong>");
    var container = $("<li class='"+styleClass+"'></li>");

    var enable = function() {
        container.empty().append(enabledContent);
        enabledContent.click(buttonAction);
    }

    var disable = function() {
        container.empty().append(disabledContent);
    }
    
    var active = function() {
        container.addClass('un-mute');
    }
    
    var inactive = function() {
        container.removeClass('un-mute');
    }
    
    disable();
    
    return({
        'element': container,
        'enable': enable,
        'active': active,
        'inactive': inactive,
        'disable': disable
    });
}

var playerToggleButton = function(buttonOn, buttonOff) {
    var currentButton = buttonOn;

    var on = function() {
        if (currentButton != buttonOn) {
            currentButton.element.after(buttonOn.element);
            currentButton.element.remove();
            currentButton = buttonOn;
            currentButton.enable();
        }
    }
    var off = function() {
        if (currentButton != buttonOff) {
            currentButton.element.after(buttonOff.element);
            currentButton.element.remove();
            currentButton = buttonOff;
            currentButton.enable();
        }
    }

    return({
        'element': currentButton.element,
        'on': on,
        'off': off
    });
}