    /*!
     * Ext JS Library 3.3.0
     * Copyright(c) 2006-2010 Ext JS, Inc.
     * licensing@extjs.com
     * http://www.extjs.com/license
     */
    Ext.ns('Ext.ux');

    Ext.ux.Lightbox = (function(){
        var els = {},
            images = [],
            activeImage,
            initialized = false,
            selectors = [];

        return {
            overlayOpacity: 0.85,
            animate: true,
            resizeSpeed: 8,
            borderSize: 10,
            labelImage: "Image",
            labelOf: "of",

            init: function() {
                this.resizeDuration = this.animate ? ((11 - this.resizeSpeed) * 0.15) : 0;
                this.overlayDuration = this.animate ? 0.2 : 0;

                if(!initialized) {
                    Ext.apply(this, Ext.util.Observable.prototype);
                    Ext.util.Observable.constructor.call(this);
                    this.addEvents('open', 'close');
                    this.initMarkup();
                    this.initEvents();
                    initialized = true;
                }
            },

            initMarkup: function() {
                els.shim = Ext.DomHelper.append(document.body, {
                    tag: 'iframe',
                    id: 'ux-lightbox-shim'
                }, true);
                els.overlay = Ext.DomHelper.append(document.body, {
                    id: 'ux-lightbox-overlay'
                }, true);

                var lightboxTpl = new Ext.Template(this.getTemplate());
                els.lightbox = lightboxTpl.append(document.body, {}, true);

                var ids =
                    ['outerImageContainer', 'imageContainer', 'image', 'hoverNav', 'navPrev', 'navNext', 'loading', 'loadingLink',
                    'outerDataContainer', 'dataContainer', 'data', 'details', 'caption', 'imageNumber', 'bottomNav', 'navClose'];

                Ext.each(ids, function(id){
                    els[id] = Ext.get('ux-lightbox-' + id);
                });

                Ext.each([els.overlay, els.lightbox, els.shim], function(el){
                    el.setVisibilityMode(Ext.Element.DISPLAY)
                    el.hide();
                });

                var size = (this.animate ? 250 : 1) + 'px';
                els.outerImageContainer.setStyle({
                    width: size,
                    height: size
                });
            },

            getTemplate : function() {
                return [
                    '',
                        '',
                            '',
                                '',
                                '',
                                '',
                                    '',
                                '',
                            '',
                        '',
                        '',
                            '',
                                '',
                                    '',
                                        '',
                                        '',
                                    '',
                                    '',
                                '',
                            '',
                        '',
                    ''
                ];
            },

            initEvents: function() {
                var close = function(ev) {
                    ev.preventDefault();
                    this.close();
                };

                els.overlay.on('click', close, this);
                els.loadingLink.on('click', close, this);
                els.navClose.on('click', close, this);

                els.lightbox.on('click', function(ev) {
                    if(ev.getTarget().id == 'ux-lightbox') {
                        this.close();
                    }
                }, this);

                els.navPrev.on('click', function(ev) {
                    ev.preventDefault();
                    this.setImage(activeImage - 1);
                }, this);

                els.navNext.on('click', function(ev) {
                    ev.preventDefault();
                    this.setImage(activeImage + 1);
                }, this);
            },

            register: function(sel, group) {
                if(selectors.indexOf(sel) === -1) {
                    selectors.push(sel);

                    Ext.fly(document).on('click', function(ev){
                        var target = ev.getTarget(sel);

                        if (target) {
                            ev.preventDefault();
                            this.open(target, sel, group);
                        }
                    }, this);
                }
            },

            open: function(image, sel, group) {
                group = group || false;
                this.setViewSize();
                els.overlay.fadeIn({
                    duration: this.overlayDuration,
                    endOpacity: this.overlayOpacity,
                    callback: function() {
                        images = [];

                        var index = 0;
                        if(!group) {
                            images.push([image.href, image.title]);
                        }
                        else {
                            var setItems = Ext.query(sel);
                            Ext.each(setItems, function(item) {
                                if(item.href) {
                                    images.push([item.href, item.title]);
                                }
                            });

                            while (images[index][0] != image.href) {
                                index++;
                            }
                        }

                        // calculate top and left offset for the lightbox
                        var pageScroll = Ext.fly(document).getScroll();

                        var lightboxTop = pageScroll.top + (Ext.lib.Dom.getViewportHeight() / 10);
                        var lightboxLeft = pageScroll.left;
                        els.lightbox.setStyle({
                            top: lightboxTop + 'px',
                            left: lightboxLeft + 'px'
                        }).show();

                        this.setImage(index);

                        this.fireEvent('open', images[index]);
                    },
                    scope: this
                });
            },

            setViewSize: function(){
                var viewSize = this.getViewSize();
                els.overlay.setStyle({
                    width: viewSize[0] + 'px',
                    height: viewSize[1] + 'px'
                });
                els.shim.setStyle({
                    width: viewSize[0] + 'px',
                    height: viewSize[1] + 'px'
                }).show();
            },

            setImage: function(index){
                activeImage = index;

                this.disableKeyNav();
                if (this.animate) {
                    els.loading.show();
                }

                els.image.hide();
                els.hoverNav.hide();
                els.navPrev.hide();
                els.navNext.hide();
                els.dataContainer.setOpacity(0.0001);
                els.imageNumber.hide();

                var preload = new Image();
                preload.onload = (function(){
                    els.image.dom.src = images[activeImage][0];
                    this.resizeImage(preload.width, preload.height);
                }).createDelegate(this);
                preload.src = images[activeImage][0];
            },

            resizeImage: function(w, h){
                var wCur = els.outerImageContainer.getWidth();
                var hCur = els.outerImageContainer.getHeight();

                var wNew = (w + this.borderSize * 2);
                var hNew = (h + this.borderSize * 2);

                var wDiff = wCur - wNew;
                var hDiff = hCur - hNew;

                var afterResize = function(){
                    els.hoverNav.setWidth(els.imageContainer.getWidth() + 'px');

                    els.navPrev.setHeight(h + 'px');
                    els.navNext.setHeight(h + 'px');

                    els.outerDataContainer.setWidth(wNew + 'px');

                    this.showImage();
                };

                if (hDiff != 0 || wDiff != 0) {
                    els.outerImageContainer.shift({
                        height: hNew,
                        width: wNew,
                        duration: this.resizeDuration,
                        scope: this,
                        callback: afterResize,
                        delay: 50
                    });
                }
                else {
                    afterResize.call(this);
                }
            },

            showImage: function(){
                els.loading.hide();
                els.image.fadeIn({
                    duration: this.resizeDuration,
                    scope: this,
                    callback: function(){
                        this.updateDetails();
                    }
                });
                this.preloadImages();
            },

            updateDetails: function(){
                var detailsWidth = els.data.getWidth(true) - els.navClose.getWidth() - 10;
                els.details.setWidth((detailsWidth > 0 ? detailsWidth : 0) + 'px');

                els.caption.update(images[activeImage][1]);

                els.caption.show();
                if (images.length > 1) {
                    els.imageNumber.update(this.labelImage + ' ' + (activeImage + 1) + ' ' + this.labelOf + '  ' + images.length);
                    els.imageNumber.show();
                }

                els.dataContainer.fadeIn({
                    duration: this.resizeDuration/2,
                    scope: this,
                    callback: function() {
                        var viewSize = this.getViewSize();
                        els.overlay.setHeight(viewSize[1] + 'px');
                        this.updateNav();
                    }
                });
            },

            updateNav: function(){
                this.enableKeyNav();

                els.hoverNav.show();

                // if not first image in set, display prev image button
                if (activeImage > 0)
                    els.navPrev.show();

                // if not last image in set, display next image button
                if (activeImage < (images.length - 1))
                    els.navNext.show();
            },

            enableKeyNav: function() {
                Ext.fly(document).on('keydown', this.keyNavAction, this);
            },

            disableKeyNav: function() {
                Ext.fly(document).un('keydown', this.keyNavAction, this);
            },

            keyNavAction: function(ev) {
                var keyCode = ev.getKey();

                if (
                    keyCode == 88 || // x
                    keyCode == 67 || // c
                    keyCode == 27
                ) {
                    this.close();
                }
                else if (keyCode == 80 || keyCode == 37){ // display previous image
                    if (activeImage != 0){
                        this.setImage(activeImage - 1);
                    }
                }
                else if (keyCode == 78 || keyCode == 39){ // display next image
                    if (activeImage != (images.length - 1)){
                        this.setImage(activeImage + 1);
                    }
                }
            },

            preloadImages: function(){
                var next, prev;
                if (images.length > activeImage + 1) {
                    next = new Image();
                    next.src = images[activeImage + 1][0];
                }
                if (activeImage > 0) {
                    prev = new Image();
                    prev.src = images[activeImage - 1][0];
                }
            },

            close: function(){
                this.disableKeyNav();
                els.lightbox.hide();
                els.overlay.fadeOut({
                    duration: this.overlayDuration
                });
                els.shim.hide();
                this.fireEvent('close', activeImage);
            },

            getViewSize: function() {
                return [Ext.lib.Dom.getViewWidth(), Ext.lib.Dom.getViewHeight()];
            }
        }
    })();

    Ext.onReady(Ext.ux.Lightbox.init, Ext.ux.Lightbox);