var LightBox = new Class({

	Implements: [Events, Options],
	
	options: {
		onShow: function(tip){
			tip.setStyle('visibility', 'visible');
		},
		onHide: function(tip){
			tip.setStyle('visibility', 'hidden');
			fx.overlay.chain(this.setup).start(0);
		},
		maxTitleChars: 30,
		overlayOpacity: 0.2,
		showDelay: 100,
		hideDelay: 100,
		minimumHeight: 106,
		className: 'err',
		offsets: {'x': 18, 'y': 20},
		imgPath: './img/tooltip/error/',
		fixed: false,
		closeBx: false
	},

	initialize: function(elements, options){
		this.setOptions(options);
		/*
		<div class="err-container">
			<div class="err-left-top"><div class="err-right-top"><div class="err-bg-top"></div></div></div>
			<div class="err-left-body"><div class="err-right-body"><div class="err-bg-body">
				<div class="err-closeBx"></div>
				<span class="err-title">beer</span>
				<span class="err-text">xxxx xxxx xxxxxxxxxxxxxx xxxxx xxxx xxxx xxxxxxxxxxxxxx xxxxx xxxxxxxxxxx xxxx xxxx xxxx xxxxxxxxxxxxxx xxxxx xxxx xxxx xxxxxxxxxxxxx xxxx xxxx xxxxxxxxxxxxxx xxxxx xxxx xxxx xxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxx xxxx xxxx xxxxxxxxxxxxxx xxxxx xxxx xxxx xxxxxxxxxxxxx xxxx xxxx xxxxxxxxxxxxxx xxxxx xxxx xxxx xxxxxxxxxxxxxx xxxxx </span>
			</div></div></div>
			<div class="err-left-bottom"><div class="err-right-bottom"><div class="err-bg-bottom"></div></div></div>
		</div>
		*/
		this.overLay = new Element('div', {'id' : 'overlay'}).inject(document.body);
		fx = { overlay: new Fx.Tween(this.overLay, {property: "opacity", duration: 500}).set(0) };
		
		this.setup(true);
			
		this.position();
		
		this.errorBox = new Element('div', {
			'class': this.options.className + '-container',
			'styles': {
				'visibility': 'hidden'
			}
		}).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);
		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.$tmp.myTitle = (el.href && el.getTag() == 'a') ? el.href.replace('http://', '') : (el.rel || false);
		if (el.title){
			var dual = el.title.split('::');
			if (dual.length > 1){
				el.$tmp.myTitle = dual[0].trim();
				el.$tmp.myText = dual[1].trim();
			} else {
				el.$tmp.myText = el.title;
			}
			el.removeAttribute('title');
		} else {
			el.$tmp.myText = false;
		}
		
		if (el.$tmp.myTitle && el.$tmp.myTitle.length > this.options.maxTitleChars) 
			el.$tmp.myTitle = el.$tmp.myTitle.substr(0, this.options.maxTitleChars - 1) + "&hellip;";
		
		el.addEvent('click', function(event){
			this.start(el);
			if (!this.options.fixed) this.locate(event, el);
			else this.position(el);
		}.bind(this));
		*/
		if (!this.options.fixed) el.addEvent('mousemove', this.locate.bindWithEvent(this, el));
		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);
		}
	},

	start: function(el){
		this.wrapper.empty();
		if (el.$tmp.myText){ this.text = new Element('span', {'class': this.options.className + '-text'}).inject(this.wrapper).set('html', el.$tmp.myText); }
		$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(element){
		var pos = element.getPosition();
		if(this.options.useSetup) {
			this.errorBox.setStyles({
				'left': pos.x + this.options.offsets.x,
				'top': pos.y + this.options.offsets.y
			});
		}
	},

	locate: function(event, el){
		var win = {'x': window.getWidth(), 'y': window.getHeight()};
		var scroll = {'x': window.getScrollLeft(), 'y': window.getScrollTop()};
		var tip = {'x': this.errorBox.offsetWidth, 'y': this.errorBox.offsetHeight};
		var prop = {'x': 'left', 'y': 'top'};
		for (var z in prop){
			var pos = event.page[z] + this.options.offsets[z];
			if ( (pos + tip[z] - scroll[z]) > win[z] )
				pos = event.page[z] - this.options.offsets[z] - tip[z];
			this.errorBox.setStyle(prop[z], pos);
		};
	},

	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]);
	},
	
	receive: function(myText){
		this.position();	
		fx.overlay.start(this.options.overlayOpacity);
		this.wrapper.empty();
		if (myText){
			this.text = new Element('span', {
				'class': this.options.className + '-text'
			}).inject(this.wrapper).set('html', myText.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.receivePosition();
		
		$clear(this.timer);
		this.timer = this.show.delay(this.options.showDelay, this);
	},
	
	receivePosition: function(){
		/*this.overLay.setStyles({ 'width' : window.getScrollWidth(), 'height' : window.getScrollHeight() });*/
		this.errorBox.setStyles({
			'position': 'absolute',
			'left': (window.getScrollWidth() - this.errorBox.getCoordinates().width) / 2,
			'top': (window.getScrollHeight() - this.errorBox.getCoordinates().height) / 2
		});	
	},
	
	position: function(){
		$('overlay').setStyles({
			top: window.getScrollTop(),
			height: window.getHeight()
		});
	},
	
	setup: function(open) {
		["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";
		window[fn]("scroll", this.position)[fn]("resize", this.position);
	}

});