var bootzBox = new Class({
	options: {
		id: 'bootzbox',
		type: 'content',
		galleryType: 'fade',
		content: '',
		currentImage: 0,
		hazeOpacity: '0.75'
	},
	initialize: function(options) {
		// Set the local options through mootools options class
		this.setOptions(options);
		this.timer = null;
		
		// Create the elements
		this.haze = new Element('div', {'class': this.options.id+'-haze', 'styles': {'display': 'none', 'opacity': this.options.hazeOpacity}});
		this.container = new Element('div', {'class': this.options.id+'-container',
											 'styles': { 'display': 'none' }
		});
		this.content = new Element('div', {'class': this.options.id+'-content'});
		
		// Set the divs content
		switch($type(this.options.content)) {
			case 'element':
				var theClone = $(this.options.content).clone(true);
				this.content.adopt(theClone);
				theClone.setStyle('display', 'block');
				break;
			default:
				this.content.set('html', this.options.content);
				break;
		}
		
		this.container.adopt(this.content);	
		
		var parent = this;
		
		// Check if it's a picture gallery...
		if (this.options.type == 'gallery') {
			this.previous = new Element('div', {'class': this.options.id+'-previous', 'styles': {'display': 'none'}});
			this.next = new Element('div', {'class': this.options.id+'-next'});
			
			// Hide all images
			this.content.getElements('img').setStyles({'display': 'none',
													   'position': 'absolute',
													   'top': '0px',
													   'left': '0px'});
			
		    var imageArray = this.content.getElements('img');
			this.container.adopt(this.previous);
			
			if (imageArray.length > 1) {
				this.container.adopt(this.next);
			}
			
			this.next.addEvent('click', function() {
				parent.nextImage();
			});
			this.previous.addEvent('click', function() {
				parent.previousImage();
			});
		}
		
		// Add click/close event to the haze div
		this.haze.addEvent('click', function() {
			parent.hide();
		});
		
		// Adopt the divs into the body		
		$(document.body).adopt(this.haze);
		$(document.body).adopt(this.container);
		
		// Calculate the div into the center of the page
		var containerWidth = this.container.getDimensions().width;
		var containerHeight = this.container.getDimensions().height;
		var newLeft = Math.round(((getWidth() / 2) - (containerWidth / 2)) + $(document.body).getScroll().x);
		var newTop = Math.round(((getHeight() / 2) - (containerHeight / 2)) + $(document.body).getScroll().y);
		this.options.oldLeft = newLeft;
		this.options.oldTop = newTop;
		this.container.setStyles({'left': newLeft,
								  'top': newTop});
		
		// Keep it centered ;)	  
		this.timer = this.watchResize.periodical(200, this);
	},
	watchResize: function() {
		var containerWidth = this.container.getDimensions().width;
		var containerHeight = this.container.getDimensions().height;
		var newLeft = Math.round(((getWidth() / 2) - (containerWidth / 2)) + $(document.body).getScroll().x);
		var newTop = Math.round(((getHeight() / 2) - (containerHeight / 2)) + $(document.body).getScroll().y);
		
		if (this.options.oldLeft != newLeft || this.options.oldTop != newTop) {
			this.options.oldLeft = newLeft;
			this.options.oldTop = newTop;
			this.container.setStyles({'left': newLeft,
								  	  'top': newTop});
			this.haze.setStyles({'width': getScrollWidth(),
								 'height': getScrollHeight()});
		}
	},
	show: function() {
		this.haze.setStyles({'width': getScrollWidth(),
								 'height': getScrollHeight()});
		this.haze.setStyle('display', 'block');
		this.container.setStyle('display', 'block');	
		if (this.options.type == 'gallery') {
			this.next.setStyle('display', 'block');
			this.previous.setStyle('display', 'none');
			this.content.getElements('img').setStyle('display', 'none');
			this.options.currentImage = 0;
			this.content.getElements('img')[0].setStyle('display', 'block');	
			this.content.getElements('img')[0].setStyle('opacity', 1);	
		}
	},
	hide: function() {
		this.haze.setStyle('display', 'none');
		this.container.setStyle('display', 'none');	
		this.content.destroy();
		this.container.destroy();
		$clear(this.timer);
	},
	nextImage: function() {
		var imageArray = this.content.getElements('img');
		var currentImage = this.options.currentImage;
		this.previous.setStyle('display', 'block');
		
		if ((this.options.currentImage+1) >= (imageArray.length-1)) {
			this.next.setStyle('display', 'none');
		} 
		
		this.options.currentImage += 1;

		if (this.options.galleryType == 'fade') {
			this.fade(imageArray[currentImage], 'out');
			this.fade(imageArray[this.options.currentImage], 'in');
		} else {
			imageArray[currentImage].setStyle('display', 'none');
			imageArray[this.options.currentImage].setStyle('display', 'block');	
		}
	},
	previousImage: function() {
		var imageArray = this.content.getElements('img');
		this.next.setStyle('display', 'block');
		var currentImage = this.options.currentImage;
		
		if (this.options.currentImage == 1) {
			this.previous.setStyle('display', 'none');	
		}
				
		if (this.options.galleryType == 'fade') {
			this.fade(imageArray[currentImage], 'out');
			this.options.currentImage -= 1;
			this.fade(imageArray[this.options.currentImage], 'in');
		} else {
			imageArray[currentImage].setStyle('display', 'none');
			this.options.currentImage -= 1;
			imageArray[this.options.currentImage].setStyle('display', 'block');
		}	
	},
	fade: function(el, type) {
		var morpher;
		if (!el.retrieve('morpher')) {
			el.store('morpher', new Fx.Morph(el, {link: 'cancel',
											      onComplete: function(img) { 
											      	if (img.getStyle('opacity') == 0) {
											      		 img.setStyle('display', 'none'); 
											      	} 
											      }
												 }
											)
					);
		}
		
		morpher = el.retrieve('morpher');
		
		if (type == 'out') {
			morpher.start({'opacity': [1,0]});
		} else {
			el.setStyle('opacity', 0);
			el.setStyle('display', 'block');
			morpher.start({'opacity': [0,1]});	
		}	
	}
});
bootzBox.implement(new Events);
bootzBox.implement(new Options);