/// class PD.Web.UI.Controls.GridIconColumn
/// using PD.Web.UI.Controls.GridColumn

PD.Web.UI.Controls.GridIconColumn = 
PD.Web.UI.Controls.GridColumn.extend({

    //===================================
    // FIELDS
    //===================================

    _iconPath: null,

    //===================================
    // CONSTRUCTOR
    //===================================

    init: function (options) {

        this._iconPath = PD.Path.resolve(options.iconDirectory || "~/application/icons/16x16/");

        this._super($.extend({
            width: 26,
            title: "&nbsp;",
            titleText: null,
            titleIcon: null,
            icon: null,
            tooltip: null,
            template: _.bind(this.template, this),
            transform: function (data, settings) {
                return settings.icon == null ? data[settings.field] : settings.icon
            },
            attributes: {
                style: "padding:4px 4px 0 4px;text-overflow:clip;"
            },
            headerAttributes: {
                "class": "-pd-noresize",
                style: "padding:0;"
            }
        }, options));
        
        this.properties("title", this.getTitle());

    },

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

    template: function (data) {

        var value = this.properties("transform")(data, this.properties().getAll());
        var toolTip = this.toolTip(data, this.properties().getAll());
        var result = this.getIconTag(value, toolTip);

        return result;

    },

    toolTip: function (data, settings) {

        var result = null;

        if (_.isFunction(settings.tooltip)) {
            result = settings.tooltip(data, settings);
        }
        else {
            result = settings.tooltip;
        }

        result = result == null ? "" : result;

        return result;

    },

    titleIcon: function () {

    },

    titleTemplate: function () {

        var result = "";
        var value = this.properties("titleIcon");

        if (value != null && value.charAt(0) !== "/") {
            if (value.charAt(0) === "~") {
                result = "<img src='" + PD.Path.resolve(value) + "' style='vertical-align:center;' title='" + toolTip + "' />";
            }
            else {
                result = "<img src='" + this._iconPath + value + "' style='vertical-align:center;' title='" + toolTip + "' />";
            }
        }

        return "<div style='text-align:center;width:100%;'>" + result + "</div>";

    },

    getIconSrc: function (src) {

        var result = src;

        if (src != null && src.charAt(0) !== "/") {
            if (src.charAt(0) === "~") {
                result = PD.Path.resolve(src);
            }
            else {
                result = this._iconPath + src;
            }
        }

        return result;

    },

    getIconTag: function (src, toolTip, styles) {

        var result = [];
        var style = this.compileStyle(_.extend({
            width: "100%",
            "text-align": "center",
            "box-sizing": "border-box"
        }, styles));
        
        if (src != null) {

            result = [
                "<div style='" + style + "'>",
                    "<img src='" + this.getIconSrc(src) + "' style='vertical-align:center;' title='" + (toolTip != null ? toolTip : "") + "' />",
                "</div>"
            ];

        }

        return result.join("");

    },

    getTitle: function () {

        var result = null;
        var titleIcon = this.properties("titleIcon");
        var titleText = this.properties("titleText");
        
        if (titleIcon != null) {
            result = this.getIconTag(titleIcon, titleText, {
                height: "26px",
                padding: "3px 0 0 0",
                opacity: ".5"
            });
        }
        else {
            if (titleText != null) {
                result = titleText;
            }
            else {
                result = this.properties("title");
            }
        }

        return result;

    },

    compileStyle: function (style) {

        var result = "";

        for (key in style) {
            result += key + ":" + style[key] + ";"; 
        }

        return result;

    }

});