----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------

Example of Delineation of the Start and End of Functions
========================================================


function OptionX_over() {    // The over() method ^^^^^^^^^^^^^^^^^^^^
    var icon         = (this.checked) ? 3 : 2 ;   // Which icon to use
    this.image.src   = OptionX.iconNames[icon];   
    this.highlighted = true;                
}   // vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv





Example of Documenting Each Sighificant Variable
================================================

// OptionX ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// This is the constructor function for our new OptionX class.
// Calling it creates an OptionX object and outputs the required
// <A> and <IMG> tags into the specified document at the current location.
// Therefore, don't call it for the current document from an event handlr
//
function OptionX( document, checked, label, onclick ) {
    // document: the document the icons are created in
    // checked : determines if the icon is checked on not
    // label   : a label for the icon
    // onclick : a function passed as a string to compute cost

    if (document == null) return;        // ignore if document is null
    . . . etc



Example of Formatting Output to Closely Mimic its Actual Appearance
===================================================================

    document.write(
      ' <A HREF=""                                                      '
    + ' onMouseOver="document.images['+n+'].obj.over(); return true;"   '
    + ' onMouseOut ="document.images['+n+'].obj.out();"                 '
    + ' onClick    ="document.images['+n+'].obj.click(); return false;" '
    + ' >                                                               '
    + '      <IMG SRC="'  + OptionX.iconNames[icon] + '"'
    + '       WIDTH = '   + OptionX.width
    + '       HEIGHT= '   + OptionX.height
    + '       BORDER=0 HSPACE=0 VSPACE=0 ALIGN="absmiddle">' + label
    + '       <BR>                                                      '
    + ' </A>                                                            '
    );




Example of Alignment of Expressions to Highlight Differences
============================================================

OptionX.iconNames[0] = "Images/icon0.gif";  // unchecked, not highlighted
OptionX.iconNames[1] = "Images/icon1.gif";  // checked,   not highlighted
OptionX.iconNames[2] = "Images/icon2.gif";  // unchecked,     highlighted
OptionX.iconNames[3] = "Images/icon3.gif";  // checked,       highlighted





Example of Understandable Code Versus Compact Code
==================================================

Compact Code:

    icon = this.checked+this.highlighted*2;


Understandable:

    if ( this.checked  && this.highlighted   ) icon = 3;
    if ( this.checked  && !this.highlighted  ) icon = 1;
    if ( !this.checked && !this.highlighted  ) icon = 0;
    if ( !this.checked && this.highlighted   ) icon = 2;