var opener, steams;

window.addEvent('domready', function() {
	var wait = 2000;
	fading_text = $$('#tagline-faders img');
	fading_text.each(function(el, index){
		el.setStyle('display', '');
		el.setStyle('opacity', 0);
		var delay = index * (wait + 1000);
		(function(){el.fade(1);}).delay(delay);
		if(index + 1 != fading_text.length) {
			(function(){el.fade(0);}).delay(delay+500+wait);
		}
	});
	
	steams = $$('.smoke');
	Array.each(steams, function(el, index) {
		if(index + 1 === steams.length) {
			el.setStyle('opacity', 1);
		} else {
			el.setStyle('opacity', 0);
		}
	});

	opener = new SlideOpener({'elements': ['first', 'second', 'third']});
});

var SlideOpener = new Class({
    Implements: [Options, Chain],
    options: {
       hider: 'hider',
	   duration: 1000,
	   delay: 500,
	   transition: Fx.Transitions.Cubic.easeOut
    },
    initialize: function(options){
		var that = this;
		this.opener = []; this.trigger = []; this.queue = {};
		this.setOptions(options);
		this.hider = $(this.options.hider);
		Array.each(this.options.elements, function(string, index) {
			var opener = $(string);
			var trigger = $$('a.'+string);
			if(typeOf(trigger) === 'elements') {
				trigger = trigger[0];
			}
			this.opener[index] = opener;
			this.trigger[index] = trigger;
			opener.setStyles({'opacity': 0, 'display': 'block'});
			trigger.addEvent('mouseenter', function(e) {
				that.hover(index);
			});
		}, this);
		this.hider.getParent().addEvent('mouseleave', function(e) {
			if(!that.trigger.contains(e.relatedTarget)) {
				that.exit();
			}
		});
		this.openfx = new Fx.Elements([this.hider, this.opener].flatten(), {duration: this.options.duration, transition: this.options.transition, link: 'cancel'});
		this.status = 'closed';
    },
	hover: function(index) {
		clearTimeout(this.queue['exit']);
		this.current = index;
		if(this.status === 'closed') {
			this.show();
		} else if(this.status === 'opened') {
			this.transition();
		}
	},
	exit: function() {
		if(this.status === 'opened') {
			this.queue['exit'] = this.hide.bind(this).delay(this.options.delay);
		}
	},
	show: function() {
		var opener = this.opener[this.current];
		var coord = this.trigger[this.current].getCoordinates();
		var coorb = this.hider.getParent().getCoordinates();
		var left = coord.left + (coord.width / 2).floor() - coorb.left;
		var bottom = (coord.bottom - (coord.height / 2).floor() - coorb.bottom) * -1;
		this.hider.setStyles({'left': left, 'bottom': bottom});
		var fx = {};
		Array.each(this.opener, function(el, index) {
			el.setStyles({
				'left': left*-1,
				'bottom': bottom*-1,
				'opacity': 0
			});
			fx[index+1] = { 'left': 0, 'bottom': 0 };
		});
		fx['0'] = { 'left': 0, 'bottom': 0, 'height': [1, 380], 'width': [1, 520] };
		this.openfx.start(fx);
		(function() { opener.setStyle('opacity', 100); }).delay(20);
		this.status = 'opened';
	},
	hide: function() {
		if(!Browser.ie) {
			var coord = this.trigger[this.current].getCoordinates();
			var coorb = this.hider.getParent().getCoordinates();
			var left = coord.left + (coord.width / 2).floor() - coorb.left;
			var bottom = (coord.bottom - (coord.height / 2).floor() - coorb.bottom) * -1;
			var fx = {};
			Array.each(this.opener, function(el, index) {
				fx[index+1] = { 'left': left*-1, 'bottom': bottom*-1 };
			});
			fx['0'] = { 'left': left, 'bottom': bottom, 'height': 1, 'width': 1 };
			this.openfx.start(fx);
		} else {
			Array.each(this.opener, function(el, index) {
				el.setStyle('opacity', 0);
			});			
		}
		this.status = 'closed';
	},
	transition: function() {
		$('callouts').setStyle('z-index', 1100);
		var interrupt = this.opener[this.current].getStyle('opacity') > 0;
		Array.each(this.opener, function(el, i) {
			clearTimeout(this.queue[i]);
			if(i === this.current) {
				el.fade(1);
				if(!interrupt) {
					el.setStyle('z-index', 1001);					
				}
			} else {
				if(!interrupt) {
					el.setStyle('z-index', 1000);
					this.queue[i] = (function() { el.fade('hide'); }).delay(500);
				} else {
					el.fade(0);
				}
			}
		}, this);
	},
	toElement: function() {
		return this.hider;
	}
});