/*
JavaScript Document
Javascript Description 
CREDIT http://www.advancestep.com/ 
*/
var Forget = new Class({
	
	Implements: [Events, Options],
	
	options: {
		onShow: function(LightBox){
			LightBox.setStyles({
				'visibility': 'visible',
				'display': ''
			});
			this.overLay.setStyles({
				'display': ''
			});
		},
		onHide: function(LightBox){
			LightBox.setStyles({
				'visibility': 'hidden',
				'display': 'none'
			});
			this.overLay.setStyles({
				'opacity': 0,
				'display': 'none'
			});
		},
		showDelay: 100,
		hideDelay: 100,
		minimumHeight: 90,
		className: 'LightBox',
		size: {'width': 500, 'height': 400},
		imgPath: './img/tooltip/',
		titleTxt: '',
		path: './_ajax/',
		ulr: '',
		closeBx: false
	},

	initialize: function(elements, options){
		this.setOptions(options);
		this.overLay = new Element('div', {
			'id' : this.options.className + '-overlay',
			'styles' : {
				'opacity' : 0,
				'display' : 'none',
				'width' : window.getScrollWidth(),
				'height' : window.getScrollHeight()
			}
		}).inject(document.body);
		
		this.LightBox = new Element('div', {
			'class': this.options.className + '-container',
			'styles': {
				'display': 'none',
				'visibility': 'hidden',
				'width': this.options.size.width
			}
		}).inject(document.body);
		
		this.bgTop = new Element('div', { 'class' : this.options.className + '-bg-top' }).inject( new Element('div', { 'class' : this.options.className + '-right-top' }).inject( new Element('div', { 'class' : this.options.className + '-left-top' }).inject(this.LightBox) ) );
		this.tooltipsbody = new Element('div', { 'class' : this.options.className + '-bg-body' }).inject( new Element('div', { 'class' : this.options.className + '-right-body' }).inject( new Element('div', { 'class' : this.options.className + '-left-body' }).inject(this.LightBox) ) );
		this.bgbottom = new Element('div', { 'class' : this.options.className + '-bg-bottom' }).inject( new Element('div', { 'class' : this.options.className + '-right-bottom' }).inject( new Element('div', { 'class' : this.options.className + '-left-bottom' }).inject(this.LightBox) ) );
		
		this.title = new Element('span', {'class': this.options.className + '-title'}).inject(this.tooltipsbody);
		this.text = new Element('span', {'class': this.options.className + '-text'}).inject(this.tooltipsbody).set('html', this.options.titleTxt);
		if(this.options.closeBx)
			this.closeBx = new Element('div', { 'class' : this.options.className + '-closeBx' }).inject(this.tooltipsbody);
		
		this.wrapper = new Element('div').inject(this.tooltipsbody);
		$$(elements).each(this.build, this);
		if (this.options.initialize) this.options.initialize.call(this);
	},
	build: function(el){
		el.addEvent('click', function(event){
			this.connectAjax(el);
			this.position(el);
		}.bind(this));
	
		var end = this.end.bind(this);
		if(!this.options.closeBx){
			el.addEvent('mouseleave', end);
			el.addEvent('trash', end);
		}else{
			this.closeBx.addEvent('mouseenter', function(){ this.setStyles({ 'background-position': 'left bottom' }); });
			this.closeBx.addEvent('mouseleave', function(){ this.setStyles({ 'background-position': 'left top' }); });
			this.closeBx.addEvent('click', end);
		}
	},
	
	connectAjax: function(el,feild, url){
		createXMLHttpRequest();
		if(feild)
			var url = this.options.path + ((url)?url:this.options.url) + '?' + $(feild).getProperty('name') + '=' + $(feild).getProperty('value');
		else 
			var url = this.options.path + this.options.url
		xmlHttp.open('GET',url,true);
		xmlHttp.onreadystatechange = this.complete.bind(this, el);
		xmlHttp.send(null);
	},
	
	complete: function(el){
		if(xmlHttp.readyState == 4){
			if(xmlHttp.status == 200) { 
				var c = xmlHttp.responseText.split('::');
				if(c.length > 1){
					if(c[0].toInt()){
						this.text.setStyle('display','none');
						this.form.empty();
						this.error.setStyles({ 'line-height': 16, 'padding-top': 14 }).set('html', c[1]);						
					}else{
						this.error.set('html', c[1]);
						$('email').setProperty('value', '');
						$('email').focus();
					}
				}else{
					this.start(xmlHttp.responseText);
				}
			}
		}
		this.position(el);
	},

	start: function(el){
		if( this.text.getStyle('display') == 'none' ) this.text.setStyle('display', 'block');
		if(el){
			this.wrapper.empty();
			this.form = new Element('span', { 'styles':{ 'display' : 'block', 'padding-left' : 9 }}).inject(this.wrapper).set('html', el); 
			this.error = new Element('span', { 'styles': { 'display' : 'block', 'padding-left' : 9, 'padding-bottom' : 5, 'color' : '#FF3300', 'font-weight' : 'bold', 'font-size' : 9 }}).injectBefore(this.form)
			if( $('iconSubmit') ){
				$('iconSubmit').addEvent('click', function(){
					if( $('email').getProperty('value') ){ 
						var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
						if (filter.test( $('email').getProperty('value') ))
							this.connectAjax(el, 'email', 'forget.php'); 
						else{
							this.error.set('html', "Sorry, your email is not proper format. Please enter again.");
							$('email').focus();
						}						
					}else{
						this.error.set('html', "Sorry! enter you email address.");	
						$('email').focus();
					}
				}.bind(this));
			}
		}
		
		$clear(this.timer);
		this.timer = this.show.delay(this.options.showDelay, this);
	},

	end: function(event){
		$clear(this.timer);
		this.timer = this.hide.delay(this.options.hideDelay, this);
	},

	position: function(el){
		/*
		this.tooltipsbody.setStyles({
			'height' : (this.tooltipsbody.getCoordinates().height > this.options.minimumHeight) ? this.tooltipsbody.getCoordinates().height : this.options.minimumHeight
		});
		*/
		this.overLay.setStyles({
			'opacity': .5,
			'width' : window.getScrollWidth(),
			'height' : window.getScrollHeight()					   
		});
		this.LightBox.setStyles({
			'position': 'absolute',
			'left': (window.getWidth() - this.options.size.width) / 2,
			'top': (window.getHeight() - this.options.size.height) / 2
		});	
	},

	show: function(){
		if (this.options.timeout)
			this.timer = this.hide.delay(this.options.timeout, this);
		this.fireEvent('onShow', [this.LightBox]);
	},

	hide: function(){
		this.fireEvent('onHide', [this.LightBox]);
	}
});