Webadmin.LightBox = function() {
    return {
        init: function(options) {
            this.overlay = new Webadmin.Dialogue.Overlay();
            this.dialogue = new Webadmin.Dialogue('lightbox', {
                'height': 'auto',
                'width': 'auto',
                'theme': 'default',
                'draggable': false,
                'content': '<div class="lightbox"><div class="loader"></div><div class="t"><div class="tl"></div><div class="tr"></div></div><div class="image"></div><div class="controls"><span class="caption"></span><a href="#" class="button prev">Previous</a><a href="#" class="button next"></a></div><div class="b"><div class="bl"></div><div class="br"></div></div></div>',
                'close': true
            });
            this.options = options || {};
            this.groups = {};
            this.addListeners();
            Webadmin.Event.onavailable(function() {
                this.image = Webadmin.Dom.getElementsByClassName('image', 'div', this.dialogue.element)[0];
                this.controls = Webadmin.Dom.getElementsByClassName('controls', 'div', this.dialogue.element)[0];
                this.prev = Webadmin.Dom.getElementsByClassName('prev', 'a', this.dialogue.element)[0];
                this.next = Webadmin.Dom.getElementsByClassName('next', 'a', this.dialogue.element)[0];
                this.loader = Webadmin.Dom.getElementsByClassName('loader', 'div', this.dialogue.element)[0];
                this.caption = Webadmin.Dom.getElementsByClassName('caption', 'span', this.dialogue.element)[0];
            }, this);
        },
        addListeners: function() {
            Webadmin.Dom.getElementsByClassName('lightbox', 'a').forEach(function(element) {
                if (element.getAttribute('rel')) {
                    if (!this.groups[element.rel]) {
                        this.groups[element.rel] = [];
                    }
                    this.groups[element.rel].push(element.href);
                }
                if (!element.id) {
                    element.id = Webadmin.Dom.generateId('lightbox_');
                }
                var title = element.getElementsByTagName('img')[0].title || '';
                element.title = title;
                Webadmin.Event.delegate.add(element, 'click', this.show, this);
            }, this);
        },
        show: function(e) {
            e.stop();
            this.e = e;
            var image = this.image.getElementsByTagName('img')[0];

            if (image) {
                var animation = new Webadmin.Animation(image, { end: 'opacity:0' }, 250);
                this.update.subscribe(animation.oncomplete, this);
                animation.animate();
                this.loader.style.display = 'block';
            } else {
                this.dialogue.close.style.display = 'none';
                this.controls.style.display = 'none';
                this.image.style.width = '400px';
                this.image.style.height = '300px';
                this.dialogue.show();
                this.update(e);
            }
        },
        update: function() {
            var e = this.e;
            var el, img, next, prev, rel;
            el = e.target;
            if (el.tagName.toLowerCase() == 'img' || el.tagName.toLowerCase() == 'span') {
                el = el.parentNode;
            }
            rel = el.getAttribute('rel');
            if (rel) {
                var t = document.getElementById(rel);
                if (t) {
                    var title = t.innerHTML;
                }
                var i = this.groups[rel].indexOf(el.href);
                if (i != 0) {
                    var prev = {
                        href: this.groups[rel][i - 1],
                        rel: rel
                    };
                }
                if (i != this.groups[rel].length - 1) {
                    var next = {
                        href: this.groups[rel][i + 1],
                        rel: rel
                    };
                }
            } else {
                next = null;
                prev = null;
            }
            var caption = el.title;
            img = new Image();
            img.onload = function() { Webadmin.LightBox.onload.call(Webadmin.LightBox, img, prev, next, title, caption); }

            var src = el.getAttribute('href');
            var rel = el.getAttribute('rel');
            if (rel) {
                if (el.getAttribute('rel').indexOf('no-cache') != -1) {
                    src += '?time=' + new Date().getTime();
                }
            }

            img.src = src;
            this.overlay.show();
        },
        onload: function(img, prev, next, title, caption) {
            this.dialogue.close.style.display = 'block';
            this.image.style.width = 'auto';
            this.image.style.height = 'auto';
            if (prev || next || caption) {
                this.controls.style.display = 'block';
                Webadmin.Event.listener.purge(this.prev);
                Webadmin.Event.listener.purge(this.next);
                if (prev) {
                    this.prev.style.display = 'block';
                    this.prev.href = prev.href;
                    this.prev.rel = prev.rel;
                    Webadmin.Event.listener.add(this.prev, 'click', this.show, this);
                } else {
                    this.prev.style.display = 'none';
                }
                if (next) {
                    this.next.style.display = 'block';
                    this.next.href = next.href;
                    this.next.rel = next.rel;
                    Webadmin.Event.listener.add(this.next, 'click', this.show, this);
                } else {
                    this.next.style.display = 'none';
                }
                if (caption) {
                    this.caption.innerHTML = caption;
                    this.caption.style.display = '';
                } else {
                    this.caption.style.display = 'none';
                }
            } else {
                this.controls.style.display = 'none';
            }
            if (title) {
                this.image.innerHTML = '<h2>' + title + '</h2><img src="' + img.src + '" width="' + img.width + '" height="' + img.height + '" />';
            } else {
                this.image.innerHTML = '<img src="' + img.src + '" width="' + img.width + '" height="' + img.height + '" />';
            }
            var image = this.image.getElementsByTagName('img')[0];
            Webadmin.Dom.setStyle(image, 'opacity', 0);
            this.dialogue.show();
            this.visible = true;
            var animation = new Webadmin.Animation(image, { end: 'opacity:1' }, 250);
            animation.animate();

            var callback = function() {
                this.image.innerHTML = '';
                callback.unsubscribe(this.dialogue.onhide);
                this.overlay.hide();
                this.visible = false;
            }
            callback.subscribe(this.dialogue.onhide, this);
            this.loader.style.display = 'none';
        }
    }
} ();