var MultiBox = new Class({
	
	getOptions: function(){
		return {
			initialWidth: 250,
			initialHeight: 250,
			container: document.body,
			useOverlay: true,
			contentColor: '#FFF',
			showNumbers: true,
			waitDuration: 2000,
			descClassName: false,
			descMinWidth: 400,
			descMaxWidth: 600,
			movieWidth: 400,
			movieHeight: 200,
			path: '',
			onOpen: Class.empty,
			onClose: Class.empty,
			scroll: 'scroll'
		};
	},

	initialize: function(className, options){
		this.setOptions(this.getOptions(), options);
		
		this.openClosePos = {};
		this.timer = 0;
		this.contentToLoad = {};
		this.index = 0;
		this.opened = false;
		this.contentObj = {};
		this.containerDefaults = {};
		
		if(this.options.useOverlay){
			this.overlay = new Overlay({container: this.options.container});
		}
		this.scroll = this.options.scroll;
		this.content = $$('.'+className);
		if(this.options.descClassName){
			this.descriptions = $$('.'+this.options.descClassName);
			this.descriptions.each(function(el){
				el.setStyle('display', 'none');
			});
		}		
		
		this.container = new Element('div').addClass('MultiBoxContainer').injectInside(this.options.container);
		this.container2 = new Element('div').addClass('MultiBoxContainer2').injectInside(this.options.container);		
		
		this.box = new Element('div').addClass('MultiBoxContent').injectInside(this.container);
		
		this.closeButton = new Element('div').addClass('MultiBoxClose').injectInside(this.container).addEvent('click', function(){
			if (window.location.href.indexOf('helpdoc') > 0 || $('idmodule_1') || $$("#opslaan").length==0 ) {
				this.close();
			} else {
				var answer = confirm("Weet u het zeker? Eventuele wijzigingen gaan verloren.");
				if(answer){
					this.close();
				}
			}
		}.bind(this));
			
		this.content.each(function(el,i){
			el.index = i;
			el.removeEvents().addEvent('click', function(e){
				new Event(e).stop();
				if(el.hasClass('disabledmenu')){
					alert("Kies eerst een menu waarin u een nieuw submenu wilt maken.");
				} 
				else if(el.hasClass('disabledfoto')){
					alert("Kies eerst een galerie waarin u nieuwe foto's wilt plaatsen.");
				}else {					
					var scroll = new Fx.Scroll(window, {
						transition: Fx.Transitions.Quad.easeInOut,
						wait:false						
					});
					//scroll.toTop();
					this.open(el);
				}
			}.bind(this));
			if(el.href.indexOf('#') > -1){
				el.content = $(el.href.substr(el.href.indexOf('#')+1));
				if(el.content){el.content.setStyle('display','none');}
			}
		}, this);
		
		this.containerEffects = new Fx.Styles(this.container, {duration: 300, transition: Fx.Transitions.expoInOut});
		this.containerEffects2 = new Fx.Styles(this.container2, {duration: 300, transition: Fx.Transitions.expoInOut});
		
		this.reset();
	},
	
	setContentType: function(link){
		var str = link.href.substr(link.href.lastIndexOf('.')+1).toLowerCase();
		var contentOptions = {};
		if($chk(link.rel)){
			var optArr = link.rel.split(',');
			optArr.each(function(el){
				var ta = el.split(':');
				contentOptions[ta[0]] = ta[1];
			});
		}
		
		if(contentOptions.type != undefined){
			str = contentOptions.type;
		}
		
		this.contentObj = {};
		this.contentObj.url = link.href;
		this.contentObj.xH = 0;
		
		if(contentOptions.width){
			this.contentObj.width = contentOptions.width;
		}else{
			this.contentObj.width = this.options.movieWidth;
		}
		if(contentOptions.height){
			this.contentObj.height = contentOptions.height;	
		}else{
			this.contentObj.height = this.options.movieHeight;
		}
		if(contentOptions.panel){
			this.panelPosition = contentOptions.panel;
		}else{
			this.panelPosition = this.options.panel;
		}

		if(str.indexOf("image/jpeg") >= 0 ){
			str = 'jpg';
		}
		if(str.indexOf("image/pjpeg") >= 0 ){
			str = 'jpg';
		}
		if(str.indexOf("image/png") >= 0 ){
			str = 'png';
		}
		if(str.indexOf("image/gif") >= 0 ){
			str = 'gif';
		}
		if(str.indexOf("application/x-shockwave-flash") >= 0 ){
			str = 'swf';
		}
		switch(str){			
			case 'jpg':
			case 'gif':
			case 'png':
				this.type = 'image';
				this.scroll = 'hidden';
				break;
			case 'swf':
				this.type = 'flash';
				this.scroll = 'hidden';
				break;
			case 'flv':
				this.type = 'flashVideo';
				break;
			
			case 'mov':
				this.type = 'quicktime';
				break;
			case 'wmv':
				this.type = 'windowsMedia';
				break;
			case 'rv':
			case 'rm':
			case 'rmvb':
				this.type = 'real';
				break;
			case 'mp3':
				this.type = 'flashMp3';
				this.contentObj.width = 320;
				this.contentObj.height = 70;
				break;
			case 'element':
				this.type = 'htmlelement';
				this.elementContent = link.content;
				this.elementContent.setStyles({
					display: 'block',
					opacity: 0
				})
	
				if(this.elementContent.getStyle('width') != 'auto'){
					this.contentObj.width = this.elementContent.getStyle('width');
				}
				
				this.contentObj.height = this.elementContent.getSize().size.y;
				this.elementContent.setStyles({
					display: 'none',
					opacity: 1
				})
				break;
				
			default:
				this.type = 'iframe';	
				this.scroll = 'auto';
				if(contentOptions.height){
					if(str=="video"){
						this.contentObj.height = contentOptions.height;
					} else {
						this.contentObj.height = window.getHeight()-100;
					}
				}
				if(contentOptions.ajax){
					this.scroll = this.options.scroll;
					this.type = 'ajax';
					
					var scr = null;
				    var inn = null;
				    var wNoScroll = 0;
				    var wScroll = 0;

				    // Outer scrolling div
				    scr = document.createElement('div');
				    scr.style.position = 'absolute';
				    scr.style.top = '-1000px';
				    scr.style.left = '-1000px';
				    scr.style.width = '100px';
				    scr.style.height = '50px';
				    // Start with no scrollbar
				    scr.style.overflow = 'hidden';

				    // Inner content div
				    inn = document.createElement('div');
				    inn.style.width = '100%';
				    inn.style.height = '200px';

				    // Put the inner div in the scrolling div
				    scr.appendChild(inn);
				    // Append the scrolling div to the doc
				    document.body.appendChild(scr);

				    // Width of the inner div sans scrollbar
				    wNoScroll = inn.offsetWidth;
				    // Add the scrollbar
				    scr.style.overflow = 'auto';
				    // Width of the inner div width scrollbar
				    wScroll = inn.offsetWidth;

				    // Remove the scrolling div from the doc
				    document.body.removeChild(
				        document.body.lastChild);

				    // Pixel width of the scroller
				    scrollbarWidth = (wNoScroll - wScroll);
					contentWidth = this.contentObj.width;
					if(this.scroll == 'scroll'){
						this.contentObj.width = parseInt(contentWidth) + parseInt(scrollbarWidth);
					} else {
						this.contentObj.width = parseInt(contentWidth);
					}
				}
				break;
		}
	},
	
	reset: function(){
		this.container.setStyles({
			'opacity': 0,
			'display': 'none'
		});
		this.container2.setStyles({
			'opacity': 0,
			'display': 'none'
		});
		this.removeContent();
		this.opened = false;
	},
	
	getOpenClosePos: function(el){
		if(el.getFirst()){
			var w = el.getFirst().getCoordinates().width-(this.container.getStyle('border').toInt()*2);
			if(w < 0){w = 0}
			var h = el.getFirst().getCoordinates().height-(this.container.getStyle('border').toInt()*2);
			if(h < 0){h = 0}
			this.openClosePos = {
				width: w,
				height: h,
				top: el.getFirst().getCoordinates().top,
				left: el.getFirst().getCoordinates().left
			};
		}else{
			var w = el.getCoordinates().width-(this.container.getStyle('border').toInt()*2);
			if(w < 0){w = 0}
			var h = el.getCoordinates().height-(this.container.getStyle('border').toInt()*2);
			if(h < 0){h = 0}
			this.openClosePos = {
				width: w,
				height: h,
				top: el.getCoordinates().top,
				left: el.getCoordinates().left
			};
		}
		return this.openClosePos;
	},
	
	open: function(el){
	
		this.options.onOpen();
	
		this.index = this.content.indexOf(el);
		
		this.openId = el.getProperty('id');
		
		if(!this.opened){
			this.opened = true;
			
			if(this.options.useOverlay){
				this.overlay.show();
			}
			
			this.container.setStyles(this.getOpenClosePos(el));
			this.container.setStyles({
				opacity: 0,
				display: 'block',
				width: this.options.initialWidth,
				height: this.options.initialHeight,
				top: (window.getHeight()/2)-(this.options.initialHeight/2)-this.container.getStyle('border').toInt()+window.getScrollHeight(),
				left: (window.getWidth()/2)-(this.options.initialWidth/2)-this.container.getStyle('border').toInt()
			});
			
			this.container2.setStyles(this.getOpenClosePos(el));
			this.container2.setStyles({
				opacity: 0,
				display: 'block',
				width: this.options.initialWidth,
				height: this.options.initialHeight,
				top: (window.getHeight()/2)-(this.options.initialHeight/2)-this.container2.getStyle('border').toInt()+window.getScrollHeight(),
				left: (window.getWidth()/2)-(this.options.initialWidth/2)-this.container2.getStyle('border').toInt()
			});
			
			this.containerEffects.start({
				opacity: [0, 1]
			});
			
			this.containerEffects2.start({				
				opacity: [0, 0.7]
			});
			
			this.load(this.index);
		
		}else{			
			this.getOpenClosePos(this.content[this.index]);
			this.timer = this.hideContent.bind(this).delay(100);
			this.timer = this.load.pass(this.index, this).delay(300);
			
		}
		
	},
	
	getContent: function(index){
		this.setContentType(this.content[index]);
		var desc = {};
		this.descriptions.each(function(el,i){
			if(el.hasClass(this.openId)){
				desc = el.clone();
			}
		},this);
		this.contentToLoad = {
			title: this.content[index].title,
			desc: desc,
			number: index+1
		};
	},
	
	close: function(){		
		if(this.options.useOverlay){
			this.overlay.hide();
		}
		this.hideContent();
		this.containerEffects.stop();
		this.containerEffects2.stop();
		this.zoomOut.bind(this).delay(1);
		this.options.onClose();		
	},
	
	zoomOut: function(){
		this.containerEffects.start({
			opacity: 0
		});
		this.containerEffects2.start({
			opacity: 0
		});
		this.reset.bind(this).delay(1);
	},
	
	load: function(index){
		this.box.addClass('MultiBoxLoading');
		this.getContent(index);
		if(this.type == 'image'){
			var xH = this.contentObj.xH;
			this.contentObj = new Asset.image(this.content[index].href, {onload: this.resize.bind(this)});
			this.contentObj.xH = xH;
		}else{
			this.resize();
		}
	},
	
	resize: function(){
		var top = (window.getHeight()/2)-((Number(this.contentObj.height)+this.contentObj.xH)/2);
		top=top-20;
		top=top+window.getScrollTop();
		var temp = this.contentObj.width + '';
		if(temp.indexOf("px") >= 0 ){
			left2 = (this.contentObj.width).split("px");
			var newWidth = left2[0];
			left3 = parseInt(left2[0]) + 40;
			var left = (window.getWidth()/2)-(left3/2);
		} else {
			var left = (window.getWidth()/2)-(this.contentObj.width/2);
			var newWidth = this.contentObj.width;
		} 
		if(top < 0){top = 0}
		if(left < 0){left = 0}
		this.containerEffects.stop();
		this.container.setStyles({
			width: newWidth+'px',
			height: Number(this.contentObj.height)+this.contentObj.xH,
			top: top,
			left: left
		});
		this.containerEffects.start({				
			opacity: 1
		});
		this.containerEffects2.stop();
		this.container2.setStyles({
			width: newWidth+'px',
			height: Number(this.contentObj.height)+this.contentObj.xH,
			top: top,
			left: left
		});
		this.containerEffects2.start({				
			opacity: 0.7
		});
		this.timer = this.showContent.bind(this).delay(1);
	},
	
	showContent: function(){
		this.box.removeClass('MultiBoxLoading');
		this.removeContent();
		this.contentContainer = new Element('div').setProperties({id: 'MultiBoxContentContainer'}).setStyles({			
			opacity: 0,
			'overflow-y': this.scroll,
			width: this.contentObj.width,
			'position':'relative',
			height: (Number(this.contentObj.height)+this.contentObj.xH)+'px'
		}).injectInside(this.box);
		
		if(this.type == 'image'){
			this.contentObj.injectInside(this.contentContainer);
			
		}else if(this.type == 'iframe'){
			new Element('iframe').setProperties({
				id: 'iFrame'+new Date().getTime(), 
				width: this.contentObj.width,
				height: this.contentObj.height,
				src: this.contentObj.url,
				frameborder: 0,
				scrolling: 'auto'
			}).injectInside(this.contentContainer);
			
		}else if(this.type == 'htmlelement'){
			this.elementContent.clone().setStyle('display','block').injectInside(this.contentContainer);
			
		}else if(this.type == 'ajax'){
				var rnd = $time() + $random(0, 100);
				new Ajax(this.contentObj.url, {
					method: 'get',
					data: Object.toQueryString({noCache: rnd}),
					update: 'MultiBoxContentContainer',	
					onComplete: this.annuleren.bind(this),
					evalScripts: true,
					autoCancel: true
				}).request();
		}else{
			var obj = this.createEmbedObject().injectInside(this.contentContainer);
			if(this.str != ''){
				$('MultiBoxMediaObject').innerHTML = this.str;
			}
		}
		
		this.contentContainer.setStyles({
			opacity: 1
		});		
	},
	
	annuleren: function(){		
		var akkoord = true;
		if($('annuleren')){
			$('annuleren').addEvent('click', function(){
				var answer = confirm("Weet u het zeker? Eventuele wijzigingen gaan verloren.");
				if(answer){
					this.close();
				}
			}.bind(this));
			if($('empty').timer)clearInterval($('empty').timer);
			var txt = $('empty').innerHTML;
			$('empty').timer = setInterval(function(){
				if($('empty').innerHTML!=txt){				
					if($('empty')){							
						if($('empty').innerHTML.indexOf("script:") > -1){
							var todo = $('empty').innerHTML.split(":");
							var actie = todo[1];
							if(actie=="wijzigSegment()"){
								wijzigSegment();
								akkoord = true;
							}
							if(actie=="menukeuze"){
								alert("De ingevulde menukeuze bestaat al. Kies een unieke naam.");								
								akkoord = false;
							}
							if(actie=="permalink"){
								alert("De ingevulde permalink bestaat al. Kies een unieke naam.");								
								akkoord = false;
							}	
							if(actie=="updateWebMenu"){
								var url = "modules/webmenu/functions.asp";
								var table = document.getElementById('overview');
								var tableDnD = new TableDnD2();
								updateResults(url,tableDnD,table,true);
							}	
							if(actie=="getdata"){
								$("tbody").empty();
								$('tbody').style.display = "none";
								$('meerItems').style.display = "none";
								$('loading').style.display = "block";
								getdata(0);
								akkoord = true;
							}
							if(actie=="close"){
								akkoord = true;	
							}
						} else {
							// kijken of het reeds een JSON module betreft, en dan gebruik maken van getData ipv updateResuls
							var akkoord = true;
							if($('form')) {
								if($('form').hasClass('getData')) {
									$('tbody').empty();
									teller = 0;
									getData(0);
								} else {
									updateResults($('empty').innerHTML);
								}
							}
						}
						if(akkoord){							
							clearInterval($('empty').timer);
							this.close();
						}
						$('empty').empty();
					}
				}
			}.bind(this),100)
		}
	},
	
	hideContent: function(){
		this.removeContent.bind(this);
	},
	
	removeContent: function(){
		if($('MultiBoxMediaObject')){
			$('MultiBoxMediaObject').remove();
		}
		if($('MultiBoxContentContainer')){
			$('MultiBoxContentContainer').remove();	
		}
	},
	
	showControls: function(){
		this.clicked = false;
		
		if(this.container.getStyle('height') != 'auto'){
			this.containerDefaults.height = this.container.getStyle('height')
			this.containerDefaults.backgroundColor = this.options.contentColor;
		}
		
		this.container.setStyles({
			'height': 'auto'
		});
		
		this.container2.setStyles({
			'height': 'auto'
		});
		
		if(this.contentToLoad.number == 1){
			this.previousButton.addClass('MultiBoxPreviousDisabled');
		}else{
			this.previousButton.removeClass('MultiBoxPreviousDisabled');
		}
		if(this.contentToLoad.number == this.content.length){
			this.nextButton.addClass('MultiBoxNextDisabled');
		}else{
			this.nextButton.removeClass('MultiBoxNextDisabled');
		}		
	},
	
	hideControls: function(num){
		this.controlEffects.start({'height': 0}).chain(function(){
			this.container.setStyles(this.containerDefaults);
		}.bind(this));
	},
	
	showThumbnails: function(){
		
	},
	
	next: function(){
		if(this.index < this.content.length-1){
			this.index++;
			this.openId = this.content[this.index].getProperty('id');
			this.hideControls();
			this.getOpenClosePos(this.content[this.index]);
			this.timer = this.hideContent.bind(this).delay(500);
			this.timer = this.load.pass(this.index, this).delay(1100);
		}
	},
	
	previous: function(){
		if(this.index > 0){
			this.index--;
			this.openId = this.content[this.index].getProperty('id');
			this.hideControls();
			this.getOpenClosePos(this.content[this.index]);
			this.timer = this.hideContent.bind(this).delay(500);
			this.timer = this.load.pass(this.index, this).delay(1000);
		}
	},
	
	createEmbedObject: function(){
		if(this.type == 'flash'){
			var url = this.contentObj.url;
			
			var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
			this.str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" '
			this.str += 'width="'+this.contentObj.width+'" ';
			this.str += 'height="'+this.contentObj.height+'" ';
			this.str += 'title="MultiBoxMedia">';
  			this.str += '<param name="movie" value="'+this.options.path+url+'" />'
  			this.str += '<param name="quality" value="high" />';
  			this.str += '<embed src="'+this.options.path+url+'" ';
  			this.str += 'quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" ';
  			this.str += 'width="'+this.contentObj.width+'" ';
  			this.str += 'height="'+this.contentObj.height+'"></embed>';
			this.str += '</object>';
			
		}
		
		if(this.type == 'flashVideo'){
			var url = this.contentObj.url;
			
			var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
			this.str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" '
			this.str += 'width="'+this.contentObj.width+'" ';
			this.str += 'height="'+(Number(this.contentObj.height)+this.contentObj.xH)+'" ';
			this.str += 'title="MultiBoxMedia">';
  			this.str += '<param name="movie" value="'+this.options.path+'flvplayer.swf" />'
  			this.str += '<param name="quality" value="high" />';
  			this.str += '<param name="salign" value="TL" />';
  			this.str += '<param name="scale" value="noScale" />';
  			this.str += '<param name="FlashVars" value="path='+url+'" />';
  			this.str += '<embed src="'+this.options.path+'flvplayer.swf" ';
  			this.str += 'quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" ';
  			this.str += 'width="'+this.contentObj.width+'" ';
  			this.str += 'height="'+(Number(this.contentObj.height)+this.contentObj.xH)+'"';
  			this.str += 'salign="TL" ';
  			this.str += 'scale="noScale" ';
  			this.str += 'FlashVars="path='+url+'"';
  			this.str += '></embed>';
			this.str += '</object>';
		}
		
		if(this.type == 'flashMp3'){
			var url = this.contentObj.url;
			
			var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
			this.str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" '
			this.str += 'width="'+this.contentObj.width+'" ';
			this.str += 'height="'+this.contentObj.height+'" ';
			this.str += 'title="MultiBoxMedia">';
  			this.str += '<param name="movie" value="'+this.options.path+'mp3player.swf" />'
  			this.str += '<param name="quality" value="high" />';
  			this.str += '<param name="salign" value="TL" />';
  			this.str += '<param name="scale" value="noScale" />';
  			this.str += '<param name="FlashVars" value="path='+url+'" />';
  			this.str += '<embed src="'+this.options.path+'mp3player.swf" ';
  			this.str += 'quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" ';
  			this.str += 'width="'+this.contentObj.width+'" ';
  			this.str += 'height="'+this.contentObj.height+'"';
  			this.str += 'salign="TL" ';
  			this.str += 'scale="noScale" ';
  			this.str += 'FlashVars="path='+url+'"';
  			this.str += '></embed>';
			this.str += '</object>';
		}
		
		if(this.type == 'quicktime'){
			var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
			this.str = '<object  type="video/quicktime" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"';
			this.str += ' width="'+this.contentObj.width+'" height="'+this.contentObj.height+'">';
			this.str += '<param name="src" value="'+this.contentObj.url+'" />';
			this.str += '<param name="autoplay" value="true" />';
			this.str += '<param name="controller" value="true" />';
			this.str += '<param name="enablejavascript" value="true" />';
			this.str += '<embed src="'+this.contentObj.url+'" autoplay="true" pluginspage="http://www.apple.com/quicktime/download/" width="'+this.contentObj.width+'" height="'+this.contentObj.height+'"></embed>';
			this.str += '<object/>';			
		}
		
		if(this.type == 'windowsMedia'){
			var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
			this.str = '<object  type="application/x-oleobject" classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"';
			this.str += ' width="'+this.contentObj.width+'" height="'+this.contentObj.height+'">';
			this.str += '<param name="filename" value="'+this.contentObj.url+'" />';
			this.str += '<param name="Showcontrols" value="true" />';
			this.str += '<param name="autoStart" value="true" />';
			this.str += '<embed type="application/x-mplayer2" src="'+this.contentObj.url+'" Showcontrols="true" autoStart="true" width="'+this.contentObj.width+'" height="'+this.contentObj.height+'"></embed>';
			this.str += '<object/>';			
		}
		
		if(this.type == 'real'){
			var obj = new Element('div').setProperties({id: 'MultiBoxMediaObject'});
			this.str = '<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"';
			this.str += ' width="'+this.contentObj.width+'" height="'+this.contentObj.height+'">';
			this.str += '<param name="src" value="'+this.contentObj.url+'" />';
			this.str += '<param name="controls" value="ImageWindow" />';
			this.str += '<param name="autostart" value="true" />';
			this.str += '<embed src="'+this.contentObj.url+'" controls="ImageWindow" autostart="true" width="'+this.contentObj.width+'" height="'+this.contentObj.height+'"></embed>';
			this.str += '<object/>';			
		}
		
		return obj;
	}
	
});
MultiBox.implement(new Options);
MultiBox.implement(new Events);