var menu;
window.addEvent('domready', function() {
    menu = new SignMenu();
	new HoverGroup({
		elements: [$$('.sign-top').getParent('li'), $('dropdown-nav').getElements('li')],
		onEnter: function(){
			menu.show();
		},
		onLeave: function(){
			menu.hide();
		},
		delay: 500
	})
});

soundManager.onready(function() {
  if (soundManager.supported()) {
	soundManager.createSound({
	  id: 'menu_sound',
	  url: webroot+'audio/menu-drop-short.mp3',
	  autoLoad: true,
	  autoPlay: false,
	  volume: 50
	});
  } else {
    // unsupported/error case
  }
});

var SignMenu = new Class({
    Implements: [Options, Chain],
    options: {
        element: 'dropdown-nav',
		leader: '.findithere',
		transitionIn: Fx.Transitions.Bounce.easeOut,
		transitionOut: Fx.Transitions.Expo.easeIn,
		durationIn: 800,
		durationOut: 200
    },
    initialize: function(options){
        this.setOptions(options);
		this.menu = $(this.options.element).getElements('img:not('+this.options.leader+')');
		this.leader = $(this.options.element).getElements(this.options.leader);
		this.start();
		this.mask = new Mask(document.body, {'id': 'menu-mask', 'style': { 'background': 'black', 'opacity': 0}}).show();
    },
	show: function() {
        if(!Cookie.read('disableaudio')) { (function(){soundManager.play('menu_sound');}).delay(100) }
		this.chain(
			function() { this.pull(this.leader) },
			function() { this.sequential(this.menu) }
		);
		this.callChain();
		$('menu-mask').fade(0.7);
	},
	hide: function() {
		this.chain(
			function() { this.pull(this.menu) },
			function() { this.sequential(this.leader) }
		);
		this.callChain();
		$('menu-mask').fade(0);
	},
	start: function(){
		this.menu.each(function(item, index){
			$clear(item.retrieve('delayed'));
			var offset = index * -100 - 150;
			item.setStyle('margin-top', offset);
		});
	},
	pull: function(el){
		var self = this;
		el.each(function(item, index){
			$clear(item.retrieve('delayed'));
			var offset = index * -100 - 150;
			item.set('tween', {'transition': self.options.transitionOut, 'duration': self.options.durationOut, 'link': 'cancel' });
			item.tween('margin-top', offset);
		});
		(function(){self.callChain();}).delay(self.options.durationOut);
	},
	drop: function(el){
		var self = this;
		$clear(el.retrieve('delayed'));
		el.set('tween', {'transition': self.options.transitionIn, 'duration': self.options.durationIn, 'link': 'cancel' });
		el.tween('margin-top', 0);
		(function(){self.callChain();}).delay(self.options.durationIn);
	},
	stagger: function(el){
		var self = this;
		el.each(function(item, index){
			$clear(item.retrieve('delayed'));
			if(index % 2 === 1) {
				var duration = self.options.durationIn - 100;
				item.set('tween', {'transition': self.options.transitionIn, 'duration': duration, 'link': 'cancel' });
				item.store('delayed', item.tween.pass(['margin-top', 0], item).delay(100));
			} else {
				item.set('tween', {'transition': self.options.transitionIn, 'duration': self.options.durationIn, 'link': 'cancel' });
				item.tween('margin-top', 0);
			}
		});
		(function(){self.callChain();}).delay(self.options.durationIn);
	},
	sequential: function(el, reverse) {
		var self = this;
		el.each(function(item, index){
			$clear(item.retrieve('delayed'));
			var delay = reverse ? 250 - index * 50 : index * 50;
			var duration = self.options.durationIn - delay;
			item.set('tween', {'transition': self.options.transitionIn, 'duration': duration, 'link': 'cancel' });
			item.store('delayed', item.tween.pass(['margin-top', 0], item).delay(delay));
		});
		(function(){self.callChain();}).delay(self.options.durationIn);
	}
});