I am building my portfolio website simply using HTML, Flash, and the Mootools Javascript framework. I have decided to implement a theme changing feature using Javascript and cookies. When the user clicks on the "Change Theme" link, a mediaboxAdvanced lightbox appears, containing a real-time form which allows you to change the theme on the portfolio.

Here's the code for the form:

<div id="mb_inline" style="display: none; margin:15px;">
    <h3>Change Your Theme</h3>
    <form>
        <fieldset>
            <select id="background_color" name="background_color">
                <option  value="#dcf589">Original</option>
                <option value="#000FFF">Blue</option>
                <option value="#00FF00">Green</option>
            </select>
        </fieldset>
    </form>
</div>

I know, there is no submit button, but as soon as something is changed in that form, the following Mootools code happens:

var themeChanger = new Class(
{
    pageBody : null,

    themeOptions : null,

    initialize: function()
{
    this.pageBody = $(document.body);
    this.themeOptions = $('background_color');
    this.themeOptions.addEvent('change', this.change_theme.bindWithEvent(this));
},

change_theme: function(event)
{
    alert("Hello");
}
});

window.addEvent('domready', function() {
    var themeChanger_class = new themeChanger();
});

Now this is only a test function, which should be triggered when the dropdown menu changes. However, it seems that none of it works when the form is in the lightbox! Now if I decide to run the form outside of the lightbox, then it works great!

Am I missing something?

If you need more examples, I will fill in on demand.

Thank you all in advance.

-Christopher