chrome/browser/resources/keyboard/main.js - platform/external/chromium - Git at Google

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.

 /**
  * @fileoverview A simple, English virtual keyboard implementation.
  */

 var KEY_MODE = 'key';
 var SHIFT_MODE = 'shift';
 var NUMBER_MODE = 'number';
 var SYMBOL_MODE = 'symbol';
 var MODES = [ KEY_MODE, SHIFT_MODE, NUMBER_MODE, SYMBOL_MODE ];
 var currentMode = KEY_MODE;
 var MODE_TRANSITIONS = {};

 MODE_TRANSITIONS[KEY_MODE + SHIFT_MODE] = SHIFT_MODE;
 MODE_TRANSITIONS[KEY_MODE + NUMBER_MODE] = NUMBER_MODE;
 MODE_TRANSITIONS[SHIFT_MODE + SHIFT_MODE] = KEY_MODE;
 MODE_TRANSITIONS[SHIFT_MODE + NUMBER_MODE] = NUMBER_MODE;
 MODE_TRANSITIONS[NUMBER_MODE + SHIFT_MODE] = SYMBOL_MODE;
 MODE_TRANSITIONS[NUMBER_MODE + NUMBER_MODE] = KEY_MODE;
 MODE_TRANSITIONS[SYMBOL_MODE + SHIFT_MODE] = NUMBER_MODE;
 MODE_TRANSITIONS[SYMBOL_MODE + NUMBER_MODE] = KEY_MODE;

 /**
  * Transition the mode according to the given transition.
  * @param {string} transition The transition to take.
  * @return {void}
  */
 function transitionMode(transition) {
   currentMode = MODE_TRANSITIONS[currentMode + transition];
 }

 /**
  * Plain-old-data class to represent a character.
  * @param {string} display The HTML to be displayed.
  * @param {string} id The key identifier for this Character.
  * @constructor
  */
 function Character(display, id) {
   this.display = display;
   this.keyIdentifier = id;
 }

 /**
  * Convenience function to make the keyboard data more readable.
  * @param {string} display Both the display and id for the created Character.
  */
 function C(display) {
   return new Character(display, display);
 }

 /**
  * An abstract base-class for all keys on the keyboard.
  * @constructor
  */
 function BaseKey() {}

 BaseKey.prototype = {
   /**
    * The aspect ratio of this key.
    * @type {number}
    */
   aspect_: 1,

   /**
    * The cell type of this key.  Determines the background colour.
    * @type {string}
    */
   cellType_: '',

   /**
    * @return {number} The aspect ratio of this key.
    */
   get aspect() {
     return this.aspect_;
   },

   /**
    * Set the position, a.k.a. row, of this key.
    * @param {string} position The position.
    * @return {void}
    */
   set position(position) {
     for (var i in this.modeElements_) {
       this.modeElements_[i].classList.add(this.cellType_ + 'r' + position);
     }
   },

   /**
    * Returns the amount of padding for the top of the key.
    * @param {string} mode The mode for the key.
    * @param {number} height The height of the key.
    * @return {number} Padding in pixels.
    */
   getPadding: function(mode, height) {
     return Math.floor(height / 3.5);
   },

   /**
    * Size the DOM elements of this key.
    * @param {string} mode The mode to be sized.
    * @param {number} height The height of the key.
    * @return {void}
    */
   sizeElement: function(mode, height) {
     var padding = this.getPadding(mode, height);
     var border = 1;
     var margin = 5;
     var width = Math.floor(height * this.aspect_);

     var extraHeight = margin + padding + 2 * border;
     var extraWidth = margin + 2 * border;

     this.modeElements_[mode].style.width = (width - extraWidth) + 'px';
     this.modeElements_[mode].style.height = (height - extraHeight) + 'px';
     this.modeElements_[mode].style.marginLeft = margin + 'px';
     this.modeElements_[mode].style.fontSize = (height / 3.5) + 'px';
     this.modeElements_[mode].style.paddingTop = padding + 'px';
   },

   /**
    * Resize all modes of this key based on the given height.
    * @param {number} height The height of the key.
    * @return {void}
    */
   resize: function(height) {
     for (var i in this.modeElements_) {
       this.sizeElement(i, height);
     }
   },

   /**
    * Create the DOM elements for the given keyboard mode.  Must be overridden.
    * @param {string} mode The keyboard mode to create elements for.
    * @param {number} height The height of the key.
    * @return {Element} The top-level DOM Element for the key.
    */
   makeDOM: function(mode, height) {
     throw new Error('makeDOM not implemented in BaseKey');
   },
 };

 /**
  * A simple key which displays Characters.
  * @param {Character} key The Character for KEY_MODE.
  * @param {Character} shift The Character for SHIFT_MODE.
  * @param {Character} num The Character for NUMBER_MODE.
  * @param {Character} symbol The Character for SYMBOL_MODE.
  * @constructor
  * @extends {BaseKey}
  */
 function Key(key, shift, num, symbol) {
   this.modeElements_ = {};
   this.aspect_ = 1;  // ratio width:height
   this.cellType_ = '';

   this.modes_ = {};
   this.modes_[KEY_MODE] = key;
   this.modes_[SHIFT_MODE] = shift;
   this.modes_[NUMBER_MODE] = num;
   this.modes_[SYMBOL_MODE] = symbol;
 }

 Key.prototype = {
   __proto__: BaseKey.prototype,

   /** @inheritDoc */
   makeDOM: function(mode, height) {
     this.modeElements_[mode] = document.createElement('div');
     this.modeElements_[mode].textContent = this.modes_[mode].display;
     this.modeElements_[mode].className = 'key';

     this.sizeElement(mode, height);

     this.modeElements_[mode].onclick =
         sendKeyFunction(this.modes_[mode].keyIdentifier);

     return this.modeElements_[mode];
   }
 };

 /**
  * A key which displays an SVG image.
  * @param {number} aspect The aspect ratio of the key.
  * @param {string} className The class that provides the image.
  * @param {string} keyId The key identifier for the key.
  * @constructor
  * @extends {BaseKey}
  */
 function SvgKey(aspect, className, keyId) {
   this.modeElements_ = {};
   this.aspect_ = aspect;
   this.cellType_ = 'nc';
   this.className_ = className;
   this.keyId_ = keyId;
 }

 SvgKey.prototype = {
   __proto__: BaseKey.prototype,

   /** @inheritDoc */
   getPadding: function(mode, height) { return 0; },

   /** @inheritDoc */
   makeDOM: function(mode, height) {
     this.modeElements_[mode] = document.createElement('div');
     this.modeElements_[mode].className = 'key';

     var img = document.createElement('div');
     img.className = 'image-key ' + this.className_;
     this.modeElements_[mode].appendChild(img);

     this.modeElements_[mode].onclick = sendKeyFunction(this.keyId_);

     this.sizeElement(mode, height);

     return this.modeElements_[mode];
   }
 };

 /**
  * A Key that remains the same through all modes.
  * @param {number} aspect The aspect ratio of the key.
  * @param {string} content The display text for the key.
  * @param {string} keyId The key identifier for the key.
  * @constructor
  * @extends {BaseKey}
  */
 function SpecialKey(aspect, content, keyId) {
   this.modeElements_ = {};
   this.aspect_ = aspect;
   this.cellType_ = 'nc';
   this.content_ = content;
   this.keyId_ = keyId;
 }

 SpecialKey.prototype = {
   __proto__: BaseKey.prototype,

   /** @inheritDoc */
   makeDOM: function(mode, height) {
     this.modeElements_[mode] = document.createElement('div');
     this.modeElements_[mode].textContent = this.content_;
     this.modeElements_[mode].className = 'key';

     this.modeElements_[mode].onclick = sendKeyFunction(this.keyId_);

     this.sizeElement(mode, height);

     return this.modeElements_[mode];
   }
 };

 /**
  * A shift key.
  * @param {number} aspect The aspect ratio of the key.
  * @constructor
  * @extends {BaseKey}
  */
 function ShiftKey(aspect) {
   this.modeElements_ = {};
   this.aspect_ = aspect;
   this.cellType_ = 'nc';
 }

 ShiftKey.prototype = {
   __proto__: BaseKey.prototype,

   /** @inheritDoc */
   getPadding: function(mode, height) {
     if (mode == NUMBER_MODE || mode == SYMBOL_MODE) {
       return BaseKey.prototype.getPadding.call(this, mode, height);
     }
     return 0;
   },

   /** @inheritDoc */
   makeDOM: function(mode, height) {
     this.modeElements_[mode] = document.createElement('div');

     if (mode == KEY_MODE || mode == SHIFT_MODE) {
       var shift = document.createElement('div');
       shift.className = 'image-key shift';
       this.modeElements_[mode].appendChild(shift);
     } else if (mode == NUMBER_MODE) {
       this.modeElements_[mode].textContent = 'more';
     } else if (mode == SYMBOL_MODE) {
       this.modeElements_[mode].textContent = '#123';
     }

     if (mode == SHIFT_MODE || mode == SYMBOL_MODE) {
       this.modeElements_[mode].className = 'moddown key';
     } else {
       this.modeElements_[mode].className = 'key';
     }

     this.sizeElement(mode, height);

     this.modeElements_[mode].onclick = function() {
       transitionMode(SHIFT_MODE);
       setMode(currentMode);
     };
     return this.modeElements_[mode];
   },
 };

 /**
  * The symbol key: switches the keyboard into symbol mode.
  * @constructor
  * @extends {BaseKey}
  */
 function SymbolKey() {
   this.modeElements_ = {}
   this.aspect_ = 1.3;
   this.cellType_ = 'nc';
 }

 SymbolKey.prototype = {
   __proto__: BaseKey.prototype,

   /** @inheritDoc */
   makeDOM: function(mode, height) {
     this.modeElements_[mode] = document.createElement('div');

     if (mode == KEY_MODE || mode == SHIFT_MODE) {
       this.modeElements_[mode].textContent = '#123';
     } else if (mode == NUMBER_MODE || mode == SYMBOL_MODE) {
       this.modeElements_[mode].textContent = 'abc';
     }

     if (mode == NUMBER_MODE || mode == SYMBOL_MODE) {
       this.modeElements_[mode].className = 'moddown key';
     } else {
       this.modeElements_[mode].className = 'key';
     }

     this.sizeElement(mode, height);

     this.modeElements_[mode].onclick = function() {
       transitionMode(NUMBER_MODE);
       setMode(currentMode);
     };

     return this.modeElements_[mode];
   }
 };

 /**
  * The ".com" key.
  * @constructor
  * @extends {BaseKey}
  */
 function DotComKey() {
   this.modeElements_ = {}
   this.aspect_ = 1.3;
   this.cellType_ = 'nc';
 }

 DotComKey.prototype = {
   __proto__: BaseKey.prototype,

   /** @inheritDoc */
   makeDOM: function(mode, height) {
     this.modeElements_[mode] = document.createElement('div');
     this.modeElements_[mode].textContent = '.com';
     this.modeElements_[mode].className = 'key';

     this.sizeElement(mode, height);

     this.modeElements_[mode].onclick = function() {
       sendKey('.');
       sendKey('c');
       sendKey('o');
       sendKey('m');
     };

     return this.modeElements_[mode];
   }
 };

 /**
  * The key that hides the keyboard.
  * @constructor
  * @extends {BaseKey}
  */
 function HideKeyboardKey() {
   this.modeElements_ = {}
   this.aspect_ = 1.3;
   this.cellType_ = 'nc';
 }

 HideKeyboardKey.prototype = {
   __proto__: BaseKey.prototype,

   /** @inheritDoc */
   getPadding: function(mode, height) { return 0; },

   /** @inheritDoc */
   makeDOM: function(mode, height) {
     this.modeElements_[mode] = document.createElement('div');
     this.modeElements_[mode].className = 'key';

     var hide = document.createElement('div');
     hide.className = 'image-key hide';
     this.modeElements_[mode].appendChild(hide);

     this.sizeElement(mode, height);

     this.modeElements_[mode].onclick = function() {
       // TODO(bryeung): need a way to cancel the keyboard
     };

     return this.modeElements_[mode];
   }
 };

 /**
  * A container for keys.
  * @param {number} position The position of the row (0-3).
  * @param {Array.<BaseKey>} keys The keys in the row.
  * @constructor
  */
 function Row(position, keys) {
   this.position_ = position;
   this.keys_ = keys;
   this.element_ = null;
   this.modeElements_ = {};
 }

 Row.prototype = {
   /**
    * Get the total aspect ratio of the row.
    * @return {number} The aspect ratio relative to a height of 1 unit.
    */
   get aspect() {
     var total = 0;
     for (var i = 0; i < this.keys_.length; ++i) {
       total += this.keys_[i].aspect;
     }
     return total;
   },

   /**
    * Create the DOM elements for the row.
    * @return {Element} The top-level DOM Element for the row.
    */
   makeDOM: function(height) {
     this.element_ = document.createElement('div');
     this.element_.className = 'row';
     for (var i = 0; i < MODES.length; ++i) {
       var mode = MODES[i];
       this.modeElements_[mode] = document.createElement('div');
       this.modeElements_[mode].style.display = 'none';
       this.element_.appendChild(this.modeElements_[mode]);
     }

     for (var j = 0; j < this.keys_.length; ++j) {
       var key = this.keys_[j];
       for (var i = 0; i < MODES.length; ++i) {
         this.modeElements_[MODES[i]].appendChild(key.makeDOM(MODES[i]), height);
       }
     }

     for (var i = 0; i < MODES.length; ++i) {
       var clearingDiv = document.createElement('div');
       clearingDiv.style.clear = 'both';
       this.modeElements_[MODES[i]].appendChild(clearingDiv);
     }

     for (var i = 0; i < this.keys_.length; ++i) {
       this.keys_[i].position = this.position_;
     }

     return this.element_;
   },

   /**
    * Shows the given mode.
    * @param {string} mode The mode to show.
    * @return {void}
    */
   showMode: function(mode) {
     for (var i = 0; i < MODES.length; ++i) {
       this.modeElements_[MODES[i]].style.display = 'none';
     }
     this.modeElements_[mode].style.display = 'block';
   },

   /**
    * Resizes all keys in the row according to the global size.
    * @param {number} height The height of the key.
    * @return {void}
    */
   resize: function(height) {
     for (var i = 0; i < this.keys_.length; ++i) {
       this.keys_[i].resize(height);
     }
   },
 };

 /**
  * All keys for the rows of the keyboard.
  * NOTE: every row below should have an aspect of 12.6.
  * @type {Array.<Array.<BaseKey>>}
  */
 var KEYS = [
   [
     new SvgKey(1, 'tab', 'Tab'),
     new Key(C('q'), C('Q'), C('1'), C('`')),
     new Key(C('w'), C('W'), C('2'), C('~')),
     new Key(C('e'), C('E'), C('3'), new Character('<', 'LessThan')),
     new Key(C('r'), C('R'), C('4'), new Character('>', 'GreaterThan')),
     new Key(C('t'), C('T'), C('5'), C('[')),
     new Key(C('y'), C('Y'), C('6'), C(']')),
     new Key(C('u'), C('U'), C('7'), C('{')),
     new Key(C('i'), C('I'), C('8'), C('}')),
     new Key(C('o'), C('O'), C('9'), C('\'')),
     new Key(C('p'), C('P'), C('0'), C('|')),
     new SvgKey(1.6, 'backspace', 'Backspace')
   ],
   [
     new SymbolKey(),
     new Key(C('a'), C('A'), C('!'), C('+')),
     new Key(C('s'), C('S'), C('@'), C('=')),
     new Key(C('d'), C('D'), C('#'), C(' ')),
     new Key(C('f'), C('F'), C('$'), C(' ')),
     new Key(C('g'), C('G'), C('%'), C(' ')),
     new Key(C('h'), C('H'), C('^'), C(' ')),
     new Key(C('j'), C('J'), new Character('&', 'Ampersand'), C(' ')),
     new Key(C('k'), C('K'), C('*'), C('#')),
     new Key(C('l'), C('L'), C('('), C(' ')),
     new Key(C('\''), C('\''), C(')'), C(' ')),
     new SvgKey(1.3, 'return', 'Enter')
   ],
   [
     new ShiftKey(1.6),
     new Key(C('z'), C('Z'), C('/'), C(' ')),
     new Key(C('x'), C('X'), C('-'), C(' ')),
     new Key(C('c'), C('C'), C('\''), C(' ')),
     new Key(C('v'), C('V'), C('"'), C(' ')),
     new Key(C('b'), C('B'), C(':'), C('.')),
     new Key(C('n'), C('N'), C(';'), C(' ')),
     new Key(C('m'), C('M'), C('_'), C(' ')),
     new Key(C('!'), C('!'), C('{'), C(' ')),
     new Key(C('?'), C('?'), C('}'), C(' ')),
     new Key(C('/'), C('/'), C('\\'), C(' ')),
     new ShiftKey(1)
   ],
   [
     new SvgKey(1.3, 'mic', ''),
     new DotComKey(),
     new SpecialKey(1.3, '@', '@'),
     // TODO(bryeung): the spacebar needs to be a little bit more stretchy,
     // since this row has only 7 keys (as opposed to 12), the truncation
     // can cause it to not be wide enough.
     new SpecialKey(4.8, ' ', 'Spacebar'),
     new SpecialKey(1.3, ',', ','),
     new SpecialKey(1.3, '.', '.'),
     new HideKeyboardKey()
   ]
 ];

 /**
  * All of the rows in the keyboard.
  * @type {Array.<Row>}
  */
 var allRows = [];  // Populated during start()

 /**
  * Calculate the height of the row based on the size of the page.
  * @return {number} The height of each row, in pixels.
  */
 function getRowHeight() {
   var x = window.innerWidth;
   var y = window.innerHeight;
   return (x > kKeyboardAspect * y) ?
       (height = Math.floor(y / 4)) :
       (height = Math.floor(x / (kKeyboardAspect * 4)));
 }

 /**
  * Set the keyboard mode.
  * @param {string} mode The new mode.
  * @return {void}
  */
 function setMode(mode) {
   for (var i = 0; i < allRows.length; ++i) {
     allRows[i].showMode(mode);
   }
 }

 /**
  * The keyboard's aspect ratio.
  * @type {number}
  */
 var kKeyboardAspect = 3.3;

 /**
  * Send the given key to chrome, via the experimental extension API.
  * @param {string} key The key to send.
  * @return {void}
  */
 function sendKey(key) {
   if (!chrome.experimental) {
     console.log(key);
     return;
   }

   var keyEvent = {'type': 'keydown', 'keyIdentifier': key};
   if (currentMode == SHIFT_MODE)
     keyEvent['shiftKey'] = true;

   chrome.experimental.input.sendKeyboardEvent(keyEvent);
   keyEvent['type'] = 'keyup';
   chrome.experimental.input.sendKeyboardEvent(keyEvent);

   // TODO(bryeung): deactivate shift after a successful keypress
 }

 /**
  * Create a closure for the sendKey function.
  * @param {string} key The parameter to sendKey.
  * @return {void}
  */
 function sendKeyFunction(key) {
   return function() { sendKey(key); }
 }

 /**
  * Resize the keyboard according to the new window size.
  * @return {void}
  */
 window.onresize = function() {
   var height = getRowHeight();
   var newX = document.documentElement.clientWidth;

   // All rows should have the same aspect, so just use the first one
   var totalWidth = Math.floor(height * allRows[0].aspect);
   var leftPadding = Math.floor((newX - totalWidth) / 2);
   document.getElementById('b').style.paddingLeft = leftPadding + 'px';

   for (var i = 0; i < allRows.length; ++i) {
     allRows[i].resize(height);
   }
 }

 /**
  * Init the keyboard.
  * @return {void}
  */
 window.onload = function() {
   var body = document.getElementById('b');
   for (var i = 0; i < KEYS.length; ++i) {
     allRows.push(new Row(i, KEYS[i]));
   }

   for (var i = 0; i < allRows.length; ++i) {
     body.appendChild(allRows[i].makeDOM(getRowHeight()));
     allRows[i].showMode(KEY_MODE);
   }

   window.onresize();
 }

 // TODO(bryeung): would be nice to leave less gutter (without causing
 // rendering issues with floated divs wrapping at some sizes).
	// Copyright (c) 2011 The Chromium Authors. All rights reserved.
	// Use of this source code is governed by a BSD-style license that can be
	// found in the LICENSE file.

	/**
	* @fileoverview A simple, English virtual keyboard implementation.
	*/

	var KEY_MODE = 'key';
	var SHIFT_MODE = 'shift';
	var NUMBER_MODE = 'number';
	var SYMBOL_MODE = 'symbol';
	var MODES = [ KEY_MODE, SHIFT_MODE, NUMBER_MODE, SYMBOL_MODE ];
	var currentMode = KEY_MODE;
	var MODE_TRANSITIONS = {};

	MODE_TRANSITIONS[KEY_MODE + SHIFT_MODE] = SHIFT_MODE;
	MODE_TRANSITIONS[KEY_MODE + NUMBER_MODE] = NUMBER_MODE;
	MODE_TRANSITIONS[SHIFT_MODE + SHIFT_MODE] = KEY_MODE;
	MODE_TRANSITIONS[SHIFT_MODE + NUMBER_MODE] = NUMBER_MODE;
	MODE_TRANSITIONS[NUMBER_MODE + SHIFT_MODE] = SYMBOL_MODE;
	MODE_TRANSITIONS[NUMBER_MODE + NUMBER_MODE] = KEY_MODE;
	MODE_TRANSITIONS[SYMBOL_MODE + SHIFT_MODE] = NUMBER_MODE;
	MODE_TRANSITIONS[SYMBOL_MODE + NUMBER_MODE] = KEY_MODE;

	/**
	* Transition the mode according to the given transition.
	* @param {string} transition The transition to take.
	* @return {void}
	*/
	function transitionMode(transition) {
	currentMode = MODE_TRANSITIONS[currentMode + transition];
	}

	/**
	* Plain-old-data class to represent a character.
	* @param {string} display The HTML to be displayed.
	* @param {string} id The key identifier for this Character.
	* @constructor
	*/
	function Character(display, id) {
	this.display = display;
	this.keyIdentifier = id;
	}

	/**
	* Convenience function to make the keyboard data more readable.
	* @param {string} display Both the display and id for the created Character.
	*/
	function C(display) {
	return new Character(display, display);
	}

	/**
	* An abstract base-class for all keys on the keyboard.
	* @constructor
	*/
	function BaseKey() {}

	BaseKey.prototype = {
	/**
	* The aspect ratio of this key.
	* @type {number}
	*/
	aspect_: 1,

	/**
	* The cell type of this key. Determines the background colour.
	* @type {string}
	*/
	cellType_: '',

	/**
	* @return {number} The aspect ratio of this key.
	*/
	get aspect() {
	return this.aspect_;
	},

	/**
	* Set the position, a.k.a. row, of this key.
	* @param {string} position The position.
	* @return {void}
	*/
	set position(position) {
	for (var i in this.modeElements_) {
	this.modeElements_[i].classList.add(this.cellType_ + 'r' + position);
	}
	},

	/**
	* Returns the amount of padding for the top of the key.
	* @param {string} mode The mode for the key.
	* @param {number} height The height of the key.
	* @return {number} Padding in pixels.
	*/
	getPadding: function(mode, height) {
	return Math.floor(height / 3.5);
	},

	/**
	* Size the DOM elements of this key.
	* @param {string} mode The mode to be sized.
	* @param {number} height The height of the key.
	* @return {void}
	*/
	sizeElement: function(mode, height) {
	var padding = this.getPadding(mode, height);
	var border = 1;
	var margin = 5;
	var width = Math.floor(height * this.aspect_);

	var extraHeight = margin + padding + 2 * border;
	var extraWidth = margin + 2 * border;

	this.modeElements_[mode].style.width = (width - extraWidth) + 'px';
	this.modeElements_[mode].style.height = (height - extraHeight) + 'px';
	this.modeElements_[mode].style.marginLeft = margin + 'px';
	this.modeElements_[mode].style.fontSize = (height / 3.5) + 'px';
	this.modeElements_[mode].style.paddingTop = padding + 'px';
	},

	/**
	* Resize all modes of this key based on the given height.
	* @param {number} height The height of the key.
	* @return {void}
	*/
	resize: function(height) {
	for (var i in this.modeElements_) {
	this.sizeElement(i, height);
	}
	},

	/**
	* Create the DOM elements for the given keyboard mode. Must be overridden.
	* @param {string} mode The keyboard mode to create elements for.
	* @param {number} height The height of the key.
	* @return {Element} The top-level DOM Element for the key.
	*/
	makeDOM: function(mode, height) {
	throw new Error('makeDOM not implemented in BaseKey');
	},
	};

	/**
	* A simple key which displays Characters.
	* @param {Character} key The Character for KEY_MODE.
	* @param {Character} shift The Character for SHIFT_MODE.
	* @param {Character} num The Character for NUMBER_MODE.
	* @param {Character} symbol The Character for SYMBOL_MODE.
	* @constructor
	* @extends {BaseKey}
	*/
	function Key(key, shift, num, symbol) {
	this.modeElements_ = {};
	this.aspect_ = 1; // ratio width:height
	this.cellType_ = '';

	this.modes_ = {};
	this.modes_[KEY_MODE] = key;
	this.modes_[SHIFT_MODE] = shift;
	this.modes_[NUMBER_MODE] = num;
	this.modes_[SYMBOL_MODE] = symbol;
	}

	Key.prototype = {
	__proto__: BaseKey.prototype,

	/** @inheritDoc */
	makeDOM: function(mode, height) {
	this.modeElements_[mode] = document.createElement('div');
	this.modeElements_[mode].textContent = this.modes_[mode].display;
	this.modeElements_[mode].className = 'key';

	this.sizeElement(mode, height);

	this.modeElements_[mode].onclick =
	sendKeyFunction(this.modes_[mode].keyIdentifier);

	return this.modeElements_[mode];
	}
	};

	/**
	* A key which displays an SVG image.
	* @param {number} aspect The aspect ratio of the key.
	* @param {string} className The class that provides the image.
	* @param {string} keyId The key identifier for the key.
	* @constructor
	* @extends {BaseKey}
	*/
	function SvgKey(aspect, className, keyId) {
	this.modeElements_ = {};
	this.aspect_ = aspect;
	this.cellType_ = 'nc';
	this.className_ = className;
	this.keyId_ = keyId;
	}

	SvgKey.prototype = {
	__proto__: BaseKey.prototype,

	/** @inheritDoc */
	getPadding: function(mode, height) { return 0; },

	/** @inheritDoc */
	makeDOM: function(mode, height) {
	this.modeElements_[mode] = document.createElement('div');
	this.modeElements_[mode].className = 'key';

	var img = document.createElement('div');
	img.className = 'image-key ' + this.className_;
	this.modeElements_[mode].appendChild(img);

	this.modeElements_[mode].onclick = sendKeyFunction(this.keyId_);

	this.sizeElement(mode, height);

	return this.modeElements_[mode];
	}
	};

	/**
	* A Key that remains the same through all modes.
	* @param {number} aspect The aspect ratio of the key.
	* @param {string} content The display text for the key.
	* @param {string} keyId The key identifier for the key.
	* @constructor
	* @extends {BaseKey}
	*/
	function SpecialKey(aspect, content, keyId) {
	this.modeElements_ = {};
	this.aspect_ = aspect;
	this.cellType_ = 'nc';
	this.content_ = content;
	this.keyId_ = keyId;
	}

	SpecialKey.prototype = {
	__proto__: BaseKey.prototype,

	/** @inheritDoc */
	makeDOM: function(mode, height) {
	this.modeElements_[mode] = document.createElement('div');
	this.modeElements_[mode].textContent = this.content_;
	this.modeElements_[mode].className = 'key';

	this.modeElements_[mode].onclick = sendKeyFunction(this.keyId_);

	this.sizeElement(mode, height);

	return this.modeElements_[mode];
	}
	};

	/**
	* A shift key.
	* @param {number} aspect The aspect ratio of the key.
	* @constructor
	* @extends {BaseKey}
	*/
	function ShiftKey(aspect) {
	this.modeElements_ = {};
	this.aspect_ = aspect;
	this.cellType_ = 'nc';
	}

	ShiftKey.prototype = {
	__proto__: BaseKey.prototype,

	/** @inheritDoc */
	getPadding: function(mode, height) {
	if (mode == NUMBER_MODE \|\| mode == SYMBOL_MODE) {
	return BaseKey.prototype.getPadding.call(this, mode, height);
	}
	return 0;
	},

	/** @inheritDoc */
	makeDOM: function(mode, height) {
	this.modeElements_[mode] = document.createElement('div');

	if (mode == KEY_MODE \|\| mode == SHIFT_MODE) {
	var shift = document.createElement('div');
	shift.className = 'image-key shift';
	this.modeElements_[mode].appendChild(shift);
	} else if (mode == NUMBER_MODE) {
	this.modeElements_[mode].textContent = 'more';
	} else if (mode == SYMBOL_MODE) {
	this.modeElements_[mode].textContent = '#123';
	}

	if (mode == SHIFT_MODE \|\| mode == SYMBOL_MODE) {
	this.modeElements_[mode].className = 'moddown key';
	} else {
	this.modeElements_[mode].className = 'key';
	}

	this.sizeElement(mode, height);

	this.modeElements_[mode].onclick = function() {
	transitionMode(SHIFT_MODE);
	setMode(currentMode);
	};
	return this.modeElements_[mode];
	},
	};

	/**
	* The symbol key: switches the keyboard into symbol mode.
	* @constructor
	* @extends {BaseKey}
	*/
	function SymbolKey() {
	this.modeElements_ = {}
	this.aspect_ = 1.3;
	this.cellType_ = 'nc';
	}

	SymbolKey.prototype = {
	__proto__: BaseKey.prototype,

	/** @inheritDoc */
	makeDOM: function(mode, height) {
	this.modeElements_[mode] = document.createElement('div');

	if (mode == KEY_MODE \|\| mode == SHIFT_MODE) {
	this.modeElements_[mode].textContent = '#123';
	} else if (mode == NUMBER_MODE \|\| mode == SYMBOL_MODE) {
	this.modeElements_[mode].textContent = 'abc';
	}

	if (mode == NUMBER_MODE \|\| mode == SYMBOL_MODE) {
	this.modeElements_[mode].className = 'moddown key';
	} else {
	this.modeElements_[mode].className = 'key';
	}

	this.sizeElement(mode, height);

	this.modeElements_[mode].onclick = function() {
	transitionMode(NUMBER_MODE);
	setMode(currentMode);
	};

	return this.modeElements_[mode];
	}
	};

	/**
	* The ".com" key.
	* @constructor
	* @extends {BaseKey}
	*/
	function DotComKey() {
	this.modeElements_ = {}
	this.aspect_ = 1.3;
	this.cellType_ = 'nc';
	}

	DotComKey.prototype = {
	__proto__: BaseKey.prototype,

	/** @inheritDoc */
	makeDOM: function(mode, height) {
	this.modeElements_[mode] = document.createElement('div');
	this.modeElements_[mode].textContent = '.com';
	this.modeElements_[mode].className = 'key';

	this.sizeElement(mode, height);

	this.modeElements_[mode].onclick = function() {
	sendKey('.');
	sendKey('c');
	sendKey('o');
	sendKey('m');
	};

	return this.modeElements_[mode];
	}
	};

	/**
	* The key that hides the keyboard.
	* @constructor
	* @extends {BaseKey}
	*/
	function HideKeyboardKey() {
	this.modeElements_ = {}
	this.aspect_ = 1.3;
	this.cellType_ = 'nc';
	}

	HideKeyboardKey.prototype = {
	__proto__: BaseKey.prototype,

	/** @inheritDoc */
	getPadding: function(mode, height) { return 0; },

	/** @inheritDoc */
	makeDOM: function(mode, height) {
	this.modeElements_[mode] = document.createElement('div');
	this.modeElements_[mode].className = 'key';

	var hide = document.createElement('div');
	hide.className = 'image-key hide';
	this.modeElements_[mode].appendChild(hide);

	this.sizeElement(mode, height);

	this.modeElements_[mode].onclick = function() {
	// TODO(bryeung): need a way to cancel the keyboard
	};

	return this.modeElements_[mode];
	}
	};

	/**
	* A container for keys.
	* @param {number} position The position of the row (0-3).
	* @param {Array.<BaseKey>} keys The keys in the row.
	* @constructor
	*/
	function Row(position, keys) {
	this.position_ = position;
	this.keys_ = keys;
	this.element_ = null;
	this.modeElements_ = {};
	}

	Row.prototype = {
	/**
	* Get the total aspect ratio of the row.
	* @return {number} The aspect ratio relative to a height of 1 unit.
	*/
	get aspect() {
	var total = 0;
	for (var i = 0; i < this.keys_.length; ++i) {
	total += this.keys_[i].aspect;
	}
	return total;
	},

	/**
	* Create the DOM elements for the row.
	* @return {Element} The top-level DOM Element for the row.
	*/
	makeDOM: function(height) {
	this.element_ = document.createElement('div');
	this.element_.className = 'row';
	for (var i = 0; i < MODES.length; ++i) {
	var mode = MODES[i];
	this.modeElements_[mode] = document.createElement('div');
	this.modeElements_[mode].style.display = 'none';
	this.element_.appendChild(this.modeElements_[mode]);
	}

	for (var j = 0; j < this.keys_.length; ++j) {
	var key = this.keys_[j];
	for (var i = 0; i < MODES.length; ++i) {
	this.modeElements_[MODES[i]].appendChild(key.makeDOM(MODES[i]), height);
	}
	}

	for (var i = 0; i < MODES.length; ++i) {
	var clearingDiv = document.createElement('div');
	clearingDiv.style.clear = 'both';
	this.modeElements_[MODES[i]].appendChild(clearingDiv);
	}

	for (var i = 0; i < this.keys_.length; ++i) {
	this.keys_[i].position = this.position_;
	}

	return this.element_;
	},

	/**
	* Shows the given mode.
	* @param {string} mode The mode to show.
	* @return {void}
	*/
	showMode: function(mode) {
	for (var i = 0; i < MODES.length; ++i) {
	this.modeElements_[MODES[i]].style.display = 'none';
	}
	this.modeElements_[mode].style.display = 'block';
	},

	/**
	* Resizes all keys in the row according to the global size.
	* @param {number} height The height of the key.
	* @return {void}
	*/
	resize: function(height) {
	for (var i = 0; i < this.keys_.length; ++i) {
	this.keys_[i].resize(height);
	}
	},
	};

	/**
	* All keys for the rows of the keyboard.
	* NOTE: every row below should have an aspect of 12.6.
	* @type {Array.<Array.<BaseKey>>}
	*/
	var KEYS = [
	[
	new SvgKey(1, 'tab', 'Tab'),
	new Key(C('q'), C('Q'), C('1'), C('`')),
	new Key(C('w'), C('W'), C('2'), C('~')),
	new Key(C('e'), C('E'), C('3'), new Character('<', 'LessThan')),
	new Key(C('r'), C('R'), C('4'), new Character('>', 'GreaterThan')),
	new Key(C('t'), C('T'), C('5'), C('[')),
	new Key(C('y'), C('Y'), C('6'), C(']')),
	new Key(C('u'), C('U'), C('7'), C('{')),
	new Key(C('i'), C('I'), C('8'), C('}')),
	new Key(C('o'), C('O'), C('9'), C('\'')),
	new Key(C('p'), C('P'), C('0'), C('\|')),
	new SvgKey(1.6, 'backspace', 'Backspace')
	],
	[
	new SymbolKey(),
	new Key(C('a'), C('A'), C('!'), C('+')),
	new Key(C('s'), C('S'), C('@'), C('=')),
	new Key(C('d'), C('D'), C('#'), C(' ')),
	new Key(C('f'), C('F'), C('$'), C(' ')),
	new Key(C('g'), C('G'), C('%'), C(' ')),
	new Key(C('h'), C('H'), C('^'), C(' ')),
	new Key(C('j'), C('J'), new Character('&', 'Ampersand'), C(' ')),
	new Key(C('k'), C('K'), C('*'), C('#')),
	new Key(C('l'), C('L'), C('('), C(' ')),
	new Key(C('\''), C('\''), C(')'), C(' ')),
	new SvgKey(1.3, 'return', 'Enter')
	],
	[
	new ShiftKey(1.6),
	new Key(C('z'), C('Z'), C('/'), C(' ')),
	new Key(C('x'), C('X'), C('-'), C(' ')),
	new Key(C('c'), C('C'), C('\''), C(' ')),
	new Key(C('v'), C('V'), C('"'), C(' ')),
	new Key(C('b'), C('B'), C(':'), C('.')),
	new Key(C('n'), C('N'), C(';'), C(' ')),
	new Key(C('m'), C('M'), C('_'), C(' ')),
	new Key(C('!'), C('!'), C('{'), C(' ')),
	new Key(C('?'), C('?'), C('}'), C(' ')),
	new Key(C('/'), C('/'), C('\\'), C(' ')),
	new ShiftKey(1)
	],
	[
	new SvgKey(1.3, 'mic', ''),
	new DotComKey(),
	new SpecialKey(1.3, '@', '@'),
	// TODO(bryeung): the spacebar needs to be a little bit more stretchy,
	// since this row has only 7 keys (as opposed to 12), the truncation
	// can cause it to not be wide enough.
	new SpecialKey(4.8, ' ', 'Spacebar'),
	new SpecialKey(1.3, ',', ','),
	new SpecialKey(1.3, '.', '.'),
	new HideKeyboardKey()
	]
	];

	/**
	* All of the rows in the keyboard.
	* @type {Array.<Row>}
	*/
	var allRows = []; // Populated during start()

	/**
	* Calculate the height of the row based on the size of the page.
	* @return {number} The height of each row, in pixels.
	*/
	function getRowHeight() {
	var x = window.innerWidth;
	var y = window.innerHeight;
	return (x > kKeyboardAspect * y) ?
	(height = Math.floor(y / 4)) :
	(height = Math.floor(x / (kKeyboardAspect * 4)));
	}

	/**
	* Set the keyboard mode.
	* @param {string} mode The new mode.
	* @return {void}
	*/
	function setMode(mode) {
	for (var i = 0; i < allRows.length; ++i) {
	allRows[i].showMode(mode);
	}
	}

	/**
	* The keyboard's aspect ratio.
	* @type {number}
	*/
	var kKeyboardAspect = 3.3;

	/**
	* Send the given key to chrome, via the experimental extension API.
	* @param {string} key The key to send.
	* @return {void}
	*/
	function sendKey(key) {
	if (!chrome.experimental) {
	console.log(key);
	return;
	}

	var keyEvent = {'type': 'keydown', 'keyIdentifier': key};
	if (currentMode == SHIFT_MODE)
	keyEvent['shiftKey'] = true;

	chrome.experimental.input.sendKeyboardEvent(keyEvent);
	keyEvent['type'] = 'keyup';
	chrome.experimental.input.sendKeyboardEvent(keyEvent);

	// TODO(bryeung): deactivate shift after a successful keypress
	}

	/**
	* Create a closure for the sendKey function.
	* @param {string} key The parameter to sendKey.
	* @return {void}
	*/
	function sendKeyFunction(key) {
	return function() { sendKey(key); }
	}

	/**
	* Resize the keyboard according to the new window size.
	* @return {void}
	*/
	window.onresize = function() {
	var height = getRowHeight();
	var newX = document.documentElement.clientWidth;

	// All rows should have the same aspect, so just use the first one
	var totalWidth = Math.floor(height * allRows[0].aspect);
	var leftPadding = Math.floor((newX - totalWidth) / 2);
	document.getElementById('b').style.paddingLeft = leftPadding + 'px';

	for (var i = 0; i < allRows.length; ++i) {
	allRows[i].resize(height);
	}
	}

	/**
	* Init the keyboard.
	* @return {void}
	*/
	window.onload = function() {
	var body = document.getElementById('b');
	for (var i = 0; i < KEYS.length; ++i) {
	allRows.push(new Row(i, KEYS[i]));
	}

	for (var i = 0; i < allRows.length; ++i) {
	body.appendChild(allRows[i].makeDOM(getRowHeight()));
	allRows[i].showMode(KEY_MODE);
	}

	window.onresize();
	}

	// TODO(bryeung): would be nice to leave less gutter (without causing
	// rendering issues with floated divs wrapping at some sizes).