Re-coding from structured to OOP code

[RMWChaos]

I've read through the volumes of information on MDC, Douglas Crawford's site, and many other websites on OOP, and now I am ready to try some conversion on my own code. I understand the principals (I think), but I haven't a clue where to start. So here's some of my existing code, and now I need some suggestions of where to go with this.

/*
* capitalize() does exactly what it says
* mouseHover() is a function that swaps images onmouseover & onmouseout
* removeDOM() removes a specified DOM node
* createDOM() creates a DOM node from the supplied attrib list
* loadPage() clears the old page data and loads the new
*
* The following code iterates through a list of webpage
* names and creates a nav button for each page. The
* function of each nav button changes depending on
* the page selected (i.e. onclick, onmouseover, etc.)
*/
 
// default required attribs
var attribDefaults =
    {
    'dom'   :  'div',
    'parent':  'body'
    };
 
// exception list for dom creation via JS or DOM methods
var exceptions =
    {
    'onclick'    :  0,
    'onmouseover':  1,
    'onmouseout' :  2
    };
 
// The webpage names
var pageName =
    {
    'home'   :  0,
    'guides' :  1,
    'specs'  :  2,
    'links'  :  3,
    'join'   :  4,
    'news'   :  5,
    'forum'  :  6,
    'kills'  :  7,
    'corp'   :  8,
    'members':  9
    };
 
// Initiate navigation buttons creation
function loadNav(page)
    {
    for (var index in pageName)
        {
        // vars change navigation object below for each page
        var imageId = "nav" + index;
        var capital = index.capitalize();
        var altName = "Jump to " + capital + " sector";
        var divNavExist = document.getElementById(imageId);
        var pathHover = "../images/hover" + capital + ".jpg";
        var getPage = new Function('loadPage("' + index + '")');
        var pathDefault = "../images/default" + capital + ".jpg";
        var pathSelected = "../images/selected" + capital + ".jpg";
        var navAlert = new Function("alert('You are already here.')");
        var alreadyHere = 'Your NavCon indicates that you are already here.';
        var mouseOver = new Function("mouseHover('" + pathHover + "', '" + imageId + "')");
        var mouseOut = new Function("mouseHover('" + pathDefault + "', '" + imageId + "')");
        // The list of DOM node attributes for the nav buttons
        var navigation =
            {
            'dom'        :  'img',
            'parent'     :  'body',
            'id'         :  imageId,
            'alt'        :  [altName, alreadyHere],
            'title'      :  [altName, alreadyHere],
            'src'        :  [pathDefault, pathSelected],
            'onmouseover':  [mouseOver, null],
            'onmouseout' :  [mouseOut, null],
            'onclick'    :  [getPage, navAlert]
            };
         // default to first value
        var nav = 0;
        // if button is for the selected page, use second value
        if (index == page)
            {
            nav = 1;
            };
        // remove old nav buttons
        if (divNavExist)
            {
            removeDOM(imageId);
            };
        // create new nav buttons
        var attribList = {};
        for (index in navigation)
            {
            var value = navigation[index]; 
            attribList[index] = value instanceof Array ? value[nav] : value;
            };
        // submit button attribs to createDOM()
        createDOM(attribList);
        };
    };
 

My first thought is that I need to start with something like this:

function NavButton(page)
    {
    this.attribDefaults =
        {
        'dom'        :  'div',
        'parent'     :  'body'
        };
    // exception list for dom creation via JS or DOM methods
    this.exceptions =
        {
        'onclick'    :  0,
        'onmouseover':  1,
        'onmouseout' :  2
        };
    // The webpage names
    this.pageName =
        {
        'home'   :  0,
        'guides' :  1,
        'specs'  :  2,
        'links'  :  3,
        'join'   :  4,
        'news'   :  5,
        'forum'  :  6,
        'kills'  :  7,
        'corp'   :  8,
        'members':  9
        };
    for (var index in this.pageName)
        {
        this.index = index;
        };
    this.page = page;
    this.imageId = "nav" + this.index;
    this.capital = this.index.capitalize();
    this.altName = "Jump to " + this.capital + " sector";
    this.divNavExist = document.getElementById(this.imageId);
    this.pathHover = "../images/hover" + this.capital + ".jpg";
    this.pathDefault = "../images/default" + this.capital + ".jpg";
    this.pathSelected = "../images/selected" + this.capital + ".jpg";
    this.alreadyHere = 'Your NavCon indicates that you are already here.';
    };
 
NavButton.prototype.page = 'Current Page';
NavButton.prototype.removeOldDom = function ()
    {
    if (divNavExist)
        {
        removeDOM(imageId);
        };
    };
NavButton.prototype.getPage = function()
    {
    loadPage(index);
    };
NavButton.prototype.navAlert = function()
    {
    alert('You are already here.');
    };
NavButton.prototype.mouseOver = function()
    {
    mouseHover(pathHover, imageId);
    };
NavButton.prototype.mouseOut = function()
    {
    mouseHover(pathDefault, imageId);
    };
NavButton.prototype.createNav = function()
    {
    createDOM(attribList);
    };
NavButton.prototype.mouseHover = function(imagePath, imageId)
    {
    var image = document.getElementById(imageId);
    image.src = imagePath;
    };
 
String.prototype.capitalize = function()
    {
    return this.replace(/\w+/g, function(a)
        {
        return a.charAt(0).toUpperCase() + a.slice(1).toLowerCase();
        });
    };
 
var home = new NavButton('home');
var guides = new NavButton('guides');
var specs = new NavButton('specs');
var links = new NavButton('links');
var join = new NavButton('join');
var news = new NavButton('news');
var forum = new NavButton('forum');
var kills = new NavButton('kills');
var corp = new NavButton('corp');
var members = new NavButton('members');
 

But that's about all I can come up with so far, and I'm not sure I even know what I am doing with what I have done. Er...yeah.

So am I at least on the right track here?

Thanks,
RMWChaos

[RMWChaos]

var home = new NavButton('home');
var guides = new NavButton('guides');
var specs = new NavButton('specs');
var links = new NavButton('links');
var join = new NavButton('join');
var news = new NavButton('news');
var forum = new NavButton('forum');
var kills = new NavButton('kills');
var corp = new NavButton('corp');
var members = new NavButton('members');
 

Immediately, I see some redundancy in the code. I would want to create a new function that automatically created these vars above, like this:

function createNavVars()
    {
    for (var i = 0; i < pageName[i].length; i++)
        {
        var pageName[i] = 'new NavButton(' + pageName[i] + ')';
        };
    };
 

Or something to that effect. So how would that fit into the whole OOP model?

Man, this can get so convoluted. :-\

[gits]

the above code wouldn't work ... to create instances you should use something like in the following example ... that create 3 instances a0 ... a2 in the window scope:

function OBJ() {
}
 
function create_items() {
    for (var i = 0; i < 3; i++) {
        this['a' + i] = new OBJ;
    }
}
 
create_items();
 
for (var i in window) {
    if (window[i] instanceof OBJ) {
        alert(i);
    }
}