window.addEvent('domready', function () {
    topnav = new RolloverMenu($$('a.nav-obj'), $$('.subnavwrap'));
});

var RolloverMenu = new Class({
	Implements: [Events, Options],
	
    options: {
        selectSlideDuration: 250,
        rolloverClass: 'bg-on',
		selectSlideTranstion: Fx.Transitions.Expo.easeOut
    },

    initialize: function (rolloverElements, menuElements, options) {		
		this.setOptions(options);
		this.rolloverElements = rolloverElements;
		this.menuElements = menuElements;	
		
		var timer = null;
		
		this.menuElements.each(function(menuElement){
			menuElement.set("slide", {					
				duration: this.options.selectSlideDuration,
				transition: this.options.selectSlideTranstion,
				onComplete: function(){	
					if (menuElement.getStyle("margin-top").toInt() == 0){
						menuElement.setStyle("overflow", "auto")
					}
					else { menuElement.setStyle("overflow", "hidden") }
				},
				onStart: function(){
					if (menuElement.getStyle("margin-top").toInt() == 0){
						menuElement.setStyle("overflow", "hidden")
					}
				}
			});      
		}, this);
		
		this.menuElements.slide('hide');
		
		// Bindings on mouseenter and mouseleave for each trigger(rolloverElements) and target(menuElements)
		this.rolloverElements.each(function(rolloverElement, index){
			rolloverElement.addEvents({
				mouseenter: function(){
					this.menuElements[index].slide("in");
				}.bind(this),
				
				mouseleave: function(){
					this.menuElements[index].slide("out")
				}.bind(this)
			});
		}, this);
		
		this.menuElements.each(function(menuElement, index){
			menuElement.addEvents({
				mouseenter: function(){
					this.menuElements[index].slide("in");
				}.bind(this),
				
				mouseleave: function(){
					this.menuElements[index].slide("out");			
				}.bind(this)
			});
		}, this);
    }
});