var CtMenu_Item = Class.create({

	container: null,
	hoverCallback: null,

	isLinkHover: false,
	isSubItemHover: false,
	isInputFocus: false,

	initialize: function(container, hoverCallback) {
		this.container = $(container);
		this.hoverCallback = hoverCallback;

		var link = this.container.down('.ctMenu-item-link');
		Event.observe(link, 'mouseover', this.linkMouseOverHandler.bindAsEventListener(this));
		Event.observe(link, 'mouseout', this.linkMouseOutHandler.bindAsEventListener(this));
		Event.observe(link, 'mousedown', this.linkMouseDownHandler.bindAsEventListener(this));
		Event.observe(link, 'mouseup', this.linkMouseUpHandler.bindAsEventListener(this));


		var subItemContainer = this.container.down('.ctMenu-subitem');
		if (subItemContainer !== undefined) {
			if (subItemContainer.getWidth() < this.container.getWidth()) {
				subItemContainer.setStyle({width: this.container.getWidth() + 'px'});
			}
			Event.observe(subItemContainer, 'mouseover', this.subItemMouseOverHandler.bindAsEventListener(this));
			Event.observe(subItemContainer, 'mouseout', this.subItemMouseOutHandler.bindAsEventListener(this));
		}

		var input = this.container.select('.ctMenu-input');
		for (var i = 0; i < input.length; i++) {
			Event.observe(input[i], 'focus', this.inputFocusHandler.bindAsEventListener(this));
			Event.observe(input[i], 'blur', this.inputBlurHandler.bindAsEventListener(this));
		}
	},

	linkMouseOverHandler: function() {
		this.container.addClassName('hover');
		this.isLinkHover = true;
		this.container.addClassName('menu-top-item-active');
		this.hoverCallback(this);
	},

	linkMouseOutHandler: function() {
		this.container.removeClassName('hover');
		this.isLinkHover = false;
		setTimeout(this.hideSubItem.bind(this, false), 500);
	},

	subItemMouseOverHandler: function() {
		this.container.addClassName('hover');
		this.isSubItemHover = true;
	},

	subItemMouseOutHandler: function() {
		this.container.removeClassName('hover');
		this.isSubItemHover = false;
		setTimeout(this.hideSubItem.bind(this, false), 500);
	},

	linkMouseDownHandler: function(event) {
		if (!this.container.hasClassName('pressed')) {
			this.container.addClassName('pressed');
		}
	},

	linkMouseUpHandler: function(event) {
		this.container.removeClassName('pressed');
	},

	inputFocusHandler: function() {
		this.isInputFocus = true;
	},

	inputBlurHandler: function() {
		this.isInputFocus = false;
		setTimeout(this.hideSubItem.bind(this, false), 1000);
	},

	hideSubItem: function(ignoreFocus) {
		if (!this.isLinkHover && !this.isSubItemHover && (ignoreFocus || !this.isInputFocus)) {
			this.container.removeClassName('menu-top-item-active');
		}
	}
});


var CtMenu = Class.create({

	items: [],

	initialize: function() {
		var items = $$('.ctMenu-item');

		for (var i = 0; i < items.length; i++) {
			this.items.push(new CtMenu_Item(items[i], this.hoverCallback.bind(this)));
		}
	},

	hoverCallback: function(item) {
		for (var i = 0; i < this.items.length; i++) {
			if (item != this.items[i]) {
				this.items[i].hideSubItem(true);
			}
		}
	}
});


CtPage.registerScript('CtMenu');