// Copyright 2018, University of Colorado Boulder

/**
 * Base type for the status bar that appears at the top of games.
 * The base type is primarily responsible for resizing and 'floating' the bar.
 *
 * @author Chris Malley (PixelZoom, Inc.)
 */
define( function( require ) {
  'use strict';

  // modules
  var inherit = require( 'PHET_CORE/inherit' );
  var Node = require( 'SCENERY/nodes/Node' );
  var PhetFont = require( 'SCENERY_PHET/PhetFont' );
  var Rectangle = require( 'SCENERY/nodes/Rectangle' );
  var vegas = require( 'VEGAS/vegas' );

  // constants
  var DEFAULT_FONT = new PhetFont( 20 );

  /**
   * @param {Bounds2} layoutBounds
   * @param {Property.<Bounds2>} visibleBoundsProperty - visible bounds of the parent ScreenView
   * @param {Object} [options]
   * @constructor
   */
  function StatusBar( layoutBounds, visibleBoundsProperty, options ) {

    var self = this;

    options = _.extend( {
      barHeight: 50,
      floatToTop: false, // true: float bar to top of visible bounds; false: bar at top of layoutBounds
      barFill: 'lightGray',
      barStroke: null
    }, options );

    // @protected (read-only) for layout in subtypes, size will be set by visibleBoundsListener
    this.barNode = new Rectangle( {
      fill: options.barFill,
      stroke: options.barStroke
    } );

    // Support decoration, with the bar behind everything else
    options.children = [ this.barNode ].concat( options.children || [] );

    Node.call( this, options );

    // Adjust the bar size and position
    var visibleBoundsListener = function( visibleBounds ) {
      var y = ( options.floatToTop ) ? visibleBounds.top : layoutBounds.top;
      self.barNode.setRect( visibleBounds.minX, y, visibleBounds.width, options.barHeight );
    };
    visibleBoundsProperty.link( visibleBoundsListener );

    // @private
    this.disposeStatusBar = function() {
      if ( visibleBoundsProperty.hasListener( visibleBoundsListener ) ) {
        visibleBoundsProperty.unlink( visibleBoundsListener );
      }
    };
  }

  vegas.register( 'StatusBar', StatusBar );

  return inherit( Node, StatusBar, {

    /**
     * @public
     * @override
     */
    dispose: function() {
      this.disposeStatusBar();
      Node.prototype.dispose.call( this );
    }
  }, {

    // Default font for things text that appears in the status bar subtypes
    DEFAULT_FONT: DEFAULT_FONT
  } );
} );
 
@@ -947,228 +947,636 @@
     
-floatToTop: false, // true: float bar to top of visible bounds; false: bar at top of layoutBounds%0A      barFill: 'lightGray',%0A      barStroke: null%0A    %7D, options );%0A%0A    // @protected (read-only) for layout in subtypes,
+xMargin: 10,%0A      yMargin: 8,%0A      barFill: 'lightGray',%0A      barStroke: null,%0A%0A      // true: float bar to top of visible bounds; false: bar at top of layoutBounds%0A      floatToTop: false,%0A%0A      // true: keeps things on the status bar aligned with left and right edges of window bounds%0A      // false: align things on status bar with left and right edges of static layoutBounds%0A      dynamicAlignment: true%0A%0A    %7D, options );%0A%0A    // @private%0A    this.layoutBounds = layoutBounds;%0A    this.xMargin = options.xMargin;%0A    this.yMargin = options.yMargin;%0A    this.dynamicAlignment = options.dynamicAlignment;%0A%0A    // @private
  siz
@@ -1896,48 +1896,8 @@
 );%0A%0A
-    // Adjust the bar size and position%0A
     
@@ -1947,24 +1947,49 @@
 leBounds ) %7B
+%0A%0A      // resize the bar
 %0A      var y
@@ -2146,16 +2146,88 @@
 eight );
+%0A%0A      // update layout of things on the bar%0A      self.updateLayout();
 %0A    %7D;%0A
@@ -2725,24 +2725,915 @@
 ll( this );%0A
+    %7D,%0A%0A    /**%0A     * Updates the layout of things on the bar.%0A     * @protected%0A     */%0A    updateLayout: function() %7B%0A      var leftEdge = ( ( this.dynamicAlignment ) ? this.barNode.left : this.layoutBounds.minX ) + this.xMargin;%0A      var rightEdge = ( ( this.dynamicAlignment ) ? this.barNode.right : this.layoutBounds.maxX ) - this.xMargin;%0A      this.updateLayoutProtected( leftEdge, rightEdge, this.barNode.centerY );%0A    %7D,%0A%0A    /**%0A     * Layout that is specific to subtypes.%0A     * @param %7Bnumber%7D leftEdge - the bar's left edge, compensated for xMargin%0A     * @param %7Bnumber%7D rightEdge - the bar's right edge, compensated for xMargin%0A     * @param %7Bnumber%7D centerY - the bar's vertical center%0A     * @protected%0A     * @abstract%0A     */%0A    updateLayoutProtected: function( leftEdge, rightEdge, centerY ) %7B%0A      throw new Error( 'updateLayout must be implemented by subtypes' );%0A
     %7D%0A  %7D, %7B

move common layout code to base type #70