document.observe('dom:loaded', function(ev) {

    thumbs = $$('div.thumbs > div.thumb');
    images = $$('div.mainImages > div.mainImage');
    empty = $$('div.thumbs > div.empty');

    thumbs.each(function(el) {

        el.observe('click', function() {

            thumbs.each(function(thumb) {
                thumb.removeClassName('active');
            });

            el.addClassName('active');

            currentImage = $$('div.mainImages > div.active');

            if (currentImage[0] != null) {
                currentImage[0].hide();
            }

            id = el.id.substring((el.id.indexOf('-') + 1), el.id.length);

            images.each(function(image) {

                imageId = image.id.substring((image.id.indexOf('-') + 1), image.id.length);

                if (imageId == id) {
                    image.addClassName('active');
                    image.show();
                }
                else {
                    image.removeClassName('active');
                }

            });

        });

    });

});