Source: UI/UIToggle.js

/* UIToggle.js
 * 
 */

"use strict";

/**
 * A Toggle to be used for UIs
 * @param {Array[]} position Base position for the UIToggle
 * @param {Array[]} size The size for the UIToggle
 * @param {String[]} optionTexts The text for the different options
 * @param {float} textSize The size of the Text
 * @class UIToggle
 * @returns {UIToggle}
 */
function UIToggle(position, size, optionTexts, textSize) {
    // for supporting vertical toggles
    this.mVertical = size[0]<size[1];
    
    // default BG color = black
    this.mBg = new UIRenderable([0,0,0,1], position, size);
    
    var amtOptions = optionTexts.length;
    var fgSize = [size[0]/amtOptions,size[1]];
    var nextPos = [(position[0]-(size[0]/2)+(fgSize[0]/2)),position[1]];
    
    if(this.mVertical)
    {
        fgSize = [size[0],size[1]/amtOptions];
        nextPos = [position[0], (position[1]+(size[1]/2)-(fgSize[1]/2))];
    }
    
    
    // to show which option is selected
    // default FG color = purple
    this.mFg = new UIRenderable([0.5,0,1,1], nextPos, fgSize);

    // 2d array for holding the options and the bbox relating to each optionn
    this.mText = [];
    
    // to allow for having text color change upon selection
    //default Text color = white
    this.mNormalTextColor = [1,1,1,1];
    this.mSelectedTextColor = this.mNormalTextColor;
    
    for(var i = 0; i < optionTexts.length; i++) {
        var newText = new UIText(optionTexts[i], 
                            nextPos, 
                            textSize, 
                            UIText.eHAlignment.eCenter, 
                            UIText.eVAlignment.eCenter,
                            this.mNormalTextColor);
        var newBBox = new BoundingBox(nextPos, fgSize[0], fgSize[1]);
        this.mText.push([newText, newBBox]);
        if(this.mVertical) {
            nextPos = [nextPos[0],nextPos[1]-fgSize[1]];
        }
        else {
            nextPos = [nextPos[0]+fgSize[0],nextPos[1]];
        }
    }                       
    
    // starts by having the first option selected
    this.mCurValue = 0;
    this.mClick = false;
    
    var startPos = this.mText[0][0].getUIXform().getXPos();
    if(this.mVertical) {
        startPos = this.mText[0][0].getUIXform().getYPos();
    }
    // set defualt interpolation
    this.mInterpolation = new Interpolate(startPos, 60, 0.25);
    
    UIElement.call(this, position, size);
};
gEngine.Core.inheritPrototype(UIToggle, UIElement);

/**
 * Draws the UIToggle to the given Camera
 * @param {Camera} aCamera The Camera to draw the Toggle to
 * @memberOf UIToggle
 */
UIToggle.prototype.draw = function(aCamera) {
    if(this.mVisible) {
        this.mBg.draw(aCamera);
        this.mFg.draw(aCamera);
        for(var i = 0; i < this.mText.length; i++) {
            this.mText[i][0].draw(aCamera);
        }   
    }
};

/**
 * Updates the UIToggle
 * @memberOf UIToggle
 */
UIToggle.prototype.update = function() {
    UIElement.prototype.update.call(this);
    
    // update the interpolation
    this.mInterpolation.updateInterpolation();
    
    // get the mouse position
    var mousePos = vec2.fromValues(gEngine.Input.getMousePosX(),
                                gEngine.Input.getMousePosY());
    
    // local variables for determining which option is chosen
    var mouseOption = 0;
    var mouseOver = false;
    
    // check if the mouse is over an option
    for(var i = 0; i < this.mText.length; i++)
    {
        if(this.mText[i][1].containsPoint(mousePos[0], mousePos[1])) {
            mouseOption = i;
            mouseOver = true;
        }
    }
    
    // check for if the mouse is clicked
    if(gEngine.Input.isButtonClicked(gEngine.Input.mouseButton.Left)){
        if(mouseOver){
            this.mClick = true;
        }
    }
    
    var fgXform = this.mFg.getUIXform();
    // upon release of mouse button, make selection
    if(gEngine.Input.isButtonReleased(gEngine.Input.mouseButton.Left)){
        if(this.mClick) {
            // reset click's status for next update
            this.mClick = false;
            
            if(mouseOver){
                // set the previous selection's text color to the normal text color
                this.mText[this.mCurValue][0].setColor(this.mNormalTextColor);
                
                this.mCurValue = mouseOption;

                // set interpolation
                var pos = this.mText[mouseOption][0].getUIXform().getXPos();
                if(this.mVertical) {
                    pos = this.mText[mouseOption][0].getUIXform().getYPos();
                }
                this.mInterpolation.setFinalValue(pos);
                
                this.mText[this.mCurValue][0].setColor(this.mSelectedTextColor);
            }
        }
    }
    
    // update the foreground element's position
    if(this.mVertical) {
        fgXform.setYPos(this.mInterpolation.getValue());
    }
    else {
        fgXform.setXPos(this.mInterpolation.getValue());
    }
};

/**
 * Function to return which option is currently selected
 * @returns {int} The index of the currently selected option
 * @memberOf UIToggle
 */
UIToggle.prototype.getCurValue = function() {
    return this.mCurValue;
};

/**
 * Sets the background's Color
 * @param {float[]} c The desired Color for the background
 * @memberOf UIToggle
 */
UIToggle.prototype.setBGColor = function(c) {
    this.mBg.setColor(c);
};

/**
 * Sets the foreground's Color
 * @param {float[]} c The desired Color for the foreground indicating the selected option
 * @memberOf UIToggle
 */
UIToggle.prototype.setSelectionColor = function(c) {
    this.mFg.setColor(c);
};

/**
 * Sets the Color of the selected option
 * @param {float[]} c The desired Color of the Text of the option currently selected
 * @memberOf UIToggle
 */
UIToggle.prototype.setSelectedTextColor = function(c) {
    this.mSelectedTextColor = c;
    
    // so is immediately used
    this.mText[this.mCurValue][0].setColor(this.mSelectedTextColor);
};

/**
 * Sets the normal Color of the options
 * @param {float[]} c The desired normal Color of the Text
 * @memberOf UIToggle
 */
UIToggle.prototype.setNormalTextColor = function(c) {
    this.mNormalTextColor = c;
    
    // so is immediately used
    for(var i = 0; i < this.mText.length; i++) {
            if(i !== this.mCurValue) {
                this.mText[i][0].setColor(this.mNormalTextColor);
            }
        }   
};

/**
 * Configures the Interpolation
 * @param {int} cycles Over how many frames should the Interpolation happen, 1 turns off Interpolation
 * @param {float} rate How much the Interpolation should change over a frame
 * @memberOf UIToggle
 */
UIToggle.prototype.configInterpolation = function(cycles, rate) { 
    this.mInterpolation.configInterpolation(rate, cycles);
};