/// class PD.Web.UI.Controls.ToggleButton
/// using PD.Web.UI.Controls.Button

PD.Web.UI.Controls.ToggleButton =
PD.Web.UI.Controls.CommandButton.extend({

    //===================================
    // EVENT HANDLERS
    //===================================

    onClick: function (e) {
        this.executeCommand();
    },

    onCommandChange: function (e) {

        var image = e.icon,
            content = [
                image == null ? "" : "<img src='" + image + "' class='k-image'/>"
            ];

        e.toolbar.enable(e.node, e.enabled);
        e.toolbar.toggle("#" + e.node.prop("id"), e.command.props("toggled"));
        
        e.node.prop("title", e.tooltip);
        e.node.empty();
        e.node.addClass("k-button-icon");
        e.node.html(content.join(""));

    },

    //===================================
    // PUBLIC METHODS
    //===================================

    getSettings: function () {

        var result = {
            type: "button",
            id: this.data("id"),
            enable: this.data("enable"),
            imageUrl: this.data("icon"),
            overflow: this.data("overflow"),
            text: this.data("text"),
            selected: this.data("selected"),
            togglable: true,
            attributes: {
                "data-id": this.data("id"),
                "title": this.data("tooltip"),
                "class": (this.data("text") === "" ? "-pd-no-text" : "")
            }
        }

        return result;

    }

});