var MoodalWindow = new Class({
	
	Implements: [Options, Events],

	options : {
		container		: window,
		height			: 700,
		width			: 600,
		overlayColor		: '#000000',
		overlayTransparency	: 0.7,
		overlayClose		: true,
		loadingImage		: '/res/js/mootools/modalwin/ajax-loader.gif',
		loadingMessage		: 'Loading Content...',
		move			: true,
		resize			: false,
		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();
		}
		// this.createButtons();
		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		: 99
		});
	
		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');

		// Add by Graz 
		var scrollTop = window.pageYOffset || document.documentElement.scrollTop || 0;
		var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || 0;

		var modalWindowTop = ( ( this.options.container.getSize().y / 2 ) - ( this.options.height / 2 ) + scrollTop );
		if( modalWindowTop < 0 )
			var modalWindowTop = 0;
	
		var modalWindowLeft = ( ( this.options.container.getSize().x / 2 ) - ( this.options.width / 2 ) + scrollLeft );
		if( modalWindowLeft < 0 )
			var modalWindowLeft = 0;
	
		modalWindow = new Element( 'div', { 'id':'modalWindow' } ).setStyles({
			position	: 'absolute',
			top		: modalWindowTop,
			left		: modalWindowLeft,
			height		: this.options.height,
			width		: this.options.width,
			zIndex		: 100
		});
	
		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	: 'hidden',
			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();
		
		// alert(getContent.innerHTML);
	
	},

	createCloser : function(){
		//console.log('Creating Closer Button');
	
		modalCloser = new Element( 'div', { 'id':'modalClose' } ).setStyles({
			cursor		: 'pointer',
			position	: 'absolute',
			top		: 0,
			right		: 0
		});
		modalTitle.grab( modalCloser );
		modalCloser.addEvent('click', this.closePopup.bind(this) );
	
	},
	createButtons : function(){
		//console.log('Creating Closer Button');
	
		modalButtonOk = new Element( 'div', { 'id':'modalOk' } ).setStyles({
			cursor		: 'pointer',
			position	: 'absolute',
			top		: -30,
			right		: 140
		});
		modalButtonOk.set( 'text', 'Ok' );
		modalResizer.grab( modalButtonOk );
		modalButtonOk.addEvent('click',  this.savePopup.bind(this) );
	
		modalButtonCancel = new Element( 'div', { 'id':'modalCancel' } ).setStyles({
			cursor		: 'pointer',
			position	: 'absolute',
			top		: -30,
			right		: 60
		});
		modalButtonCancel.set( 'text', 'Annulla' );
		modalResizer.grab( modalButtonCancel );
		modalButtonCancel.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: 500
			}).tween('height', ( newHeight - ( this.options.title ? modalTitle.getStyle('height').toInt() : 0 ) ) );


			modalWindow.set('tween', {
				duration: 500
			}).tween('height', newHeight );
		
		}.bind(this).delay(500);
	
		if( reposition ) {
		
			//console.log( 'Repositioning Popup' );
			var moveTop = function(){
				modalWindow.set('tween', {
					duration: 500
				}).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();
	
	},

	savePopup : function(){
		//console.log( 'Saving Popup' );
		subscribedettails();

		return true;
	},

	closePopup : function(){
		//console.log( 'Closing Popup' );
	
		modalOverlay.fade('out');
		modalWindow.fade('out');

		var killEm = function(){
			if( $('modalOverlay') )
				$('modalOverlay').destroy();
			if( $('modalWindow') )
				$('modalWindow').destroy();
		}.delay(500);
	
		return false;
	
	}
	

});