var Box = {
    init: function(options) {
        this.container      = new Element('div', {'id': 'lightbox'}).injectTop(document.body).setStyle('display', 'none');
        this.image          = new Element('img', {}).injectTop(this.container);
        this.controls       = new Element('div', {'class': 'controls'}).injectTop(this.container);
        this.closeControl   = new Element('a', {'href': 'javascript:void(0)', 'class': 'close iePNG', 'title': ''}).injectTop(this.container);
        this.closeControl.setStyle('display', 'none');
        this.closeControl.addEvent('click', function() {
            Box.close();
        });
        this.help           = new Element('div', {'class': 'help'}).inject(this.container);
        this.help.set('html', options.help);
        
        $$('a[rel^=lightbox]').each(function(element) {
            element.addEvent('click', function(e) {
                new Event(e).stop();
                Box.open(this, {
                    displayHelp: this.get('data-display-help') || 0
                });
            });
        });
    },
    
    
    open: function(element, options) {
        var coordinates = element.getElement('img').getCoordinates();
        this.container.setStyle('display', '');
        this.container.setStyle('opacity', 1);
        this.container.setStyle('left', coordinates.left + coordinates.width / 2 - 24);
        this.container.setStyle('top', coordinates.top + coordinates.height / 2 - 20);
        this.container.setStyle('width', 32);
        this.container.setStyle('height', 32);
        this.image.setProperty('src', '');
        this.image.setStyle('display', 'none');
        this.closeControl.setStyle('display', 'none');
        this.help.setStyle('display', 'none');
        var preload;
        preload = new Image();
        preload.onload = function() {   
            new Fx.Morph(Box.container, {duration: 200}).start({
                'width' : preload.width,
                'height': preload.height,
                'left'  : (window.getWidth() / 2 - preload.width / 2),
                'top'   : (window.getHeight() / 2 + window.getScrollTop() - preload.height / 2)
            }).chain(function() {
                Box.image.setStyle('display', '');
                Box.image.setProperty('src', preload.src);
                Box.image.setOpacity(0);
                Box.closeControl.setStyle('display', 'block');
                new Fx.Tween(Box.image, {duration: 200}).start('opacity', 0, 1);
                
                if (options.displayHelp == 1) {
                    Box.help.setStyle('display', 'block');
                    new Fx.Tween(Box.container).start('height', Box.container.getHeight() + Box.help.getHeight() - 3);
                }
            });    
        };
        preload.src = element.href;
    },
    
    
    close: function() {
        new Fx.Morph(Box.container, {duration: 200}).start({
            'opacity': 0
        }).chain(function() {
            Box.container.setStyle('display', 'none');
            Box.closeControl.setStyle('display', 'none');
        });
    }
};


window.addEvent('domready', function() {
    Box.init({
        help: 'ВНИМАНИЕ! На фотографии отображены ОБРАЗЦЫ запчастей для определения внешнего вида, формы и установочных размеров.'
    });
    window.onkeydown = function(e) {
        var event = new Event(e);
        if (event.key == 'esc') {
            Box.close();
        }
    }
});