/**
 * This file defines the class that represents the console 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: Console.js,v 1.21 2005/11/08 08:08:55 evedar Exp $   
 * <br><br>
 * @inherits-from  <code>AbstractWidget</code>
 * @listens-to-event  <code>onresize</code> from the <code>window</code> document object.
 * @emits-event  <code>onresize</code>.
 * @object-prop  <code>string</code>  <code>strWindowId</code>  The i.d. of the <code>window</code> document
 *                                    object, cached for speed during event handling.  
 * @object-prop <code>Widget</code>  <code>wgtViewPortWindowSill</code> The <code>ViewPortWindowSill</code> widget.
 * @object-prop <code>number</code>  <code>intBorderWidth</code> The border width of all four borders of the
 *                                   <code>console</code> dom object.  This is set directly in the inline css
 *                                   style, due to browser bugginess taking the style in the dom property from the 
 *                                   actual applied css class.
 * @author Team GigaToasted (Fall-2005-CMU-NASA/Google-Practicum Subteam) 
 * @version 1.0
 */


Console.prototype = new AbstractWidget(); // Assign to the prototype chain for efficient inheritance.

/**
 * Create a <code>Console</code> object.
 * @param objParent <code>Object</code> The parent, if any, of this object.
 */
function Console(objParent) {
    this.superC("console", objParent); // Complete the inheritance.
    this.receiveEvent = Console_receiveEvent;
    this.getHtml = Console_getHtml;

    this.strWindowId = this.objParent.strWindowId; 
    this.wgtViewPortWindowSill = new ViewPortWindowSill(this);  
    this.intBorderWidthPx = 7;

    // Methods:
    this.resize = Console_resize;
    this.bindEvents = Console_bindEvents;
    this.getHeightWidth = Console_getHeightWidth;
    this.getBorderWidths = Console_getBorderWidths;
    this.getWindowSillTop = Console_getWindowSillTop;
    this.getWindowSillHeight = Console_getWindowSillHeight;
    this.getWindowSillBorderWidths = Console_getWindowSillBorderWidths;

    // Register events:
    self.gloScope.registerEvent(this.strId, this, this.strWindowId, "onresize");
}


/** 
 * This method ensures that the current widget and its children stay at 
 * the bottom of the screen when the user resizes the window.  
 * It resizes the outer <code>mainBody</code>, 
 * the <code>console</code>, and <code>viewportwindowsill</code>
 * screen (document object)
 * elements (these are <code>div</code> elements).  <code>mainBody</code> contains 
 * <code>console</code>, and <code>console</code> contains <code>viewportwindowsill</code>. 
 * Note that <code>viewportwindowsill</code>, in turn, contains <code>controlpanel</code>.
 * <br><br>
 * Note that the scrollbars on the web browser window
 * that would appear due to the <code>plate</code> screen element (on all but huge display 
 * screens, the <code>plate</code> screen element is much bigger than the
 * <code>console</code> or its containing <code>mainBody</code> element) are eliminated by the
 * css property of <code>hidden</code> assigned to the <code>overflow</code> property of the
 * <code>mainBody</code> css class.
 * <br><br>
 * This method also emits the <code>onresize</code> event (at the end of the method).
 */
function Console_resize() {
    var iH, domWt = window, objConStyle = this.getDomRef().style, 
        arrBw = this.getBorderWidths(),
        arrWsBw = this.getWindowSillBorderWidths(),
        intTotalSideBorderWidths = arrBw[2] + arrBw[3] + arrWsBw[2] + arrWsBw[3];   
    
    if (typeof domWt.innerHeight != "undefined") { // Firefox/Mozila -- we work around actually with % height and width
        iH = domWt.innerHeight; 
        iW = domWt.innerWidth; 
    } else { // IE
        iH = domWt.document.documentElement.clientHeight;
        iW = domWt.document.documentElement.clientWidth;
    }
   
    iH = iH - (arrBw[0] + arrBw[1]);    
    iW = iW - (arrBw[2] + arrBw[3]);    
    objConStyle.height = iH + "px";
    objConStyle.width  = iW + "px"; 

    document.getElementById("mainBody").style.height = (iH + arrBw[0] + arrBw[1]) + "px";
    document.getElementById("mainBody").style.width  = (iW + arrBw[2] + arrBw[3]) + "px";
    document.getElementById(this.wgtViewPortWindowSill.strId).style.width  = (iW + arrBw[2] + arrBw[3] - intTotalSideBorderWidths) + "px";

    self.Environment.handleEvent(this.strId, 'onresize', null);     
}



/**
 * 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 (may be null).
 */
function Console_receiveEvent(pStrEventSourceElementId, strEventType, objEvent) { 
    if (pStrEventSourceElementId == this.strWindowId && strEventType == "onresize") {
        this.resize();
    }
}


/**
 * Return the HTML of the Console widget and its child widgets.    
 * @return <code>string</code>  A string representing the HTML of the 
 *                              object managed by the widget and its child widgets.
 */
function Console_getHtml() {
    var strHtml = 
        "<div id='" + this.strId + "'" + " style='" + 
        "width: 100%; " + 
        "border-style: outset; " + 
        "border-top-width: " + this.intBorderWidthPx + "px; " +         
        "border-bottom-width: " + this.intBorderWidthPx + "px; " +         
        "border-left-width: " + this.intBorderWidthPx + "px; " +         
        "border-right-width: " + this.intBorderWidthPx + "px; " +                 
        "'>" + 
        this.gloScope.objStrings.strPrototyping + 
        this.wgtViewPortWindowSill.getHtml() +
        "</div>";

    return strHtml;
}


/**
 * This method sets any event handlers that 
 * cannot be set in the dynamically-written html.  This method binds 
 * an event handler to the <code>window</code> object, which is drawn 
 * by the web browser and cannot be drawn by the dynamically-written html.
 * This method is called after the Console widget is drawn on the screen, to 
 * ensure that the <code>console</code> screen element exists before it is resized.
 */
function Console_bindEvents() {
    window.onresize = function() { 
        self.Environment.handleEvent(this.id, 'onresize', null); 
    };
}


/**
 * This method returns the value of the <code>top</code> style value co-ordinate
 *  of the view port window sill.
 * @return <code>number</code> The value of the <code>top</code> 
 *                          co-ordinate of the view port window sill.
 */
function Console_getWindowSillTop() {
    return this.gloScope.getPixelIntVal(
        this.wgtViewPortWindowSill.getDomRef().style.top
        );
}


/**
 * This method returns the height of the view port window sill.
 * @return <code>number</code> The height of the view port window sill.
 */
function Console_getWindowSillHeight() {
    return this.gloScope.getPixelIntVal(
        this.wgtViewPortWindowSill.getDomRef().style.height
        );
}


/**
 * This method returns the width of each of the four borders of the <code>viewPortWindowSill</code>
 * screen element. 
 * @return <code>Array</code> An array of integer values representing 
 *                            these border widths, in this order: top, bottom, left, right.  
 */
function Console_getWindowSillBorderWidths() {
    var objStyle = this.wgtViewPortWindowSill.getDomRef().style, gpi = this.gloScope.getPixelIntVal;        
    return [ gpi(objStyle.borderTopWidth),   
             gpi(objStyle.borderBottomWidth), 
             gpi(objStyle.borderLeftWidth), 
             gpi(objStyle.borderRightWidth) ];
}


/**
 * This method returns the height and width of each of the <code>console</code>
 * screen (dom) element. 
 * @return <code>Array</code> An array of integer values representing 
 *                            the <code>console</code> screen (dom) element height and width.
 */
function Console_getHeightWidth() {
    var objStyle = this.getDomRef().style, gpi = this.gloScope.getPixelIntVal;        
    return [ gpi(objStyle.height), gpi(objStyle.width) ];
}


/**
 * This method returns the width of each of the four borders of the <code>console</code>
 * screen element. 
 * @return <code>Array</code> An array of integer values representing 
 *                            these border widths, in this order: top, bottom, left, right.
 */
function Console_getBorderWidths() {
    var objStyle = this.getDomRef().style, gpi = this.gloScope.getPixelIntVal;       
    return [ gpi(objStyle.borderTopWidth),   
             gpi(objStyle.borderBottomWidth), 
             gpi(objStyle.borderLeftWidth), 
             gpi(objStyle.borderRightWidth) ];
}