/**
 * This class represents the navigation of the Gigapan Explorer application. 
 * <br><br>
 * <a href="mailto:ehudsons@andrew.cmu.edu">Ellen Hudson-Snyder</a>, 
 * <a href="mailto:evedar@andrew.cmu.edu">Elvin Vedar</a>,
 * <a href="mailto:cbalz@andrew.cmu.edu">Christopher M. Balz</a>.
 * <br><br>CVS Version Info:<br>
 *  $Id: NavigationPad.js,v 1.19 2005/11/30 03:44:20 evedar Exp $     
 * <br><br>
 * @inherits-from <code>AbstractWidget</code>
 * @listens-to-event <code>onclick</code> from the <code>navigationUpButton</code> document image object.
 * @listens-to-event <code>onclick</code> from the <code>navigationDownButton</code> document image object.
 * @listens-to-event <code>onclick</code> from the <code>navigationRightButton</code> document image object.
 * @listens-to-event <code>onclick</code> from the <code>navigationLeftButton</code> document image object.
 * @listens-to-event <code>onclick</code> from the <code>navigationCenterButton</code> document image object.
 * @listens-to-event <code>ondisableleftbutton</code> from the <code>plate</code> document object.
 * @listens-to-event <code>ondisablerightbutton</code> from the <code>plate</code> document object.
 * @listens-to-event <code>ondisableupbutton</code> from the <code>plate</code> document object.
 * @listens-to-event <code>ondisabledownbutton</code> from the <code>plate</code> document object.
 * @listens-to-event <code>onenableleftbutton</code> from the <code>plate</code> document object.
 * @listens-to-event <code>onenablerightbutton</code> from the <code>plate</code> document object.
 * @listens-to-event <code>onenableupbutton</code> from the <code>plate</code> document object.
 * @listens-to-event <code>onenabledownbutton</code> from the <code>plate</code> document object.
 * @emits-event <code>onmoveup</code>.
 * @emits-event <code>onmovedown</code>.
 * @emits-event <code>onmoveright</code>.
 * @emits-event <code>onmoveleft</code>.
 * @emits-event <code>onmovecenter</code>.
 * @object-prop <code>string</code>  <code>strUpButtonId</code>  The move-up button.
 * @object-prop <code>string</code>  <code>strDownButtonId</code>  The move-down button.
 * @object-prop <code>string</code>  <code>strLeftButtonId</code>  The move-left button.
 * @object-prop <code>string</code>  <code>strRightButtonId</code>  The move-right button.
 * @object-prop <code>string</code>  <code>strUpButtonImgId</code>  The move-up button.
 * @object-prop <code>string</code>  <code>strDownButtonImgId</code>  The move-down button image.
 * @object-prop <code>string</code>  <code>strLeftButtonImgId</code>  The move-left button image.
 * @object-prop <code>string</code>  <code>strRightButtonImgId</code>  The move-right button image.
 * @object-prop <code>string</code>  <code>strCenterButtonImgId</code>  The move-to-center button image.
 * @author Team GigaToasted (Fall-2005-CMU-NASA/Google-Practicum Subteam) 
 * @version 1.0
 * <br><br>
 */


// Set the prototype chain for efficient inheritance:
NavigationPad.prototype = new AbstractWidget();


/**
 * Create a <code>NavigationPad</code> object.
 * @param objParent <code>Object</code>  The parent, if any, of this object.
 */
function NavigationPad(objParent) {
    this.superC("navigationPad", objParent); // Complete the inheritance.  

    this.strUpButtonId = "navigationUpButton";
    this.strDownButtonId = "navigationDownButton";
    this.strLeftButtonId = "navigationLeftButton";
    this.strRightButtonId = "navigationRightButton";
    this.strCenterButtonId = "navigationCenterButton";
    this.strUpButtonImgId = "navigationUpButtonImgId";
    this.strDownButtonImgId = "navigationDownButtonImgId";
    this.strLeftButtonImgId = "navigationLeftButtonImgId";
    this.strRightButtonImgId = "navigationRightButtonImgId";

    this.getHtml = NavigationPad_getHtml;
    this.receiveEvent = NavigationPad_receiveEvent;
    this.onmoveup = NavigationPad_onmoveup;
    this.onmovedown = NavigationPad_onmovedown;
    this.onmoveleft = NavigationPad_onmoveleft;
    this.onmoveright = NavigationPad_onmoveright;
    this.onmovecenter = NavigationPad_onmovecenter;
    this.ondisableleftbutton = NavigationPad_ondisableleftbutton;
    this.ondisablerightbutton = NavigationPad_ondisablerightbutton;
    this.ondisableupbutton = NavigationPad_ondisableupbutton;
    this.ondisabledownbutton = NavigationPad_ondisabledownbutton;
    this.onenableleftbutton = NavigationPad_onenableleftbutton;
    this.onenablerightbutton = NavigationPad_onenablerightbutton;
    this.onenableupbutton = NavigationPad_onenableupbutton;
    this.onenabledownbutton = NavigationPad_onenabledownbutton;

    // Register events:
    self.gloScope.registerEvent(this.strId, this, "plate", "ondisableupbutton");    
    self.gloScope.registerEvent(this.strId, this, "plate", "ondisabledownbutton");    
    self.gloScope.registerEvent(this.strId, this, "plate", "ondisableleftbutton");    
    self.gloScope.registerEvent(this.strId, this, "plate", "ondisablerightbutton");    
    self.gloScope.registerEvent(this.strId, this, "plate", "onenableupbutton");    
    self.gloScope.registerEvent(this.strId, this, "plate", "onenabledownbutton");    
    self.gloScope.registerEvent(this.strId, this, "plate", "onenableleftbutton");    
    self.gloScope.registerEvent(this.strId, this, "plate", "onenablerightbutton");    
    self.gloScope.registerEvent(this.strId, this, this.strUpButtonId, "onclick");    
    self.gloScope.registerEvent(this.strId, this, this.strDownButtonId, "onclick");    
    self.gloScope.registerEvent(this.strId, this, this.strLeftButtonId, "onclick");    
    self.gloScope.registerEvent(this.strId, this, this.strRightButtonId, "onclick");
    self.gloScope.registerEvent(this.strId, this, this.strCenterButtonId, "onclick");    
}


/**
 * Return the HTML of the navigation pad widget its child widgets or elements.    
 * @return <code>string</code>  A string representing the HTML of the 
 *                 object managed by the widget and its child widgets.
 */
function NavigationPad_getHtml() {


    /**
     * Return the HTML of the up-arrow.
     * @param objMe  <code>Object</code> Reference to class
     * @return <code>string</code>  A string representing the HTML of the up-arrow.
     */
    function _getHtml_UpArrow(objMe) {
        var strHtml =
            "<a href='#Dummy' id='" + objMe.strUpButtonId + "' " +
            "onclick='self.Environment.handleEvent(this.id, \"onclick\", null); return true;'>" +
            "<img id='" + objMe.strUpButtonImgId + "' src='images/control_panel/UpArrow.jpg' style=\"border-style: none\"/></a>";

        return strHtml;
    }


    /**
     * Return the HTML of the down-arrow.
     * @param objMe  <code>Object</code> Reference to class
     * @return <code>string</code>  A string representing the HTML of the down-arrow.
     */
    function _getHtml_DownArrow(objMe) {
        var strHtml =
            "<a href='#Dummy' id='" + objMe.strDownButtonId + "' " +
            "onclick='self.Environment.handleEvent(this.id, \"onclick\", null); return true;'>" +
            "<img id='" + objMe.strDownButtonImgId + "' src='images/control_panel/DownArrow.jpg' style=\"border-style: none\"/></a>";

        return strHtml;
    }


    /**
     * Return the HTML of the left-arrow.
     * @param objMe  <code>Object</code> Reference to class
     * @return <code>string</code>  A string representing the HTML of the left-arrow.
     */
    function _getHtml_LeftArrow(objMe) {
        var strHtml =
                "<a href='#Dummy' id='" + objMe.strLeftButtonId + "' " +
                "onclick='self.Environment.handleEvent(this.id, \"onclick\", null); return true;'>" +
                "<img id='" + objMe.strLeftButtonImgId + "' src='images/control_panel/LeftArrow.jpg' style=\"border-style: none\"/></a>";

        return strHtml;
    }


    /**
     * Return the HTML of the right-arrow.
     * @param objMe  <code>Object</code> Reference to class
     * @return <code>string</code>  A string representing the HTML of the right-arrow.
     */
    function _getHtml_RightArrow(objMe) {
        var strHtml =
            "<a href='#Dummy' id='" + objMe.strRightButtonId + "' " +
            "onclick='self.Environment.handleEvent(this.id, \"onclick\", null); return true;'>" +
            "<img id='" + objMe.strRightButtonImgId + "'src='images/control_panel/RightArrow.jpg' style=\"border-style: none\"/></a>";

        return strHtml;
    }


    /**
     * Return the HTML of the center-button.
     * @param objMe  <code>Object</code> Reference to class
     * @return <code>string</code>  A string representing the HTML of the center-button.
     */
    function _getHtml_Center(objMe) {
        var strHtml =
            "<img style='border-style: none; ' src='images/control_panel/center.jpg' />";

        return strHtml;
    }


    var strHtml = 
        "<div class='navigationPad'>" +
                _getHtml_UpArrow(this) + "<br>" +
                _getHtml_LeftArrow(this) +
                _getHtml_Center(this) +
                _getHtml_RightArrow(this) + "<br>" +
                _getHtml_DownArrow(this) +
        "</div>";

    return strHtml;
}


/**
 * This method receives any events that this object listens to and 
 * routes them to the proper methods. 
 * @param pStrEventSourceElementId  <code>string</code> The i.d. of the document object model from which the event 
 *                                  sprang.
 * @param pStrEventType  <code>string</code> The event type of the object (e.g., 'onclick', etc).
 * @param pObjEvent  <code>Object</code> The event object itself.
 */
function NavigationPad_receiveEvent(pStrEventSourceElementId, pStrEventType, pObjEvent) { 
    switch (pStrEventType) {
    case "onclick" :
        switch (pStrEventSourceElementId) {
        case this.strUpButtonId : 
            this.onmovedown();
            break;
        case this.strDownButtonId : 
            this.onmoveup();
            break;
        case this.strLeftButtonId: 
            this.onmoveright();
            break;
        case this.strRightButtonId :
            this.onmoveleft();
            break;
        case this.strCenterButtonId : 
            this.onmovecenter();
            break;
        };
        break;
    case "ondisableleftbutton" :
        this.ondisableleftbutton();
        break;
    
    case "ondisablerightbutton" :
        this.ondisablerightbutton();
        break;
    
    case "ondisableupbutton" :
        this.ondisableupbutton();
        break;
    
    case "ondisabledownbutton" :
        this.ondisabledownbutton();
        break;
    
    case "onenableleftbutton" :
        this.onenableleftbutton();
        break;
    
    case "onenablerightbutton" :
        this.onenablerightbutton();
        break;
    
    case "onenableupbutton" :
        this.onenableupbutton();
        break;
    
    case "onenabledownbutton" :
        this.onenabledownbutton();
        break;
    }
}


/**
 * This method is an event handler and emits the <code>onmoveup</code> event.
 */
function NavigationPad_onmoveup() {
     self.Environment.handleEvent(this.strId, 'onmoveup', null);
}


/**
 * This method is an event handler and emits the <code>onmovedown</code> event.
 */
function NavigationPad_onmovedown() {
     self.Environment.handleEvent(this.strId, 'onmovedown', null);
}


/**
 * This method is an event handler and emits the <code>onmoveleft</code> event.
 */
function NavigationPad_onmoveleft() {
     self.Environment.handleEvent(this.strId, 'onmoveleft', null);
}


/**
 * This method is an event handler and emits the <code>onmoveright</code> event.
 */
function NavigationPad_onmoveright() {
     self.Environment.handleEvent(this.strId, 'onmoveright', null);
}


/**
 * This method is an event handler and emits the <code>onmovecenter</code> event.
 */
function NavigationPad_onmovecenter() {
     self.Environment.handleEvent(this.strId, 'onmovecenter', null);
}


/**
 * Disable the left button
 */
function NavigationPad_ondisableleftbutton() {
    window.document.getElementById(this.strLeftButtonImgId).src='images/control_panel/LeftArrowDisabled.jpg';
    window.document.getElementById(this.strLeftButtonId).onclick=function() { return false; };
    window.document.getElementById(this.strLeftButtonId).style.cursor='default';
}


/**
 * Disable the right button
 */
function NavigationPad_ondisablerightbutton() {
    window.document.getElementById(this.strRightButtonImgId).src='images/control_panel/RightArrowDisabled.jpg';
    window.document.getElementById(this.strRightButtonId).onclick= function() { return false; };
    window.document.getElementById(this.strRightButtonId).style.cursor='default';
}


/**
 * Disable the up button
 */
function NavigationPad_ondisableupbutton() {
    window.document.getElementById(this.strUpButtonImgId).src='images/control_panel/UpArrowDisabled.jpg';
    window.document.getElementById(this.strUpButtonId).onclick=function() { return false; };
    window.document.getElementById(this.strUpButtonId).style.cursor='default';
}


/**
 * Disable the right button
 */
function NavigationPad_ondisabledownbutton() {
    window.document.getElementById(this.strDownButtonImgId).src='images/control_panel/DownArrowDisabled.jpg';
    window.document.getElementById(this.strDownButtonId).onclick=function() { return false; };
    window.document.getElementById(this.strDownButtonId).style.cursor='default';
}


/**
 * Enable the left button
 */
function NavigationPad_onenableleftbutton() {
    window.document.getElementById(this.strLeftButtonImgId).src='images/control_panel/LeftArrow.jpg';
    window.document.getElementById(this.strLeftButtonId).onclick=new Function("self.Environment.handleEvent('" + this.strLeftButtonId +"', \"onclick\", null); return true;");
    window.document.getElementById(this.strLeftButtonId).style.cursor='pointer';
}


/**
 * Enable the right button
 */
function NavigationPad_onenablerightbutton() {
    window.document.getElementById(this.strRightButtonImgId).src='images/control_panel/RightArrow.jpg';
    window.document.getElementById(this.strRightButtonId).onclick=new Function("self.Environment.handleEvent('" + this.strRightButtonId +"', \"onclick\", null); return true;");
    window.document.getElementById(this.strRightButtonId).style.cursor='pointer';
}


/**
 * Enable the up button
 */
function NavigationPad_onenableupbutton() {
    window.document.getElementById(this.strUpButtonImgId).src='images/control_panel/UpArrow.jpg';
    window.document.getElementById(this.strUpButtonId).onclick=new Function("self.Environment.handleEvent('" + this.strUpButtonId +"', \"onclick\", null); return true;");
    window.document.getElementById(this.strUpButtonId).style.cursor='pointer';
}


/**
 * Enable the down button
 */
function NavigationPad_onenabledownbutton() {
    window.document.getElementById(this.strDownButtonImgId).src='images/control_panel/DownArrow.jpg';
    window.document.getElementById(this.strDownButtonId).onclick=new Function("self.Environment.handleEvent('" + this.strDownButtonId +"', \"onclick\", null); return true;");
    window.document.getElementById(this.strDownButtonId).style.cursor='pointer';
}