/**
 * Lightbox
 * 
 * 
 * @category JavaScript/Ext
 * @package Mxc
 * @copyright Copyright (c) 2009 MaxServ B.V. Netherlands
 *            (http://www.maxserv.com)
 * @license Commercial
 * @author Arno Schoon (arno@maxserv.nl)
 * @description This script can display images or other content on a website in a lightbox
 * @version 1.0
 * @requires ExtJs 3.x library
 */

Ext.namespace('Mxc');

Mxc.Lightbox = (function(){
	var selectors = [];
	var gallery = null;
	var index = 0;
	var els = {};
	var config = {
			labels: {
				close: 'Sluiten',
				imageNum: 'Afbeelding {0} van {1}'
			},
			borderWidth: 12,
			titleSeparator: '::'
	};
	
	return {
		init: function(){
			els.overlay = Ext.getBody().createChild({cls: 'mxc-lightbox-overlay'}).enableDisplayMode().hide();
			els.overlay.on('click', this.close, {scope: this});
			
			els.outerContainer = Ext.getBody().createChild({cls: 'mxc-lightbox-outerContainer'}).hide();
			
			els.innerContainer = els.outerContainer.createChild({cls: 'mxc-lightbox-innerContainer'}).hide();
			
			els.dataContainer = els.outerContainer.createChild({cls: 'mxc-lightbox-dataContainer'}).hide();
			els.title = els.dataContainer.createChild({tag: 'span', cls: 'mxc-lightbox-title'});
			els.caption = els.dataContainer.createChild({tag: 'span', cls: 'mxc-lightbox-caption'});
			els.imageNum = els.dataContainer.createChild({tag: 'span', cls: 'mxc-lightbox-imageNum'});

			els.prevButton = els.outerContainer.createChild({tag: 'a', cls: 'mxc-lightbox-prevButton', html: 'prev', href: '#'}).hide();
			els.prevButton.on('click', this.prev, {scope: this});
			els.nextButton = els.outerContainer.createChild({tag: 'a', cls: 'mxc-lightbox-nextButton', html: 'next', href: '#'}).hide();
			els.nextButton.on('click', this.next, {scope: this});
			
			els.closeButton = els.dataContainer.createChild({tag: 'a', cls: 'mxc-lightbox-closeButton', html: config.labels.close, href: '#'});
			els.closeButton.on('click', this.close, {scope: 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.show(target, sel, group);
                    }
                }, this);
            }
        },
        
        show: function(t, s, g){
        	switch(t.rel){
        		case 'ajax':
        			Ext.Ajax.request({
        				url: t.href,
        				success: function(res, req){
        					var ctn = {html: res.responseText, cls: 'mxc-lightbox-ajax-response'};
        					var ne = els.innerContainer.hide().update().createChild(ctn);
        					this.open(ne);
        				},
        				scope: this
        			});
        		break;
        		case 'image':
        		default:
        			var img = {tag: 'img', src: t.href};
        			els.innerContainer.hide().update().createChild(img).on('load', function(e,t){
        				e.preventDefault();
        				var ne = Ext.get(t);
        				this.open(ne);
        			}, this); 
        		//var ne = els.innerContainer.hide().update().createChild(img);
        		//this.open(ne);
        	}
        	
        	els.title.update();
        	els.caption.update();
        	
        	if(!Ext.isEmpty(t.title)){
        		var a = t.title.split(config.titleSeparator);

        		els.title.update(a[0].trim());
        		if(!Ext.isEmpty(a[1])) els.caption.update(a[1].trim());
        	}
        	
        	if(!Ext.isEmpty(s) && g && t.rel != 'ajax'){
        		gallery = Ext.select(s);
        		
        		gallery.each(function(e,c,i){
        			if(e.dom.href == t.href) index = i;
        		}, this);
        	} else if(!Ext.isEmpty(s) && t.rel == 'ajax'){
        		gallery = null;
        	}
        },
        
        open: function(e){
        	var w = e.getWidth();
        	var h = e.getHeight();
        	if(!els.overlay.isVisible()){
        		els.overlay.setHeight((Ext.lib.Dom.getViewportHeight()) + 'px').setTop(Ext.get(document).getScroll().top + 'px').fadeIn({
        			easing: 'easeIn',
        			endOpacity: 0.8,
        			callback: function(){
        				this.resize(w,h);
        			},
        			scope: this
        		});
        		
        		Ext.get(document).on(Ext.isIE ? 'mousewheel' : 'scroll', function(){
        			els.overlay.setTop(Ext.get(document).getScroll().top + 'px');
        		}, this);
        	} else {
        		this.resize(w,h);
        	}
        },
        
        resize: function(w,h){   
        	els.dataContainer.hide();
        	
        	var lightboxTop = (Ext.get(document).getScroll().top + Ext.lib.Dom.getViewportHeight() / 10);
            var lightboxLeft = (Ext.lib.Dom.getViewportWidth() / 2) - (w / 2);
            els.outerContainer.setStyle({
                top: lightboxTop + 'px',
                left: lightboxLeft + 'px',
            	padding: config.borderWidth + 'px'
            }).show();
            
            var wCur = els.outerContainer.getWidth();
            var hCur = els.outerContainer.getHeight();

            var wNew = (w + config.borderWidth * 2);
            var hNew = (h + config.borderWidth * 2);

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

            els.prevButton.setStyle({width: (w / 2) + 'px', height: h + 'px'});
            els.nextButton.setStyle({width: (w / 2) + 'px', height: h + 'px'});

            if (hDiff != 0 || wDiff != 0) {
                els.outerContainer.scale(wNew, hNew, {
                	easing: 'easeOut', 
                	duration: (3 * 0.15),
                	callback: function(){
                		els.innerContainer.show({
                			easing: 'easeIn',
                			duration: 0.35,
                			callback: function(){
                				var h = els.outerContainer.getHeight() + els.dataContainer.getHeight();
                				els.outerContainer.shift({
                					height: h,
                					easing: 'easeOut',
                					duration: (3 * 0.15),
                					callback: function(){
                						els.dataContainer.show(true);
                			        	
                			        	if(Ext.isObject(gallery)){
                			        		if(index > 0){
                			        			els.prevButton.show();
                			        		} else {
                			        			els.prevButton.hide();
                			        		}
                			        		if(gallery.getCount()-1 > index){
                			        			els.nextButton.show();
                			        		} else {
                			        			els.nextButton.hide();
                			        		}
                			        	}
                					},
                					scope: this
                				});
                			},
                			scope: this
                		});
                	}
                });
            } else {
            	els.innerContainer.show(true);
            }
        },
        
        prev: function(ev){
        	ev.preventDefault();
        	
        	if(Ext.isObject(gallery) && index != 0){
        		index--;
        		this.scope.show(gallery.item(index).dom);
        	}
        },
        
        next: function(ev){
        	ev.preventDefault();
        	
        	if(Ext.isObject(gallery) && index != gallery.getCount()-1){
        		index++;
        		this.scope.show(gallery.item(index).dom);
        	}
        },
        
        close: function(ev){
        	ev.preventDefault();

        	els.prevButton.hide();
        	els.nextButton.hide();
        	els.innerContainer.hide();
        	els.dataContainer.hide();
        	
        	els.outerContainer.hide({
        		easing: 'easeOut',
        		duration: 0.35,
        		callback: function(){
        			els.outerContainer.setStyle({
                    	width: 150 + 'px',
                    	height: 150 + 'px'
                	});
        		},
        		scope: this
        	});
        	
        	els.overlay.hide({
        		easing: 'easeOut',
        		duration: 0.35,
        		callback: function(){
        			els.overlay.setTop('0px');
        		},
        		scope: this
        	});
        }
	}
})();

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