order of including prototype.js and clientWidth and scrollWidth

Would somebody know that why if the 1st and 2nd line is swapped, then
Firefox 2 and IE 7 will not run... Firefox shows "ShowMe is not
defined"... and Safari runs it without any problem.

also, I thought it is said that to guarantee that node.getWidth() can
return something, it needs to be $(node).getWidth() so that node
becomes the "extended element"... but it is not needed in the code
and it still runs? How can prototype make it extended element
automatically?

Also related is that... does someone know how come offsetWidth is well
documented in the Definitive Javascript book while clientWidth and
scrollWidth are not? even though all 3 works in all Firefox, IE, and
Safari. Thanks very much!

<script src="prototype.js"></script>
 
<a href="http://www.google.com"><img id="theimg" src="http://www.sanrio.co.jp/english/characters/w_chara/pocha180.gif" onload="showMe(this)"></a>
 
<script>
function showMe(node) {
    document.getElementById("display").innerHTML = "Offset " + node.offsetWidth + " x " + node.offsetHeight + "<br>" +
        "Client " + node.clientWidth + " x " + node.clientHeight + "<br>" +
        "Scroll " + node.scrollWidth + " x " + node.scrollHeight + "<br>" +
        "Prototype " + node.getWidth() + " x " + node.getHeight()
}
 
</script>
 
<div id="display"></div>

Code (markup):