var VidBox = new Class({
	options: {
		'playerLocation': '',
		'flvFolder': '',
		'autoStart': 'true'
	},   
    
    initialize: function(options){
    	this.setOptions(options);
		
		//alle elementen met rel="vidbox" clickbaar maken
		$$('a').each(function(el, i) {
			if(el.rel && el.rel.contains('vidbox')){
				$(el).addEvent('click', function(event) {
					event = new Event(event).stop();
					var relParts = el.rel.split('--');
					var vidParts = relParts[1].split(',');				
					this.showVideo(el, vidParts[0], vidParts[1], vidParts[2]);				
				}.bind(this));		
			}
		}.bind(this));
		
		//achtergrond overlay maken en onClick laten verbergen
 		this.overlay = new Element(
 			'div', 
 			{
 				'id': 'VidBoxOverlay', 
 				'styles': {
	 				'display': 'block',
	 				'opacity': 0
	 			}
 			}
 		).injectInside(document.body).addEvent('click', function(event){
 			event = new Event(event).stop();
 			this.hideVideo();
 		}.bind(this));		

		//boxWrapper maken
 		this.wrapper = new Element(
 			'div', 
 			{
 				'id': 'VidBoxWrapper', 
 				'styles': {
	 				'display': 'none'
	 			}
 			}
 		).injectInside(document.body).addEvent('click', function(event){
 			event = new Event(event).stop();
 			this.hideVideo();
 		}.bind(this));		
		
		//box maken
 		this.box = new Element(
 			'div', 
 			{
 				'id': 'VidBox', 
 				'styles': {
	 				'display': 'block',
	 				'margin-top': '40px'
	 			}
 			}
 		).injectInside(this.wrapper).addEvent('click', function(event){
 			event = new Event(event).stop();
 		}.bind(this));	

 		//sluit knop maken
 		this.boxClose = new Element(
 			'div', 
 			{
 				'id': 'VidBoxContentClose', 
 				'styles': {
	 				'display': 'block'
	 			}
 			}
 		).injectInside(this.box).addEvent('click', function(event){
 			event = new Event(event).stop();
 			this.hideVideo();
 		}.bind(this));
		
		//box content maken
 		this.boxContent = new Element(
 			'div', 
 			{
 				'id': 'VidBoxContent', 
 				'styles': {
	 				'display': 'block'
	 			}
 			}
 		).injectInside(this.box).addEvent('click', function(event){
 			event = new Event(event).stop();
 		}.bind(this));	
    },

	showVideo: function(el, file, width, height){

		if(vidIsOpen == false){

			this.wrapper.setStyle('display', 'block');
			if($('debug')){
				$('debug').setStyle('display', 'none');
			}
			var box = this.box;
			
			var boxContent = '';
			
			var rtmpParts = file.split(';');
			if(rtmpParts.length > 1){
				file = rtmpParts[0];
				vid_id = rtmpParts[1];
				boxContent = '<embed allowscriptaccess="always" src="' + this.options.playerLocation + '" allowfullscreen="true" flashvars="width=' + width + '&height=' + (height.toInt() + 20).toInt() + '&file=' + this.options.flvFolder + file + '&id=' + vid_id + '&autostart=' + this.options.autoStart + '" width="' + width + '" height="' + (height.toInt() + 20).toInt() + '">';
			}else {
				boxContent = '<embed allowscriptaccess="always" src="' + this.options.playerLocation + '" allowfullscreen="true" flashvars="width=' + width + '&height=' + (height.toInt() + 20).toInt() + '&file=' + this.options.flvFolder + file + '&autostart=' + this.options.autoStart + '" width="' + width + '" height="' + (height.toInt() + 20).toInt() + '">';		
			}
	
			var boxBox = this.boxContent;

			this.overlay.fade(0.8);	
			var myEffect = new Fx.Morph(this.box);
			myEffect.start({
 				'width': width + 'px',
 				'height': (height.toInt() + 40).toInt() + 'px',
 				'margin-top': '40px'
			}).chain(function(){
 				boxBox.set('html', boxContent);	
 			});
						
	 		vidIsOpen = true;
	 	}
    },
    
    hideVideo: function(){		
		
		vidIsOpen = false;
		
		this.wrapper.setStyle('display', 'none');
		this.box.setStyles('width: 0px; height: 0px');
		
		if($('debug')){
			$('debug').setStyle('display', 'block');
		}
		var boxBox = this.boxContent;
		boxBox.set('html', '');

 		this.overlay.fade(0);
    }
});
VidBox.implement(new Options);