/**
 Block property is a singleton Backbone view that represents shared UI view for all Blocks (Channels and Scenes blocks).
 It lives inside PropertiesViews
 @class BlockProperties
 @constructor
 @return {object} instantiated BlockProperties
 **/
define(['jquery', 'backbone', 'Knob', 'nouislider', 'gradient', 'spinner', 'FontSelector', 'RSSLinks', 'MRSSLinks', 'BarMeterView', 'timepicker', 'datepicker', 'bootstrap-table-editable', 'bootstrap-table-sort-rows', 'LiveInput'], function ($, Backbone, Knob, nouislider, gradient, spinner, FontSelector, RSSLinks, MRSSLinks, BarMeterView, timepicker, datepicker, bootstraptableeditable, bootstraptablesortrows, LiveInput) {
 
    /**
     Custom event fired when a gradient color picked
     @event COLOR_SELECTED
     @param {this} caller
     @param {self} context caller
     @param {Event} event
     @static
     @final
     **/
    BB.EVENTS.GRADIENT_COLOR_CHANGED = 'GRADIENT_COLOR_CHANGED';
 
    /**
     Custom YouTube event fired when bar meter changed event
     @event YOUTUBE_METER_QUALITY_CHANGED
     @param {This} caller
     @param {Self} context caller
     @param {Event}
     @static
     @final
     **/
    BB.EVENTS.YOUTUBE_METER_QUALITY_CHANGED = 'YOUTUBE_METER_QUALITY_CHANGED';
 
 
    /**
     Custom Location priority event fired when bar meter changed event
     @event LOCATION_PRIORITY_METER_CHANGED
     @param {This} caller
     @param {Self} context caller
     @param {Event}
     @static
     @final
     **/
    BB.EVENTS.LOCATION_PRIORITY_METER_CHANGED = 'LOCATION_PRIORITY_METER_CHANGED';
 
 
    /**
     Custom event fired when gradient color selection picker closed
     @event GRADIENT_COLOR_CLOSED
     @param {this} caller
     @param {self} context caller
     @param {Event} event
     @static
     @final
     **/
    BB.EVENTS.GRADIENT_COLOR_CLOSED = 'GRADIENT_COLOR_CLOSED';
 
    /**
     event fires when fasterq background color changed
     @event Block.FASTERQ_BG_COLOR_CHANGE
     @param {this} caller
     @param {String} selected block_id
     **/
    BB.EVENTS.FASTERQ_BG_COLOR_CHANGE = 'FASTERQ_BG_COLOR_CHANGE';
 
    /**
     event fires when block length is changing (requesting a change), normally by a knob property widget
     @event BLOCK_LENGTH_CHANGING
     @param {Object} this
     @param {Object} caller the firing knob element
     @param {Number} value the knob's position value (hours / minutes / seconds)
     **/
    BB.EVENTS.BLOCK_LENGTH_CHANGING = 'BLOCK_LENGTH_CHANGING';
 
    /**
     event fires when background alpha changed
     @event ALPHA_CHANGED
     @param {Object} this
     @param {Object} caller the firing element
     @param {Number} alpha value
     **/
    BB.EVENTS.ALPHA_CHANGED = 'ALPHA_CHANGED';
 
    /**
     event fires when video volume changed
     @event VIDEO_VOLUME_CHANGED
     @param {Object} this
     @param {Object} caller the firing element
     @param {Number} alpha value
     **/
    BB.EVENTS.VIDEO_VOLUME_CHANGED = 'VIDEO_VOLUME_CHANGED';
 
    /**
     event fires when youtube volume changed
     @event YOUTUBE_VOLUME_CHANGED
     @param {Object} this
     @param {Object} caller the firing element
     @param {Number} alpha value
     **/
    BB.EVENTS.YOUTUBE_VOLUME_CHANGED = 'YOUTUBE_VOLUME_CHANGED';
 
    /**
     event fires when radius of location changed
     @event LOCATION_RADIUS_CHANGED
     @param {Object} this
     @param {Object} caller the firing element
     @param {Number} alpha value
     **/
    BB.EVENTS.LOCATION_RADIUS_CHANGED = 'LOCATION_RADIUS_CHANGED';
 
    /**
     event fires datagrid collection is dragged
     @event COLLECTION_ROW_DRAG
     @param {Object} this
     @param {Object} caller the firing element
     @param {Number} alpha value
     **/
    BB.EVENTS.COLLECTION_ROW_DRAG = 'COLLECTION_ROW_DRAG';
 
    /**
     event fires datagrid collection is dropped
     @event COLLECTION_ROW_DROP
     @param {Object} this
     @param {Object} caller the firing element
     @param {Number} alpha value
     **/
    BB.EVENTS.COLLECTION_ROW_DROP = 'COLLECTION_ROW_DROP';
 
    /**
     event fires datagrid collection data changed / saved
     @event COLLECTION_ROW_CHANGED
     @param {Object} this
     @param {Object} caller the firing element
     @param {Number} alpha value
     **/
    BB.EVENTS.COLLECTION_ROW_CHANGED = 'COLLECTION_ROW_CHANGED';
 
    /**
     event fires datagrid collection event data chnaged / saved
     @event COLLECTION_EVENT_ROW_CHANGED
     @param {Object} this
     @param {Object} caller the firing element
     @param {Number} alpha value
     **/
    BB.EVENTS.COLLECTION_EVENT_ROW_CHANGED = 'COLLECTION_EVENT_ROW_CHANGED';
 
    /**
     event fires datagrid location row is dragged
     @event LOCATION_ROW_DRAG
     @param {Object} this
     @param {Object} caller the firing element
     @param {Number} alpha value
     **/
    BB.EVENTS.LOCATION_ROW_DRAG = 'LOCATION_ROW_DRAG';
 
    /**
     event fires datagrid location row is dropped
     @event LOCATION_ROW_DROP
     @param {Object} this
     @param {Object} caller the firing element
     @param {Number} alpha value
     **/
    BB.EVENTS.LOCATION_ROW_DROP = 'LOCATION_ROW_DROP';
 
    /**
     event fires datagrid location row data changed / saved
     @event LOCATION_ROW_CHANGED
     @param {Object} this
     @param {Object} caller the firing element
     @param {Number} alpha value
     **/
    BB.EVENTS.LOCATION_ROW_CHANGED = 'LOCATION_ROW_CHANGED';
 
    /**
     event fires when location live input value chanegs such as LAT/LNG/resource names
     @event LOCATION_LIVE_INPUT_CHANGED
     @param {Object} this
     @param {Object} caller the firing element
     @param {Number} alpha value
     **/
    BB.EVENTS.LOCATION_LIVE_INPUT_CHANGED = 'LOCATION_LIVE_INPUT_CHANGED';
 
 
    /**
     event fires when new location point adding to google maps
     @event Block.ADD_LOCATION_POINT
     @param {this} caller
     @param {String} selected block_id
     **/
    BB.EVENTS.ADD_LOCATION_POINT = 'ADD_LOCATION_POINT';
 
    BB.SERVICES.BLOCK_PROPERTIES = 'BlockProperties';
 
    var BlockProperties = BB.View.extend({
 
        /**
         Constructor
         @method initialize
         **/
        initialize: function () {
            var self = this;
 
            BB.comBroker.setService(BB.SERVICES.BLOCK_PROPERTIES, self);
 
            this.m_property = BB.comBroker.getService(BB.SERVICES['PROPERTIES_VIEW']);
            self.m_property.initPanel(Elements.BLOCK_PROPERTIES);
            self.m_rssFontSelector = undefined;
            self.m_loadedOnceCollectionDatagrid = false;
            self.m_loadedOnceJsonDatagrid = false;
            self.m_loadedOnceLocationDatagrid = false;
 
            self._alphaSliderInit();
            self._bgGradientInit();
            self._bgSceneInit();
            self._bgFasterQColorInit();
            self._borderSceneColorInit();
            self._propLengthKnobsInit();
            self._videoVolumeSliderInit();
            self._youtubeVolumeSliderInit();
            self._youtubeInit();
            self._locationLiveInputs();
            self._locationRadiusSliderInit();
            self._locationPriorityInit();
            self._rssFontSelectorInit();
            self._rssSourceSelectorInit();
            self._mrssSourceSelectorInit();
            self._timepickerDayDurationInit();
            self._datepickerDayDurationInit();
            self._rssPollTimeInit();
            self._fasterQInit();
            self._labelFontSelectorInit();
            self._jsonItemFontSelectorInit();
            self._twitterFontSelectorInit();
            self._labelClockFontSelectorInit();
        },
 
        /**
         Init alpha slider UI in the common properties
         @method _alphaSliderInit
         **/
        _alphaSliderInit: function () {
            var self = this;
            $(Elements.BLOCK_ALPHA_SLIDER).noUiSlider({
                handles: 1,
                start: 100,
                step: 1,
                range: [0, 100],
                serialization: {
                    to: [$(Elements.BLOCK_ALPHA_LABEL), 'text']
                }
            });
            self.m_blockAlphaHandler = $(Elements.BLOCK_ALPHA_SLIDER).on('change', function (e) {
                var alpha = parseFloat($(Elements.BLOCK_ALPHA_SLIDER).val()) / 100;
                BB.comBroker.fire(BB.EVENTS.ALPHA_CHANGED, this, self, alpha)
                return false;
            });
        },
 
        /**
         Load jquery gradient component once
         @method _bgGradientInit
         **/
        _bgGradientInit: function () {
            var self = this;
 
            var lazyUpdateBgColor = _.debounce(function (points, styles) {
                if (points.length == 0)
                    return;
                BB.comBroker.fire(BB.EVENTS.GRADIENT_COLOR_CHANGED, self, null, {points: points, styles: styles});
            }, 50);
 
            var gradientColorPickerClosed = function () {
                log('render gradient');
                BB.comBroker.fire(BB.EVENTS.GRADIENT_COLOR_CLOSED, self, null);
            };
 
            $(Elements.BG_COLOR_GRADIENT_SELECTOR).gradientPicker({
                change: lazyUpdateBgColor,
                closed: gradientColorPickerClosed,
                fillDirection: "90deg"
            });
 
            // always close gradient color picker on mouseout
            $('.colorpicker').on('mouseleave', function (e) {
                $(document).trigger('mousedown');
                BB.comBroker.fire(BB.EVENTS.GRADIENT_COLOR_CLOSED, self, self);
            });
 
            // to destroy the plugin instance
            // gradient = {}; $(Elements.BG_COLOR_GRADIENT_SELECTOR).remove();
        },
 
        /**
         Init the scene background selector
         @method _bgSceneInit
         **/
        _bgSceneInit: function () {
            var self = this;
            var colorSettings = {
                animationSpeed: 50,
                animationEasing: 'swing',
                change: $.proxy(self._onSceneBgColorSelected, self),
                changeDelay: 100,
                control: 'hue',
                value: '#ffffff',
                defaultValue: '#428bca',
                show: $.proxy(self._onSceneColorToggle, self),
                hide: $.proxy(self._onSceneColorToggle, self),
                hideSpeed: 100,
                inline: false,
                letterCase: 'lowercase',
                opacity: false,
                position: 'bottom left',
                showSpeed: 100,
                theme: 'bootstrap'
            };
            $(Elements.SCENE_BACKGROUND_SELECTOR).minicolors(colorSettings);
        },
 
        /**
         Init the fasterq background color selector
         @method _bgFasterQColorInit
         **/
        _bgFasterQColorInit: function () {
            var self = this;
            // show: $.proxy(self._onSceneColorToggle, self),
            // hide: $.proxy(self._onSceneColorToggle, self),
            var colorSettings = {
                animationSpeed: 50,
                animationEasing: 'swing',
                change: $.proxy(self._onFasterQBgColorSelected, self),
                changeDelay: 100,
                control: 'hue',
                value: '#ffffff',
                defaultValue: '#428bca',
                hideSpeed: 100,
                inline: false,
                letterCase: 'lowercase',
                opacity: false,
                position: 'bottom left',
                showSpeed: 100,
                theme: 'bootstrap'
            };
            $(Elements.FASTERQ_BLOCK_COLOR_SELECTOR).minicolors(colorSettings);
        },
 
        /**
         Init the scene backgroud selector
         @method _bgSceneInit
         **/
        _borderSceneColorInit: function () {
            var self = this;
            var colorSettings = {
                animationSpeed: 50,
                animationEasing: 'swing',
                change: $.proxy(self._onSceneBorderColorSelected, self),
                changeDelay: 100,
                control: 'hue',
                value: '#ffffff',
                defaultValue: '#428bca',
                show: $.proxy(self._onSceneColorToggle, self),
                hide: $.proxy(self._onSceneColorToggle, self),
                hideSpeed: 100,
                inline: false,
                letterCase: 'lowercase',
                opacity: false,
                position: 'bottom left',
                showSpeed: 100,
                theme: 'bootstrap'
            };
            $(Elements.SCENE_BORDER_COLOR_SELECTOR).minicolors(colorSettings);
        },
        /**
         On fasterQ background color selected by minicolors
         @method _onFasterQBgColorSelected
         @param {String} i_color
         **/
        _onFasterQBgColorSelected: function (i_color) {
            var self = this;
            BB.comBroker.fire(BB.EVENTS.FASTERQ_BG_COLOR_CHANGE, self, self, i_color);
        },
 
        /**
         On scene block border color selected by minicolors
         @method _onSceneBorderColorSelected
         @param {String} i_color
         **/
        _onSceneBorderColorSelected: function (i_color) {
            var self = this;
            if (self.m_showBorderOn)
                BB.comBroker.fire(BB.EVENTS.BLOCK_BORDER_CHANGE, self, self, i_color);
        },
 
        _onSceneColorToggle: function (e) {
            var self = this;
            if (self.m_showBorderOn) {
                self.m_showBorderOn = undefined;
            } else {
                self.m_showBorderOn = 1;
            }
 
        },
 
        /**
         On scene background color selected by minicolors
         @method _onSceneBgColorSelected
         @param {String} i_color
         **/
        _onSceneBgColorSelected: function (i_color) {
            var self = this;
            BB.comBroker.fire(BB.EVENTS.SCENE_BG_COLOR_CHANGED, self, self, i_color);
        },
 
        /**
         Create the block length knobs so a user can set the length of the block with respect to timeline_channel
         @method _propLengthKnobsInit
         @return none
         **/
        _propLengthKnobsInit: function () {
            var snippet = '<input id="blockLengthHours" data-displayPrevious="false" data-min="0" data-max="23" data-skin="tron" data-width="60" data-height="60"  data-thickness=".2" type="text" class="knob" data-fgColor="gray">' +
                '<input id="blockLengthMinutes" data-displayPrevious="false" data-min="0" data-max="59" data-skin="tron" data-width="60" data-height="60" data-thickness=".2" type="text" class="knob" data-fgColor="gray">' +
                '<input id="blockLengthSeconds" data-displayPrevious="false" data-min="0" data-max="59" data-skin="tron" data-width="60" data-height="60"  data-thickness=".2" type="text" class="knob" data-fgColor="gray">';
 
            $(Elements.CHANNEL_BLOCK_PROPS).append(snippet);
 
            $(Elements.CLASS_KNOB).knob({
                /*change: function (value) {
                 console.log("change : " + value);
                 var caller = this['i'][0].id;
                 },*/
                release: function (value) {
                    // console.log(this.$.attr('value'));
                    // console.log("release : " + value + ' ' + this['i'][0].id);
                    var caller = this['i'][0].id;
                    BB.comBroker.fire(BB.EVENTS.BLOCK_LENGTH_CHANGING, this, caller, value);
                },
                /*cancel: function () {
                 console.log("cancel : ", this);
                 },*/
                draw: function () {
                    if (this.$.data('skin') == 'tron') {
 
                        var a = this.angle(this.cv)  // Angle
                            , sa = this.startAngle          // Previous start angle
                            , sat = this.startAngle         // Start angle
                            , ea                            // Previous end angle
                            , eat = sat + a                 // End angle
                            , r = 1;
 
                        this.g.lineWidth = this.lineWidth;
 
                        this.o.cursor
                        && (sat = eat - 0.3)
                        && (eat = eat + 0.3);
 
                        if (this.o.displayPrevious) {
                            ea = this.startAngle + this.angle(this.v);
                            this.o.cursor
                            && (sa = ea - 0.3)
                            && (ea = ea + 0.3);
                            this.g.beginPath();
                            this.g.strokeStyle = this.pColor;
                            this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
                            this.g.stroke();
                        }
 
                        this.g.beginPath();
                        this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
                        this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
                        this.g.stroke();
 
                        this.g.lineWidth = 2;
                        this.g.beginPath();
                        this.g.strokeStyle = this.o.fgColor;
                        this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                        this.g.stroke();
 
                        return false;
                    }
                }
            });
        },
 
        /**
         Init video volume slider in properties
         @method _videoVolumeSliderInit
         **/
        _videoVolumeSliderInit: function () {
            var self = this;
            $(Elements.VIDEO_VOLUME_WRAP_SLIDER).noUiSlider({
                handles: 1,
                start: 100,
                step: 1,
                range: [0, 100],
                serialization: {
                    to: [$(Elements.VIDEO_VOLUME_LABEL), 'text']
                }
            });
            self.m_videoVolumeHandler = $(Elements.VIDEO_VOLUME_WRAP_SLIDER).on('change', function (e) {
                var volume = parseFloat($(Elements.VIDEO_VOLUME_WRAP_SLIDER).val()) / 100;
                BB.comBroker.fire(BB.EVENTS.VIDEO_VOLUME_CHANGED, this, self, volume);
                return false;
            });
        },
 
        /**
         Init youtube volume slider in properties
         @method _videoVolumeSliderInit
         **/
        _youtubeVolumeSliderInit: function () {
            var self = this;
            $(Elements.YOUTUBE_VOLUME_WRAP_SLIDER).noUiSlider({
                handles: 1,
                start: 100,
                step: 1,
                range: [0, 100],
                serialization: {
                    to: [$(Elements.YOUTUBE_VOLUME_LABEL), 'text']
                }
            });
            self.m_youtuneVolumeHandler = $(Elements.YOUTUBE_VOLUME_WRAP_SLIDER).on('change', function (e) {
                var volume = parseFloat($(Elements.YOUTUBE_VOLUME_WRAP_SLIDER).val()) / 100;
                BB.comBroker.fire(BB.EVENTS.YOUTUBE_VOLUME_CHANGED, this, self, volume);
                return false;
            });
        },
 
        /**
         Bind to location Live Inputs widgets
         @method _locationLiveInputs
         **/
        _locationLiveInputs: function(){
            var self = this;
            self.m_liveLocation = {};
            self.m_liveLocation[Elements.LOCATION_RESOURCE_NAME] = new LiveInput({
                el: Elements.LOCATION_RESOURCE_NAME,
                dataLocalize: 'name',
                placeHolder: 'name',
                value: 'name',
                customEvent: BB.EVENTS.LOCATION_LIVE_INPUT_CHANGED
            });
            self.m_liveLocation[Elements.LOCATION_RESOURCE_LAT] = new LiveInput({
                el: Elements.LOCATION_RESOURCE_LAT,
                dataLocalize: 'latitude',
                placeHolder: 'latitude',
                value: 'latitude',
                customEvent: BB.EVENTS.LOCATION_LIVE_INPUT_CHANGED
            });
            self.m_liveLocation[Elements.LOCATION_RESOURCE_LNG] = new LiveInput({
                el: Elements.LOCATION_RESOURCE_LNG,
                dataLocalize: 'longitude',
                placeHolder: 'longitude',
                value: 'longitude',
                customEvent: BB.EVENTS.LOCATION_LIVE_INPUT_CHANGED
            });
 
            var input = self.m_liveLocation[Elements.LOCATION_RESOURCE_DURATION] = new LiveInput({
                el: Elements.LOCATION_RESOURCE_DURATION,
                dataLocalize: 'duration',
                placeHolder: 'duration',
                value: '5',
                customEvent: BB.EVENTS.LOCATION_LIVE_INPUT_CHANGED
            }).on('LIVE_INPUT_CHANGED', function (e) {
                }
            ).on('LIVE_INPUT_VALID_ERROR', function (e) {
                }
            );
            input.rules({
                1: [
                    input.getValidator().isNumberInRange, $(Elements.MSG_LIVEINPUT_SECONDS).text(), {
                        min: 5,
                        max: 86400
                    }]
            });
        },
 
        /**
         Init location radius slider in properties
         @method _locationRadiusSliderInit
         **/
        _locationRadiusSliderInit: function () {
            var self = this;
            $(Elements.LOCATION_RADIUS_WRAP_SLIDER).noUiSlider({
                handles: 1,
                start: 1,
                step: 0.10,
                range: [0.10, 4],
                serialization: {
                    to: [$(Elements.LOCATION_RADIUS_LABEL), 'text']
                }
            });
            self.m_locationRadiusHandle = $(Elements.LOCATION_RADIUS_WRAP_SLIDER).on('change', function (e) {
                var val = $(Elements.LOCATION_RADIUS_WRAP_SLIDER).val();
                BB.comBroker.fire(BB.EVENTS.LOCATION_RADIUS_CHANGED, this, self, val);
                return false;
            });
        },
 
        /**
         Create instance of RSSLink used in select property settings
         @method _rssSourceSelectorInit
         **/
        _rssSourceSelectorInit: function () {
            var self = this;
            self.m_rssLinkSelector = new RSSLinks({
                el: Elements.RSS_SOURCE
            });
        },
 
        /**
         Create instance of RSSLink used in select property settings
         @method _rssSourceSelectorInit
         **/
        _mrssSourceSelectorInit: function () {
            var self = this;
            self.m_mrssLinkSelector = new MRSSLinks({
                el: Elements.MRSS_SOURCE
            });
        },
 
        /**
         Create instance of FontSelector used in font property settings
         @method _rssFontSelectorInit
         **/
        _rssFontSelectorInit: function () {
            var self = this;
            self.m_rssFontSelector = new FontSelector({
                appendTo: Elements.RSS_FONT_SETTINGS,
                colorSettings: {animationSpeed: 100}
            });
        },
 
        /**
         Init the time picker duration bootstrap widget
         @method _timepickerDayDurationInit
         **/
        _timepickerDayDurationInit: function () {
            var self = this;
            $(Elements.TIME_PICKER_TIME_INPUT).timepicker({
                showSeconds: true,
                showMeridian: false,
                defaultTime: false,
                minuteStep: 1,
                secondStep: 1
            });
 
            $(Elements.TIME_PICKER_DURATION_INPUT).timepicker({
                showSeconds: true,
                showMeridian: false,
                defaultTime: false,
                minuteStep: 1,
                secondStep: 1
            });
        },
 
        /**
         Init the date picker duration bootstrap widget
         @method _datepickerDayDurationInit
         **/
        _datepickerDayDurationInit: function () {
            var self = this;
            $(Elements.CLASS_TIME_PICKER_SCHEDULER).datepicker({
                autoclose: true,
                todayHighlight: true
            });
        },
 
        /**
         Init the poll timer spinner widget
         @method _rssPollTimeInit
         @param {Number} _rssPollTimeInit
         **/
        _rssPollTimeInit: function () {
            var self = this;
            $(Elements.RSS_POLL_SPINNER).spinner({
                value: 30,
                min: 1,
                max: 30,
                step: 1
            });
        },
 
        /**
         Init the youtube properties
         @method _youtubeInit
         **/
        _youtubeInit: function () {
            var self = this;
            self.m_youtubeQualityMeter = new BarMeterView({
                el: Elements.YOUTUBE_QUALITY_METER,
                customEvent: BB.EVENTS.YOUTUBE_METER_QUALITY_CHANGED
            });
        },
 
        /**
         Init the location priority widget
         @method _locationPriorityInit
         **/
        _locationPriorityInit: function () {
            var self = this;
            self.m_locationPriorityMeter = new BarMeterView({
                el: Elements.LOCATION_PRIORITY_METER,
                customEvent: BB.EVENTS.LOCATION_PRIORITY_METER_CHANGED
            });
        },
 
        /**
         Init the fasterq properties
         @method _fasterQInit
         **/
        _fasterQInit: function () {
            var self = this;
        },
 
        /**
         Create instance of FontSelector used in font property settings for label block
         @method _labelFontSelectorInit
         **/
        _labelFontSelectorInit: function () {
            var self = this;
            self.m_labelFontSelector = new FontSelector({
                appendTo: Elements.LABEL_FONT_SETTINGS,
                colorSettings: {animationSpeed: 100}
            });
        },
 
        /**
         Create instance of FontSelector used in font json item block
         @method _jsonItemFontSelectorInit
         **/
        _jsonItemFontSelectorInit: function () {
            var self = this;
            self.m_jsonItemFontSelector = new FontSelector({
                appendTo: Elements.JSON_ITEM_FONT_SETTINGS,
                colorSettings: {animationSpeed: 100}
            });
        },
 
        /**
         Create instance of FontSelector used in font property settings for twitter item block
         @method _twitterFontSelectorInit
         **/
        _twitterFontSelectorInit: function () {
            var self = this;
            self.m_twitterFontSelector = new FontSelector({
                appendTo: Elements.TWITTER_FONT_SETTINGS,
                colorSettings: {animationSpeed: 100}
            });
        },
 
        /**
         Create instance of FontSelector used in font property settings
         @method _labelFontSelectorInit
         **/
        _labelClockFontSelectorInit: function () {
            var self = this;
            self.m_clockFontSelector = new FontSelector({
                appendTo: Elements.CLOCK_FONT_SETTINGS,
                colorSettings: {animationSpeed: 100}
            });
        },
 
        /**
         Bring into view the Block property StackView panel
         @method viewPanel
         **/
        viewPanel: function (i_panel) {
            var self = this;
            self.m_property.viewPanel(i_panel);
        },
 
        /**
         Bring into view the Block property StackView SubPanel
         @method showBlockProperty
         **/
        initSubPanel: function (i_panel) {
            var self = this;
            self.m_property.initSubPanel(i_panel);
        },
 
        /**
         Bring into view the Block property Settings StackView SubPanel
         @method initSettingsPanel
         **/
        initSettingsPanel: function (i_panel) {
            var self = this;
            self.m_property.initSettingsPanel(i_panel);
        },
 
        /**
         Bring into view the Block property StackView SubPanel
         @method showBlockProperty
         **/
        viewSubPanel: function (i_panel) {
            var self = this;
            self.m_property.viewSubPanel(i_panel);
        },
 
        /**
         Bring into view the Block property StackView SubPanel
         @method showBlockProperty
         **/
        viewSettingsPanel: function (i_panel) {
            var self = this;
            self.m_property.viewSettingsPanel(i_panel);
        },
 
        /**
         Set the value for LAT/LNG/Name for Location fields using the LiveInput widget
         @method setLocationLiveInput
         @param {String} i_el
         @param {String} i_value
         **/
        setLocationLiveInput: function (i_el, i_value) {
            var self = this;
            self.m_liveLocation[i_el].setValue(i_value);
        },
 
        /**
         Set the color picker color of scene background
         @method setBgScenePropColorPicker
         @param {Number} i_color
         **/
        setBgScenePropColorPicker: function (i_color) {
            $(Elements.SCENE_BACKGROUND_SELECTOR).minicolors('value', i_color);
        },
 
        /**
         Set the color picker color of scene border
         @method setBorderBlockPropColorPicker
         @param {String} i_color
         **/
        setBorderBlockPropColorPicker: function (i_color) {
            $(Elements.SCENE_BORDER_COLOR_SELECTOR).minicolors('value', i_color);
        },
 
        /**
         Returns the instance of rss font selector
         @method getRssFontSelector
         @return {Object} m_rssFontSelector instance
         **/
        getRssFontSelector: function () {
            var self = this;
            return self.m_rssFontSelector;
        },
 
        /**
         Returns the instance of clock font selector
         @method getClockFontSelector
         @return {Object} m_clockFontSelector instance
         **/
        getClockFontSelector: function () {
            var self = this;
            return self.m_clockFontSelector;
        },
 
        /**
         Returns the instance of label font selector
         @method getLabelFontSelector
         @return {Object} font selector instance
         **/
        getLabelFontSelector: function () {
            var self = this;
            return self.m_labelFontSelector;
        },
 
        /**
         Returns the instance of label json item font selector
         @method getLabelJsonItemFontSelector
         @return {Object} font selector instance
         **/
        getLabelJsonItemFontSelector: function () {
            var self = this;
            return self.m_jsonItemFontSelector;
        },
 
        /**
         Returns the instance of twitter item font selector
         @method getTwitterItemFontSelector
         @return {Object} font selector instance
         **/
        getTwitterItemFontSelector: function () {
            var self = this;
            return self.m_twitterFontSelector;
        },
 
        /**
         Returns the instance of youtube quality meter
         @method getYouTubeQualityMeter
         @return {Object} m_youtubeQualityMeter instance
         **/
        getYouTubeQualityMeter: function () {
            var self = this;
            return self.m_youtubeQualityMeter;
        },
 
        /**
         Returns the instance of location priority meter
         @method getLocationPriorityMeter
         @return {Object} m_locationPriorityMeter instance
         **/
        getLocationPriorityMeter: function () {
            var self = this;
            return self.m_locationPriorityMeter;
        },
 
        /**
         Returns the instance pf rss link selector
         @method getRssLinkSelector
         @return {Object} m_rssLinks instance
         **/
        getRssLinkSelector: function () {
            var self = this;
            return self.m_rssLinkSelector;
        },
 
        /**
         Returns the instance pf mrss link selector
         @method getMRssLinkSelector
         @return {Object} m_mrssLinkSelector instance
         **/
        getMRssLinkSelector: function () {
            var self = this;
            return self.m_mrssLinkSelector;
        },
 
        /**
         Init the collection bootstrap datatable
         @method collectionDatatableInit
         **/
        collectionDatatableInit: function () {
            var self = this;
            if (self.m_loadedOnceCollectionDatagrid)
                return;
            self.m_loadedOnceCollectionDatagrid = true;
            require(['bootstrap-table-editable', 'bootstrap-table-sort-rows'], function (bootstraptableeditable, bootstraptablesortrows) {
                self.m_collectionTable = $(Elements.COLLECTION_TABLE);
                self.m_collectionTable.bootstrapTable({
                    data: [],
                    editable: true,
                    type: 'select',
                    title: 'Select status',
                    placement: 'left',
                    onEditableInit: function (response, newValue) {
                        //console.log(newValue);
                    },
                    onReorderRowsDrag: function (table, row) {
                        BB.comBroker.fire(BB.EVENTS.COLLECTION_ROW_DRAG, this, self, $(row).attr('data-index'));
                    },
                    onReorderRowsDrop: function (table, row) {
                        BB.comBroker.fire(BB.EVENTS.COLLECTION_ROW_DROP, this, self, $(row).attr('data-index'));
                    },
                    onEditableShown: function (response, newValue) {
                        //console.log(newValue);
                    },
                    onEditableHidden: function (response, newValue) {
                        //console.log(newValue);
                        //console.log('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections')));
                        //$table.bootstrapTable('refresh');
                    },
                    onEditableSave: function (response, newValue) {
                        BB.comBroker.fire(BB.EVENTS.COLLECTION_ROW_CHANGED, this, self, newValue);
                    },
                    success: function (response, newValue) {
                        if (response.status == 'error') {
                            return response.msg;
                        } //msg will be shown in editable form
                    }
                });
 
                self.m_collectionEventTable = $(Elements.COLLECTION_EVENTS_TABLE);
                self.m_collectionEventTable.bootstrapTable({
                    data: [],
                    editable: true,
                    type: 'select',
                    title: 'Select status',
                    placement: 'left',
                    onEditableInit: function (response, newValue) {
                        //console.log(newValue);
                    },
                    onEditableSave: function (response, newValue) {
                        BB.comBroker.fire(BB.EVENTS.COLLECTION_EVENT_ROW_CHANGED, this, self, newValue);
                    },
                    success: function (response, newValue) {
                        if (response.status == 'error') {
                            return response.msg;
                        } //msg will be shown in editable form
                    }
                });
            });
        },
 
        /**
         Init the json event bootstrap datatable
         @method jsonEventDatatableInit
         **/
        jsonEventDatatableInit: function () {
            var self = this;
            if (self.m_loadedOnceJsonDatagrid)
                return;
            self.m_loadedOnceJsonDatagrid = true;
            require(['bootstrap-table-editable', 'bootstrap-table-sort-rows'], function (bootstraptableeditable, bootstraptablesortrows) {
                self.m_jsonEventTable = $(Elements.JSON_EVENTS_TABLE);
                self.m_jsonEventTable.bootstrapTable({
                    data: [],
                    editable: true,
                    type: 'select',
                    title: 'Select status',
                    placement: 'left',
                    onEditableInit: function (response, newValue) {
                        //console.log(newValue);
                    },
                    onEditableSave: function (response, newValue) {
                        BB.comBroker.fire(BB.EVENTS.JSON_EVENT_ROW_CHANGED, this, self, newValue);
                    },
                    success: function (response, newValue) {
                        if (response.status == 'error') {
                            return response.msg;
                        } //msg will be shown in editable form
                    }
                });
            });
        },
 
        /**
         Init the location base bootstrap datatable
         @method locationDatatableInit
         **/
        locationDatatableInit: function () {
            var self = this;
            if (self.m_loadedOnceLocationDatagrid)
                return;
            self.m_loadedOnceLocationDatagrid = true;
            require(['bootstrap-table-editable', 'bootstrap-table-sort-rows'], function (bootstraptableeditable, bootstraptablesortrows) {
                self.m_locationTable = $(Elements.LOCATION_TABLE);
                self.m_locationTable.bootstrapTable({
                    data: [],
                    editable: true,
                    type: 'select',
                    title: 'Select status',
                    placement: 'left',
                    onEditableInit: function (response, newValue) {
                        // console.log(newValue);
                    },
                    onReorderRowsDrag: function (table, row) {
                        BB.comBroker.fire(BB.EVENTS.LOCATION_ROW_DRAG, this, self, $(row).attr('data-index'));
                    },
                    onReorderRowsDrop: function (table, row) {
                        BB.comBroker.fire(BB.EVENTS.LOCATION_ROW_DROP, this, self, $(row).attr('data-index'));
                    },
                    onEditableShown: function (response, newValue) {
                        // console.log(newValue);
                    },
                    onEditableHidden: function (response, newValue) {
                        // console.log(newValue);
                        //console.log('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections')));
                        //$table.bootstrapTable('refresh');
                    },
                    onEditableSave: function (response, newValue) {
                        BB.comBroker.fire(BB.EVENTS.LOCATION_ROW_CHANGED, this, self, newValue);
                    },
                    success: function (response, newValue) {
                        if (response.status == 'error') {
                            return response.msg;
                        } //msg will be shown in editable form
                    }
                });
            });
        }
    });
 
    return BlockProperties;
});