// Copyright 2014-2015, University of Colorado Boulder

/**
 * Shows a Dialog with content describing keyboard interactions. Brought up by a button
 * in the navigation bar.
 *
 * @author Jesse Greenberg
 */
define( function( require ) {
  'use strict';

  // modules
  var Text = require( 'SCENERY/nodes/Text' );
  var inherit = require( 'PHET_CORE/inherit' );
  var PhetFont = require( 'SCENERY_PHET/PhetFont' );
  var Dialog = require( 'JOIST/Dialog' );
  var joist = require( 'JOIST/joist' );

  // strings
  var hotKeysAndHelpString = 'Hot Keys and Help'; // accessibility content is not translatable yet

  /**
   * Constructor.
   * @param {Node} helpContent - a node containing the sim specific keyboard help content
   * @param {object} options
   * @constructor
   */
  function KeyboardHelpDialog( helpContent, options ) {

    options = _.extend( {
      title: new Text( hotKeysAndHelpString, { font: new PhetFont( { weight: 'bold', size: 20 } ) } ),
      titleAlign: 'center',
      modal: true,
      hasCloseButton: false,
      fill: 'rgb( 214, 237, 249 )'
    }, options );

    Dialog.call( this, helpContent, options );

  }

  joist.register( 'KeyboardHelpDialog', KeyboardHelpDialog );

  return inherit( Dialog, KeyboardHelpDialog );
} );
@@ -267,19 +267,22 @@
 s%0A  var 
-Tex
+inheri
 t = requ
@@ -291,127 +291,173 @@
 e( '
-SCENERY/nodes/Text' );%0A  var inherit = require( 'PHET_CORE/inherit' );%0A  var PhetFont = require( 'SCENERY_PHET/PhetFont
+PHET_CORE/inherit' );%0A  var Dialog = require( 'JOIST/Dialog' );%0A  var joist = require( 'JOIST/joist' );%0A  var ButtonListener = require( 'SCENERY/input/ButtonListener
 ' );
@@ -455,38 +455,36 @@
 tener' );%0A  var 
-Dialog
+Path
  = require( 'JOI
@@ -476,36 +476,42 @@
 = require( '
-JOIST/Dialog
+SCENERY/nodes/Path
 ' );%0A  var j
@@ -501,37 +501,37 @@
 /Path' );%0A  var 
-joist
+Shape
  = require( 'JOI
@@ -531,136 +531,100 @@
 e( '
-JOIST/joist' );%0A%0A  // strings%0A  var hotKeysAndHelpString = 'Hot Keys and Help'; // accessibility content is not translatable yet
+KITE/Shape' );%0A%0A  // constants%0A  var CLOSE_BUTTON_WIDTH = 7;%0A  var CLOSE_BUTTON_MARGIN = 10;
 %0A%0A  
@@ -886,225 +886,1290 @@
 itle
-: new Text( hotKeysAndHelpString, %7B font: new PhetFont( %7B weight: 'bold', size: 20 %7D )
+Align: 'center',%0A      modal: true,%0A      hasCloseButton: false,%0A      fill: 'rgb( 214, 237, 30 )',%0A      xMargin: 0,%0A      yMargin: 0%0A    %7D, options );%0A%0A    // shape and path for a custom close button%0A    var closeButtonShape = new Shape();%0A    closeButtonShape.moveTo( -CLOSE_BUTTON_WIDTH, - CLOSE_BUTTON_WIDTH ).lineTo( CLOSE_BUTTON_WIDTH, CLOSE_BUTTON_WIDTH );%0A    closeButtonShape.moveTo( CLOSE_BUTTON_WIDTH, -CLOSE_BUTTON_WIDTH ).lineTo( -CLOSE_BUTTON_WIDTH, CLOSE_BUTTON_WIDTH );%0A    var closeButtonPath = new Path( closeButtonShape, %7B%0A      stroke: 'black',%0A      lineCap: 'round',%0A      lineWidth: 2,%0A      cursor: 'pointer'%0A   
  %7D )
-,
+;%0A
 %0A    
-  titleAlign: 'center',%0A      modal: true,%0A      hasCloseButton: false,%0A      fill: 'rgb( 214, 237, 249 )'%0A    %7D, options
+// add a listener to hide the dialog%0A    var self = this;%0A    closeButtonPath.addInputListener( new ButtonListener( %7B%0A      down: function() %7B%0A        self.hide();%0A      %7D%0A    %7D ) );%0A    closeButtonPath.mouseArea = Shape.rect( closeButtonPath.left - closeButtonPath.width * 2, closeButtonPath.top - CLOSE_BUTTON_MARGIN / 2, closeButtonPath.width * 4, closeButtonPath.height + CLOSE_BUTTON_MARGIN );%0A    closeButtonPath.touchArea = closeButtonPath.mouseArea;%0A%0A    closeButtonPath.right = helpContent.right - CLOSE_BUTTON_MARGIN;%0A    closeButtonPath.top = helpContent.top + CLOSE_BUTTON_MARGIN;%0A    helpContent.addChild( closeButtonPath
  );%0A

add close button, see #374