text: /**
   * @license
   * Blockly Demos: Block Factory
   *
   * Copyright 2016 Google Inc.
   * https://developers.google.com/blockly/
   *
   * Licensed under the Apache License, Version 2.0 (the "License");
   * you may not use this file except in compliance with the License.
   * You may obtain a copy of the License at
   *
   *   http://www.apache.org/licenses/LICENSE-2.0
   *
   * Unless required by applicable law or agreed to in writing, software
   * distributed under the License is distributed on an "AS IS" BASIS,
   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   * See the License for the specific language governing permissions and
   * limitations under the License.
   */
  
  /**
   * @fileoverview Javascript for the BlockOption class, used to represent each of
   * the various blocks that you may select. Each block option has a checkbox,
   * a label, and a preview workspace through which to view the block.
   *
   * @author quachtina96 (Tina Quach)
   */
  'use strict';
  
  goog.provide('BlockOption');
  goog.require('goog.dom');
  
  
   /**
   * BlockOption Class
   * A block option includes checkbox, label, and div element that shows a preview
   * of the block.
   * @param {!Element} blockSelector Scrollable div that will contain the
   *    block options for the selector.
   * @param {string} blockType Type of block for which to create an option.
   * @param {!Element} previewBlockXml XML element containing the preview block.
   * @constructor
   */
  var BlockOption = function(blockSelector, blockType, previewBlockXml) {
    // The div to contain the block option.
    this.blockSelector = blockSelector;
    // The type of block represented by the option.
    this.blockType = blockType;
    // The checkbox for the option. Set in createDom.
    this.checkbox = null;
    // The dom for the option. Set in createDom.
    this.dom = null;
    // Xml element containing the preview block.
    this.previewBlockXml = previewBlockXml;
    // Workspace containing preview of block. Set upon injection of workspace in
    // showPreviewBlock.
    this.previewWorkspace = null;
    // Whether or not block the option is selected.
    this.selected = false;
    // Using this.selected rather than this.checkbox.checked allows for proper
    // handling of click events on the block option; Without this, clicking
    // directly on the checkbox does not toggle selection.
  };
  
  /**
   * Creates the dom for a single block option. Includes checkbox, label, and div
   * in which to inject the preview block.
   * @return {!Element} Root node of the selector dom which consists of a
   * checkbox, a label, and a fixed size preview workspace per block.
   */
  BlockOption.prototype.createDom = function() {
    // Create the div for the block option.
    var blockOptContainer = goog.dom.createDom('div', {
      'id': this.blockType,
      'class': 'blockOption'
    }, ''); // Empty quotes for empty div.
  
    // Create and append div in which to inject the workspace for viewing the
    // block option.
    var blockOptionPreview = goog.dom.createDom('div', {
      'id' : this.blockType + '_workspace',
      'class': 'blockOption_preview'
    }, '');
    blockOptContainer.appendChild(blockOptionPreview);
  
    // Create and append container to hold checkbox and label.
    var checkLabelContainer = goog.dom.createDom('div', {
      'class': 'blockOption_checkLabel'
    }, '');
    blockOptContainer.appendChild(checkLabelContainer);
  
    // Create and append container for checkbox.
    var checkContainer = goog.dom.createDom('div', {
      'class': 'blockOption_check'
    }, '');
    checkLabelContainer.appendChild(checkContainer);
  
    // Create and append checkbox.
    this.checkbox = goog.dom.createDom('input', {
      'type': 'checkbox',
      'id': this.blockType + '_check'
    }, '');
    checkContainer.appendChild(this.checkbox);
  
    // Create and append container for block label.
    var labelContainer = goog.dom.createDom('div', {
      'class': 'blockOption_label'
    }, '');
    checkLabelContainer.appendChild(labelContainer);
  
    // Create and append text node for the label.
    var labelText = goog.dom.createDom('p', {
      'id': this.blockType + '_text'
    }, this.blockType);
    labelContainer.appendChild(labelText);
  
    this.dom = blockOptContainer;
    return this.dom;
  };
  
  /**
   * Injects a workspace containing the block into the block option's preview div.
   */
  BlockOption.prototype.showPreviewBlock = function() {
    // Get ID of preview workspace.
    var blockOptPreviewID = this.dom.id + '_workspace';
  
    // Inject preview block.
    var demoWorkspace = Blockly.inject(blockOptPreviewID, {readOnly:true});
    Blockly.Xml.domToWorkspace(this.previewBlockXml, demoWorkspace);
    this.previewWorkspace = demoWorkspace;
  
    // Center the preview block in the workspace.
    this.centerBlock();
  };
  
  /**
   * Centers the preview block in the workspace.
   */
  BlockOption.prototype.centerBlock = function() {
    // Get metrics.
    var block = this.previewWorkspace.getTopBlocks()[0];
    var blockMetrics = block.getHeightWidth();
    var blockCoordinates = block.getRelativeToSurfaceXY();
    var workspaceMetrics = this.previewWorkspace.getMetrics();
  
    // Calculate new coordinates.
    var x = workspaceMetrics.viewWidth/2 - blockMetrics['width']/2 -
        blockCoordinates.x;
    var y = workspaceMetrics.viewHeight/2 - blockMetrics['height']/2 -
        blockCoordinates.y;
  
    // Move block.
    block.moveBy(x, y);
  };
  
  /**
   * Selects or deselects the block option.
   * @param {!boolean} selected True if selecting option, false if deselecting
   *    option.
   */
  BlockOption.prototype.setSelected = function(selected) {
    this.selected = selected;
    if (this.checkbox) {
      this.checkbox.checked = selected;
    }
  };
  
  /**
   * Returns boolean telling whether or not block is selected.
   * @return {!boolean} True if selecting option, false if deselecting
   *    option.
   */
  BlockOption.prototype.isSelected = function() {
    return this.selected;
  };
  