// Copyright 2018, University of Colorado Boulder

/**
 * Controls for various features related to the graph on the 'Integers' scene of the 'Standard Form' screen.
 *
 * @author Andrea Lin
 */
define( function( require ) {
  'use strict';

  // modules
  const Checkbox = require( 'SUN/Checkbox' );
  const GQColors = require( 'GRAPHING_QUADRATICS/common/GQColors' );
  const GQConstants = require( 'GRAPHING_QUADRATICS/common/GQConstants' );
  const graphingQuadratics = require( 'GRAPHING_QUADRATICS/graphingQuadratics' );
  const Panel = require( 'SUN/Panel' );
  const PhetFont = require( 'SCENERY_PHET/PhetFont' );
  const Text = require( 'SCENERY/nodes/Text' );
  const VBox = require( 'SCENERY/nodes/VBox' );
  const VStrut = require( 'SCENERY/nodes/VStrut' );

  // strings
  const axisOfSymmetryString = require( 'string!GRAPHING_QUADRATICS/axisOfSymmetry' );
  const hideCurvesString = require( 'string!GRAPHING_QUADRATICS/hideCurves' );
  const rootsString = require( 'string!GRAPHING_QUADRATICS/roots' );
  const vertexString = require( 'string!GRAPHING_QUADRATICS/vertex' );

  // constants
  const CHECKBOX_LABEL_OPTIONS = { font: new PhetFont( GQConstants.CHECKBOX_LABEL_FONT_SIZE ) };

  class IntegersGraphControls extends Panel {

    /**
     * @param {BooleanProperty} vertexVisibleProperty
     * @param {BooleanProperty} axisOfSymmetryVisibleProperty
     * @param {BooleanProperty} rootsVisibleProperty
     * @param {BooleanProperty} hideCurvesProperty
     * @param {Object} [options]
     */
    constructor( vertexVisibleProperty, axisOfSymmetryVisibleProperty,
                 rootsVisibleProperty, hideCurvesProperty, options ) {

      options = _.extend( {

        // superclass options
        fill: GQColors.CONTROL_PANEL_BACKGROUND,
        xMargin: 20,
        yMargin: 15
      }, options );

      // Vertex
      const vertexLabel = new Text( vertexString, CHECKBOX_LABEL_OPTIONS );
      const vertexCheckbox = new Checkbox( vertexLabel, vertexVisibleProperty );

      // Axis of Symmetry
      const axisOfSymmetryLabel = new Text( axisOfSymmetryString, CHECKBOX_LABEL_OPTIONS );
      const axisOfSymmetryCheckbox = new Checkbox( axisOfSymmetryLabel, axisOfSymmetryVisibleProperty );

      // Roots
      const rootsLabel = new Text( rootsString, CHECKBOX_LABEL_OPTIONS );
      const rootsCheckbox = new Checkbox( rootsLabel, rootsVisibleProperty );

      // Hide curves
      const hideCurvesLabel = new Text( hideCurvesString, CHECKBOX_LABEL_OPTIONS );
      const hideCurvesCheckbox = new Checkbox( hideCurvesLabel, hideCurvesProperty );

      // vertical layout
      const contentNode = new VBox( {
        align: 'left',
        spacing: 20,
        children: [
          vertexCheckbox,
          axisOfSymmetryCheckbox,
          rootsCheckbox,
          new VStrut( 1 ),
          hideCurvesCheckbox
        ]
      } );

      super( contentNode, options );
    }
  }

  return graphingQuadratics.register( 'IntegersGraphControls', IntegersGraphControls );
} );
@@ -514,24 +514,72 @@
 dratics' );%0A
+  const HBox = require( 'SCENERY/nodes/HBox' );%0A
   const Pane
@@ -657,24 +657,114 @@
 hetFont' );%0A
+  const PlottedPointNode = require( 'GRAPHING_QUADRATICS/common/view/PlottedPointNode' );%0A
   const Text
@@ -1331,16 +1331,42 @@
 IZE ) %7D;
+%0A  const POINT_RADIUS = 6;
 %0A%0A  clas
@@ -2038,50 +2038,223 @@
 new 
-Text( vertexString, CHECKBOX_LABEL_OPTIONS
+HBox( %7B%0A        align: 'center',%0A        spacing: 10,%0A        children: %5B%0A          new Text( vertexString, CHECKBOX_LABEL_OPTIONS ),%0A          new PlottedPointNode( POINT_RADIUS, GQColors.VERTEX )%0A        %5D%0A      %7D
  );%0A
@@ -2607,49 +2607,414 @@
 new 
-Text( rootsString, CHECKBOX_LABEL_OPTIONS
+HBox( %7B%0A        align: 'center',%0A        spacing: 10,%0A        children: %5B%0A          new Text( rootsString, CHECKBOX_LABEL_OPTIONS ),%0A          new HBox( %7B%0A            align: 'center',%0A            spacing: 5,%0A            children: %5B%0A              new PlottedPointNode( POINT_RADIUS, GQColors.ROOTS ),%0A              new PlottedPointNode( POINT_RADIUS, GQColors.ROOTS )%0A            %5D%0A          %7D )%0A        %5D %7D
  );%0A

add point icons to checkboxes, #10