var Nav = Class.create({
	initialize: function(nav){
		this.nav  = $(nav);
		this.elements = this.nav.childElements('li');
		this.setup();
	},
	setup: function(){
		this.elements.each(function(el, i){
			el.observe('mouseover', this.show.bindAsEventListener(this, el));
			el.observe('mouseout', this.hide.bindAsEventListener(this, el));
		}.bind(this));
	},
	show: function(event, el){
		el.addClassName('active');
	},
	hide: function(event, el){
		el.removeClassName('active');
	}
});

/* ---------------------------------------------------------------- */

var Callout = Class.create({
	initialize: function(el, triggers){
		this.callout = $('callout');
		this.overlay = $('overlay');
		this.el  = $(el);
		this.triggers = triggers;
		this.setup();
	},
	setup: function(){
		this.height = (document.body.offsetHeight >= $('container').offsetHeight) ? $(document.body).offsetHeight : $('container').offsetHeight;
		this.callout.hide();
		this.triggers.each(function(el, i){
			el.observe('click', function(event){
				Event.stop(event);
				this.show();
			}.bind(this));
		}.bind(this));
		this.overlay.observe('click', this.hide.bindAsEventListener(this));
		if(this.el.select('.close').length > 0){
			this.el.select('.close').each(function(el, i){
				el.observe('click', this.hide.bindAsEventListener(this));
			}.bind(this));
		}
	},
	show: function(event){
		if(event) Event.stop(event);
		this.callout.style.height = this.height + 'px';
		this.callout.show();
		this.el.addClassName('show');
		this.el.observe('keypress', function(event){
			if(Event.KEY_ESC != event.keyCode) return;
			this.hide();
		}.bind(this));
	},
	hide: function(event){
		if(event) Event.stop(event);
		this.callout.fade({duration: 0.5});
		this.el.removeClassName('show');
	}
});

/* ---------------------------------------------------------------- */

document.observe("dom:loaded", function(){
	new Nav('nav-list');

	if($('flash')){
		$('flash').observe('click', function(event){
			var element = event.element();
			element.fade({to: 0, transition: Effect.Transitions.sinoidal, duration: 0.3});
		});
	}
});