var Modal = new Class({

	options:{
		width: 350,
		height: 260,
		srcURL: '',
		resizeToFit: false,
		event: 'click',
		bind: true,
		title: document.title,
		formatting: {'margin':'8px','overflow':'auto', 'height':'98%'}
	},
	
	initialize: function(modal, obj){
		this.modal = modal;
		var options = this.options = $extend(this.options, obj);
		var $self = this;
		
		switch($type(modal)){
			case 'element': 
				this.options.trigger = 'element'; 
		
				for(var p in this.options){
					this.modal[p] = this.options[p];
				}
				
				break;
			case 'array': 
				this.options.trigger = 'array';
				
				this.modal.each(
					function(e, i){
						e.i = i;
						for(var p in $self.options){
							e[p] = $self.options[p];
						}
						
						if(!e.href.test(/^(#|javascript)/i)){
							e.srcURL = e.href;
							e.href = 'javascript:;';
						}
					}
				);
				
				break;
		}
		
		if(this.options.bind){
			this.modal.addEvent(this.options.event,
				launchModal = function(){
					$element = $(this);
					
					document.documentElement.style['overflow'] = 'hidden';
					
					var curtainWidth = screen.width;
					var curtainHeight = screen.height;
					
					var curtain = this.curtain = new Element('div',
						{
							'id': 'curtain',
							'styles':{
								'width':curtainWidth + 'px',
								'height':'0px',
								'background-color': '#000',
								
								'position': 'absolute',
								'z-index': 101,
								'left': 0,
								'top': 0,
								
								'opacity': 0
							}
						}
					).injectInside(document.body);
					
					if(window.ie6)
						var iFrame = new Element('iframe', {'src':'../includes/iframe_helper.html', 'frameborder':0, 'width':'100%', 'height':'100%'}).inject(curtain).src = '../includes/iframe_helper.html';
					
					var dropCurtain = new Fx.Styles(curtain).start({
						'opacity': .35,
						'height': curtainHeight
					}).chain(function(){$self.buildModal($element)});
					
				}
			)
		}
	},
	
	launchModal: function(){
		//alert(this.i);
		var $self = this;
		$element = $(this.modal);
		
		document.documentElement.style['overflow'] = 'hidden';
		
		var curtainWidth = screen.width;
		var curtainHeight = screen.height;
		
		var curtain = this.curtain = new Element('div',
			{
				'id': 'curtain',
				'styles':{
					'width':curtainWidth + 'px',
					'height':'0px',
					'background-color': '#000',
					
					'position': 'absolute',
					'z-index': 101,
					'left': 0,
					'top': 0,
					
					'opacity': 0
				}
			}
		).injectInside(document.body);
		
		if(window.ie6)
			var iFrame = new Element('iframe', {'src':'../includes/iframe_helper.html', 'frameborder':0, 'width':'100%', 'height':'100%'}).inject(curtain).src = '../includes/iframe_helper.html';
		
		var dropCurtain = new Fx.Styles(curtain).start({
			'opacity': .35,
			'height': curtainHeight
		}).chain(function(){$self.buildModal($element)});
		
	},
	
	buildModal: function(e){
		
		var el = e;
		var indx = el.i;
		
		width = this.options.width;
		height = this.options.height;
		title = this.options.title;
		this.formatting = formatting = this.options.formatting;
		resizeToFit = this.options.resizeToFit;
		var me = this;
		
		// create the div containing all the modal pop up elements.
		var modalPopup = new Element('div',
			{
				'id':'modalPopup',
				'styles':{
					'width': '2px',
					'height': '2px',
					
					'background-color': '#FFFFFF',
					//'background-image': '..\/images\/ajax-loader.gif',
					'background-position': 'center',
					'background-repeat': 'no-repeat',
					
					'position': 'absolute',
					'z-index': 103,
					'left': e.getCoordinates().left + 'px',
					'top': e.getCoordinates().top + 'px',
					'border': '1px solid #CCC',
					
					'overflow': 'hidden',
					
					'opacity': 0
				}
			}
		).injectInside(document.body);
		
		//alert('building modal');
		var modalTransition = new Fx.Styles(modalPopup).start({
			'opacity': 1,
			'width': el.width,
			'height': el.height,
			
			'left': (Math.floor(window.getWidth()/2) - Math.floor(el.width/2)),
			'top': (Math.floor(window.getHeight()/2) - Math.floor(el.height/2))
		}).chain(function(){
			var titleDiv = new Element('div', {'styles':{'padding':'6px', 'border-bottom':'1px solid #CCC', 'background-color':'#F6F6F6'}}).injectInside(modalPopup);
			var titleSpan = new Element('h3', {'styles':{'float':'left'}}).setText(title).injectInside(titleDiv);
			var closeBtn = new Element('a', {'href':'javascript:;', 'styles': {'float':'right'}}).injectInside(titleDiv);
			var closeIcon = new Element('img', {'src':'/images/iconClose.gif'}).inject(closeBtn);
			
			var clearer = new Element('div', {'class':'clear'}).injectInside(titleDiv);
			
			closeBtn.addEvent('click', function(){
				$('dropShadow').remove();
				$('modalPopup').remove();
				new Fx.Styles($('curtain')).start({
					'opacity': 0
				}).chain(function(){
					$('curtain').remove();
					document.documentElement.style['overflow'] = '';
				});
			});
			var contentDiv = new Element('div', {'styles': formatting}).injectInside(modalPopup);
			
			contentDiv.setStyle('height', (el.height - contentDiv.offsetTop - contentDiv.getStyle('margin-bottom').toInt()));
			//alert(el.height - contentDiv.offsetTop);
			var ajaxLoader = new Element('img', {'src':'/images/ajax-loader.gif', 'styles':{'margin': '12px'}}).injectInside(contentDiv);
			
			
			new Element('div', {'className':'clear'}).inject(contentDiv);
			
			var getContent = new Ajax(el.srcURL, {method: 'get', update:contentDiv, evalScripts:true,
				onComplete: function(){
					if(resizeToFit){
						contentDiv.setStyle('height', 'auto');
						var diff = (contentDiv.offsetHeight + contentDiv.offsetTop) - height;
						height += diff;
						new Fx.Styles($('modalPopup')).start({'height': height, 'top': ($('modalPopup').getStyle('top').toInt() - Math.floor(diff/2)) });
						new Fx.Styles($('dropShadow')).start({'height': height, 'top': ($('dropShadow').getStyle('top').toInt() - Math.floor(diff/2))});
					}
				}
			}).request();
			
			var dropShadow = new Element('div', {
				'id':'dropShadow',
				'styles':{
					'position':'absolute',
					'z-index':102,
					'opacity':.25,
					'background-color':'#000',
					'width': el.width + 'px',
					'height': el.height + 'px',
					'left':($('modalPopup').getStyle('left').toInt() + 7) + 'px', 
					'top': ($('modalPopup').getStyle('top').toInt() + 7) + 'px'
				}
			}).inject(document.body);
			
		});
		
		
	}

});