function Button(id, offSrc, offSrc_Highlighted, onSrc, onSrc_Highlighted, left, top, z, container, clickOff, clickOn) {
    this.id = id;
    this.offImage = offSrc;
    this.offImageH = offSrc_Highlighted ? offSrc_Highlighted : offSrc;
    this.onImage = onSrc? onSrc: offSrc;
    this.onImageH = onSrc_Highlighted ? onSrc_Highlighted : this.offImageH;
    // For link-style buttons there is no sense of on/off, so only clickOn is recognized
    // passing clickOff as false establishes this as a 'momentary' ('on' only) button, and it will behave as such
    // only clicks on momentary buttons are stored in the history object
    this.momentary = clickOff === false ? true : false;
    this.clickOff = clickOff;
    this.clickOn = clickOn;
    // history is the function that establishes the page this button is on - used for history object to navigate backwards
    // should be null for buttons that don't get added to history
    this.history = null;
    this.on = false;
    this.enabled = false;
    var that = this;
    this.element = createElement("img",
                { id: id, src: offSrc,
                    onclick: function() { that.toggle() },
                    onmouseover: function() { that.highlight() },
                    onmouseout: function() { that.cancelHighlight() }
                },
                { left: left, top: top, zIndex: z, position: "absolute", visibility: "hidden", cursor: "pointer" });
    this.container = container == null ? document.body : container;
    this.container.appendChild(this.element);
    // add this button to the collection for external reference
    Button.collection[id] = this;
}

Button.prototype.highlight = function() {
    if (this.on) this.element.src = this.onImageH;
    else this.element.src = this.offImageH;
}

Button.prototype.cancelHighlight = function(){
    if (this.on) this.element.src = this.onImage;
    else this.element.src = this.offImage; 
}

Button.prototype.toggle = function() {
    if (this.history) {
        var that = this;
        // that.history holds the id for the page we want to establish if the history button is clicked
        // that.history was set to the correct id when this button was last enabled
        Button.pushHistory(that.history);
    }
    // momentary buttons don't turn on & off, they just click
    if (this.momentary)
        this.click();
    // this is a toggle button, so switch its state
    else if (this.on)
        this.turnOff();
    else
        this.turnOn();
}

Button.prototype.click = function() {
    if (this.clickOn) this.clickOn();
}

Button.prototype.turnOff = function() {
    if (this.clickOff) this.clickOff();
    this.element.src = this.offImageH;
    this.on = false;
}

// variation of turnOff() used when software rather than mouse turns off this button.
// when mouse does it the button state should be highlighted, when software does it the button state should be not highlighted
Button.prototype.remoteOff = function() {
    if (this.clickOff) this.clickOff();
    this.element.src = this.offImage;
    this.on = false;
}

Button.prototype.turnOn = function() {
    if (this.clickOn) this.clickOn();
    this.element.src = this.onImageH;
    this.on = true;
}

Button.prototype.disable = function() {
    this.element.visible = false;
    this.element.style.visibility = "hidden";
    this.enabled = false;
}

Button.prototype.enable = function(history) {
    this.element.visible = true;
    this.element.style.visibility = "visible";
    this.enabled = true;
    this.history = history;
}

Button.collection = {};

Button.disableAll = function() {
    for (var b in Button.collection)
        Button.collection[b].disable();
}

// stores history of "pages" visited
Button.historyStack = [];

// adds a new page id to the history object
Button.pushHistory = function(id) {
    // don't add duplicates entries on top of each other
    // this may be requested by pages with on/off buttons that don't move to another page.
    if (Button.historyStack[Button.historyStack.length - 1] != id)
        Button.historyStack.push(id);
}

// pops the most page id from the history stack and runs the corresponding function to establish the new (previous) page
Button.popHistory = function() {
    if (Button.historyStack.length > 0)
        buttons[Button.historyStack.pop()].click();
}

// returns true if there are history items in the stack, false if there is currently no history
Button.hasHistory = function() {
    return Button.historyStack.length > 0;
}

// clears all items from the history stack
Button.clearHistory = function() {
    Button.historyStack.length = 0;
}