// 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 inherit = require( 'PHET_CORE/inherit' );
  var Dialog = require( 'JOIST/Dialog' );
  var joist = require( 'JOIST/joist' );
  var ButtonListener = require( 'SCENERY/input/ButtonListener' );
  var Path = require( 'SCENERY/nodes/Path' );
  var Shape = require( 'KITE/Shape' );

  // constants
  var CLOSE_BUTTON_WIDTH = 7;
  var CLOSE_BUTTON_MARGIN = 10;

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

    options = _.extend( {
      titleAlign: 'center',
      modal: true,
      hasCloseButton: false,
      fill: 'rgb( 214, 237, 30 )',
      xMargin: 0,
      yMargin: 0
    }, options );

    // shape and path for a custom close button
    var closeButtonShape = new Shape();
    closeButtonShape.moveTo( -CLOSE_BUTTON_WIDTH, - CLOSE_BUTTON_WIDTH ).lineTo( CLOSE_BUTTON_WIDTH, CLOSE_BUTTON_WIDTH );
    closeButtonShape.moveTo( CLOSE_BUTTON_WIDTH, -CLOSE_BUTTON_WIDTH ).lineTo( -CLOSE_BUTTON_WIDTH, CLOSE_BUTTON_WIDTH );
    var closeButtonPath = new Path( closeButtonShape, {
      stroke: 'black',
      lineCap: 'round',
      lineWidth: 2,
      cursor: 'pointer'
    } );

    // add a listener to hide the dialog
    var self = this;
    closeButtonPath.addInputListener( new ButtonListener( {
      down: function() {
        self.hide();
      }
    } ) );
    closeButtonPath.mouseArea = Shape.rect( closeButtonPath.left - closeButtonPath.width * 2, closeButtonPath.top - CLOSE_BUTTON_MARGIN / 2, closeButtonPath.width * 4, closeButtonPath.height + CLOSE_BUTTON_MARGIN );
    closeButtonPath.touchArea = closeButtonPath.mouseArea;

    closeButtonPath.right = helpContent.right - CLOSE_BUTTON_MARGIN;
    closeButtonPath.top = helpContent.top + CLOSE_BUTTON_MARGIN;
    helpContent.addChild( closeButtonPath );

    Dialog.call( this, helpContent, options );

  }

  joist.register( 'KeyboardHelpDialog', KeyboardHelpDialog );

  return inherit( Dialog, KeyboardHelpDialog );
} );
@@ -1989,16 +1989,105 @@
 eArea;%0A%0A
+    Dialog.call( this, helpContent, options );%0A%0A    // position and add the close button%0A
     clos
@@ -2216,27 +2216,20 @@
 IN;%0A    
-helpContent
+this
 .addChil
@@ -2255,56 +2255,8 @@
 );%0A%0A
-    Dialog.call( this, helpContent, options );%0A%0A
   %7D%0A

fix layout bug for keyboard help dialog, see #374