/*
 * BWSO Lightbox is based on:
 * Ext Core Library Examples 3.0
 * http://extjs.com/
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * 
 * The MIT License
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 * 
 */

Ext.ns('BWSO.extcore');

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

    return {
        overlayOpacity: 0.6,
        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: 'bwso-lb-shim'
            }, true);
            els.overlay = Ext.DomHelper.append(document.body, {
                id: 'bwso-lb-overlay'
            }, true);
            
            var lightboxTpl = new Ext.Template(this.getTemplate());

	        els.lightbox = lightboxTpl.append(document.body, {}, true);

            var ids = 'imgOuter imgInner img loading loadingLink dataOuter dataInner nav navPrev navNext details caption imgNumber close closeBtn';

            Ext.each(ids.split(' '), function(id){
                els[id] = Ext.get('bwso-lb-' + id);
	            els[id].visibilityMode = Ext.Element.DISPLAY;
            });

            els.overlay.visibilityMode = Ext.Element.DISPLAY;
            els.shim.visibilityMode = Ext.Element.DISPLAY;
            els.lightbox.visibilityMode = Ext.Element.DISPLAY;

            els.overlay.hide();
            els.shim.hide();
            els.lightbox.hide();


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

		getTemplate : function() {
            return [
                '<div id="bwso-lb">',
                    '<div id="bwso-lb-imgOuter">',
                        '<div id="bwso-lb-imgInner">',
                            '<img id="bwso-lb-img">',
                            '<div id="bwso-lb-loading">',
                                '<a id="bwso-lb-loadingLink"></a>',
                            '</div>',
                        '</div>',
                    '</div>',
                    '<div id="bwso-lb-dataOuter">',
                        '<div id="bwso-lb-dataInner">',
                            '<div id="bwso-lb-nav">',
                                '<a href="#" id="bwso-lb-navPrev"></a>',
                                '<a href="#" id="bwso-lb-navNext"></a>',
                            '</div>',
							'<div id="bwso-lb-details">',
								'<span id="bwso-lb-caption"></span>',
								'<span id="bwso-lb-imgNumber"></span>',
							'</div>',
							'<div id="bwso-lb-close">',
								'<a href="#" id="bwso-lb-closeBtn"></a>',
							'</div>',
                        '</div>',
                    '</div>',
                '</div>'
            ];
        },

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

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

            els.lightbox.on('click', function(ev) {
                if(ev.getTarget().id == 'bwso-lb') {
                    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(config){
	        config = config || {};
			sel = config.registeredClass || '';
	        group = config.asSet || true;
	        this.labelImage = config.imageTrans || 'Image';
	        this.labelOf = config.ofTrans || 'of';

            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;

            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();

            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
            });
        },

        setImage: function(index){
            activeImage = index;
                      
            this.disableKeyNav();            
            if (this.animate) {
                els.loading.show();
            }

            els.img.hide();
            els.nav.hide();
            els.navPrev.hide();
            els.navNext.hide();
            els.dataInner.setOpacity(0.0001);
            els.imgNumber.hide();

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

        resizeImage: function(width, height){
            var wCur = els.imgOuter.getWidth();
            var hCur = els.imgOuter.getHeight();

            var wNew = (width + this.borderSize * 2);
            var hNew = (height + this.borderSize * 2);

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

            var queueLength = 0;

            if (hDiff != 0 || wDiff != 0) {
                els.imgOuter.syncFx()
                    .shift({
                        height: hNew,
                        duration: this.resizeDuration
                    })
                    .shift({
                        width: wNew,
                        duration: this.resizeDuration
                    });
                queueLength++;
            }

            var timeout = 0;
            if ((hDiff == 0) && (wDiff == 0)) {
                timeout = (Ext.isIE) ? 250 : 100;
            }

            (function(){
                els.dataOuter.setWidth(wNew + 'px');
                this.showImage();
            }).createDelegate(this).defer((this.resizeDuration*1000) + timeout);
        },

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

        updateDetails: function(){
            els.caption.update(images[activeImage][1]);
            els.caption.show();

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

            els.dataInner.syncFx()
                .slideIn('t', {
                    duration: this.resizeDuration/2
                })
                .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.nav.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.img.hide();
	        els.caption.hide();
	        els.details.hide();
			els.nav.hide();
			els.navPrev.hide();
			els.navNext.hide();
			els.imgNumber.hide();
	        els.dataOuter.hide();
	        els.dataInner.hide();
	        els.lightbox.hide();
            els.overlay.fadeOut({
                duration: this.overlayDuration,
	            remove: false
            });
            els.shim.hide();
            this.fireEvent('close', activeImage);
        },

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

Ext.onReady(BWSO.extcore.Lightbox.init, BWSO.extcore.Lightbox);