// Copyright 2018, University of Colorado Boulder

/**
 * Status bar that runs along the top of a game
 *
 * @author Andrea Lin
 */
define( function( require ) {
  'use strict';

  // modules
  var BackButton = require( 'SCENERY_PHET/buttons/BackButton' );
  var VBox = require( 'SCENERY/nodes/VBox' );
  var HStrut = require( 'SCENERY/nodes/HStrut' );
  var inherit = require( 'PHET_CORE/inherit' );
  var Node = require( 'SCENERY/nodes/Node' );
  var Rectangle = require( 'SCENERY/nodes/Rectangle' );
  var vegas = require( 'VEGAS/vegas' );

  /**
   * @param {Property} visibleBoundsProperty - for layout
   * @param {Node} messageNode - to the right of the back button, typically Text
   * @param {Node} scoreDisplay - intended to be one of the ScoreDisplay* nodes but can be any custom Node provided
   * by the client
   * @param {Object} [options]
   * @constructor
   */
  function StatusBar( visibleBoundsProperty, messageNode, scoreDisplay, options ) {

    options = _.extend( {
      backButtonListener: null,
      xMargin: 20,
      yMargin: 10,
      backgroundFill: 'rgb( 49, 117, 202 )',
      spacing: 8,
      expandToFitBounds: true // expands to fit window width, otherwise stay inside initial layoutBounds
    }, options );

    assert && assert( !options.children, 'ScoreDisplayNumber sets children' );

    var backButton = new BackButton( { listener: options.backButtonListener } );

    var backgroundHeight = _.max( [ backButton.height, messageNode.height, scoreDisplay.height ] ) + 2 * options.yMargin;
    var backgroundNode = new Rectangle(
      visibleBoundsProperty.get().minX,
      visibleBoundsProperty.minY,
      visibleBoundsProperty.get().maxX - visibleBoundsProperty.get().minX,
      backgroundHeight, {
        fill: options.backgroundFill
      } );

    // layout
    backButton.left = backgroundNode.left + options.xMargin;
    backButton.centerY = backgroundNode.centerY;
    messageNode.left = backButton.right + options.spacing;
    messageNode.centerY = backgroundNode.centerY;

    // align scoreDisplay to the right side of the status bar
    var scoreDisplayContainer = new VBox( {
      right: backgroundNode.right - options.xMargin,
      centerY: backgroundNode.centerY,
      align: 'right',
      children: [ scoreDisplay, new HStrut( 200 ) ]
    } );

    var visibleBoundsListener = function( bounds ) {
      backgroundNode.setRectX( bounds.minX );
      backgroundNode.setRectWidth( bounds.maxX - bounds.minX );
      if ( options.expandToFitBounds ) {
        backButton.left = backgroundNode.left + options.xMargin;
        messageNode.left = backButton.right + options.spacing;
        scoreDisplayContainer.right = backgroundNode.right - options.xMargin;
      }
    };

    visibleBoundsProperty.link( visibleBoundsListener );

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

    options.children = [ backgroundNode, backButton, messageNode, scoreDisplayContainer ];

    Node.call( this, options );
  }

  vegas.register( 'StatusBar', StatusBar );

  return inherit( Node, StatusBar, {

    // @public
    dispose: function() {
      this.disposeStatusBar();
      Node.prototype.dispose.call( this );
    }
  } );
} );
@@ -121,16 +121,58 @@
 rea Lin%0A
+ * @author Chris Malley (PixelZoom, Inc.)%0A
  */%0Adefi
@@ -296,104 +296,8 @@
  );%0A
-  var VBox = require( 'SCENERY/nodes/VBox' );%0A  var HStrut = require( 'SCENERY/nodes/HStrut' );%0A
   va
@@ -1190,88 +1190,8 @@
 );%0A%0A
-    assert && assert( !options.children, 'ScoreDisplayNumber sets children' );%0A%0A
     
@@ -1662,128 +1662,300 @@
     
-// layout%0A    backButton.left = backgroundNode.left + options.xMargin
+assert && assert( !options.children, 'StatusBar sets children' );%0A    options.children = %5B backgroundNode, backButton, messageNode, scoreDisplay %5D;%0A%0A    Node.call( this, options )
 ;%0A
+%0A
     
-backButton.centerY = backgroundNode.centerY;%0A
+// Update the messageNode layout when its bounds change.%0A    var messageNodeUpdateLayout = function() %7B%0A  
     
@@ -2009,24 +2009,26 @@
 pacing;%0A    
+  
 messageNode.
@@ -2065,127 +2065,209 @@
 rY;%0A
-%0A    // align scoreDisplay to the right side of the status bar%0A    var scoreDisplayContainer = new VBox( %7B%0A      
+    %7D;%0A    messageNode.on( 'bounds', messageNodeUpdateLayout );%0A%0A    // Update the scoreDisplay layout when its bounds change.%0A    var scoreDisplayUpdateLayout = function() %7B%0A      scoreDisplay.
 right
-:
+ =
  bac
@@ -2305,24 +2305,38 @@
 rgin
-,
+;
 %0A      
+scoreDisplay.
 centerY
-:
+ =
  bac
@@ -2358,93 +2358,178 @@
 terY
-,
+;
 %0A    
-  align: 'right',%0A      children: %5B scoreDisplay, new HStrut( 200 ) %5D%0A    %7D );%0A
+%7D;%0A    scoreDisplay.on( 'bounds', scoreDisplayUpdateLayout );%0A%0A    // Adjust the bar width and (optionally) update the layout when the browser window width changes.
 %0A   
@@ -2806,139 +2806,122 @@
     
-messageNode.left = backButton.right + options.spacing;%0A        scoreDisplayContainer.right = backgroundNode.right - options.xMargin
+backButton.centerY = backgroundNode.centerY;%0A        messageNodeUpdateLayout();%0A        scoreDisplayUpdateLayout()
 ;%0A  
@@ -2929,25 +2929,24 @@
    %7D%0A    %7D;%0A
-%0A
     visibleB
@@ -3086,193 +3086,448 @@
     
-visibleBoundsProperty.unlink( visibleBoundsListener );%0A    %7D;%0A%0A    options.children = %5B backgroundNode, backButton, messageNode, scoreDisplayContainer %5D;%0A%0A    Node.call( this, options )
+if ( messageNode.hasListener( 'bounds', messageNodeUpdateLayout ) ) %7B%0A        messageNode.off( 'bounds', messageNodeUpdateLayout );%0A      %7D%0A      if ( scoreDisplay.hasListener( 'bounds', scoreDisplayUpdateLayout ) ) %7B%0A        scoreDisplay.off( 'bounds', scoreDisplayUpdateLayout );%0A      %7D%0A      if ( visibleBoundsProperty.hasListener( visibleBoundsListener ) ) %7B%0A        visibleBoundsProperty.unlink( visibleBoundsListener );%0A      %7D%0A    %7D
 ;%0A  

modify how layout is updated #59