var AnimationController = new Class({
	initialize: function() {
		this.sites = $$('#gallery li.site');
		this.spotlight = $$('#gallery div.spotlight')[0];
		this.showSites(this);
		// this.showSpotlight();
	},
	showSites: function(self) {
		if (self.sites.length > 0) {
			var site = self.sites.shift();
			if (Browser.Engine.trident) {
				site.setStyle('opacity', 1);
			} else {
				var fx = new Fx.Morph(site, {duration: 400});
				fx.start({ opacity: [0,1] });
			}
			setTimeout(function(){ self.showSites(self) }, 150);
		}
	}//,
	// showSpotlight: function() {
	// 	var fx = new Fx.Morph(this.spotlight, {duration: 1000});
	// 	fx.start({
	// 		bottom: [-300, 0]
	// 		// opacity: [0,1]
	// 	});
	// }
})

var TooltipsController = new Class({
	initialize: function() {
		var self = this;
		this.sites         = $$('#gallery li.site');
		this.tooltips      = $$('#gallery li.site-tooltip');
		this.gallery       = $('gallery');
		this.galleryCenter = this.gallery.getWidth()/2;

		// Set tip position
		this.sites.each(function(site){
			var position = site.getPosition(self.gallery);
			var index    = site.getAllPrevious().length;
			if (position.x < self.galleryCenter) {
				self.tooltips[index].addClass('site-tooltip-left').setStyles({
					left: position.x + 85,
					top:  position.y + 25
				});
			} else {
				self.tooltips[index].addClass('site-tooltip-right').setStyles({
					left: position.x - 400 + 85,
					top:  position.y + 25
				});
			}
		});
		
		// Show hide events
		this.sites.getElement('a').addEvents({
			mouseover: function(event){
				self.show(this.getParent());
				self.cancelTimer();
			},
			mouseout: function(event) {
				self.setTimer();
			}
		});

		// Show hide events
		this.tooltips.addEvents({
			mouseover: function(event) {
				self.cancelTimer();
			},
			mouseout: function(event) {
				self.setTimer();
			}
		});
	},

	show: function(site) {
		this.hide(this);
		var index = site.getAllPrevious().length;
		site.addClass('tooltip-visible');
		this.tooltips[index].setStyles({
			display: 'block'
		});
		// this.setTimer();
	},

	// This can be called from a timer
	hide: function(self) {
		self.cancelTimer();
		self.sites.removeClass('tooltip-visible');
		self.tooltips.setStyles({
			display: 'none'
		});
	},

	setTimer: function() {
		var self = this;
		this.timer = setTimeout(function() { self.hide(self) }, 0);
	},

	cancelTimer: function() {
		clearTimeout(this.timer);
	}
});

window.addEvent('domready', function(){
	new AnimationController();
	new TooltipsController();
});