WordPressGallery.Lightbox = new Class({
	
	Extends: WordPressGallery.Multi,
	
		options: {
			galleryOptions: {
				autoStart: false,
				elementAttributes: {
					'class': 'transition:crossFade duration:500'
				}
			}
		},

	initialize: function(options){
		this.setOptions(options);
		this.currentGallery = false;
		this.overlay = new Overlay(document.body,{
			id: 'overlay',
			color: '',
			duration: 300,
			opacity: 1,
			onClick: function() {
				this.overlay.close();
			}.bind(this),
			onOpen: function(){
				this.overlay.overlay.setStyle('display', 'block');
			}.bind(this),
			onHide: function(){
				this.overlay.overlay.setStyle('display', 'none');
				this.currentGallery.element.hide();
			}.bind(this)
		});
		this.overlay.overlay.pin();
		
		this.parent(options);
		this.processElements();
		this.buildNavigation();
	},
	
	processElements: function(){
		this.elements.each(function(element, index){
			this.attachTrigger(this.findTrigger(element), element).moveElement(element);
		}, this);
		return this;
	},
	
	findTrigger: function(element){
		return element.retrieve('gallery').storeHouse.oldAnchors[0];
	},
	
	attachTrigger: function(trigger, element){
		trigger
		.addClass('gallery-trigger')
		.inject(element.getParent(), 'top')
		.store('gallery', element).addEvent('click', function(event){
			if(event) event.stop();

			this.currentGallery = trigger.retrieve('gallery').show().retrieve('gallery');
			this.overlay.open();
		
		}.bind(this));
		return this;
	},
	
	injectTrigger: function(trigger){
		trigger.inject()
		return this;
	},
	
	moveElement: function(element){
		element.hide().dispose().inject(this.overlay.overlay);
		return this;
	},
	
	buildNavigation: function(){
		
		var navigation = new Element('div',{
			'id': 'gallery-navigation'
		});
			
		var previous = new Element('button',{
			'id': 'previous-button',
			'class': 'gallery-button',
			'html': '« previous'
		}).addEvent('click',function(event){
			event.stop();
			this.currentGallery.showPrevious();
		}.bind(this)).inject(navigation);
		
		var next = new Element('button',{
			'id': 'next-button',
			'class': 'gallery-button',
			'html': 'next »'
		}).addEvent('click',function(event){
			event.stop();
			this.currentGallery.showNext();
		}.bind(this)).inject(navigation);
		
		var close = new Element('button',{
			'id': 'close-button',
			'class': 'gallery-button',
			'html': 'close X'
		}).addEvent('click',function(event){
			event.stop();
			this.overlay.close();
		}.bind(this)).inject(navigation);
		
		
		navigation.inject(this.overlay.overlay);
		
		return this;
	}

});