var RolloverMenu = Class.create({
	initialize: function(button, dialogMenu, offsetLeft) {
		var timer;
		var enabled = true;
		var dialogMenuT = $T(dialogMenu);
		
		this.isEnabled = function() {
			return enabled;
		}
		this.setEnabled = function(enabledParam) {
			enabled = enabledParam;
		}
		
		var positionDialog = function() {
			if(!dialogMenuT.alreadyPositioned) {
				dialogMenu.clonePosition(button, {
					setWidth : false,
					setHeight : false,
					offsetLeft : offsetLeft || 0,
					offsetTop : button.getHeight()
				});
				dialogMenuT.alreadyPositioned = true;
			}
		};
		
		var cancelTimer = function() {
			if (timer) {
				window.clearTimeout(timer);
				timer = null;
			}
		};
		
		var hide = function() {
			cancelTimer();
			Effect.Fade(dialogMenu,{duration:0.3, queue: {position:'end',scope:"RolloverMenu"}});
		};
		
		var startTimer = function() {
			cancelTimer();
			timer = window.setTimeout(hide, 500);
		};
		
		var show = function() {
			if(!enabled) return;
			cancelTimer();
			positionDialog();
			Effect.Appear(dialogMenu,{duration:0.3, queue: {position:'end',scope:"RolloverMenu"}});
		};
		
		button.observe('click',show);
		button.observe('mouseout',startTimer);
		button.observe('mouseover',cancelTimer);
		dialogMenu.observe('click',hide);
		dialogMenu.observe('mouseout',startTimer);
		dialogMenu.observe('mouseover',cancelTimer);
	},
	
	enable: function() {
		this.setEnabled(true);
	},
	
	disable: function() {
		this.setEnabled(false);
	}
});

var RolloverMenuContainer = Class.create({
	initialize: function(container, buttonSelector, dialogSelector, offsetLeft){
		var timer;
		var activeDialog = null;
		var scope = "RolloverMenuContainer_" + container;
		var dialogs = new Hash();
		
		var findDialog = function(button) {
			var dialog = dialogs.get(button.id);
			if(dialog) {
				return dialog;
			}
			return dialogs.set(button.id, button.next(dialogSelector));
		};
		
		var cancelTimer = function(dialog) {
			if(!dialog || dialog == activeDialog) {
				if (timer) {
					window.clearTimeout(timer);
					timer = null;
				}
			}
		};
		
		var hide = function(dialog) {
			cancelTimer();
			activeDialog = null;
			Effect.Fade(dialog,{duration:0.3, queue: {position:'end',scope:scope}});
		};
		
		var startTimer = function(dialog) {
			if(dialog && activeDialog == dialog) {
				cancelTimer();
				timer = window.setTimeout(function(){
					hide(dialog);
				}, 500);
			}
		};
		
		var show = function(event) {
			var element = event.findElement();
			var elementT = $T(element);
			var dialog = findDialog(element);
			cancelTimer();
			if(activeDialog) {
				hide(activeDialog);
			}
			activeDialog = dialog;
			if(!elementT.positionedBubble) {
				dialog.clonePosition(element, {setWidth: false, setHeight: false, offsetTop: element.getHeight(), offsetLeft: offsetLeft || 0});
				elementT.positionedBubble = true;
			}
			Effect.Appear(dialog,{duration:0.3, queue: {position:'end',scope: scope}});
		};
		
		var options = {};
		options[buttonSelector] = show;
		options[dialogSelector] = function(event) {hide(event.element());};
		$(container).delegators('click', options);
		options = {};
		options[buttonSelector] = function(event) {startTimer(findDialog(event.element()));};
		options[dialogSelector] = function(event) {startTimer(event.element());};
		$(container).delegators('mouseout', options);
		options = {};
		options[buttonSelector] = function(event) {cancelTimer(findDialog(event.element()));};
		options[dialogSelector] = function(event) {cancelTimer(event.element());};
		$(container).delegators('mouseover', options);
	}
});