array_image = Array();

window.addEvent('domready', function() {
    /***
    MAKE ROLLOVER FOR LEFT MENU
    ***/

    // aux function to compute the 'focus' name of an img tag for the unfocused one
    var get_focused_name = function(unfocused_name) {
        return unfocused_name.substr(0, unfocused_name.length-4) + '_over.gif';
    }
    // the reverse
    var get_unfocused_name = function(focused_name) {
        return focused_name.substr(0, focused_name.length-9) + '.gif';
    }
    // all images which need a rollover
    var images = $$('#categories ul li img');
    // make the rollover images preload
    images.forEach(function(img) {
        var i = new Image();
        i.src = get_focused_name(img.src);
        array_image.include(i);
    });
    // attack the mouse events
    images.forEach(function(img) {
        img.addEvent('mouseover', function() {
            img.src = get_focused_name(img.src);
        });
        img.addEvent('mouseout', function() {
            img.src = get_unfocused_name(img.src);
        });
    });

    /***
    MAKE LEFT MENU FOLLOW THE PAGE
    ***/
    // elements we are interested to
    var sidebar = $('sidebar');
    var h1img = $E('h1 img');
    // adapt top margin of the sidebar to keep it 'fixed'
    var adaptTopMargin = function(event) {
        var marginTop = window.getScrollTop() + 'px';
        //sidebar.setStyle('margin-top', marginTop);
        //h1img.setStyle('margin-top', marginTop);
    };

    window.addEvent('scroll', adaptTopMargin);
    window.addEvent('resize', adaptTopMargin);
});