 					connection.connect(itemBlock.previousConnection)
 					connection = itemBlock.nextConnection
 				return containerBlock
-				
-			# ----------------------------------------------------------------
-			# Reconfigure this block based on the mutator dialog's components.
-			# ----------------------------------------------------------------
-			# @param {!Blockly.Block} containerBlock is Root block in mutator.
-			# @this Blockly.Block
-			# ----------------------------------------------------------------
+
+			# ---------------------------------------------------------------
+			# Reconfigure this block based on the mutator dialog's components
+			# ---------------------------------------------------------------
+			# @param {!Blockly.Block} containerBlock is Root block in mutator
+			# @this Blockly.Block
+			# ---------------------------------------------------------------
 			compose: (containerBlock) ->
 
 				itemBlock = containerBlock.getInputTargetBlock('STACK')
 
-				# ----------------------				
+				# ----------------------
 				# Count number of inputs
 				# ----------------------
 				connections = []

`import Ember from 'ember'`

BlocklyBasicComponent = Ember.Component.extend(
	
	tagName: 'div'

	classNames: ['ember-blockly']
	
	blocklyEditor: null
	
	allBlocks_VisualType_InWorkspace: null
	
	allBlocks_EmberObjType_FromWorkspace: Ember.A([])

	selectedBlock_EmberObjType: null
	
	# --------------------------------
	# --- Component Initialisation ---
	# --------------------------------
	didInsertElement: ->

		self = @
		
		# -----------------------------------------------------
		# Initialise Blockly-Editor
		# Note! This editor is composed of: Toolbox + Workspace
		# -----------------------------------------------------
		# instantiate a blockly-editor
		@blocklyEditor = Blockly.inject('blocklyDiv', 
						{ media: 'media/', toolbox: self.$('.blocky-basic-toolbox').get(0)})
		
		# Assign ember-context to blockly-editor's 
		# (i.e. a context that wraps/controls the blockly-editor's behaviour)
		@blocklyEditor._emberContext = @
		
		# -------------------------------------------------
		# Handle Custom Blocks
		# -------------------------------------------------
		# Create & inject custom visual-blocks into toolbox
		# Note! Toolbox contains: Categories
		# -------------------------------------------------
		# 'Itebooks' visual-block: Create & inject a custom visual-block to be 
		# housed in the toolbox category called 'Datasource'
		@addCustomVisualBlockItebooksBlock_DatasourceCategory(@)

		# 'Join' visual-block: Create & inject a custom visual-block to be 
		# housed in the toolbox category called 'Datasource'
		@addCustomVisualBlockJoinBlock_DatasourceCategory(@)
		
		# ------------------
		# Populate workspace
		# ------------------
		# Approach 1: Populate workspace with predefined visual-block-composition:
		# Handle predefinition of TEXT type that containing XML
		xml_text = @get('blockToLoad')
		if xml_text
			xml = Blockly.Xml.textToDom(xml_text)
			Blockly.Xml.domToWorkspace(@blocklyEditor, xml)
		
		###
		# Approach 2: Populate workspace with predefined visual-block-composition:
		# Handle predefinition of DOM element type that containing XML
		Blockly.Xml.domToWorkspace(@blocklyEditor, self.$('.blocky-basic-initial-blocks1').get(0))
		###

		# --------------------
		# Setup Event-Handlers
		# --------------------
		#--------------------------------------------------------------------------
		# 1. Assign event-handler for reacting to visual-block's mouse-interactions
		# 2. Build an ember-object-type collection from visual-blocks 
		#--------------------------------------------------------------------------
		@allBlocks_VisualType_InWorkspace = Blockly.mainWorkspace.getAllBlocks()
		for visualBlock in @allBlocks_VisualType_InWorkspace

			# Assign mouse-interaction event-handler for each visual-block found in the workspace
			Blockly.bindEvent_(visualBlock.getSvgRoot(), 'mouseup', visualBlock, @blockOnClick)
			
			# Build-up an ember-object-type collection from all visual-blocks found in the workspace
			@allBlocks_EmberObjType_FromWorkspace.pushObject(Ember.Object.create({block: visualBlock}))

      		#--------------------------------------------------------------------------------
		# Assign event-handler for reacting to add/removal of visual-blocks to workspace
      		#--------------------------------------------------------------------------------
		@blocklyEditor.addChangeListener(@workspaceOnChange)
	
	
	# ---------------------
	# --- Action Events ---
	# ---------------------


		allVisualBlocks_Latest = Blockly.mainWorkspace.getAllBlocks()
		editorEmberContext = Blockly.mainWorkspace._emberContext

		# ----------------------------------------
		# Scenario 1: When number of visual-blocks
		# in the workspace remains unchange
		# ----------------------------------------
		if allVisualBlocks_Latest.length == editorEmberContext.allBlocks_VisualType_InWorkspace.length
			# Do nothing
			return

		# ----------------------------------------------------------
		# Scenario 2: On addition of a visual-block to the workspace
