ImageView = {
    autoGenerateElements: true,
    closeOnEscape: true,
    fadeToBlack: true,

    init: function() {

        // add html elements
        if (this.autoGenerateElements) {

            $(document.body).grab(new Element('div', {
                id: 'imageView'
            }).grab(this.buildTable()), 'top');

            $(document.body).grab(new Element('div', {
                id: 'fadeToBlack'
            }), 'top');
        }

        // add mouse click events
        $$('img.imageView').each(function(element) {
            element.addEvent('click', function(event) {
                ImageView.openImage(element);
            });
        });
    },

    openImage: function(image) {

        // verify elements existence
        if (!$('imageView') || !$('fadeToBlack'))
            return false;

        // read image size
        var height = image.naturalHeight;
        var width = image.naturalWidth;

        if (height == 0 || width == 0) 
            return false;

        // set size of image viewer
        $('imageView').setStyle('width', width + 40);
        $('imageView').setStyle('height', height + 40);

        // set position of image viewer
        $('imageView').setStyle('margin-left', (width + 40) / 2 * -1);
        $('imageView').setStyle('margin-top', (height + 40) / 2 * -1);

        // set image source
        $('imageViewPicture').set('src', image.src);

        // add events to image viewer
        $('imageView').addEvent('click', function(event) {
            ImageView.closeImage();
        });

        if (this.closeOnEscape)
            document.addEvent('keydown', function(event) {
                if (event.key == 'esc')
                    ImageView.closeImage();
            });

        // display image viewer
        if (this.fadeToBlack) $('fadeToBlack').show();
        $('imageView').show();

        // return
        return true;
    },

    closeImage: function() {

        // hide elements
        $('fadeToBlack').hide();
        $('imageView').hide();

        // remove key events
        document.removeEvent('keydown', destroy);
    },

    buildTable: function() {

        // build table header
        var thead = new Element('thead').grab(new Element('tr').grab(
            new Element('td', {'class': 'left'})).grab(
            new Element('td', {'class': 'middle'})).grab(
            new Element('td', {'class': 'right'}))
        );

        // build table body
        var tbody = new Element('tbody').grab(new Element('tr').grab(
            new Element('td', {'class': 'left'})).grab(
            new Element('td', {'class': 'middle'}).grab(
                new Element('img', {
                    src: '#',
                    alt: 'Trykk for å se forstørret bilde.',
                    id: 'imageViewPicture'
                }))).grab(
            new Element('td', {'class': 'right'}))
        );

        // build table footer
        var tfoot = new Element('tfoot').grab(new Element('tr').grab(
            new Element('td', {'class': 'left'})).grab(
            new Element('td', {'class': 'middle'})).grab(
            new Element('td', {'class': 'right'}))
        );

        // merge inside table
        var table = new Element('table', {
            cellpadding: '0',
            cellspacing: '0'
        }).grab(thead).grab(tbody).grab(tfoot);

        // return
        return table;
    }
}