var gal = {
    init : function() {
    if (!document.getElementById || !document.createElement || !document.appendChild) return false;

/* show the gallery */
    if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';

/* hide the loading image */
    if (document.getElementById('loading')) document.getElementById('loading').id = 'loaded';

/* set up the variables */
    var li = document.getElementById('jgal').getElementsByTagName('li');
    var lil = li.length;
    var lia = (Math.floor(Math.random()*lil));

/* show random image and its caption from list to start */
    li[lia].className = 'active';
    document.getElementById('capt').value = li[lia].getElementsByTagName('img')[0].alt;

/* the main loop  */
        for (i=0; i<li.length; i++) {

/* set the thumbnails as backgrounds */
        var im = li[i].getElementsByTagName('img')[0].src;
        var ima = im.substr(0,im.length - 4);
        li [i].style.backgroundImage = 'url(' + ima + 's.jpg)';
        li[i].title = li[i].getElementsByTagName('img')[0].alt;

/* add the click events  */
            gal.addEvent(li[i],'click',function() {
            var im = document.getElementById('jgal').getElementsByTagName('li');
                for (j=0; j<im.length; j++) {
                im[j].className = '';
                }
            this.className = 'active';
            document.getElementById('capt').value = this.getElementsByTagName('img')[0].alt;
            });
        }
    },

/* the click event */
    addEvent : function(obj, type, fn) {
        if (obj.addEventListener) {
        obj.addEventListener(type, fn, false);
        }
        else if (obj.attachEvent) {
        obj["e"+type+fn] = fn;
        obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
        obj.attachEvent("on"+type, obj[type+fn]);
        }
    }
}

/* do it */
gal.addEvent(window,'load', function() {
gal.init();
});