///<reference path="../../typings/lite/app_references.d.ts" />
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
//GULP_ABSTRACT_END
define(['jquery', 'Block'], function ($, Block) {
    TSLiteModules.Block = Block;
    /**
     * BlockJsonItem block resides inside a scene or timeline
     * @class BlockJsonItem
     * @extends Block
     * @constructor
     * @param {string} i_placement location where objects resides which can be scene or timeline
     * @param {string} i_campaign_timeline_chanel_player_id required and set as block id when block is inserted onto timeline_channel
     * @return {Object} Block instance
     * @example
     * path: http://www.digitalsignage.com/videoTutorials/_data/videos.json
     * json player: children[0].children
     * json item: text
     *
     *
     * https://secure.digitalsignage.com/GoogleSheetsValues/6e2919a1-47f0-4a4f-bd94-de7ecfbe604d/1-DBPXrRzvB68kM7-ALH4DapNPOr1pDf7MHoQZSKVhKE/0/R1C1:R3C21
     * 6e2919a1-47f0-4a4f-bd94-de7ecfbe604d
     */
    var BlockJsonItem = (function (_super) {
        __extends(BlockJsonItem, _super);
        function BlockJsonItem(options) {
            if (options) {
                this.m_options = options;
            }
            this.m_blockType = 4310;
            _.extend(this.m_options, { blockType: this.m_blockType });
            _super.call(this);
        }
        BlockJsonItem.prototype.initialize = function () {
            var self = this;
            _super.prototype.initialize.call(this, self.m_options);
            self._initSubPanel(Elements.BLOCK_JSON_ITEM_COMMON_PROPERTIES);
            self.m_labelFontSelector = self.m_blockProperty.getLabelJsonItemFontSelector();
            self._listenInputFieldPathChange();
            self._listenFontSelectionChange();
            self._listenMouseEntersSceneCanvas();
            self._listenFieldSelected();
            self._listenDateFormatSelected();
            self._listenMaintainAspectChanged();
            self._listenDualNumericChanged();
            self.m_sceneMime = BB.Pepper.getSceneMime(self.m_sceneID);
            self.m_config = {
                'Json.instagram.feed': {
                    title: 'Instagram',
                    tabTitle: 'Posts',
                    fields: {
                        1: {
                            name: "title",
                            type: "text",
                            label: "title"
                        },
                        2: {
                            name: "urlImage",
                            type: "resource",
                            label: "image"
                        },
                        3: {
                            name: "video",
                            type: "resource",
                            label: "video"
                        }
                    }
                },
                'Json.twitter': {
                    title: 'Twitter',
                    tabTitle: 'Tweets',
                    fields: {
                        1: {
                            name: "name",
                            type: "text",
                            label: "name"
                        },
                        2: {
                            name: "text",
                            type: "text",
                            label: "text"
                        },
                        3: {
                            name: "screen_name",
                            type: "text",
                            label: "screen name"
                        },
                        4: {
                            name: "created_at",
                            type: "text",
                            label: "created at"
                        },
                        5: {
                            name: "profile_background_image_url",
                            type: "resource",
                            label: "Background image"
                        },
                        6: {
                            name: "profile_image_url",
                            type: "resource",
                            label: "Image"
                        }
                    }
                },
                'Json.digg': {
                    title: 'Digg',
                    tabTitle: 'Posts',
                    fields: {
                        1: {
                            name: "title",
                            type: "text",
                            label: "title"
                        },
                        2: {
                            name: "link",
                            type: "resource",
                            label: "image"
                        }
                    }
                },
                'Json.spreadsheet': {
                    title: 'Spreadsheet',
                    tabTitle: 'Cells',
                    fields: {
                        1: {
                            name: "$cells.1.1.value",
                            type: "dual_numeric",
                            label: "Sheet cell"
                        }
                    }
                },
                'Json.calendar': {
                    title: 'Calendar',
                    tabTitle: 'Date',
                    fields: {
                        1: {
                            name: "summary",
                            type: "text",
                            label: "summary"
                        },
                        2: {
                            name: "description",
                            type: "text",
                            label: "description"
                        },
                        3: {
                            name: "organizer",
                            type: "text",
                            label: "organizer"
                        },
                        4: {
                            name: "organizerEmail",
                            type: "text",
                            label: "organizer email"
                        },
                        5: {
                            name: "created",
                            type: "text",
                            label: "created"
                        },
                        6: {
                            name: "startDateTime_time",
                            type: "date",
                            label: "start date time"
                        },
                        7: {
                            name: "endDateTime_time",
                            type: "date",
                            label: "end date time"
                        },
                        8: {
                            name: "updated",
                            type: "text",
                            label: "updated"
                        }
                    }
                },
                'Json.weather': {
                    title: 'World weather',
                    tabTitle: 'Conditions',
                    fields: {
                        1: {
                            name: "$[0].data.current_condition[0].iconPath",
                            type: "resource",
                            label: "current icon"
                        },
                        2: {
                            name: "$[0].data.current_condition[0].temp_@",
                            type: "text",
                            label: "current temp"
                        },
                        3: {
                            name: "$[0].data.current_condition[0].humidity",
                            type: "text",
                            label: "current humidity"
                        },
                        4: {
                            name: "$[0].data.weather[0].iconPath",
                            type: "resource",
                            label: "today icon"
                        },
                        5: {
                            name: "$[0].data.weather[0].mintemp@",
                            type: "text",
                            label: "today min temp"
                        },
                        6: {
                            name: "$[0].data.weather[0].maxtemp@",
                            type: "text",
                            label: "today max temp"
                        },
                        7: {
                            name: "$[0].data.weather[0].day",
                            type: "text",
                            label: "today label"
                        },
                        8: {
                            name: "$[0].data.weather[1].iconPath",
                            type: "resource",
                            label: "today+1 icon"
                        },
                        9: {
                            name: "$[0].data.weather[1].mintemp@",
                            type: "text",
                            label: "today+1 min temp"
                        },
                        10: {
                            name: "$[0].data.weather[1].maxtemp@",
                            type: "text",
                            label: "today+1 max temp"
                        },
                        11: {
                            name: "$[0].data.weather[1].day",
                            type: "text",
                            label: "today+1 label"
                        },
                        12: {
                            name: "$[0].data.weather[2].iconPath",
                            type: "resource",
                            label: "today+2 icon"
                        },
                        13: {
                            name: "$[0].data.weather[2].mintemp@",
                            type: "text",
                            label: "today+2 min temp"
                        },
                        14: {
                            name: "$[0].data.weather[2].maxtemp@",
                            type: "text",
                            label: "today+2 max temp"
                        },
                        15: {
                            name: "$[0].data.weather[2].day",
                            type: "text",
                            label: "today+2 label"
                        },
                        16: {
                            name: "$[0].data.weather[3].iconPath",
                            type: "resource",
                            label: "today+3 icon"
                        },
                        17: {
                            name: "$[0].data.weather[3].mintemp@",
                            type: "text",
                            label: "today+3 min temp"
                        },
                        18: {
                            name: "$[0].data.weather[3].maxtemp@",
                            type: "text",
                            label: "today+3 max temp"
                        },
                        19: {
                            name: "$[0].data.weather[3].day",
                            type: "text",
                            label: "today+3 label"
                        },
                        20: {
                            name: "$[0].data.weather[4].iconPath",
                            type: "resource",
                            label: "today+4 icon"
                        },
                        21: {
                            name: "$[0].data.weather[4].mintemp@",
                            type: "text",
                            label: "today+4 min temp"
                        },
                        22: {
                            name: "$[0].data.weather[4].maxtemp@",
                            type: "text",
                            label: "today+4 max temp"
                        },
                        23: {
                            name: "$[0].data.weather[4].day",
                            type: "text",
                            label: "today+4 label"
                        },
                        24: {
                            name: "$[0].data.weather[5].iconPath",
                            type: "resource",
                            label: "today+5 icon"
                        },
                        25: {
                            name: "$[0].data.weather[5].mintemp@",
                            type: "text",
                            label: "today+5 min temp"
                        },
                        26: {
                            name: "$[0].data.weather[5].maxtemp@",
                            type: "text",
                            label: "today+5 max temp"
                        },
                        27: {
                            name: "$[0].data.weather[5].day",
                            type: "text",
                            label: "today+5 label"
                        },
                        28: {
                            name: "$[0].data.weather[6].iconPath",
                            type: "resource",
                            label: "today+6 icon"
                        },
                        29: {
                            name: "$[0].data.weather[6].mintemp@",
                            type: "text",
                            label: "today+6 min temp"
                        },
                        30: {
                            name: "$[0].data.weather[6].maxtemp@",
                            type: "text",
                            label: "today+6 max temp"
                        },
                        31: {
                            name: "$[0].data.weather[6].day",
                            type: "text",
                            label: "today+6 label"
                        }
                    }
                }
            };
        };
        /**
         Populate the dual numeric steppers that are used in components like the google sheets
         @method _populateDualNumeric
         **/
        BlockJsonItem.prototype._populateDualNumeric = function () {
            var self = this;
            var row = '1';
            var column = '1';
            var domPlayerData = self._getBlockPlayerData();
            var xSnippet = $(domPlayerData).find('XmlItem');
            var fieldName = $(xSnippet).attr('fieldName');
            var re = /cells.([0-9]+).([0-9]+).value/i;
            var match = fieldName.match(re);
            if (!_.isNull(match)) {
                row = String(match[1]);
                column = String(match[2]);
            }
            var spinners = $('.spinner', Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS);
            $(spinners[0]).spinner('value', row);
            $(spinners[2]).spinner('value', column);
        };
        /**
         Listen when the dual numeric stepper changed
         @method _listenDualNumericChanged
         **/
        BlockJsonItem.prototype._listenDualNumericChanged = function () {
            var self = this;
            $('.spinner', Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS).spinner({ value: 1, min: 1, max: 1000, step: 1 });
            $('.spinner-input', Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS).prop('disabled', true).css({ backgroundColor: 'transparent' });
            self.m_dualNumericHandler = _.debounce(function (e) {
                if (!self.m_selected)
                    return;
                if ($(e.target).prop("tagName") == 'INPUT')
                    return;
                var inputs = $('input', Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS);
                var row = inputs.eq(0).val();
                var column = inputs.eq(1).val();
                var fieldName = "$cells." + row + "." + column + ".value";
                var domPlayerData = self._getBlockPlayerData();
                var xSnippet = $(domPlayerData).find('XmlItem');
                $(xSnippet).attr('fieldName', fieldName);
                self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
            }, 500, false);
            $('.spinner', Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS).on('mouseup', self.m_dualNumericHandler);
        };
        /**
         Listen date format selected
         @method _listenDateFormatSelected
         **/
        BlockJsonItem.prototype._listenDateFormatSelected = function () {
            var self = this;
            self.m_dateFormatChangeHandler = function (e) {
                if (!self.m_selected)
                    return;
                var $selected = $(e.target).find(':selected');
                var value = $selected.val();
                var domPlayerData = self._getBlockPlayerData();
                var xSnippet = $(domPlayerData).find('XmlItem');
                $(xSnippet).attr('dateFormat', value);
                self._setBlockPlayerData(domPlayerData);
            };
            $(Elements.JSON_ITEM_DATE_FORMAT, self.$el).on('change', self.m_dateFormatChangeHandler);
        };
        /**
         Listen to json field selection and update msdb
         @method _listenFieldSelected
         **/
        BlockJsonItem.prototype._listenFieldSelected = function () {
            var self = this;
            self.m_fieldChangeHandler = function (e) {
                if (!self.m_selected)
                    return;
                var $selected = $(e.target).find(':selected');
                var fieldName = $selected.val();
                var fieldType = $selected.data('type');
                var domPlayerData = self._getBlockPlayerData();
                var xSnippet = $(domPlayerData).find('XmlItem');
                $(xSnippet).attr('fieldType', fieldType);
                $(xSnippet).attr('fieldName', fieldName);
                self._setBlockPlayerData(domPlayerData);
            };
            $(Elements.JSON_ITEM_TEXT_FIELDS, self.$el).on('change', self.m_fieldChangeHandler);
        };
        /**
         Listen to changes in font UI selection from Block property and take action on changes
         @method _listenFontSelectionChange
         **/
        BlockJsonItem.prototype._listenMouseEntersSceneCanvas = function () {
            var self = this;
            BB.comBroker.listenWithNamespace(BB.EVENTS.MOUSE_ENTERS_CANVAS, self, function (e) {
                if (!self.m_selected)
                    return;
                $(Elements.LABEL_TEXT).blur();
            });
        };
        /**
         Listen to changes in font UI selection from Block property and take action on changes
         @method _listenFontSelectionChange
         **/
        BlockJsonItem.prototype._listenFontSelectionChange = function () {
            var self = this;
            BB.comBroker.listenWithNamespace(BB.EVENTS.FONT_SELECTION_CHANGED, self, function (e) {
                if (!self.m_selected || e.caller !== self.m_labelFontSelector) {
                    return;
                }
                var config = e.edata;
                var domPlayerData = self._getBlockPlayerData();
                var xSnippet = $(domPlayerData).find('XmlItem');
                var xSnippetFont = $(xSnippet).find('Font');
                config.bold === true ? xSnippetFont.attr('fontWeight', 'bold') : xSnippetFont.attr('fontWeight', 'normal');
                config.italic === true ? xSnippetFont.attr('fontStyle', 'italic') : xSnippetFont.attr('fontStyle', 'normal');
                config.underline === true ? xSnippetFont.attr('textDecoration', 'underline') : xSnippetFont.attr('textDecoration', 'none');
                xSnippetFont.attr('fontColor', BB.lib.colorToDecimal(config.color));
                xSnippetFont.attr('fontSize', config.size);
                xSnippetFont.attr('fontFamily', config.font);
                xSnippetFont.attr('textAlign', config.alignment);
                self._setBlockPlayerData(domPlayerData);
            });
        };
        /**
         Listen Maintain Aspect ratio slider changed position
         @method _listenMaintainAspectChanged
         **/
        BlockJsonItem.prototype._listenMaintainAspectChanged = function () {
            var self = this;
            self.m_maintainAspectHandler = function (e) {
                if (!self.m_selected)
                    return;
                var mode = $(e.target).prop('checked') == true ? 1 : 0;
                var domPlayerData = self._getBlockPlayerData();
                var xSnippet = $(domPlayerData).find('XmlItem');
                $(xSnippet).attr('maintainAspectRatio', mode);
                self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
            };
            $(Elements.JSON_ITEM_MAINTAIN_ASPECT_RATIO).on("change", self.m_maintainAspectHandler);
        };
        /**
         Listen json input path change
         @method _listenInputFieldPathChange
         @param {Number} i_playerData
         @return {Number} Unique clientId.
         **/
        BlockJsonItem.prototype._listenInputFieldPathChange = function () {
            var self = this;
            self.m_inputPathChangeHandler = _.debounce(function (e) {
                if (!self.m_selected) {
                    return;
                }
                var newText = $(e.target).val();
                newText = BB.lib.cleanProbCharacters(newText, 1);
                var domPlayerData = self._getBlockPlayerData();
                var xSnippet = $(domPlayerData).find('XmlItem');
                var oldText = $(xSnippet).attr('fieldName');
                if (newText === oldText) {
                    return;
                }
                $(xSnippet).attr('fieldName', newText);
                self._setBlockPlayerData(domPlayerData);
            }, 333, false);
            $(Elements.JSON_ITEM_FIELD).on('input blur mousemove', self.m_inputPathChangeHandler);
        };
        /**
         Load up property values in the common panel
         @method _populate
         @return none
         **/
        BlockJsonItem.prototype._populate = function () {
            var self = this;
            // JSON item (no mime)
            if (_.isUndefined(self.m_sceneMime)) {
                var domPlayerData = self._getBlockPlayerData();
                var xSnippet = $(domPlayerData).find('XmlItem');
                var fieldName = $(xSnippet).attr('fieldName');
                $(Elements.JSON_ITEM_FIELD_CONTAINER).show();
                $(Elements.JSON_ITEM_TEXT_FIELDS_CONTAINER).hide();
                $(Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS).hide();
                $(Elements.JSON_ITEM_ICON_SETTINGS).hide();
                $(Elements.JSON_ITEM_DATE_SETTINGS).hide();
                $(Elements.JSON_ITEM_FIELD).val(fieldName);
                return;
            }
            // Json mime subclass
            self._populateMimeType();
        };
        /**
         Populate date format for common types of date styles on dropdown selection
         @method _populateDateFormat
         @param {string} i_selectedFormat
         **/
        BlockJsonItem.prototype._populateDateFormat = function (i_selectedFormat) {
            var self = this;
            var formats = [
                'D/M/Y',
                'DD/MM/YY',
                'DD/MM/YYYY',
                'DD/MMM/YY',
                'MM/DD/YY',
                'MM/DD/YYYY',
                'MMM/DD/YYYY ',
                'D/M/Y J:NN:SS',
                'DD/MM/YY J:NN:SS',
                'DD/MM/YYYY J:NN:SS',
                'DD/MMM/YY J:NN:SS',
                'MM/DD/YY J:NN:SS',
                'MM/DD/YYYY J:NN:SS',
                'MMM/DD/YYYY J:NN:SS',
                'J:NN:SS',
                'J:NN:SS A',
                'J:NN:SS A',
                'J:NN'
            ];
            var snippet = "<option selected data-type=\"\" value=\"select format\">select format</option>";
            for (var i = 0; i < formats.length; i++) {
                snippet += "<option value=\"" + formats[i] + "\">" + formats[i] + "</option>";
            }
            $(Elements.JSON_ITEM_DATE_FORMAT).empty().append(snippet);
            var elem = $(Elements.JSON_ITEM_DATE_FORMAT).find('option[value="' + i_selectedFormat + '"]');
            elem.prop('selected', 'selected');
        };
        /**
         The component is a subclass of JSON item (i.e.: it has a mimetype) so we need to populate it according
         to its mimetype config options
         @method _populate
         @return none
         **/
        BlockJsonItem.prototype._populateMimeType = function () {
            var self = this;
            var domPlayerData = self._getBlockPlayerData();
            var xSnippet = $(domPlayerData).find('XmlItem');
            var xSnippetFont = $(xSnippet).find('Font');
            var fieldType = $(xSnippet).attr('fieldType');
            var fieldName = $(xSnippet).attr('fieldName');
            var maintainAspectRatio = $(xSnippet).attr('maintainAspectRatio');
            var dateFormat = $(xSnippet).attr('dateFormat');
            $(Elements.JSON_ITEM_FIELD_CONTAINER).hide();
            $(Elements.JSON_ITEM_TEXT_FIELDS_CONTAINER).show();
            var snippet = "<option selected data-type=\"\" value=\"no field selected\">select field</option>";
            var fields = self.m_config[self.m_sceneMime].fields;
            _.each(fields, function (k) {
                snippet += "<option data-type=\"" + k.type + "\" value=\"" + k.name + "\">" + k.label + "</option>";
            });
            $(Elements.JSON_ITEM_TEXT_FIELDS).empty().append(snippet);
            var elem = $(Elements.JSON_ITEM_TEXT_FIELDS).find('option[value="' + fieldName + '"]');
            elem.prop('selected', 'selected');
            // populate according to filed type (text/resource)
            switch (fieldType) {
                case 'resource':
                    {
                        $(Elements.JSON_ITEM_FONT_SETTINGS).hide();
                        $(Elements.JSON_ITEM_DATE_SETTINGS).hide();
                        $(Elements.JSON_ITEM_ICON_SETTINGS).show();
                        self._populateAspectRatio(maintainAspectRatio);
                        break;
                    }
                case 'date':
                    {
                        self._populateDateFormat(dateFormat);
                        setTimeout(function () {
                            $(Elements.JSON_ITEM_DATE_SETTINGS).show();
                        }, 10);
                    }
                case 'text':
                    {
                        $(Elements.JSON_ITEM_ICON_SETTINGS).hide();
                        $(Elements.JSON_ITEM_DATE_SETTINGS).hide();
                        $(Elements.JSON_ITEM_FONT_SETTINGS).show();
                        self.m_labelFontSelector.setConfig({
                            bold: xSnippetFont.attr('fontWeight') === 'bold' ? true : false,
                            italic: xSnippetFont.attr('fontStyle') === 'italic' ? true : false,
                            underline: xSnippetFont.attr('textDecoration') === 'underline' ? true : false,
                            alignment: xSnippetFont.attr('textAlign'),
                            font: xSnippetFont.attr('fontFamily'),
                            color: BB.lib.colorToHex(BB.lib.decimalToHex(xSnippetFont.attr('fontColor'))),
                            size: xSnippetFont.attr('fontSize')
                        });
                        break;
                    }
            }
            // populate according to mimetype exception or default behavior
            switch (self.m_sceneMime) {
                case 'Json.spreadsheet':
                    {
                        $(Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS).show();
                        self._populateDualNumeric();
                        break;
                    }
                default:
                    {
                        $(Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS).hide();
                    }
            }
        };
        /**
         Populate aspect ratio switch button
         @method _populateAspectRatio
         @params {Boolean} i_aspectRatio
         **/
        BlockJsonItem.prototype._populateAspectRatio = function (i_aspectRatio) {
            var self = this;
            if (i_aspectRatio == '1') {
                $(Elements.JSON_ITEM_MAINTAIN_ASPECT_RATIO).prop('checked', true);
            }
            else {
                $(Elements.JSON_ITEM_MAINTAIN_ASPECT_RATIO).prop('checked', false);
            }
        };
        /**
         Populate the common block properties panel, called from base class if exists
         @method _loadBlockSpecificProps
         @return none
         **/
        BlockJsonItem.prototype._loadBlockSpecificProps = function () {
            var self = this;
            self._populate();
            this._viewSubPanel(Elements.BLOCK_JSON_ITEM_COMMON_PROPERTIES);
        };
        /**
         translate a json item path such as $[0].data.weather... to it's label
         @method _translateToLabel
         @param {Number} i_playerData
         @return {Number} Unique clientId.
         **/
        BlockJsonItem.prototype._translateToLabel = function (i_jsonPath) {
            var self = this;
            // no mime configured in scnene so return same label
            if (_.isUndefined(self.m_sceneMime))
                return i_jsonPath;
            switch (self.m_sceneMime) {
                case 'Json.spreadsheet':
                    {
                        // lookup up label in m_config for spreadsheet
                        return self.m_config['Json.spreadsheet'].fields['1'].label;
                    }
                default:
                    {
                        // look up label in m_config db for everything else
                        var fields = self.m_config[self.m_sceneMime].fields;
                        for (var item in fields) {
                            if (fields[item].name == i_jsonPath)
                                return fields[item].label;
                        }
                    }
            }
            return i_jsonPath;
        };
        /**
         Update the title of the block inside the assigned element.
         @method _updateTitle
         @return none
         **/
        BlockJsonItem.prototype._updateTitle = function () {
            var self = this;
            _super.prototype._updateTitle.call(this);
            if (_.isUndefined(self.m_sceneMime))
                return;
            $(Elements.SELECTED_CHANNEL_RESOURCE_NAME).text(self.m_config[self.m_sceneMime].title);
        };
        /**
         Update the title of the selected tab properties element
         @method m_blockAcronym
         **/
        BlockJsonItem.prototype._updateTitleTab = function () {
            var self = this;
            _super.prototype._updateTitleTab.call(this);
            if (_.isUndefined(self.m_sceneMime))
                return;
            $(Elements.BLOCK_SUBPROPERTIES_TITLE).text(self.m_config[self.m_sceneMime].tabTitle);
        };
        /**
         Some json item field names need to be muated into something else.
         For example, the default fieldName of text needs to be changed into '$cells.1.1.value' when
         used in a scene of mimeType
         @method _mutateCustomFieldName
         **/
        BlockJsonItem.prototype._mutateCustomFieldName = function () {
            var self = this;
            switch (self.m_sceneMime) {
                case 'Json.spreadsheet':
                    {
                        var domPlayerData = self._getBlockPlayerData();
                        var xSnippet = $(domPlayerData).find('XmlItem');
                        var fieldName = $(xSnippet).attr('fieldName');
                        if (fieldName == 'text') {
                            var value = self.m_config['Json.spreadsheet'].fields['1'].name;
                            $(xSnippet).attr('fieldName', value);
                            self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
                        }
                        break;
                    }
                default:
                    {
                    }
            }
        };
        /**
         Convert the block into a fabric js compatible object
         @Override
         @method fabricateBlock
         @param {number} i_canvasScale
         @param {function} i_callback
         **/
        BlockJsonItem.prototype.fabricateBlock = function (i_canvasScale, i_callback) {
            var self = this; //any to fake it
            self._mutateCustomFieldName();
            var domPlayerData = self._getBlockPlayerData();
            var layout = $(domPlayerData).find('Layout');
            var xSnippet = $(domPlayerData).find('XmlItem');
            var fieldName = $(xSnippet).attr('fieldName');
            var text = self._translateToLabel(fieldName);
            var font = $(xSnippet).find('Font');
            var link = '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
            var url = ('https:' === document.location.protocol ? 'https' : 'http') + link;
            //$.getScript(src, function (data) {
            //    console.log(data);
            //});
            var t = new fabric.IText(text, {
                fontSize: $(font).attr('fontSize'),
                fontFamily: $(font).attr('fontFamily'),
                fill: '#' + BB.lib.decimalToHex($(font).attr('fontColor')),
                textDecoration: $(font).attr('textDecoration'),
                fontWeight: $(font).attr('fontWeight'),
                fontStyle: $(font).attr('fontStyle'),
                textAlign: $(font).attr('textAlign'),
                top: 5,
                left: 5
            });
            // calculate block so it can always contain the text it holds and doesn't bleed
            //self.m_minSize.w = t.width < 50 ? 50 : t.width * 1.2;
            //self.m_minSize.h = t.height < 50 ? 50 : t.height * 1.2;
            //var w = parseInt(layout.attr('width')) < self.m_minSize.w ? self.m_minSize.w : parseInt(layout.attr('width'));
            //var h = parseInt(layout.attr('height')) < self.m_minSize.h ? self.m_minSize.h : parseInt(layout.attr('height'));
            var w = parseInt(layout.attr('width'));
            var textWidth = t.width * 1.2;
            if (textWidth > w) {
                t.setText('...');
            }
            var h = parseInt(layout.attr('height'));
            var textHeight = t.height * 1.2;
            if (textHeight > h) {
                t.setText('...');
            }
            var rec = self._fabricRect(w, h, domPlayerData);
            var o = self._fabricateOptions(parseInt(layout.attr('y')), parseInt(layout.attr('x')), w, h, parseInt(layout.attr('rotation')));
            rec.originX = 'center';
            rec.originY = 'center';
            t.top = 0 - (rec.height / 2);
            t.left = 0 - (rec.width / 2);
            _.extend(self, o);
            self.add(rec);
            self.add(t);
            self._fabricAlpha(domPlayerData);
            self._fabricLock();
            self['canvasScale'] = i_canvasScale;
            //$.ajax({
            //    url: url,
            //    async: false,
            //    dataType: 'script',
            //    complete: function (e) {
            //        setTimeout(i_callback, 1);
            //    }
            //});
            setTimeout(i_callback, 1);
            var direction = $(font).attr('textAlign');
            switch (direction) {
                case 'left':
                    {
                        break;
                    }
                case 'center':
                    {
                        t.set({
                            textAlign: direction,
                            originX: direction,
                            left: 0
                        });
                        break;
                    }
                case 'right':
                    {
                        t.set({
                            textAlign: direction,
                            originX: direction,
                            left: rec.width / 2
                        });
                        break;
                    }
            }
        };
        /**
         Delete this block
         @method deleteBlock
         @params {Boolean} i_memoryOnly if true only remove from existance but not from msdb
         **/
        BlockJsonItem.prototype.deleteBlock = function (i_memoryOnly) {
            var self = this;
            $(Elements.JSON_ITEM_FIELD).off('input blur mousemove', self.m_inputPathChangeHandler);
            $(Elements.JSON_ITEM_MAINTAIN_ASPECT_RATIO).off("change", self.m_maintainAspectHandler);
            $(Elements.JSON_ITEM_TEXT_FIELDS, self.$el).off('change', self.m_fieldChangeHandler);
            $(Elements.JSON_ITEM_DATE_FORMAT, self.$el).off('change', self.m_dateFormatChangeHandler);
            $('.spinner', Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS).off('mouseup', self.m_dualNumericHandler);
            BB.comBroker.stopListenWithNamespace(BB.EVENTS.FONT_SELECTION_CHANGED, self);
            BB.comBroker.stopListenWithNamespace(BB.EVENTS.MOUSE_ENTERS_CANVAS, self);
            self._deleteBlock(i_memoryOnly);
        };
        return BlockJsonItem;
    })(TSLiteModules.Block);
    return BlockJsonItem;
});
//# sourceMappingURL=BlockJsonItem.js.map