Conflict between mootools and another (non-framework) script

Question

I'm trying to integrate a javascript called ImageFlow into a Joomla site, but I'm getting an error in Internet Explorer (v8 native and compatibility mode) and it won't display. It works fine in Firefox and other browsers).

I believe the error is related to mootools. Error details:

Message: Object doesn't support this property or method
Line: 48
Char: 27
Code: 0
URI: [domain]/media/system/js/mootools.js

Message: Object doesn't support this property or method
Line: 953
Char: 4
Code: 0
URI: [domain]/media/imageflow/imageflow.js

The beginning of mootools line 48 (minified) is:

if(!this.addEventListener)fn=fn.create({'bind':this,'event':true});

The relevant imageflow code is:

/* Just in case window.onload happens first, add it to onload
using an available method.*/
if(typeof addEvent !== "undefined")
{
 addEvent(window, "load", run); // <-- line 953
}
else if(document.addEventListener)
{
 document.addEventListener("load", run, false);
}
else if(typeof window.onload === "function")
{
 var oldonload = window.onload;
 window.onload = function()
 {
  domReadyEvent.run();
  oldonload();
 };
}
else
{
 window.onload = run;
}

Answer 1

I had a similar problem once with lightbox and mootools. I solved it by finding a lightbox implementation based on mootools (which was actually better). If you can't, then I suggest putting the ImageFlow into an iframe, so the two scripts won't conflict.

Answer 2

I found a solution: remove the first if-clause from the imageflow code. I don't know if it was there for legacy browsers perhaps, but without it the script works perfectly fine in IE 6-8 and the proper browsers.

Answer 3

Goat, that solution works perfect, thank you so much!