var Overlay = new Class({

    element: null,

    initialize: function() {
        this.element = new Element('div', {
            'styles': {
                'opacity': 0,
                'z-index': '600',
                'background': '#111',
                'top': 0,
                'left': 0,
                'position': 'absolute',
                'width': '100%',
                'height': $('footer').getSize().y + $('footer').getPosition().y
            }
        }).injectInside(document.body);
    },

    open: function() {
        new Fx.Morph(this.element).start({
            'opacity': 0.35
        }).chain(function() {

        }.bind(this));
    },

    close: function() {
        new Fx.Morph(this.element).start({
            'opacity': 0
        }).chain(function() {
            this.element.destroy();
        }.bind(this));
    }

});

WMC_Gallery_Popup = new Class({

    element: null, // element główny
    images: null, // lista z miniaturkami
    offset: 0, //aktualne przesunięcie wrappera ze zdjęciami
    table: null, // tabela z miniaturkami
    periodical: null,
    parent: null,
    overlay: null,

    offset_move: 0, // offset o jaki ma przesuwać tabelę

    initialize: function(id) {
        this.element = $(id);
        this.images = this.element.getElements('table.gallery-popup-images a');
        this.table = this.element.getElement('table.gallery-popup-images');
        this.initEvents();
    },

    show: function(parent) {
        this.parent = parent;
        this.element.injectInside($(document.body));

        this.element.getElement('div.overlay').setStyle('opacity', 0);
        this.element.setStyles({
            'display': 'block',
            'opacity': 1,
            'top': parent.getPosition().y,
            'left': parent.getPosition().x,
            'width': parent.getSize().x,
            'height': parent.getSize().y
        });
        var fx = new Fx.Morph(this.element);
        this.overlay = new Overlay();
        this.overlay.open();
        fx.start({
            'width': 980,
            'height': 620,
            'left': (0.5 * ($('body-wrapper').getSize().x - 980)).toInt()+1,
            'top': $(document.body).getScroll().y + (0.5 * ($(document.body).getSize().y - 620)).toInt()
        }).chain(function() {
            this.element.setStyles({
                'left': '50%',
                'margin-left': '-490px'
            });
            new Fx.Tween(this.element.getElement('div.overlay')).start('opacity', 1);
        }.bind(this));
    },

    initEvents: function() {
        this.images.addEvent('click', this.showImage.bindWithEvent(this));
        this.element.getElement('a.navigation-next').addEvent('mousedown', this.nextImages.bindWithEvent(this));
        this.element.getElement('a.navigation-next').addEvent('mouseup', this.stopImages.bindWithEvent(this));
        this.element.getElement('a.navigation-back').addEvent('mousedown', this.backImages.bindWithEvent(this));
        this.element.getElement('a.navigation-back').addEvent('mouseup', this.stopImages.bindWithEvent(this));
        this.element.getElement('a.close').addEvent('click', this.close.bindWithEvent(this));
        window.addEvent('click', function(e) {
            if(this.parent && !e.target.getParent('div.gallery-popup-style-1')) {
                this.close();
            }
        }.bind(this));
        window.addEvent('keydown', function(e) {
            if(e.key == 'esc' && this.parent) {
                this.close();
            }
        }.bind(this));
    },

    backImages: function(event) {
        var back = function() {
            if(this.table.getStyle('margin-left').toInt() < 0) {
                this.table.setStyle('margin-left', this.table.getStyle('margin-left').toInt() + 10);
            }
        }
        this.periodical = back.periodical(15, this);
        return false;
    },

    close: function() {
        this.element.setStyles({
            'left': (0.5 * ($('body-wrapper').getSize().x - 980)).toInt()+1,
            'margin-left': 0
        });
        this.overlay.close();
        new Fx.Morph(this.element.getElement('div.overlay'), {
            'duration': 150
        }).start({
            'opacity': 0
        }).chain(function() {
            new Fx.Morph(this.element).start({
                'opacity': 0,
                'top': this.parent.getPosition().y,
                'left': this.parent.getPosition().x,
                'width': this.parent.getSize().x,
                'height': this.parent.getSize().y
            }).chain(function() {
                this.element.setStyles({
                    'width': 0,
                    'height': 0,
                    'display': 'none'
                });
                this.parent = null;
            });
        }.bind(this));

        return false;
    },

    nextImages: function(event) {
        var next = function() {
            if(this.table.getStyle('margin-left').toInt() * -1 + 800 < this.table.getSize().x) {
                this.table.setStyle('margin-left', this.table.getStyle('margin-left').toInt() - 10);
            }
        }
        this.periodical = next.periodical(15, this);
        return false;
    },

    stopImages: function() {
        if(this.periodical) {
            $clear(this.periodical);
        }
    },

    showImage: function(event) {
        this.element.getElement('table.gallery-popup-images img.active').removeClass('active');

        var element = $(event.target);
        if(element.get('tag') == 'img') {
            element = element.getParent('a');
        }
        element.getElement('img').addClass('active');

        this.setImageTitle(element.get('title'));
        this.setImageContent(element.get('ref'));
        this.setImageSrc(element.get('href'));

        event.stop();
        return false;
    },

    setImageSrc: function(src) {
        var image_wrapper = this.element.getElement('div.image');
        image_wrapper.empty();
        image_wrapper.addClass('loading');

        Asset.image(src, {
            onload: function() {
                image_wrapper.removeClass('loading');

                var img = new Element('img', {
                    'src': src,
                    'styles': {
                        'opacity': 0
                    }
                }).injectInside(image_wrapper);

                new Fx.Tween(img).start('opacity', 1);
            }
        });
    },

    setImageTitle: function(text) {
        this.element.getElement('div.content h2.text').set('html', text);
    },

    setImageContent: function(text) {
        this.element.getElement('div.content div.text').empty();
        this.element.getElement('div.content div.text').set('html', text);
    }
});