function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements);
}

// assumes we have just 2 units at this point
// An example of what we would be changing:
//      <div class="metric" id="metric1234">...</div>
//      <div class="standard" id="standard1234" style="display:none">...</div>
// calling switchUnits('standard', 'metric'); would change the display attribute
// of these nodes

function switchUnits(show, hide) {
    var classItems = getElementsByClassName(document, 'div', hide); 
    for(var i=0; i<classItems.length; i++) {
        var baseID = classItems[i].id.substring(hide.length);
        if( classItems[i].style.setAttribute ) { 
			// IE hack  
            classItems[i].style.setAttribute("display", "none" ); 
        } else { 
			// standards-compliant
            classItems[i].setAttribute("style", "display: none" ); 
        }
        if( document.getElementById(show + baseID).style.setAttribute ) { 
            document.getElementById(show + baseID).style.setAttribute("display", "block" ); 
        } else { 
            document.getElementById(show + baseID).setAttribute("style", "display: block" ); 
        }
    }
    return (false);
}