/**
 This base class for all the Blocks / players which reside on the timeline_channel or inside scenes.
 The base class implements basic timeline and scene interfaces including the management the properties UI.
 @class Block
 @constructor
 @param {string} i_placement indicates if the block is set to exist inside a timeline or inside a scene
 @param {string} i_block_id block / player id, only required if block inserted onto channel_timeline
 @return none
 **/
define(['jquery', 'backbone'], function ($) {
 
    /**
     Quiet mode, don't announce
     @property BB.CONSTS.NO_NOTIFICATION
     @static
     @final
     @type String
     */
    BB.CONSTS.NO_NOTIFICATION = true;
 
    /**
     event fires when scene block was changed so scene needs to be re-rendered
     @event Block.SCENE_BLOCK_CHANGE
     @param {this} caller
     @param {String} selected block_id
     **/
    BB.EVENTS.SCENE_BLOCK_CHANGE = 'SCENE_BLOCK_CHANGE';
 
    /**
     event fires when block border changed so scene needs to be re-rendered
     @event Block.BLOCK_BORDER_CHANGE
     @param {this} caller
     @param {String} selected block_id
     **/
    BB.EVENTS.BLOCK_BORDER_CHANGE = 'BLOCK_BORDER_CHANGE';
 
    /**
     event fires when scene blocks freshly re-rendered onto the scene canvas so we need to update the UI of ALL blocks
     normally occurs after a Block.SCENE_BLOCK_CHANGE event
     @event Block.SCENE_BLOCKS_RENDERED
     @param {this} caller
     @param {String} selected block_id
     **/
    BB.EVENTS.SCENE_BLOCKS_RENDERED = 'SCENE_BLOCKS_RENDERED';
 
    /**
     event fires when block is selected
     @event Block.BLOCK_SELECTED
     @param {this} caller
     @param {String} selected block_id
     **/
    BB.EVENTS.BLOCK_SELECTED = 'BLOCK_SELECTED';
 
    /**
     Custom event fired when a block state changes
     @event LOCK_CHANGED
     @param {This} caller
     @param {Self} context caller
     @param {Event}
     @static
     @final
     **/
    BB.EVENTS.LOCK_CHANGED = 'LOCK_CHANGED';
 
    var Block = BB.Controller.extend({
 
        /**
         Constructor
         @method initialize
         **/
        initialize: function (options) {
            var self = this;
            self.m_placement = options.i_placement;
            self.m_block_id = options.i_block_id;
            self.m_sceneID = options.i_scene_player_data_id;
            self.m_blockType = options.blockType;
            self.m_selected = false;
            self.m_zIndex = -1;
            self.m_minSize = {w: 50, h: 50};
            self.m_blockName = BB.PepperHelper.getBlockBoilerplate(self.m_blockType).name;
            self.m_blockAcronym = BB.PepperHelper.getBlockBoilerplate(self.m_blockType).acronym;
            self.m_blockDescription = BB.PepperHelper.getBlockBoilerplate(self.m_blockType).description;
            self.m_blockIcon = BB.PepperHelper.getBlockBoilerplate(self.m_blockType).icon;
            self.m_blockFontAwesome = BB.PepperHelper.getBlockBoilerplate(self.m_blockType).fontAwesome;
            self.m_blockSvg = BB.PepperHelper.getBlockBoilerplate(self.m_blockType).svg;
            self.m_resourceID = undefined;
            self.m_blockProperty = BB.comBroker.getService(BB.SERVICES['BLOCK_PROPERTIES']);
 
            self._listenAlphaChange();
            self._listenToggleLock();
            self._listenGradientChange();
            self._listenGradientColorPickerClosed();
            self._listenBackgroundStateChange();
            self._listenBorderStateChange();
            self._listenBorderColorChange();
            self._listenBlockSelected();
            self._onBlockLengthChanged();
        },
 
        /**
         Init the sub properties panel for a block
         @method _initSubPanel
         @param {String} i_panel
         **/
        _initSubPanel: function (i_panel) {
            var self = this;
            self.m_blockProperty.initSubPanel(i_panel);
        },
 
        /**
         Bring into view a sub properties panel of this block
         @method _viewSubPanel
         @param {String} i_panel
         **/
        _viewSubPanel: function (i_panel) {
            var self = this;
            self.m_blockProperty.viewSubPanel(i_panel);
        },
 
        /**
         On changes in msdb model updated UI common lock properties
         @method _fabricLock
         **/
        _fabricLock: function () {
            var self = this;
            var domPlayerData = self._getBlockPlayerData();
            var locked = $(domPlayerData).attr('locked');
            if (_.isUndefined(locked) || locked == '0') {
                locked = false;
            } else {
                locked = true;
            }
            self.lockMovementX = locked;
            self.lockMovementY = locked;
            //self.lockScalingX = locked; self.lockScalingY = locked; self.lockUniScaling = locked; self.lockRotation = locked;
            if (!self.m_selected)
                return;
            var dimensionProps = BB.comBroker.getService(BB.SERVICES['DIMENSION_PROPS_LAYOUT']);
            if (_.isUndefined(dimensionProps))
                return;
            dimensionProps.setLock(locked);
        },
 
        /**
         Toggle lock status
         @method _toggleLock
         **/
        _listenToggleLock: function () {
            var self = this;
            self._toggleLock = function (e) {
                if (!self.m_selected)
                    return;
                self.lockMovementX = e.edata;
                self.lockMovementY = e.edata;
                //self.lockScalingX = e.edata; self.lockScalingY = e.edata; self.lockUniScaling = e.edata; self.lockRotation = e.edata;
                var v = e.edata == true ? 1 : 0;
                var domPlayerData = self._getBlockPlayerData();
                $(domPlayerData).attr('locked', v);
                self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
            };
            BB.comBroker.listenWithNamespace(BB.EVENTS.LOCK_CHANGED, self, self._toggleLock);
        },
 
 
        /**
         Listen to changes in Alpha UI properties selection and update msdb
         @method _listenAlphaChange
         **/
        _listenAlphaChange: function () {
            var self = this;
            self._alphaChanged = _.debounce(function (e) {
                if (!self.m_selected)
                    return;
                var alpha = e.edata;
                var domPlayerData = self._getBlockPlayerData();
                var data = $(domPlayerData).find('Data').eq(0);
                var xSnippet = $(data).find('Appearance').eq(0);
                $(xSnippet).attr('alpha', alpha);
                self._setBlockPlayerData(domPlayerData);
            }, 100);
            BB.comBroker.listenWithNamespace(BB.EVENTS.ALPHA_CHANGED, self, self._alphaChanged);
        },
 
        /**
         On changes in msdb model updated UI common alpha properties
         @method _alphaPopulate
         **/
        _alphaPopulate: function () {
            var self = this;
            var domPlayerData = self._getBlockPlayerData();
            var data = $(domPlayerData).find('Data').eq(0);
            var xSnippet = $(data).find('Appearance').eq(0);
            var alpha = $(xSnippet).attr('alpha');
            alpha = parseFloat(alpha) * 100;
            $(Elements.BLOCK_ALPHA_SLIDER).val(alpha);
        },
 
        /**
         Enable gradient background UI
         @method _enableBgSelection
         **/
        _enableBgSelection: function () {
            var self = this;
            $(Elements.SHOW_BACKGROUND).prop('checked', true);
            $(Elements.BG_COLOR_SOLID_SELECTOR).hide();
            $(Elements.BG_COLOR_GRADIENT_SELECTOR).show();
        },
 
        /**
         Enable gradient background UI
         @method _enableBgSelection
         **/
        _enableBorderSelection: function () {
            var self = this;
            $(Elements.SHOW_BORDER).prop('checked', true);
            $(Elements.BLOCK_BORDER_WRAP).show();
        },
 
        /**
         On changes in msdb model updated UI common gradient background properties
         @method _bgPropsPopulate
         **/
        _bgPropsPopulate: function () {
            var self = this;
            var gradient = $(Elements.BG_COLOR_GRADIENT_SELECTOR).data("gradientPicker-sel");
            // gradient.changeFillDirection("top"); /* change direction future support */
            gradient.removeAllPoints();
            var domPlayerData = self._getBlockPlayerData();
            var xSnippet = self._findGradientPoints(domPlayerData);
            if (xSnippet.length > 0) {
                self._enableBgSelection();
                var points = $(xSnippet).find('Point');
                $.each(points, function (i, point) {
                    var pointColor = BB.lib.decimalToHex($(point).attr('color'));
                    var pointMidpoint = (parseInt($(point).attr('midpoint')) / 250);
                    gradient.addPoint(pointMidpoint, pointColor, true);
                });
            } else {
                self._bgPropsUnpopulate();
            }
        },
 
        /**
         On changes in msdb model updated UI common border properties
         @method _borderPropsPopulate
         **/
        _borderPropsPopulate: function () {
            var self = this;
            var domPlayerData = self._getBlockPlayerData();
            var xSnippet = self._findBorder(domPlayerData);
            if (xSnippet.length > 0) {
                self._enableBorderSelection();
                var color = $(xSnippet).attr('borderColor');
                color = '#' + BB.lib.decimalToHex(color);
                self.m_blockProperty.setBorderBlockPropColorPicker(color);
            } else {
                self._borderPropsUnpopulate();
            }
        },
 
        /**
         Disable the gradient background UI
         @method _bgPropsUnpopulate
         **/
        _bgPropsUnpopulate: function () {
            var self = this;
            $(Elements.SHOW_BACKGROUND).prop('checked', false);
            $(Elements.BG_COLOR_GRADIENT_SELECTOR).hide();
            $(Elements.BG_COLOR_SOLID_SELECTOR).hide();
            var domPlayerData = self._getBlockPlayerData();
            var gradientPoints = self._findGradientPoints(domPlayerData);
            $(gradientPoints).empty();
        },
 
        /**
         Disable the border UI
         @method _borderPropsUnpopulate
         **/
        _borderPropsUnpopulate: function () {
            var self = this;
            $(Elements.SHOW_BORDER).prop('checked', false);
            $(Elements.BLOCK_BORDER_WRAP).hide();
            var domPlayerData = self._getBlockPlayerData();
            var border = self._findBorder(domPlayerData);
            $(border).empty();
        },
 
        /**
         Toggle block background on UI checkbox selection
         @method _toggleBackgroundColorHandler
         @param {event} e
         **/
        _toggleBackgroundColorHandler: function (e) {
            var self = this;
            if (!self.m_selected)
                return;
 
            var xBgSnippet = undefined;
            var domPlayerData = self._getBlockPlayerData();
            var checked = $(e.target).prop('checked') == true ? 1 : 0;
            if (checked) {
                self._enableBgSelection();
                xBgSnippet = BB.PepperHelper.getCommonBackgroundXML();
                var data = $(domPlayerData).find('Data').eq(0);
                var bgData = $(data).find('Background');
                if (bgData.length > 0 && !_.isUndefined(bgData.replace)) { // ie bug workaround
                    bgData.replace($(xBgSnippet));
                } else {
                    $(data).append($(xBgSnippet));
                }
                var player_data = pepper.xmlToStringIEfix(domPlayerData);
                domPlayerData = $.parseXML(player_data);
                self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
                self._bgPropsPopulate();
                //self._announceBlockChanged();
            } else {
                var xSnippet = self._findBackground(domPlayerData);
                $(xSnippet).remove();
                self._bgPropsUnpopulate();
                self._setBlockPlayerData(domPlayerData);
            }
        },
 
        /**
         Toggle block background on UI checkbox selection
         @method _toggleBackgroundColorHandler
         @param {event} e
         **/
        _toggleBorderHandler: function (e) {
            var self = this;
            if (!self.m_selected)
                return;
 
            var xBgSnippet = undefined;
            var domPlayerData = self._getBlockPlayerData();
            var checked = $(e.target).prop('checked') == true ? 1 : 0;
            if (checked) {
                self._enableBorderSelection();
                xBgSnippet = BB.PepperHelper.getCommonBorderXML();
                var data = $(domPlayerData).find('Data').eq(0);
                var bgData = self._findBorder(data);
                if (bgData.length > 0 && !_.isUndefined(bgData.replace)) { // ie bug workaround
                    bgData.replace($(xBgSnippet));
                } else {
                    $(data).append($(xBgSnippet));
                }
                var player_data = pepper.xmlToStringIEfix(domPlayerData);
                domPlayerData = $.parseXML(player_data);
                self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
                self._borderPropsPopulate();
                //self._announceBlockChanged();
            } else {
                var xSnippet = self._findBorder(domPlayerData);
                $(xSnippet).remove();
                self._borderPropsUnpopulate();
                self._setBlockPlayerData(domPlayerData);
            }
        },
 
        /**
         Listen to change in background enable / disable states
         @method _listenBackgroundStateChange
         **/
        _listenBackgroundStateChange: function () {
            var self = this;
            self.m_proxyToggleBg = $.proxy(self._toggleBackgroundColorHandler, self);
            self.m_proxyToggleBgKey = _.uniqueId('click.');
            $(Elements.SHOW_BACKGROUND).on(self.m_proxyToggleBgKey, self.m_proxyToggleBg);
        },
 
        /**
         Listen to change in background enable / disable states
         @method _listenBackgroundStateChange
         **/
        _listenBorderStateChange: function () {
            var self = this;
            self.m_proxyToggleBorder = $.proxy(self._toggleBorderHandler, self);
            self.m_proxyToggleBorderKey = _.uniqueId('click.');
            $(Elements.SHOW_BORDER).on(self.m_proxyToggleBorderKey, self.m_proxyToggleBorder);
        },
 
        /**
         Update a block's player_data with new gradient background
         @method _listenGradientChange
         **/
        _listenGradientChange: function () {
            var self = this;
            BB.comBroker.listenWithNamespace(BB.EVENTS.GRADIENT_COLOR_CHANGED, self, function (e) {
                if (!self.m_selected)
                    return;
                var points = e.edata.points;
                var styles = e.edata.styles;
                if (points.length == 0)
                    return;
                var domPlayerData = self._getBlockPlayerData();
                var gradientPoints = self._findGradientPoints(domPlayerData);
                $(gradientPoints).empty();
                var pointsXML = "";
                for (var i = 0; i < points.length; ++i) {
                    var pointMidpoint = (parseInt(points[i].position * 250));
                    var color = BB.lib.colorToDecimal(points[i].color);
                    var xPoint = '<Point color="' + color + '" opacity="1" midpoint="' + pointMidpoint + '" />';
                    // log(xPoint);
                    // $(gradientPoints).append(xPoint);
                    pointsXML += xPoint;
                }
                // $(domPlayerData).find('GradientPoints').html(pointsXML);
                var xmlString = (new XMLSerializer()).serializeToString(domPlayerData);
                xmlString = xmlString.replace(/<GradientPoints[ ]*\/>/, '<GradientPoints>' + pointsXML + '</GradientPoints>');
                domPlayerData = $.parseXML(xmlString);
                self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);
            });
        },
 
        /**
         Update a block's player_data with new border background
         @method _listenBorderColorChange
         **/
        _listenBorderColorChange: function () {
            var self = this;
            BB.comBroker.listenWithNamespace(BB.EVENTS.BLOCK_BORDER_CHANGE, self, function (e) {
                if (!self.m_selected)
                    return;
                var color = e.edata;
                var domPlayerData = self._getBlockPlayerData();
                var border = self._findBorder(domPlayerData);
                $(border).attr('borderColor', BB.lib.hexToDecimal(color));
                self._setBlockPlayerData(domPlayerData);
            });
        },
 
        /**
         Update a block's player_data with new gradient background
         @method _listenGradientChange
         **/
        _listenGradientColorPickerClosed: function () {
            var self = this;
            BB.comBroker.listenWithNamespace(BB.EVENTS.GRADIENT_COLOR_CLOSED, self, function (e) {
                if (!self.m_selected)
                    return;
                var domPlayerData = self._getBlockPlayerData();
                self._setBlockPlayerData(domPlayerData);
            });
        },
 
        /**
         Find the background section in player_data for selected block
         @method _findBackground
         @param  {object} i_domPlayerData
         @return {Xml} xSnippet
         **/
        _findBackground: function (i_domPlayerData) {
            var self = this;
            var xSnippet = $(i_domPlayerData).find('Background');
            return xSnippet;
        },
 
        /**
         Find the border section in player_data for selected block
         @method _findBorder
         @param  {object} i_domPlayerData
         @return {Xml} xSnippet
         **/
        _findBorder: function (i_domPlayerData) {
            var self = this;
            return $(i_domPlayerData).find('Border');
        },
 
        /**
         Find the gradient blocks in player_data for selected block
         @method _findGradientPoints
         @param  {object} i_domPlayerData
         @return {Xml} xSnippet
         **/
        _findGradientPoints: function (i_domPlayerData) {
            var self = this;
            var xSnippet = $(i_domPlayerData).find('GradientPoints');
            return xSnippet;
        },
 
        /**
         Notify this object that it has been selected so it can populate it's own the properties box etc
         The function triggers from the BLOCK_SELECTED event.
         @method _listenBlockSelected
         @return none
         **/
        _listenBlockSelected: function () {
            var self = this;
            BB.comBroker.listenWithNamespace(BB.EVENTS.BLOCK_SELECTED, self, function (e) {
                var blockID = e.edata;
                if (self.m_block_id != blockID) {
                    self.m_selected = false;
                    return;
                }
                self._onBlockSelected();
            });
        },
 
        /**
         When a block is selected, find out where is it placed (scene/ channel) and change props accordingly
         @method _onBlockSelected
         **/
        _onBlockSelected: function () {
            var self = this;
            self.m_selected = true;
            self.m_blockProperty.viewPanel(Elements.BLOCK_PROPERTIES);
            self._updateTitle();
            self._updateTitleTab();
            self._alphaPopulate();
            self._fabricLock();
            self._borderPropsPopulate();
            self._bgPropsPopulate();
 
            log('block selected ' + self.m_block_id);
 
            switch (self.m_placement) {
                case BB.CONSTS.PLACEMENT_CHANNEL:
                {
                    $(Elements.CHANNEL_BLOCK_PROPS).show();
                    $(Elements.SCENE_BLOCK_PROPS).hide();
                    self._updateBlockLength();
                    break;
                }
 
                case BB.CONSTS.PLACEMENT_SCENE:
                {
                    $(Elements.CHANNEL_BLOCK_PROPS).hide();
                    $(Elements.SCENE_BLOCK_PROPS).show();
                    self._updateBlockDimensions();
                    break;
                }
 
                case BB.CONSTS.PLACEMENT_IS_SCENE:
                {
                    $(Elements.CHANNEL_BLOCK_PROPS).hide();
                    $(Elements.SCENE_BLOCK_PROPS).hide();
                    self._updateBlockLength();
                    break;
                }
            }
 
            if (self._loadBlockSpecificProps)
                self._loadBlockSpecificProps();
        },
 
        /**
         Update the title of the block inside the assigned element.
         @method _updateTitle
         @return none
         **/
        _updateTitle: function () {
            var self = this;
            $(Elements.SELECTED_CHANNEL_RESOURCE_NAME).text(self.m_blockName);
        },
 
        /**
         Update the title of the selected tab properties element
         @method m_blockAcronym
         **/
        _updateTitleTab: function () {
            var self = this;
            var isVisible = $(Elements.BLOCK_COMMON_SETTINGS_TAB).is(':visible');
            if (isVisible){
                $(Elements.BLOCK_COMMON_SETTINGS_TAB).hide();
                $(Elements.BLOCK_PROPERTIES_TABBER).find('a').eq(0).trigger('click');
            }
            $(Elements.BLOCK_SUBPROPERTIES_TITLE).text(self.m_blockAcronym);
        },
 
        /**
         Update the length properties of the block with respect to position on the timeline_channel
         @method _updateBlockLength
         @return none
         **/
        _updateBlockLength: function () {
            var self = this;
            var lengthData;
 
            switch (self.m_placement) {
                case BB.CONSTS.PLACEMENT_CHANNEL:
                {
                    lengthData = pepper.getBlockTimelineChannelBlockLength(self.m_block_id);
                    break;
                }
                case BB.CONSTS.PLACEMENT_IS_SCENE:
                {
                    lengthData = pepper.getSceneDuration(self.m_block_id);
                    break;
                }
            }
            $(Elements.BLOCK_LENGTH_HOURS).val(lengthData.hours).trigger('change');
            $(Elements.BLOCK_LENGTH_MINUTES).val(lengthData.minutes).trigger('change');
            $(Elements.BLOCK_LENGTH_SECONDS).val(lengthData.seconds).trigger('change');
        },
 
        /**
         Update the position of the block when placed inside a scene
         @method _updateBlockDimensions
         **/
        _updateBlockDimensions: function () {
            var self = this;
            var dimensionProps = BB.comBroker.getService(BB.SERVICES['DIMENSION_PROPS_LAYOUT']);
 
            //var cW = self['canvasScale'] == 1 ? self.canvas.getWidth() : self.canvas.getWidth() * (1 / self['canvasScale']);
            //var cH = self['canvasScale'] == 1 ? self.canvas.getHeight() : self.canvas.getHeight() * (1 / self['canvasScale']);
 
            var values = {
                y: self['canvasScale'] == 1 ? self.top : self.top * (1 / self['canvasScale']),
                x: self['canvasScale'] == 1 ? self.left : self.left * (1 / self['canvasScale']),
                w: self['canvasScale'] == 1 ? self.width : self.width * (1 / self['canvasScale']),
                h: self['canvasScale'] == 1 ? self.height : self.height * (1 / self['canvasScale']),
                a: self.angle
            };
            dimensionProps.setValues(values);
        },
 
        /**
         Take action when block length has changed which is triggered by the BLOCK_LENGTH_CHANGING event
         @method _onBlockLengthChanged
         @return none
         **/
        _onBlockLengthChanged: function () {
            var self = this;
 
            BB.comBroker.listenWithNamespace(BB.EVENTS.BLOCK_LENGTH_CHANGING, this, function (e) {
 
                if (self.m_selected) {
 
                    var hours = $(Elements.BLOCK_LENGTH_HOURS).val();
                    var minutes = $(Elements.BLOCK_LENGTH_MINUTES).val();
                    var seconds = $(Elements.BLOCK_LENGTH_SECONDS).val();
 
                    switch (e.caller) {
                        case 'blockLengthHours':
                        {
                            hours = e.edata;
                            break;
                        }
                        case 'blockLengthMinutes':
                        {
                            minutes = e.edata;
                            break;
                        }
                        case 'blockLengthSeconds':
                        {
                            seconds = e.edata;
                            break;
                        }
                    }
                    // log('upd: ' + self.m_block_id + ' ' + hours + ' ' + minutes + ' ' + seconds);
                    if (parseInt(hours) == 0 && parseInt(minutes) == 0 && parseInt(seconds) < 5)
                        return;
 
                    switch (self.m_placement) {
                        case BB.CONSTS.PLACEMENT_CHANNEL:
                        {
                            pepper.setBlockTimelineChannelBlockLength(self.m_block_id, hours, minutes, seconds);
                            break;
                        }
                        case BB.CONSTS.PLACEMENT_IS_SCENE:
                        {
                            log('upd: ' + self.m_block_id + ' ' + hours + ' ' + minutes + ' ' + seconds);
                            pepper.setSceneDuration(self.m_block_id, hours, minutes, seconds);
                            break;
                        }
                    }
                }
            });
        },
 
        /**
         Announce that this block has changed
         @method _announceBlockChanged
         @param {Number} i_player_data
         **/
        _announceBlockChanged: function () {
            var self = this;
            BB.comBroker.fire(BB.EVENTS['SCENE_BLOCK_CHANGE'], self, null, [self.m_block_id]);
        },
 
        /**
         Update the msdb for the block with new values inside its player_data
         @method _setBlockPlayerData
         @param {Object} i_xmlDoc the dom object to save to local msdb
         @param {String} [i_noNotify] if set, fire event announcing data saved
         @param {Boolean} [i_xmlIsString] if set, bypass serializeToString since already in string format
         **/
        _setBlockPlayerData: function (i_xmlDoc, i_noNotify, i_xmlIsString) {
            var self = this;
            var player_data;
            if (i_xmlIsString == true) {
                player_data = i_xmlDoc;
            } else {
                player_data = (new XMLSerializer()).serializeToString(i_xmlDoc);
            }
 
            switch (self.m_placement) {
                case BB.CONSTS.PLACEMENT_CHANNEL:
                {
                    pepper.setCampaignTimelineChannelPlayerRecord(self.m_block_id, 'player_data', player_data);
                    break;
                }
                case BB.CONSTS.PLACEMENT_SCENE:
                {
                    pepper.setScenePlayerdataBlock(self.m_sceneID, self.m_block_id, player_data);
                    if (!i_noNotify)
                        self._announceBlockChanged();
                    break;
                }
                case BB.CONSTS.PLACEMENT_IS_SCENE:
                {
                    pepper.setScenePlayerData(self.m_block_id, player_data);
                    if (!i_noNotify)
                        self._announceBlockChanged();
                    break;
                }
            }
        },
 
 
        /**
         Get the XML player data of a block, depending where its placed
         If you like to view XML raw data, be sure to debug domPlayerData.children[0].outerHTML
         @method _getBlockPlayerData
         @return {Object} player data of block (aka player) parsed as DOM
         **/
        _getBlockPlayerData: function () {
            var self = this;
            var recBlock = undefined;
 
            switch (self.m_placement) {
 
                case BB.CONSTS.PLACEMENT_CHANNEL:
                {
                    recBlock = pepper.getCampaignTimelineChannelPlayerRecord(self.m_block_id);
                    return $.parseXML(recBlock['player_data']);
                    // to view data debug domPlayerData.children[0].outerHTML
                    break;
                }
 
                case BB.CONSTS.PLACEMENT_SCENE:
                {
                    return pepper.getScenePlayerdataBlock(self.m_sceneID, self.m_block_id);
                    // to view data debug domPlayerData.children[0].outerHTML
                    break;
                }
            }
        },
 
        /**
         bug fix: backward comparability with player_data that includes deleted resources
         this was already fixed but we live _selfDestruct for backwards compatability
         @method _selfDestruct
         **/
        _selfDestruct: function () {
            var self = this;
            setTimeout(function () {
                var sceneEditView = BB.comBroker.getService(BB.SERVICES['SCENE_EDIT_VIEW']);
                if (!_.isUndefined(sceneEditView)) {
                    var selectedSceneID = sceneEditView.getSelectedSceneID();
                    pepper.removeScenePlayer(selectedSceneID, self.m_block_id);
                    BB.comBroker.fire(BB.EVENTS.LOAD_SCENE, this, null, selectedSceneID);
                }
            }, 2000);
        },
 
 
        /**
         Delete block is a private method that is always called regardless if instance has
         been inherited or not. Used for releasing memory for garbage collector.
         @method _deleteBlock
         @params {Boolean} i_memoryOnly if true only remove from existance but not from msdb
         @return none
         **/
        _deleteBlock: function (i_memoryOnly) {
            var self = this;
            if (!i_memoryOnly)
                pepper.removeBlockFromTimelineChannel(self.m_block_id);
            BB.comBroker.stopListenWithNamespace(BB.EVENTS.BLOCK_SELECTED, self);
            BB.comBroker.stopListenWithNamespace(BB.EVENTS.BLOCK_LENGTH_CHANGING, self);
            BB.comBroker.stopListenWithNamespace(BB.EVENTS.GRADIENT_COLOR_CHANGED, self);
            BB.comBroker.stopListenWithNamespace(BB.EVENTS.GRADIENT_COLOR_CLOSED, self);
            BB.comBroker.stopListenWithNamespace(BB.EVENTS.BLOCK_BORDER_CHANGE, self);
            BB.comBroker.stopListenWithNamespace(BB.EVENTS.ALPHA_CHANGED, self);
            BB.comBroker.stopListenWithNamespace(BB.EVENTS.LOCK_CHANGED, self);
            $(Elements.SHOW_BACKGROUND).off(self.m_proxyToggleBgKey, self.m_proxyToggleBg);
            $(Elements.SHOW_BORDER).off(self.m_proxyToggleBorderKey, self.m_proxyToggleBorder);
 
            if (self.off != undefined)
                self.off('modified');
 
            if (self.m_sceneSelectedHandler)
                self.m_canvas.off('object:selected', self.m_sceneSelectedHandler);
 
            $.each(self, function (k) {
                self[k] = undefined;
            });
        },
 
        /**
         Fabricate alpha to canvas
         @method _fabricAlpha
         @param {Object} i_domPlayerData
         **/
        _fabricAlpha: function (i_domPlayerData) {
            var self = this;
            var appearance = $(i_domPlayerData).find('Appearance');
            var opacity = $(appearance).attr('alpha');
            self.setOpacity(opacity);
        },
 
        /**
         Fabricate color points to canvas
         @method _fabricColorPoints
         @param {xml} i_domPlayerData
         **/
        _fabricColorPoints: function (i_domPlayerData) {
            var self = this;
            var gradientPoints = $(i_domPlayerData).find('GradientPoints');
            var points = $(gradientPoints).find('Point');
            var colorStops = {}
            _.each(points, function (point) {
                var color = '#' + BB.lib.decimalToHex($(point).attr('color'));
                var offset = $(point).attr('midpoint');
                offset = offset / 250;
                colorStops[offset] = color;
            });
            return colorStops;
        },
 
        /**
         Config the fabric block border
         @method _fabricateBorder
         @param {i_options} i_options
         @return {object} object literal
         **/
        _fabricateBorder: function (i_options) {
            var self = this;
            var domPlayerData = self._getBlockPlayerData();
            var border = self._findBorder(domPlayerData);
            var color = border.length == 0 ? 'transparent' : '#' + BB.lib.decimalToHex($(border).attr('borderColor'));
            return _.extend({
                // borderColor: '#5d5d5d',
                stroke: color,
                strokeWidth: 1
            }, i_options);
        },
 
        /**
         Build the options injected into a newly created fabric object
         @method _fabricateOptions
         @param {Number} i_top
         @param {Number} i_left
         @param {Number} i_width
         @param {Number} i_height
         @param {Number} i_angle
         @return {object} object literal
         **/
        _fabricateOptions: function (i_top, i_left, i_width, i_height, i_angle) {
            var self = this;
            var options = {
                top: i_top,
                left: i_left,
                width: i_width,
                height: i_height,
                angle: i_angle,
                fill: '#ececec',
                hasRotatingPoint: false,
                transparentCorners: false,
                cornerColor: 'black',
                cornerSize: 5,
                lockRotation: true,
                lineWidth: 1
            };
 
            return self._fabricateBorder(options);
        },
 
        /**
         Fabricate color points to canvas
         @method _fabricRect
         @param {number} i_width
         @param {number} i_height
         @param {xml} i_domPlayerData
         @return {object} r fabric js rectangular
         **/
        _fabricRect: function (i_width, i_height, i_domPlayerData) {
            var self = this;
            var options = self._fabricateOptions(0, 0, i_width, i_height, 0);
            var r = new fabric.Rect(options);
            r.setGradient('fill', {
                x1: 0 - (i_width / 2),
                y1: 0,
                x2: (i_width / 2),
                y2: 0,
                colorStops: self._fabricColorPoints(i_domPlayerData)
            });
            return r;
        },
 
        /**
         Convert the block into a fabric js compatible object, called externally on creation of block
         @Override
         @method fabricateBlock
         **/
        fabricateBlock: function (i_canvasScale, i_callback) {
            var self = this;
 
            var domPlayerData = self._getBlockPlayerData();
            var layout = $(domPlayerData).find('Layout');
 
            var w = parseInt(layout.attr('width'));
            var h = parseInt(layout.attr('height'));
            var rec = self._fabricRect(w, h, domPlayerData);
 
            fabric.loadSVGFromString(self.m_blockSvg, function (objects, options) {
                var groupSvg = fabric.util.groupSVGElements(objects, options);
                rec.originX = 'center';
                rec.originY = 'center';
                groupSvg.originX = 'center';
                groupSvg.originY = 'center';
 
                var o = {
                    left: parseInt(layout.attr('x')),
                    top: parseInt(layout.attr('y')),
                    width: parseInt(layout.attr('width')),
                    height: parseInt(layout.attr('height')),
                    angle: parseInt(layout.attr('rotation')),
                    hasRotatingPoint: false,
                    stroke: 'transparent',
                    cornerColor: 'black',
                    cornerSize: 5,
                    lockRotation: true,
                    transparentCorners: false
                };
                _.extend(self, o);
                self.add(rec);
                self.add(groupSvg);
                self._fabricAlpha(domPlayerData);
                self._fabricLock();
                self['canvasScale'] = i_canvasScale;
                i_callback();
            });
        },
 
        /**
         Get block data as a json formatted object literal and return to caller
         @method getBlockData
         @return {object} data
         The entire block data members which can be made public
         **/
        getBlockData: function () {
            var self = this;
            var data = {
                blockID: self.m_block_id,
                blockType: self.m_blockType,
                blockName: self.m_blockName,
                blockDescription: self.m_blockDescription,
                blockIcon: self.m_blockIcon,
                blockFontAwesome: self.m_blockFontAwesome,
                blockAcronym: self.m_blockAcronym,
                blockMinWidth: self.m_minSize.w,
                blockMinHeight: self.m_minSize.h,
                blockData: self._getBlockPlayerData()
            };
            return data;
        },
 
        /**
         Set a block's z-index in case we know it (i.e.: it is going to be a re-render of a previous block that
         was removed from the canvas)
         @method setZindex
         @param {Number} i_index
         **/
        setZindex: function (i_zIndex) {
            var self = this;
            self.m_zIndex = i_zIndex;
        },
 
        /**
         Get a block's z-index
         @method getZindex
         @param {Number} i_index
         **/
        getZindex: function (i_zIndex) {
            var self = this;
            return self.m_zIndex;
        },
 
        /**
         Delete block is a public method used as fall back method, if not overridden by inherited instance.
         It is also a semi abstract method, all implementations should go into _deleteBlock();
         @method deleteBlock
         @params {Boolean} i_memoryOnly if true only remove from existance but not from msdb
         @return none
         **/
        deleteBlock: function (i_memoryOnly) {
            /* semi-abstract, overridden, do not modify */
            var self = this;
            self._deleteBlock(i_memoryOnly);
        }
    });
 
    return Block;
});