function mtp_track_nav_onclick() {
    var gui_ref = this.mtp_track_nav_obj;
    if (!gui_ref) { return; }
    var callback_type = this.id;

    if (callback_type == "nav_start") { gui_ref.OnStart(); }
    else if (callback_type == "nav_prev") { gui_ref.OnPrev(); }
    else if (callback_type == "nav_next") { gui_ref.OnNext(); }
    else if (callback_type == "nav_end") { gui_ref.OnEnd(); }
    else if (callback_type == "nav_link") { gui_ref.OnLink(); }
}

function mtp_track_nav() {
    //  TODO pre load images for the graphic user interface

    this.HideElem = function(elem_id) {
        var elem = document.getElementById(elem_id);
        if (!elem) { return; }

        elem.disabled = true;
        elem.onmouseover = null;
        elem.onmouseout = null;
        elem.setAttribute("src", "/images/null.gif");
        elem.onclick = null;        
    }

    this.Hide = function() {
        this.HideElem("nav_start");
        this.HideElem("nav_prev");
        this.HideElem("nav_next");
        this.HideElem("nav_end");
        this.HideElem("nav_link");
    }

    this.ShowElem = function(elem_id, img, img_over) {
        var elem = document.getElementById(elem_id);
        if (!elem) { return; }
        
        elem.disabled = null;
        elem.mtp_track_nav_obj = this;
        elem.setAttribute("src", img);
        elem.onmouseover = function() { Img(this, img_over); }
        elem.onmouseout = function() { Img(this, img); }
        elem.onclick = mtp_track_nav_onclick;                    
    }
    
    this.Show = function() {
        //  show all the buttons and set all the associated callbacks
        this.ShowElem("nav_start", "/images/routenav/nav_start.png", "/images/routenav/nav_start_over.png");
        this.ShowElem("nav_prev", "/images/routenav/nav_prev.png", "/images/routenav/nav_prev_over.png");
        this.ShowElem("nav_next", "/images/routenav/nav_next.png", "/images/routenav/nav_next_over.png");
        this.ShowElem("nav_end", "/images/routenav/nav_end.png", "/images/routenav/nav_end_over.png");
        this.ShowElem("nav_link", "/images/routenav/link.png", "/images/routenav/link_over.png");
    }
    
    this.OnStart = function() { return; }
    this.OnNext = function() { return; }
    this.OnPrev = function() { return; }
    this.OnEnd = function() { return; }
    this.OnLink = function() { return; }
}