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