Javascript Object Issues

Hello,
I am constructing a Javascript menu engine. Its really quite simple, but I decided to build it in a Object Oriented fashion so it could easily be re-used.

It has a few functions: initialization, deSelect, setSelected, up, down, left, right, ok.

Each of the functions are defined associatively (this.deSelect = function(){ //code here};)

THe problem I am having is this:

when I try to call a function that exists within the object, from within the object, I get the following error:

Uncaught TypeError: Object  has no method 'deSelect'

An example of this is the "up" function in the code provided. It needs to deSelect the current item, then set the newly selected item "selected" using the setSelect method. On both deSelect() and setSelect() I get the error.

I can figure out why this is... can someone please tell me what Im doing wrong?

Worth 500 points.

Thanks,
Rick

/* 
 * menuEngine.js
 * Written By: Rick Simnett
 * This object controls the menuing system for the simulator. There are two types of menus:
 * grid and vertical.
 */

function menuEngine()
{
    this.menutype = 0; //0 = vertical menu, 1 = grid menu
    this.menudata = []; //this is a data container array that defines the menu and the corresponding events
    this.verticalPostion = 0; //this is the place holder for the current vertical position
    this.horizontalPosition = 0; //this is the place holder for the current horizontal position
    
    //initialize() - this function initializes the menu engine with menu data and the type of menu to render
    this.initialize = function(data,type)
    {
        this.menutype = type;
        this.menudata = data;

        this.renderMenu();
    }

    //setSelected() - this function sets the highlighted menu item based on the vertical & horizontal positions
    this.setSelected = function()
    {
        if (this.verticalPosition)
            alert(this.verticalPosition);

        if (this.menutype == 0)
            $("#row" + this.verticalPosition).attr("class","vertical_selected");
        else
            $("#grid" + this.verticalPosition + this.horizontalPosition).attr("class","grid_selected");
    }

    //deSelect() - this function sets the highlighted menu item based on the vertical & horizontal positions
    this.deSelect = function()
    {
        if (this.menutype == 0)
            $("#row" + this.verticalPosition).attr("class","");
        else
            $("#grid" + this.verticalPosition + this.horizontalPosition).attr("class","");
    }

    //renderMenu() - this function actually renders the menu on the screen
    this.renderMenu = function()
    {
        if (this.menutype == 0)
        {
            //render a vertical menu
            html = "<ul class=\"vertical-menu\">";

            for(var i = 0; i < this.menudata.length; i++)
                html += "<li id=\"row" + i + "\">" + this.menudata[i]['menuitem'] + "</li>";

            html += "</ul>";

            //initialize the vertical positions
            this.verticalPosition = 0;

            //initialize the horizontal position
            this.horizontalPosition = 0;
            
            //write the menu to the screen
            $("#screen").html(html);

            //select the current position
            this.setSelected();
        }
        else
        {
            //render a grid menu
        }
    }

    //up() - this function means that 'up' was pressed on the keypad
    this.up = function()
    {
        this.deSelect();

        //its a vertical menu and up was pushed so lets figure out what menu item it should be on
        if (this.verticalPosition == 0)
            this.verticalPosition = this.menudata.length - 1;
        else
            --this.verticalPosition;

        this.setSelected();
    }

    //down() - this function means that 'down' was pressed on the keypad
    this.down = function()
    {
        //this.deSelect();
        
        //its a vertical menu and down was pushed so lets figure out what menu item it should be on
        if (this.verticalPosition == this.menudata.length-1)
            this.verticalPosition = 0;
        else
            ++this.verticalPosition;

        this.setSelected();
    }

    //left() - this function means that 'left' was pressed on the keypad
    this.left = function()
    {
        //this.deSelect();
        
        if (this.menutype == 1)
        {
            //its a grid menu and left was pushed
            if (this.horizontalPosition == 0)
                this.horizontalPosition = this.menudata[0].length - 1;
            else
                --this.horizontalPosition;

            this.setSelected();
        }
    }

    //right() - this function means that 'right' was pressed on the keypad
    this.right = function()
    {
        //this.deSelect();

        if (this.menutype == 1)
        {
            //its a grid menu and right was pushed
            if (this.horizontalPosition == this.menudata[0].length - 1)
                this.horizontalPosition = 0;
            else
                ++this.horizontalPosition;

            this.setSelected();
        }
    }

    //ok() - this function means that 'ok' was pressed on the keypad and fires off the corresponding event
    this.ok = function()
    {
        if (this.menudata[this.verticalPosition])
            if (this.menutype == 0)
                this.menudata[this.verticalPosition]['event']();
            else
                this.menudata[this.verticalPosition][this.horizontalPosition]['event']();
    }
 
}

var menusystem = new menuEngine();

Select all Open in new window