function createSliders(guiContainer) {
        var speedContainer               = createDiv(
                guiContainer,
                'webgl_solarsystem_gui__fieldset_container webgl_solarsystem_gui__fieldset_container--cols_2'
            ),
            shininessContainer           = createDiv(
                guiContainer,
                'webgl_solarsystem_gui__fieldset_container webgl_solarsystem_gui__fieldset_container--cols_2',
                function () {
                    var separator = document.createElement('HR');
                    separator.setAttribute('style', 'clear: both;');
                    guiContainer.appendChild(separator);
                }
            ),
            lightingContainerAmbient     = createDiv(
                guiContainer,
                'webgl_solarsystem_gui__fieldset_container webgl_solarsystem_gui__fieldset_container--cols_3'
            ),
            lightingContainerSunSpecular = createDiv(
                guiContainer,
                'webgl_solarsystem_gui__fieldset_container webgl_solarsystem_gui__fieldset_container--cols_3'
            ),
            lightingContainerSunDiffuse  = createDiv(
                guiContainer,
                'webgl_solarsystem_gui__fieldset_container webgl_solarsystem_gui__fieldset_container--cols_3'
            ),
            speedInfo;

        var globals = {
            ambient:   0.4,
            specular:  0.7,
            diffuse:   0.7,
            shininess: 5
        };

        createSlider({
            label:      'Time',
            id:         'millisecondsPerDay',
            minLabel:   'Fast',
            maxLabel:   'Slow',
            min:        10,
            max:        5000,
            step:       10,
            defaultVal: 1000,
            container:  speedContainer,
            onChangeCallback: updateMillisecondsPerDay
        });

        speedInfo = document.createElement('DIV');
        speedInfo.id = 'millisecondsPerDayInfo';
        speedContainer.appendChild(speedInfo);
        updateMillisecondsPerDay();

        createSlider({
            label:      'Planet shininess',
            id:         'planetShininess',
            min:        0,
            max:        255,
            step:       1,
            defaultVal: globals.shininess,
            container:  shininessContainer
        });

        createSlider({
            label:      'Ambient Light - Global',
            id:         'ambientGlobal',
            min:        0,
            max:        1,
            defaultVal: globals.ambient,
            step:       0.1,
            container:  lightingContainerAmbient,
            onChangeCallback: function () {
                updateValueOfSliders('ambientGlobal', ['ambientR', 'ambientG', 'ambientB']);
            }
        });

        createSlider({
            label:      'Ambient Light - Red',
            id:         'ambientR',
            min:        0,
            max:        1,
            defaultVal: globals.ambient,
            step:       0.1,
            container:  lightingContainerAmbient
        });

        createSlider({
            label:      'Ambient Light - Green',
            id:         'ambientG',
            min:        0,
            max:        1,
            defaultVal: globals.ambient,
            step:       0.1,
            container:  lightingContainerAmbient
        });

        createSlider({
            label:      'Ambient Light - Blue',
            id:         'ambientB',
            min:        0,
            max:        1,
            defaultVal: globals.ambient,
            step:       0.1,
            container:  lightingContainerAmbient
        });

        createSlider({
            label:      'Specular term - Global',
            id:         'pointGlobalSpecular',
            min:        0,
            max:        1,
            defaultVal: globals.specular,
            step:       0.1,
            container:  lightingContainerSunSpecular,
            onChangeCallback: function () {
                updateValueOfSliders('pointGlobalSpecular', ['pointRSpecular', 'pointGSpecular', 'pointBSpecular']);
            }
        });

        createSlider({
            label:      'Specular term - Red',
            id:         'pointRSpecular',
            min:        0,
            max:        1,
            defaultVal: globals.specular,
            step:       0.1,
            container:  lightingContainerSunSpecular
        });

        createSlider({
            label:      'Specular term - Green',
            id:         'pointGSpecular',
            min:        0,
            max:        1,
            defaultVal: globals.specular,
            step:       0.1,
            container:  lightingContainerSunSpecular
        });

        createSlider({
            label:      'Specular term - Blue',
            id:         'pointBSpecular',
            min:        0,
            max:        1,
            defaultVal: globals.specular,
            step:       0.1,
            container:  lightingContainerSunSpecular
        });

        createSlider({
            label:      'Diffuse term - Global',
            id:         'pointGlobalDiffuse',
            min:        0,
            max:        1,
            defaultVal: globals.diffuse,
            step:       0.1,
            container:  lightingContainerSunDiffuse,
            onChangeCallback: function () {
                updateValueOfSliders('pointGlobalDiffuse', ['pointRDiffuse', 'pointGDiffuse', 'pointBDiffuse']);
            }
        });

        createSlider({
            label:      'Diffuse term - Red',
            id:         'pointRDiffuse',
            min:        0,
            max:        1,
            defaultVal: globals.diffuse,
            step:       0.1,
            container:  lightingContainerSunDiffuse
        });

        createSlider({
            label:      'Diffuse term - Green',
            id:         'pointGDiffuse',
            min:        0,
            max:        1,
            defaultVal: globals.diffuse,
            step:       0.1,
            container:  lightingContainerSunDiffuse
        });

        createSlider({
            label:      'Diffuse term - Blue',
            id:         'pointBDiffuse',
            min:        0,
            max:        1,
            defaultVal: globals.diffuse,
            step:       0.1,
            container:  lightingContainerSunDiffuse
        });
    }
/**
     * Creates the sliders in the GUI.
     * @method createSliders
     * @param  {DOMElement} guiContainer Document element to insert the sliders in.
     */
Creates the sliders in the GUI.
@method createSliders
@param  {DOMElement} guiContainer Document element to insert the sliders in.
Creates the sliders in the GUI . @method createSliders @param { DOMElement } guiContainer Document element to insert the sliders in .
function createSliders(guiContainer) {
        var speedContainer               = createDiv(
                guiContainer,
                'webgl_solarsystem_gui__fieldset_container webgl_solarsystem_gui__fieldset_container--cols_2'
            ),
            shininessContainer           = createDiv(
                guiContainer,
                'webgl_solarsystem_gui__fieldset_container webgl_solarsystem_gui__fieldset_container--cols_2',
                function () {
                    var separator = document.createElement('HR');
                    separator.setAttribute('style', 'clear: both;');
                    guiContainer.appendChild(separator);
                }
            ),
            lightingContainerAmbient     = createDiv(
                guiContainer,
                'webgl_solarsystem_gui__fieldset_container webgl_solarsystem_gui__fieldset_container--cols_3'
            ),
            lightingContainerSunSpecular = createDiv(
                guiContainer,
                'webgl_solarsystem_gui__fieldset_container webgl_solarsystem_gui__fieldset_container--cols_3'
            ),
            lightingContainerSunDiffuse  = createDiv(
                guiContainer,
                'webgl_solarsystem_gui__fieldset_container webgl_solarsystem_gui__fieldset_container--cols_3'
            ),
            speedInfo;
        var globals = {
            ambient:   0.4,
            specular:  0.7,
            diffuse:   0.7,
            shininess: 5
        };
        createSlider({
            label:      'Time',
            id:         'millisecondsPerDay',
            minLabel:   'Fast',
            maxLabel:   'Slow',
            min:        10,
            max:        5000,
            step:       10,
            defaultVal: 1000,
            container:  speedContainer,
            onChangeCallback: updateMillisecondsPerDay
        });
        speedInfo = document.createElement('DIV');
        speedInfo.id = 'millisecondsPerDayInfo';
        speedContainer.appendChild(speedInfo);
        updateMillisecondsPerDay();
        createSlider({
            label:      'Planet shininess',
            id:         'planetShininess',
            min:        0,
            max:        255,
            step:       1,
            defaultVal: globals.shininess,
            container:  shininessContainer
        });
        createSlider({
            label:      'Ambient Light - Global',
            id:         'ambientGlobal',
            min:        0,
            max:        1,
            defaultVal: globals.ambient,
            step:       0.1,
            container:  lightingContainerAmbient,
            onChangeCallback: function () {
                updateValueOfSliders('ambientGlobal', ['ambientR', 'ambientG', 'ambientB']);
            }
        });
        createSlider({
            label:      'Ambient Light - Red',
            id:         'ambientR',
            min:        0,
            max:        1,
            defaultVal: globals.ambient,
            step:       0.1,
            container:  lightingContainerAmbient
        });
        createSlider({
            label:      'Ambient Light - Green',
            id:         'ambientG',
            min:        0,
            max:        1,
            defaultVal: globals.ambient,
            step:       0.1,
            container:  lightingContainerAmbient
        });
        createSlider({
            label:      'Ambient Light - Blue',
            id:         'ambientB',
            min:        0,
            max:        1,
            defaultVal: globals.ambient,
            step:       0.1,
            container:  lightingContainerAmbient
        });
        createSlider({
            label:      'Specular term - Global',
            id:         'pointGlobalSpecular',
            min:        0,
            max:        1,
            defaultVal: globals.specular,
            step:       0.1,
            container:  lightingContainerSunSpecular,
            onChangeCallback: function () {
                updateValueOfSliders('pointGlobalSpecular', ['pointRSpecular', 'pointGSpecular', 'pointBSpecular']);
            }
        });
        createSlider({
            label:      'Specular term - Red',
            id:         'pointRSpecular',
            min:        0,
            max:        1,
            defaultVal: globals.specular,
            step:       0.1,
            container:  lightingContainerSunSpecular
        });
        createSlider({
            label:      'Specular term - Green',
            id:         'pointGSpecular',
            min:        0,
            max:        1,
            defaultVal: globals.specular,
            step:       0.1,
            container:  lightingContainerSunSpecular
        });
        createSlider({
            label:      'Specular term - Blue',
            id:         'pointBSpecular',
            min:        0,
            max:        1,
            defaultVal: globals.specular,
            step:       0.1,
            container:  lightingContainerSunSpecular
        });
        createSlider({
            label:      'Diffuse term - Global',
            id:         'pointGlobalDiffuse',
            min:        0,
            max:        1,
            defaultVal: globals.diffuse,
            step:       0.1,
            container:  lightingContainerSunDiffuse,
            onChangeCallback: function () {
                updateValueOfSliders('pointGlobalDiffuse', ['pointRDiffuse', 'pointGDiffuse', 'pointBDiffuse']);
            }
        });
        createSlider({
            label:      'Diffuse term - Red',
            id:         'pointRDiffuse',
            min:        0,
            max:        1,
            defaultVal: globals.diffuse,
            step:       0.1,
            container:  lightingContainerSunDiffuse
        });
        createSlider({
            label:      'Diffuse term - Green',
            id:         'pointGDiffuse',
            min:        0,
            max:        1,
            defaultVal: globals.diffuse,
            step:       0.1,
            container:  lightingContainerSunDiffuse
        });
        createSlider({
            label:      'Diffuse term - Blue',
            id:         'pointBDiffuse',
            min:        0,
            max:        1,
            defaultVal: globals.diffuse,
            step:       0.1,
            container:  lightingContainerSunDiffuse
        });
    }
function createSliders ( guiContainer ) { var speedContainer = createDiv ( guiContainer , 'webgl_solarsystem_gui__fieldset_container webgl_solarsystem_gui__fieldset_container--cols_2' ) , shininessContainer = createDiv ( guiContainer , 'webgl_solarsystem_gui__fieldset_container webgl_solarsystem_gui__fieldset_container--cols_2' , function ( ) { var separator = document . createElement ( 'HR' ) ; separator . setAttribute ( 'style' , 'clear: both;' ) ; guiContainer . appendChild ( separator ) ; } ) , lightingContainerAmbient = createDiv ( guiContainer , 'webgl_solarsystem_gui__fieldset_container webgl_solarsystem_gui__fieldset_container--cols_3' ) , lightingContainerSunSpecular = createDiv ( guiContainer , 'webgl_solarsystem_gui__fieldset_container webgl_solarsystem_gui__fieldset_container--cols_3' ) , lightingContainerSunDiffuse = createDiv ( guiContainer , 'webgl_solarsystem_gui__fieldset_container webgl_solarsystem_gui__fieldset_container--cols_3' ) , speedInfo ; var globals = { ambient : 0.4 , specular : 0.7 , diffuse : 0.7 , shininess : 5 } ; createSlider ( { label : 'Time' , id : 'millisecondsPerDay' , minLabel : 'Fast' , maxLabel : 'Slow' , min : 10 , max : 5000 , step : 10 , defaultVal : 1000 , container : speedContainer , onChangeCallback : updateMillisecondsPerDay } ) ; speedInfo = document . createElement ( 'DIV' ) ; speedInfo . id = 'millisecondsPerDayInfo' ; speedContainer . appendChild ( speedInfo ) ; updateMillisecondsPerDay ( ) ; createSlider ( { label : 'Planet shininess' , id : 'planetShininess' , min : 0 , max : 255 , step : 1 , defaultVal : globals . shininess , container : shininessContainer } ) ; createSlider ( { label : 'Ambient Light - Global' , id : 'ambientGlobal' , min : 0 , max : 1 , defaultVal : globals . ambient , step : 0.1 , container : lightingContainerAmbient , onChangeCallback : function ( ) { updateValueOfSliders ( 'ambientGlobal' , [ 'ambientR' , 'ambientG' , 'ambientB' ] ) ; } } ) ; createSlider ( { label : 'Ambient Light - Red' , id : 'ambientR' , min : 0 , max : 1 , defaultVal : globals . ambient , step : 0.1 , container : lightingContainerAmbient } ) ; createSlider ( { label : 'Ambient Light - Green' , id : 'ambientG' , min : 0 , max : 1 , defaultVal : globals . ambient , step : 0.1 , container : lightingContainerAmbient } ) ; createSlider ( { label : 'Ambient Light - Blue' , id : 'ambientB' , min : 0 , max : 1 , defaultVal : globals . ambient , step : 0.1 , container : lightingContainerAmbient } ) ; createSlider ( { label : 'Specular term - Global' , id : 'pointGlobalSpecular' , min : 0 , max : 1 , defaultVal : globals . specular , step : 0.1 , container : lightingContainerSunSpecular , onChangeCallback : function ( ) { updateValueOfSliders ( 'pointGlobalSpecular' , [ 'pointRSpecular' , 'pointGSpecular' , 'pointBSpecular' ] ) ; } } ) ; createSlider ( { label : 'Specular term - Red' , id : 'pointRSpecular' , min : 0 , max : 1 , defaultVal : globals . specular , step : 0.1 , container : lightingContainerSunSpecular } ) ; createSlider ( { label : 'Specular term - Green' , id : 'pointGSpecular' , min : 0 , max : 1 , defaultVal : globals . specular , step : 0.1 , container : lightingContainerSunSpecular } ) ; createSlider ( { label : 'Specular term - Blue' , id : 'pointBSpecular' , min : 0 , max : 1 , defaultVal : globals . specular , step : 0.1 , container : lightingContainerSunSpecular } ) ; createSlider ( { label : 'Diffuse term - Global' , id : 'pointGlobalDiffuse' , min : 0 , max : 1 , defaultVal : globals . diffuse , step : 0.1 , container : lightingContainerSunDiffuse , onChangeCallback : function ( ) { updateValueOfSliders ( 'pointGlobalDiffuse' , [ 'pointRDiffuse' , 'pointGDiffuse' , 'pointBDiffuse' ] ) ; } } ) ; createSlider ( { label : 'Diffuse term - Red' , id : 'pointRDiffuse' , min : 0 , max : 1 , defaultVal : globals . diffuse , step : 0.1 , container : lightingContainerSunDiffuse } ) ; createSlider ( { label : 'Diffuse term - Green' , id : 'pointGDiffuse' , min : 0 , max : 1 , defaultVal : globals . diffuse , step : 0.1 , container : lightingContainerSunDiffuse } ) ; createSlider ( { label : 'Diffuse term - Blue' , id : 'pointBDiffuse' , min : 0 , max : 1 , defaultVal : globals . diffuse , step : 0.1 , container : lightingContainerSunDiffuse } ) ; }
Creates the sliders in the GUI.
Creates the sliders in the GUI .