var ErrorBox = new Class({
						 
	Implements: [Events, Options],
	
	options: {
		onShow: function(el){
			this.fx.overlay.start(this.options.overlayOpacity);
			el.setStyle('visibility', 'visible')
		},
		onHide: function(el){
			el.setStyle('visibility', 'hidden');
			//this.fx.overlay.chain(this.setup).start(0);
			this.fx.overlay.start(0);
		},
		maxTitleChars: 30,
		overlayOpacity: 0.25,
		showDelay: 500,
		hideDelay: 500,
		minimumHeight: 106,
		width: 216,
		className: 'err',
		imgPath: './img/tooltip/error/',
		fixed: false,
		closeBx: false
	},

	initialize: function(options){
		this.setOptions(options);
		if( !$('overlay') ) this.overLay = new Element('div', {'id': 'overlay'}).inject(document.body);
		else this.overLay = $('overlay');
		
		this.errorBox = new Element('div', { 'id': 'errorBox', 'class': this.options.className + '-container', 'styles': {
				'visibility': 'hidden', 'width': this.options.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.errorBox) ) );
		
		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.errorBox) ) );
		
		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.errorBox) ) );
		
		this.title = new Element('span', {
			'class': this.options.className + '-title'
		}).inject(this.tooltipsbody);
		
		var end = this.end.bind(this);
		if(this.options.closeBx){
			this.closeBx = new Element('div', {
				'class': this.options.className + '-closeBx'
			}).inject(this.tooltipsbody);
			this.closeBx.addEvent('click', end);
		}else{
			this.overLay.addEvent('click', end);	
		}
		
		this.wrapper = new Element('div').inject(this.tooltipsbody);
		
		this.fx = {
			overlay: new Fx.Tween(this.overLay, {property: "opacity", duration: 250}).set(0)
		};
		
		this.setup(true);
		this.position();
		
		if (this.options.initialize) this.options.initialize.call(this);
	},
	
	start: function(el){	
		this.wrapper.empty();
		if (el){
			this.text = new Element('span', {
				'class': this.options.className + '-text'
			}).inject(this.wrapper).set('html', el.replace(/<br \/>/, ''));
		}
		
		$$("." + this.text.getProperty('class') + ' span ').each(function(element){
			element.setStyles({ 'background-position': 'left center' });
		}.bind(this));
		
		this.errorBox.setStyles({
			'width' : (this.errorBox.getCoordinates().width > this.options.minimumHeight) ? this.errorBox.getCoordinates().width : this.options.minimumHeight						
		});
		
		this.position();
		
		$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);
	},

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

	hide: function(){
		this.fireEvent('onHide', [this.errorBox]);
	},
	
	position: function(){
		/*$('overlay')*/
		this.overLay.setStyles({
			top: window.getScrollTop(),
			left: window.getScrollLeft(),
			height: window.getHeight(),
			width: window.getWidth()
		});
		
		$$('.'+this.options.className + '-container').each(function(el){
			/*$('errorBox')*/
			el.setStyles({
				'top': window.getScrollTop() + ( window.getHeight() / 2 ) - el.getCoordinates().height / 2,
				'left':  window.getScrollLeft() + ( window.getWidth() / 2 ) - el.getCoordinates().width / 2
			});
		}.bind(this));
	},
		
	setup: function(open) {
		new SmoothScroll();
		["object", window.ie ? "select" : "embed"].forEach(function(tag) {
			Array.forEach(document.getElementsByTagName(tag), function(el) {
				if (open) elementsStyle[el] = el.style.visibility;
				el.style.visibility = open ? "hidden" : elementsStyle[el];
			}.bind(this));
		}.bind(this));

		var fn = open ? "addEvent" : "removeEvent";
		var position = this.position.bind(this);
		window[fn]("scroll", position)[fn]("resize", position);
	}
});