var SexyAlertBox = new Class({
	  Implements: [Events, Options, Chain],
		getOptions: function(){
			return {
				name: 'SexyAlertBox',
				zIndex: 65555,
				onReturn: false,
				onReturnFunction : $empty,
				BoxStyles: { 'width': 500 },
				OverlayStyles: {
					'background-color': '#000',
					'opacity': 0.5
				},
				showDuration: 300,
				showEffect: Fx.Transitions.linear,
	      		closeDuration: 200,
				closeEffect: Fx.Transitions.linear,
				moveDuration: 500,
				moveEffect: Fx.Transitions.Back.easeOut,
				onShowStart : $empty,
				onShowComplete : $empty,
				onCloseStart : $empty,
				onCloseComplete : function(properties) {
					this.options.onReturnFunction(this.options.onReturn);
				}.bind(this)
			};
		},
		initialize: function(options) {
	    	this.i=0; 
			this.setOptions(this.getOptions(), options);
	
			// this.setOptions(options);
			this.Overlay = new Element('div', {
				'id': 'BoxOverlay',
				'styles': {
					'display': 'none',
					'z-index': this.options.zIndex,
					'position': 'absolute',
					'top': '0',
					'left': '0',
					'background-color': this.options.OverlayStyles['background-color'],
					'opacity': 0,
					'height': window.getScrollHeight() + 'px',
					'width': window.getScrollWidth() + 'px'
				}
			});
	
			this.Content = new Element('div', { 'id': this.options.name + '-BoxContenedor' });
		    this.Contenedor = new Element('div', { 'id': this.options.name + '-BoxContent' }).adopt(this.Content);
			this.InBox = new Element('div', { 'id': this.options.name + '-InBox' }).adopt(this.Contenedor);;
			
			this.Box = new Element('div', {
				'id': this.options.name + '-Box',
				'styles': {
					'display': 'none',
					'z-index': this.options.zIndex + 2,
					'position': 'absolute',
					'top': '0',
					'left': '0',
					'width': this.options.BoxStyles['width'] + 'px'
				}
			}).adopt(this.InBox);
	
		    this.Overlay.injectInside(document.body);
		    this.Box.injectInside(document.body);
		
		    this.preloadImages();
	    
			window.addEvent('resize', function() {
				if(this.options.display == 1) {
					this.Overlay.setStyles({
						'height': window.getScrollHeight() + 'px',
						'width': window.getScrollWidth() + 'px'
					});
					this.replaceBox();
				}
			}.bind(this));
			window.addEvent('scroll', this.replaceBox.bind(this));
		},
	  	preloadImages: function() {
	    	var img = new Array(2);
	    	img[0] = new Image();img[1] = new Image();img[2] = new Image();
	    	img[0].src = this.Box.getStyle('background-image').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
	    	img[1].src = this.InBox.getStyle('background-image').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
	    	img[2].src = this.Contenedor.getStyle('background-image').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
	  	},
		display: function(option) {
			if(this.Transition) { this.Transition.cancel(); }			
			// Show Box	
			if(this.options.display == 0 && option != 0 || option == 1) {	
		      	if(Browser.Engine.trident4) {
		        	$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
		      	}
		
				this.Overlay.setStyle('display', 'block');
				this.options.display = 1;
				this.fireEvent('onShowStart', [this.Overlay]);
		
				this.Transition = new Fx.Tween(this.Overlay, {
		      			property: 'opacity',
						duration: this.options.showDuration,
						transition: this.options.showEffect,
						onComplete: function() {
							sizes = window.getSize();
							scrollito = window.getScroll();
							this.Box.setStyles({
								'display': 'block',
								'left': (scrollito.x + (sizes.x - this.options.BoxStyles['width']) / 2).toInt()
							});
							this.replaceBox();
							this.fireEvent('onShowComplete', [this.Overlay]);
						}.bind(this)
					}
				).start(this.options.OverlayStyles['opacity']);
			}
			// Close Box
			else {
	
				if(Browser.Engine.trident4) {
					$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
				}
				
				this.queue.delay(500,this);
		
				this.Box.setStyles({
					'display': 'none',
					'top': 0
				});
				
				this.Content.empty();
				this.options.display = 0;
				this.fireEvent('onCloseStart', [this.Overlay]);
		
				if(this.i==1) {
					this.Transition = new Fx.Tween(this.Overlay, {
						property: 'opacity',
						duration: this.options.closeDuration,
						transition: this.options.closeEffect,
						onComplete: function() {
							this.fireEvent('onCloseComplete', [this.Overlay]);
						}.bind(this)
					}
					).start(0);
				}
			}			
		},
		replaceBox: function() {
			if(typeof this.options.display == 'undefined') {
				this.options.display = false;
			}
			if(this.options.display == 1) {
			
				sizes = window.getSize();
				scrollito = window.getScroll();
				
				if(this.MoveBox)
				this.MoveBox.cancel();
				
				this.MoveBox = new Fx.Morph(this.Box, {
					duration: this.options.moveDuration,
					transition: this.options.moveEffect
				}).start({
				'left': (scrollito.x + (sizes.x - this.options.BoxStyles['width']) / 2).toInt(),
				'top': (scrollito.y + (sizes.y - this.Box.offsetHeight) / 2).toInt()
				});
			}
		},
		queue: function() {
			this.i--;
			this.callChain();
		},
		messageBox: function(type, message, properties, input) {
	
			this.chain(function () {
				
				var myok = $$('#ok_text');
				var mycancel = $$('#cancel_text');
				
				try {
				
					if(myok && mycancel) {
						
						var myok_text = myok.get('text');
						var mycancel_text = mycancel.get('text');
		
						properties = $extend({
							'textBoxBtnOk': 'OK',
							'textBoxBtnCancel': 'Cancel',
							'textBoxInputPrompt': null,
							'password': false,
							'onComplete': $empty
						}, properties || {});
						
						this.options.onReturnFunction = properties.onComplete;
						
						this.ContenedorBotones = new Element('div', {
							'id': this.options.name + '-Buttons'
						});
		
						this.PromptBtnOk = new Element('input', {
							'id': 'BoxPromptBtnOk',
							'type': 'submit',
							'value': myok_text,
							'styles': {
								'width': '90px'
							}
						});
		
						this.PromptBtnCancel = new Element('input', {
							'id': 'BoxPromptBtnCancel',
							'type': 'submit',
							'value': mycancel_text,
							'styles': {
								'width': '90px'
							}
						});	
						
						if(this.PromptBtnOk) {
							this.PromptBtnOk.addEvent('click', function(e) {
								
								if($('frm_translation_survey')) {
									var ret = $('frm_translation_survey').toQueryString();
									var to_url = $('frm_translation_survey').get('action');	
								}
								
								var ret2 = $('page_reference').get('value');
								var ret3 = $('language_reference').get('value', translate.lastpair);
								
								var mythis = this;
								var doSubmitForm = function(dataset,uri) {
	
									$('survey_holder').inject($('translate_holder'), 'after');
									mythis.display(0);
									$('survey_holder').setStyle('display', 'none');
									
									surveyRequest.send({url: uri, data: dataset});
									return false;
								} 
							
								Cookie.write('survey_complete', '1', {path: '/'});
								Cookie.write('survey_result', to_url + '?' + ret, {path: '/'});
								
								if(ret && to_url) {
									doSubmitForm(ret, to_url);
								}
	
								return;
													
							}.bind(this));
						}
						
						
						if(this.PromptBtnCancel) {
							this.PromptBtnCancel.addEvent('click', function() {
								this.options.onReturn = false;
								
								$('survey_holder').inject($('translate_holder'), 'after');
								$('survey_holder').setStyle('display', 'none');
								this.display(0);
	
								if($('frm_translation_survey')) {
									var ret = $('frm_translation_survey').toQueryString();
									var to_url = $('frm_translation_survey').get('action');	
								}
	
								Cookie.write('survey_complete', '1', {path: '/'});
								Cookie.write('survey_result', to_url + '?' + ret, {path: '/'});
								
							}.bind(this));
						}
						
						if(this.PromptBtnOk && this.PromptBtnCancel) {
							this.Content.setProperty('class','BoxPrompt').set('html',message + '<br />');
							$('survey_holder').injectInside(this.Content);
							$('survey_holder').setStyle('display', 'block');
							new Element('br').injectInside(this.Content);
							this.PromptBtnOk.injectInside(this.ContenedorBotones);
							this.PromptBtnCancel.injectInside(this.ContenedorBotones);
							this.ContenedorBotones.injectInside(this.Content);
							this.display(1);
						}	
								
								
	
	 				}	
					
					} catch(e) {
					// ! TODO
					alert(e);
					}
			});
			this.i++;
			if(this.i==1) { 
				this.callChain(); 
			}
		},		
		alert: function(message, properties){
			this.messageBox('alert', message, properties);
		},		
		info: function(message, properties){
			this.messageBox('info', message, properties);
		},	
		error: function(message, properties){
			this.messageBox('error', message, properties);
		},
		confirm: function(message, properties){
			this.messageBox('confirm', message, properties);
		},
		prompt: function(message, input, properties){
			this.messageBox('prompt', message, properties, input);
		}
	});