// - - - - - lightbox

/*

	To load a page into the LightBox, create some anchor-tag and add the className »sendToLightbox«.
	This script reads options from the anchor tag’s href and rel attributes.
	
	- - - - - - - - - - - - - - -
	
	1) destination
	
	href="http://www.foo.com"
	
	The page foo.com will be loaded into the LightBox.
	
	- - - - - - - - - - - - - - -
	
	2) title, width and height
	
	rel="My pretty LightBox window,800,600"
	
	Seperate title, width and height by comma. Width and heigh are optional.
	If no value is given, title is blank and default values will be used for width and height.

*/

var LightBox = new Class({

	initialize: function() {
	
		// get all elements that have "btnLightbox"-class
		this.lbTriggers = $$('.sendToLightbox');
		
		// add event to each trigger
		for (var i=0; i < this.lbTriggers.length; i++) {
			this.lbTriggers[i].addEvent('click', this.createLightbox);
		}
		
	},
	
	createLightbox: function() {
		
		// get lightbox destination
		this.lbDest = this.getAttribute('href');
		
		// default lightbox options
		this.lbTitle = '';
		this.lbBoxWidth = 705+'px';
		this.lbBoxHeight = 675+'px';
		this.lbFrameWidth = parseInt(this.lbBoxWidth)-20+'px';
		this.lbFrameHeight = parseInt(this.lbBoxHeight)-85+'px';
		
		// get lightbox options
		if (this.getAttribute('rel')) {
			this.options = this.getAttribute('rel').split(",");
			if (this.options[0]) this.lbTitle = this.options[0];
			if (this.options[1]) {
				this.lbBoxWidth = this.options[1]+'px';
				this.lbFrameWidth = this.options[1]-20+'px';
			}
			if (this.options[2]) {
				this.lbBoxHeight = this.options[2]+'px';
				this.lbFrameHeight = this.options[2]-85+'px';
			}
		}
		
		// get window scroll position for lightbox offset
		this.lbOffset = window.getScroll().y+10+'px';
		
		if($('lbBox')) {
			$('lb').setAttribute('src', this.lbDest);
		} else {

			// create layer to cover page
			this.lbLayer = new Element('div', {
				'id': 'lbLayer',
				'styles': {
					'opacity': '0.7'
				}
			});
			
			// create positioning box to hold iframe
			this.lbBox = new Element('div', {
				'id': 'lbBox',
				'styles': {
					'top': this.lbOffset,
					'left': '50%',
					'margin': '0 0 0 -'+parseInt(this.lbBoxWidth)/2+'px',
					'width': this.lbBoxWidth,
					'height': this.lbBoxHeight
				}
			});
			
			// create lightbox header
			this.lbHeader = new Element('div', {
				'id': 'lbHeader'
			});
			
			// create lightbox headline
			this.lbHeadline = new Element('h1', {
				'html': this.lbTitle
			});
			
			// create close button
			this.lbCloseBtn = new Element('a', {
				'id': 'lb-close',
				'events': {
					'click': function(){
						$('lbLayer').fade('out');
						$('lbBox').fade('out');
						(function() {
							$('lbLayer').dispose();
							$('lbBox').dispose();
						}).delay(700);
					}
				}
			});
			
			// create iframe
			this.lbFrame = new Element('iframe', {
				'id': 'lbFrame',
				'name': 'lightboxFrame',
				'styles': {
					'width': this.lbFrameWidth,
					'height': this.lbFrameHeight
				},
				'src': this.lbDest
			});
		
			// append elements to document
			document.body.appendChild(this.lbBox).set('opacity',0);
			this.lbHeader.adopt(this.lbHeadline, this.lbCloseBtn);
			this.lbBox.adopt(this.lbHeader, this.lbFrame);
			this.lbBox.fade('in');
			document.body.appendChild(this.lbLayer).set('opacity',0).fade(0.7);
			this.lbLayer.setStyle('height',document.body.getScrollSize().y);
		}
		
		// prevent default link action
		return false;
	
	}

});