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

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

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

    _iconPath: null,

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

    init: function (options) {

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

        this._super($.extend({
            width: 26,
            title: "&nbsp;",
            template: $.proxy(this.template, this),
            attributes: {
                style: "padding:3px 3px 3px 3px;text-overflow:clip;"
            }
        }, options));

    },

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

    template: function (data) {

        var field = this.properties("field");

        var result = [
            "<div style='width:100%;height:16px;background-color:#EEEEEE;border:1px solid #DDDDDD;box-sizing:border-box;position:relative;'>",
                "<div style='height:14px;width:" + data[field] + "%;background-color:#27D93C;box-sizing:border-box;'>&nbsp;</div>",
                "<div style='position:absolute;top:0;bottom:0;right:0;left:0;font-size:10px;line-height:14px;text-align:center;color:#000000;'>" + data[field] + " %</div>",
            "</div>"
        ];

        return result.join("");

    }

});