var Lightbox = (function() {
    var background = null;
    var popup = null;
    var preload = null;

    function toggleVisibility( type ) {
        if ( type == 'show' ) {
            background.removeClassName('invisible').addClassName('visible');
    	    popup.removeClassName('invisible').addClassName('visible');
        }

        if ( type == 'hide' ) {
            popup.removeClassName('visible').addClassName('invisible');
            background.removeClassName('visible').addClassName('invisible');
        }
    }

    return {
        show: function( id ) {
            var self = this;
            var padding = 20; //left + right

            background = $('fade');
            popup = $('popup-' + id);

            document.observe('keypress', function(e) {
                if (e.keyCode == Event.KEY_ESC) {
                    self.hide( id );
                }
            });

    	    background.observe('click', function(e) {
                self.hide( id );
            });

            //if (!preload) {
                preload = new Image();
                preload.onload = function() {
                    popup.style.width = preload.width + padding + 'px';
                    toggleVisibility('show');
                }

                preload.src = popup.getElementsBySelector('img')[0].src;
            // } else {
            //     toggleVisibility('show');
            // }
        },
        hide: function( id ) {
            var self = this;

            background.stopObserving();

            popup.removeClassName('visible').addClassName('invisible');
            background.removeClassName('visible').addClassName('invisible');

            toggleVisibility('hide');
        }
    }
})();