var AjaxBox = new Class({
	options: {
		width: 300,
		height: 300
	},   
    
    initialize: function(options){
    	this.setOptions(options);
		
		//alle elementen met rel="ajaxOverlay" clickbaar maken
		$$('a').each(function(el, i) {
			if(el.rel && el.rel.contains('AjaxBox')){
				$(el).addEvent('click', function(event) {
					event = new Event(event).stop();
					var relParts = el.rel.split(':');
					//var vidParts = relParts[1].split(',');				
					
					
					this.showOverlay(relParts[1], this.options.width, this.options.height);				
				}.bind(this));		
			}
		}.bind(this));
		
		//achtergrond overlay maken en onClick laten verbergen
 		this.overlay = new Element(
 			'div', 
 			{
 				'id': 'AjaxBoxOverlay', 
 				'styles': {
	 				'display': 'block',
	 				'opacity': 0
	 			}
 			}
 		).injectInside(document.body).addEvent('click', function(event){
 			event = new Event(event).stop();
 			this.hideOverlay();
 		}.bind(this));		
		
		//boxWrapper maken
 		this.wrapper = new Element(
 			'div', 
 			{
 				'id': 'AjaxBoxWrapper', 
 				'styles': {
	 				'display': 'none'
	 			}
 			}
 		).injectInside(document.body).addEvent('click', function(event){
 			event = new Event(event).stop();
 			this.hideOverlay();
 		}.bind(this));		
		
		//box maken
 		this.box = new Element(
 			'div', 
 			{
 				'id': 'AjaxBox', 
 				'styles': {
	 				'display': 'block',
	 				'margin-top': window.getScrollTop() + (window.getHeight() / 15) + 'px',
	 				width: '250px',
	 				height: '250px'
	 			}
 			}
 		).injectInside(this.wrapper).addEvent('click', function(event){
 			event = new Event(event).stop();
 		}.bind(this));	

 		//sluit knop maken
 		this.boxClose = new Element(
 			'div', 
 			{
 				'id': 'AjaxBoxContentClose', 
 				'styles': {
	 				'display': 'block'
	 			}
 			}
 		).injectInside(this.box).addEvent('click', function(event){
 			event = new Event(event).stop();
 			this.hideOverlay();
 		}.bind(this));
	
		//effecten defini?ren
		this.fx = {
			overlay: this.overlay.effects({duration: 200}),
			resize: this.box.effects({duration: 500})
		};						
    },

	showOverlay: function(pageRef, width, height){
		
		var elements = $A(document.getElementsByTagName('object'));
		elements.extend(document.getElementsByTagName(window.ie ? 'select' : 'embed'));
		elements.each(function(el){
			if (open) el.lbBackupStyle = el.style.visibility;
			el.style.visibility = open ? 'hidden' : el.lbBackupStyle;
		});			
		
		//box content maken
 		this.boxContent = new Element(
 			'div', 
 			{
 				'id': 'AjaxBoxContent',
 				'styles': {
	 				'display': 'none',
	 				'width': '480px',
	 				'height': '450px'
	 			}
 			}
 		).injectInside(this.box).addEvent('click', function(event){
 			event = new Event(event).stop();
 		}.bind(this));

		this.wrapper.setStyle('display', 'block');
		var box = this.box;
		var boxBox = this.boxContent;
		var resize = this.fx.resize;
		
 		this.fx.overlay.start({
 			'opacity': 0.8 //nog uit options halen
 		}).chain(function(){
 			resize.start({
 				'width': width + 'px',
 				'height': height + 'px',
 				'margin-top': window.getScrollTop() + (window.getHeight() / 15) + 'px'
 			}).chain(function(){
 			
				var url = 'http://www.yogastudiobreda.nl/templates/default/default/javascript/AjaxBox.php?ref_name=' + pageRef; 		
				boxBox.setStyle('display', 'block');
				
				boxBox.className = 'AjaxBoxLoading';
				
				new Ajax(url, {
					method: 'get',
					update: $('AjaxBoxContent'),
					onComplete: function() {
						boxBox.className = 'AjaxBoxLoaded';
						CSBfleXcroll('AjaxBoxContent');
					}				
				}).request();	
	
 			});
 		});
    },
    
    hideOverlay: function(){		
	
		var elements = $A(document.getElementsByTagName('object'));
		elements.extend(document.getElementsByTagName(window.ie ? 'select' : 'embed'));
		elements.each(function(el){
			if (open) el.lbBackupStyle = el.style.visibility;
			el.style.visibility = open ? 'visible' : el.lbBackupStyle;
		});	   	
		
      this.wrapper.setStyle('display', 'none');
		this.box.setStyles('width: 250px; height: 250px; margin-top: ' + window.getScrollTop() + (window.getHeight() / 15) + 'px');
		this.boxContent.remove();

 		this.fx.overlay.start({
 			'opacity': 0
 		});    	
    }
});
AjaxBox.implement(new Options); 
window.addEvent('domready', function(){
	AjaxBox = new AjaxBox({
		width: 500,
		height: 500
	});
});