(function($) {

    $.widget("ui.cellIcon", {

        _init: function() {
            this.element.addClass("ui-input-entry-icon ui-corner-all");
            this.iconSpan = $('<span></span>').appendTo(this.element);
            this._setStyle();
        },

        _setStyle: function() {
            var o = this.options;
            var icon = this.iconSpan;
            var widget = this;

            icon.removeClass();
            icon.addClass("ui-icon ui-icon-" + o.type);
            icon.unbind();

            if (o.title) {
                icon.attr("title", o.title);
            }

            if (o.clickable) {
                icon.parent().addClass("ui-state-default");
                icon.addClass("ui-input-entry-icon-clickable");
                icon.mouseover(function() {
                    $(this.parentNode).addClass("ui-state-hover");
                });
                icon.mouseout(function() {
                    $(this.parentNode).removeClass("ui-state-hover");
                });
                icon.click(function() {
                    widget._trigger("click", null, {});
                });
            }
            else
                icon.parent().removeClass("ui-state-default");
        },

        _setData: function(key, value) {
            $.widget.prototype._setData.apply(this, arguments);
            this._setStyle();
        }
    });

    $.extend($.ui.cellIcon, {
        version: "0.1.0",
        defaults: {
            displayed: true,
            clickable: true,
            type: "help"
        }
    });

})(jQuery);