var MoodalWindow = new Class({

	Implements: [Options, Events],

	options : {
		container		: window,
		height			: 700,
		width			: 600,
		overlayColor		: '#000000',
		overlayTransparency	: 0.7,
		overlayClose		: true,
		loadingImage		: '/css/images/ajax.gif',
		loadingMessage		: 'Loading Content...',
		move			: true,
		resize			: true,
		url			: '',
		title			: 'Modal Window'
	},

	/*
	Constructor: initialize
		Constructor

		Add event on formular and perform some stuff, you now, like settings, ...
	*/
	initialize : function( element, options ) {
		if( $(element) )
		{
			if( $(element).get('title') )
				this.options.title	= $(element).get('title');
			else if( $(element).get('text') )
				this.options.title	= $(element).get('text');

			if( $(element).get('href') )
				this.options.url	= $(element).get('href');

			this.setOptions(options);

			$(element).addEvent('click', this.createPopup.bind(this) );
			return false;
		}
		//console.log('No Valid Element.');
	},

	createPopup : function(){
		//console.log('Starting Popup Creation');
		this.killStraglers();

		this.createOverlay();
		this.createWindow();
		if( this.options.title ){
			this.createTitle();
			this.createCloser();
		}
		this.createContent();
		if( this.options.resize )
			this.createResizer();
		return false;
	},

	createOverlay : function(){
		//console.log('Creating Overlay');
		var overlayColor		= this.options.overlayColor;
		var overlayTransparency		= this.options.overlayTransparency;
		modalOverlay = new Element( 'div', { 'id':'modalOverlay' } ).setStyles({
			backgroundColor	: this.options.overlayColor,
			position	: 'absolute',
			left		: 0,
			top		: 0,
			height		: window.getScrollSize().y,
			width		: window.getScrollSize().x,
			zIndex		: 9090
		});

		if( this.options.overlayClose )
			modalOverlay.addEvent('click', this.closePopup.bind(this) );

		modalOverlay.fade('hide');

		$(document.body).grab( modalOverlay );
		modalOverlay.fade( this.options.overlayTransparency );

		window.addEvent('resize',function(){
			modalOverlay.setStyles({
				height	: window.getScrollSize().y,
				width	: window.getScrollSize().x
			});

		});

	},

	createWindow : function(){
		//console.log('Creating Window');

		var modalWindowTop = ( ( this.options.container.getSize().y / 2 ) - ( this.options.height / 2 ) + document.documentElement.scrollTop );
		if( modalWindowTop < 0 )
			var modalWindowTop = 0;

		var modalWindowLeft = ( ( this.options.container.getSize().x / 2 ) - ( this.options.width / 2 ) + document.documentElement.scrollLeft );
		if( modalWindowLeft < 0 )
			var modalWindowLeft = 0;
			
	//	alert(modalWindowTop);

		modalWindow = new Element( 'div', { 'id':'modalWindow' } ).setStyles({
			position	: 'absolute',
			top		: modalWindowTop,
			left		: modalWindowLeft,
			height		: this.options.height,
			width		: this.options.width,
			zIndex		: 9091
		});

		modalWindow.fade('hide');
		$(document.body).grab( modalWindow );
		modalWindow.fade( 'in' );

		if( !this.options.move )
		{
			//console.log('Adding Window Reposition Events');
			var reposition = function(){

				var modalWindowTop = ( ( this.options.container.getSize().y / 2 ) - ( this.options.height / 2 ) + window.pageYOffset );
				if( modalWindowTop < 0 )
					var modalWindowTop = 0;
				if( modalWindowTop > this.options.container.getSize().y )
					var modalWindowTop = this.options.container.getSize().y;

				var modalWindowLeft = ( ( this.options.container.getSize().x / 2 ) - ( this.options.width / 2 ) + window.pageXOffset );
				if( modalWindowLeft < 0 )
					var modalWindowLeft = 0;
				if( modalWindowLeft > this.options.container.getSize().x )
					var modalWindowLeft = this.options.container.getSize().x;

				modalWindow.setStyles({
					top	: modalWindowTop
					//left	: modalWindowLeft
				});

			}

			window.addEvents({
				'resize' : reposition.bind(this),
				'scroll' : reposition.bind(this)
			});
		}

	},

	createTitle : function(){
		//console.log('Creating Title');

		modalTitle = new Element( 'div', { 'id':'modalTitle' } ).setStyles({
			position	: 'absolute',
			top		: 0,
			left		: 0,
			width		: '100%'
		});
		modalTitle.set( 'text', this.options.title );
		modalWindow.grab( modalTitle );

		if( this.options.move )
		{
			//console.log('Making Title Draggable');
			modalWindow.makeDraggable({
				handle : modalTitle,
				limit: {
					x : [ 0, ( this.options.container.getScrollSize().x ) ],
					y : [ 0, ( this.options.container.getScrollSize().y ) ]
				}
			});
			modalTitle.setStyles({
				cursor	: 'move'
			});
		};

	},

	createContent : function(){
		//console.log('Creating Content');

		modalContent = new Element( 'div', { 'id':'modalContent' } ).setStyles({
			position	: 'absolute',
			top		: ( this.options.title ? modalTitle.getStyle('height') : 0 ),
			overflow	: 'auto',
			left		: 0,
			height		: ( this.options.height - ( this.options.title ? modalTitle.getStyle('height').toInt() : 0 ) )+'px',
			width		: '100%'
		});

		modalWindow.grab( modalContent );

		getContent = new Request.HTML({
			url		: this.options.url,
			method		: 'get',
			update		: modalContent,
			data		: {'ajax':true},
			noCache		: true,
			onRequest	: function(){
				//console.log('Creating Content > Content Requested');
				//LOADING
				this.createLoader();
				//alert('Request Sent');
			}.bind(this),
			onComplete	: function(){
				//COMPLETE
				//alert('Request Complete');
			}.bind(this),
			onSuccess	: function(){
				//console.log('Creating Content > Content Successfully Collected');
				//SUCCESS
				//alert('Request Successful');
			}.bind(this),
			onFailure	: function(){
				//console.log('Creating Content > Content Failed to Collect');
				//FAIL
				//alert('Request Failed');
			}.bind(this)
		}).send();

	},

	createCloser : function(){
		//console.log('Creating Closer Button');

		modalCloser = new Element( 'div', { 'id':'modalClose' } ).setStyles({
			cursor		: 'pointer',
			position	: 'absolute',
			top		: 0,
			right		: -2
		});
		modalTitle.grab( modalCloser );
		modalCloser.addEvent('click', this.closePopup.bind(this) );

	},

	createResizer : function(){
		//console.log('Creating Resizer');

		modalResizer = new Element( 'div', { 'id':'modalResize' } ).setStyles({
			cursor		: 'pointer',
			position	: 'absolute',
			bottom		: 0,
			right		: 0
		});
		modalWindow.grab( modalResizer );

		modalWindow.makeResizable({
			handle : modalResizer,
			onDrag : function(){
				modalContent.setStyles({
					height : ( modalWindow.clientHeight - ( this.options.title ? modalTitle.getStyle('height').toInt() : 0 ) )+'px'
				});
			}.bind(this),
			limit: {
				x : [ 100, this.options.container.getSize().x ],
				y : [ 75, this.options.container.getSize().y ]
			}
		})
		modalResizer.setStyles({
			cursor	: 'se-resize'
		});


	},

	createLoader : function(){
		var loaderImage		= new Element( 'img', { src : this.options.loadingImage, alt : 'Loading', title : 'Loading' } );
		var loader		= new Element( 'div' );
		loader.setStyles({
			margin		: 'auto',
			textAlign	: 'center',
			position	: 'absolute'
		});
		loaderImage.addEvent('load', function(){
			loader.setStyles({
				height		: loaderImage.getSize().y,
				width		: loaderImage.getSize().x,
				top		: ( ( modalContent.getSize().y / 2 ) - ( loaderImage.getSize().y / 2 ) ),
				left		: ( ( modalContent.getSize().x / 2 ) - ( loaderImage.getSize().x / 2 ) )
			});
		});
		loader.grab( loaderImage );

		modalContent.empty();
		modalContent.grab( loader );
	},

	resizePopup : function( newHeight, reposition ){
		//console.log( 'Resizing Popup' );


		var moveHeight = function(){

			modalContent.set('tween', {
				duration: 750
			}).tween('height', ( newHeight - ( this.options.title ? modalTitle.getStyle('height').toInt() : 0 ) ) );

			modalWindow.set('tween', {
				duration: 750
			}).tween('height', newHeight );

		}.bind(this).delay(750);

		if( reposition ) {

			//console.log( 'Repositioning Popup' );
			var moveTop = function(){
				modalWindow.set('tween', {
					duration: 750
				}).tween('top', ( ( window.getSize().y / 2 ) - ( newHeight / 2 ) + window.pageYOffset ) );
			}.bind(this).delay(0);

		}

		return false;

	},

	killStraglers : function(){
		//console.log( 'Killing Straglers' );

		if( $('modalOverlay') )
			$('modalOverlay').destroy();
		if( $('modalWindow') )
			$('modalWindow').destroy();

	},

	closePopup : function(){
		//console.log( 'Closing Popup' );

		modalOverlay.fade('out');
		modalWindow.fade('out');
		var killEm = function(){
			if( $('modalOverlay') )
				$('modalOverlay').destroy();
			if( $('modalWindow') )
				$('modalWindow').destroy();
		}.delay(750);

		return false;

	}


});