/* Regsiter functions to be called after the DOM has finished loading */
    function addLoadEvent( func ){
        var old_onload = window.onload;
        if( typeof window.onload != 'function' ){
            window.onload = func;
        } else {
            window.onload = function() {
                old_onload();
                func();
            }
        }
    }

    /**
     * Make the first descendent img element visibile 
     * @param id of an html element 
     */
    function makeFirstImgVisibleIn( id ){
        
        if( !document.getElementById       ) return false;
        if( !document.getElementsByTagName ) return false;

        var el = document.getElementById( id );
        if( el ){
            /* find first img */
            var imgs = el.getElementsByTagName( 'img' );
            /* check the element contains some img */
            if( imgs.length && imgs.length > 1 ){
                /* Make it visible */
                imgs[0].style.cssText = "visibility: visible";
            }
        } 
        else {
            return false;
        }

        return true;
    }

    /**
     * Attach onmouseover to each list item 
     * @param id of an html element
     */
    function attachMouseOverToListItems( id ){
        
        if( !document.getElementById       ) return false;
        if( !document.getElementsByTagName ) return false;

        var el = document.getElementById( id );
        if( el ){
            /* find first img */
            var lis = el.getElementsByTagName( 'li' );

            /* check the element contains some list items */
            if( lis.length && lis.length > 1 ){
                for( i=0; i < lis.length; i++ ){
                    lis[i].onmouseover = showImage;
                }
            }
            return true;
        }
        return false;
    }

    /**
     * Change the style of this element to 'visible', and the style of
     * other img elements inside sibling list item elements to 'hidden'
     * Note: Using el.style.cssText to accommodate IE which doesn't support
     * el.setAttribute( ) method or el.style.property methods
     */
    function showImage( ){

        /* Get the parent node */
        var el_parent = this.parentNode;

        if( el_parent ){
            var li_elements = el_parent.getElementsByTagName( 'li' ); 
            /* set all list item elements to hidden, except the selected one*/
            for( i=0; i < li_elements.length; i++ ){
                if( li_elements[i] == this ){
                    var imgs = li_elements[i].getElementsByTagName( 'img' );
                    imgs[0].style.cssText = 'visibility: visible';
                } else {
                    var imgs = li_elements[i].getElementsByTagName( 'img' );
                    imgs[0].style.cssText= 'visibility: hidden';
                }
            }
            return true;
        }

        return false;
    }

    /* On load, make first image inside div visible */
    var make_vis = function() { makeFirstImgVisibleIn( 'rollover' ); }
    addLoadEvent( make_vis );

    /* On load, attach the mouseover events to the list items inside the div element */
    var mo_list  = function() { attachMouseOverToListItems( 'rollover' ); }
    addLoadEvent( mo_list );