isc.defineClass("GeToolBarButton", "StatefulCanvas");

isc.GeToolBarButton.addProperties({
    width: 60,
    height: 55,
    border: "1px solid #DBE0E0",
    backgroundImage: "/img/icons/empty.png",
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center 2px",
    cursor: "hand",
    title: "",
    hoverStyle: "toolTip",

    _backgroundImage: null,

    mouseOver: function () {
        this.setBackgroundColor("#DEE2E2");
    },
    mouseOut: function () {
        this.setBackgroundColor("#EFF1F1");
    },

    // Override initWidget to populate the button content
    initWidget : function () {
        if (!isc.isA.String(this.title)) {
            this.title = "";
        }
        if (!isc.isA.String(this.prompt)) {
            this.prompt = this.title;
        }
        this.Super("initWidget", arguments);
        this.setContents("<div align='center' class='toolBar'>" + this.title + "</div>");
        this._backgroundImage = this.backgroundImage;
    },

    setBackgroundImage : function (backgroundImage) {
        this.Super("setBackgroundImage", arguments);
        // TODO: Apply backgroundImage to _backgroundImage if not already set and if it doesn't contain "_Disabled"
    },

    setDisabled : function (disabled) {
        this.Super("setDisabled", arguments);
        this.setBackgroundImage(this._getIconURL());
        if (disabled) {
            this.setCursor("default");
            this.setOpacity(70);
        } else {
            this.setCursor("hand");
            this.setOpacity(100);
        }
    }
});

isc.GeToolBarButton.addMethods({
    // Copied from isc.Button
    _getIconURL : function () {
        var state = this.state;
        var selected = this.selected;
        var customState = this.getCustomState();
        var sc = isc.StatefulCanvas;

        // ignore states we don't care about
        if (state == sc.STATE_DISABLED && !this.showDisabledIcon) state = null;
        else if (state == sc.STATE_DOWN && !this.showDownIcon) state = null;
        else if (state == sc.STATE_OVER && !this.showRollOverIcon) state = null;

        if (!this.showIconState) {
            state = null;
            customState = null;
        }

        if (selected && !this.showSelectedIcon) selected = false;
        // Note that getFocusedState() will return false if showFocusedAsOver is true, which is
        // appropriate
        var focused = this.showFocusedIcon ? this.getFocusedState() : null;

        return isc.Img.urlForState(this._backgroundImage, selected, focused, state, null, customState);
    }
});