/**
 * JS-based browse navigation.
 */

function BrowseNavigation(id) {

    this.id = id;
    this.document = document;
    this.targetElement = null;
    this.onChange = null;

    this.onChange = null;       // event handler to be called when the offset changes

    // overwrite these parameters to change the default appearance
    this.imageFirst = {normal: "images/pageFirst-n.gif", mouseOver: null};
    this.imageLast = {normal: "images/pageLast-n.gif", mouseOver: null};
    this.imagePrevious = {normal: "images/pagePrevious-n.gif", mouseOver: null};
    this.imageNext = {normal: "images/pageNext-n.gif", mouseOver: null};
    this.messages = {
        currentWindowSep: "of",
        buttonNext: "next",
        buttonLast: "last",
        buttonPrevious: "previous",
        buttonFirst: "first"};

    // state variables
    this.currentOffset = 0;
    this.rowsPerPage = 10;
    this.totalRows = 50;

    this.render = render;
    this.update = update;
    this.setOffset = setOffset;
    this.previousPage = previousPage;
    this.nextPage = nextPage;
    this.lastPage = lastPage;

    // private functions
    this._getGotoButton = _getGotoButton;
    this._getCurrentWindowString = _getCurrentWindowString;
    this._onCurrentWindowKeypress = _onCurrentWindowKeypress;

    if (this.onInit) {
        // call custom init handler
        this.onInit(this);
    }

    function render(hideDisabledNavigation) {
        var out = [];
        if (!hideDisabledNavigation || this.rowsPerPage < this.totalRows) {
            out.push("<div style=\"display:inline\">");
            out.push(this._getGotoButton("setOffset(0)", this.imageFirst, this.messages.buttonFirst));
            out.push(this._getGotoButton("previousPage()", this.imagePrevious, this.messages.buttonPrevious));
            out.push("<input class=\"tabsinput\" size=\"20\" id=\"" + this.id + ".currentWindow\""
                + " type=\"text\" onchange=\"" + this.id + ".setOffset(this.value, true);\" "
                + "onkeypress=\"return " + this.id + "._onCurrentWindowKeypress(event, this)\" "
                + "onfocus=\"this.value=''\" value=\"" + this._getCurrentWindowString() + "\">");
            out.push(this._getGotoButton("nextPage()", this.imageNext, this.messages.buttonNext));
            out.push(this._getGotoButton("lastPage()", this.imageLast, this.messages.buttonLast));
            out.push("</div>");
        }
        if (this.targetElement != null) {
            this.targetElement.innerHTML = out.join("");
        } else {
            this.document.write(out.join(""));
        }
    }

    // updates current window, calls user-defined event handler to update view
    function update(disableOnChange) {
        if (this.document.getElementById(this.id + ".currentWindow") == null) {
            return;
        }
        this.document.getElementById(this.id + ".currentWindow").value = this._getCurrentWindowString();
        if (this.onChange && !disableOnChange) {
            this.onChange();
        }
    }

    // page navigation

    function setOffset(offset, userInput) {
        if (isNaN(offset))
            return;
        var iOffset = parseInt(offset);
        if (userInput)
            iOffset--;      // user input is 1-based
        if (iOffset != this.currentOffset) {
            if (iOffset >= 0 && iOffset < this.totalRows) {
                this.currentOffset = iOffset;
            }
            this.update();
        }
    }

    function previousPage() {
        if (this.currentOffset > 0) {
            this.setOffset(Math.max(0, this.currentOffset - this.rowsPerPage));
        }
    }

    function nextPage() {
        if (this.currentOffset + this.rowsPerPage < this.totalRows) {
            this.setOffset(this.currentOffset + this.rowsPerPage);
        }
    }

    function lastPage() {
        this.setOffset(Math.max(0, this.totalRows - this.rowsPerPage));
    }

    // private functions
    // render a 'goto' button
    function _getGotoButton(jsLink, image, label) {
        var imageUrl = image.normal;
        var mouseOver = "";
        if (image.mouseOver != null && image.mouseOver != image.normal) {
            // add mouseover code
            mouseOver = " onmouseover=\"this.src='" + image.mouseOver + "'\" onmouseout=\""
                + "this.src='" + image.normal + "'\" ";
        }
        return "<a href=\"javascript:" + this.id + "." + jsLink + "\" title=\"" + label
                + "\"><img class=\"tabsicon\" src=\"" + imageUrl + "\" alt=\"" + label + "\" " + mouseOver + "></a>";
    }

    // return current "window" string (i.e. 'x-y of z')
    function _getCurrentWindowString() {
        var out = (this.currentOffset + 1);
        if (this.rowsPerPage > 1)
            out += "-" + Math.min(this.currentOffset + this.rowsPerPage, this.totalRows);
        out += " " + this.messages.currentWindowSep + " " + this.totalRows;
        return out;
    }

    // called when a key was pressed in the "current window" input field
    function _onCurrentWindowKeypress(event, input) {
        return onReturnEval(event, this.id + ".setOffset('" + input.value + "', true)");
    }
}