Conflict between Mootools and a pure JS script

I am stuck with a pure JS script that should be included in Joomla (1.7, Mootools 1.3.2)

and raises a conflict with this library while working perfectly outside it.

Examples :

• no M开发者_如何学Cootools http://jsfiddle.net/2W87v/

• with Mootools http://jsfiddle.net/2W87v/1/

Firebug error around line 133 :

document.getElementById("pu_" + champs[i]) is null

I tried all kinds of solutions, renaming certain variables, using $ instead of document.getElementById, wrapping each function around an anonymous function. To no avail.

If someone could point in the right direction, I'd be very grateful.

mootools is prototypical.

var champs = ['surfaceMaison','surfaceGarage','terrasseCouverte','terrasseNonCouverte','cloture'];
var prix = ['pack','valeur','valeur','valeur'];
var options = ['toitureMultipentes','doucheItalienne','wcSuspendu','enduitTaloche','voletsRoulants','climGainable'];


// and..
for (var i in champs) 


for (var i in options) 

is a no go as is, it will go up the prototype chain and get the stuff mootools adds to the Array prototype.

in general, for var in object as a construct has always been intended for OBJECTS and not arrays. it works anyway, because in javascript you don't have a proper Array type, it's just an Object type with Array-like properties (eg, length).

loop the arrays via options.each(function(el, i) {} or a normal for loop instead.

also, you can check for hasOwnProperty:

for (var i in champs) 
    if (champs.hasOwnProperty(i)) {
        // do the stuff
    }