// Copyright 2002-2014, University of Colorado Boulder

/**
 * Scene graph for the 'Fraction Lab' screen.
 *
 * @author Andrey Zelenkov (MLearner)
 */

define( function( require ) {
  'use strict';

  // imports
  var inherit = require( 'PHET_CORE/inherit' ),
    ScreenView = require( 'JOIST/ScreenView' ),
    VBox = require( 'SCENERY/nodes/VBox' ),
    ShapeChoiceNode = require( 'FRACTION_LAB_GAME/view/ShapeChoiceNode' ),
    ResetAllButton = require( 'SCENERY_PHET/ResetAllButton' ),
    ShapeContainerNode = require( 'BUILD_A_FRACTION/common/view/ShapeContainerNode' ),
    PanelWithSourcesTopNode = require( 'FRACTION_LAB_GAME/view/PanelWithSourcesTopNode' ),
    PanelWithSourcesBottomNode = require( 'FRACTION_LAB_GAME/view/PanelWithSourcesBottomNode' );

  function FractionLabView( model ) {
    var topPanel,
      bottomPanel;

    // create radio button for shape type
    var shapeChoiceNode = new ShapeChoiceNode( model );

    ScreenView.call( this, { renderer: 'svg' } );

    // add top panel with parts of shapes
    this.addChild( topPanel = new PanelWithSourcesTopNode( model, {y: 45} ) );

    // add radio button for shape type and reset button
    this.addChild( new VBox( {spacing: 5, x: model.width - shapeChoiceNode.getWidth(), y: model.height - 400, children: [
      shapeChoiceNode,
      new ResetAllButton( {listener: function() {model.reset();}} )
    ]} ) );

    // add shape container
    this.addChild( new ShapeContainerNode( model.circleContainer, {scale: 2, x: model.width / 2 - 40, y: model.height / 2 - 40} ) );

    // add bottom panel with cards
    this.addChild( bottomPanel = new PanelWithSourcesBottomNode( model, {y: model.height - 60} ) );

    // set bounds of working area for placing containers
    model.workarea.setMinMax( 0, topPanel.bounds.maxY, model.width, bottomPanel.bounds.maxY - topPanel.bounds.minY );

    bottomPanel.placeFirstFractionToCenter();
  }

  return inherit( ScreenView, FractionLabView );
} );
