//<!--

// 2006/08/28/Mon 12:29 PM
// written by Samuel Chun.
// 
// This was written to show/hide area code and phone number depending which country
// the user chooses.
//
// Here is the example html code:
//
// ================================================================================================
//
// <html>
// <head>
// <script type="text/javascript" language="JavaScript" src="/js/displayToggle.js"></script>
// <script type="text/javascript" language="JavaScript">
// // local function to invoke 'displayToggle'.
// function toggle() {
//     displayToggle(document.getElementById('country_id').value == 'US' || document.getElementById('country_id').value == 'CANADA',
//                   new Array('area_code', 'phone_number1', 'area_input', 'short_input'),
//                   new Array('phone_number2', 'long_input'));
// }
// </script>
// </head>
// <body onLoad="javascript:toggle();">
// <form action="/public-servlet/MemberHelp">
//     <select id="country_id" name="country_id" onchange="javascript:toggle();">
//         <option value="US">US</option>
//         <option value="CANADA">CANADA</option>
//         <option value="GERMANY">GERMANY</option>
//     </select>
//    
//     <table>
//         <tr id="area_code">
//             <td>Area Code: <input id="area_input" name="area_code" type="text"/></td>
//         </tr>
//         <tr id="phone_number1">
//             <td>Phone Number short: <input id="short_input" name="phone_number" type="text"/></td>
//         </tr>
//         <tr id="phone_number2" style="display: none;">
//             <td>Phone Number long: <input id="long_input" name="phone_number" type="text"/></td>
//         </tr>
//     </table>
//    
//     <input type="submit"/>
// </form>
// </body>
// </html>
//
// ================================================================================================





// INTERFACE FUNCTION.
//
// arguments:
//     -condition: boolean
//     -elmArray1: array of strings which are ids of elements.
//     -elmArray2: array of strings which are ids of elements.
//
// action:
//     -if condition is true it will show/enable all elements
//      found inside elmArray1 and hide/disable all elements
//      inside elmArray2.
//     -if condition is false it will do the opposite.
//
// this function must be invoked in two places.
//     -onchange of select, which determines what to hide and show.
//     -onload of body, it will check which to hide and show when it first loads up.
//      this is necessary because validation can kick you back here.
function displayToggle(condition, elmArray1, elmArray2) {
    if (condition) {
        displayShowElements(elmArray1);
        displayHideElements(elmArray2);
    }
    else {
        displayHideElements(elmArray1);
        displayShowElements(elmArray2);
    }
    return;
}





// HELPER FUNCTIONS.
//
// it will show/enable all elements in the array.
function displayShowElements(elmArray) {
    displaySetElements("", false, elmArray);
}
// it will hide/disable all elements in the array.
function displayHideElements(elmArray) {
    displaySetElements("none", true, elmArray);
}
// where it actually sets the 'display' style and 'disabled' property.
function displaySetElements(displayVal, disabledVal, elmArray) {
    var elm = null;
    var len = elmArray.length;
    for (var i = 0; i < len; i++) {
        elm = document.getElementById(elmArray[i]);
        if ( elm ) {
          elm.style.display = displayVal;
          if (typeof(elm.disabled) != "undefined") {
            elm.disabled = disabledVal;            
          }
        }
    }
}
//-->


