var CtMenu_Level1 = Class.create({
	element: null,
	id: null,
	isCurrent: false,
	link: null,
	sub: null,
	delay: null,

	initialize: function(htmlElement) {
		this.element = $(htmlElement);
		this.id = this.element.identify();
		this.isCurrent = this.element.hasClassName('ctMenu-level1-current');
		this.sub = null;
		this.link = this.element.down('a.ctMenu-level1-item');
		this.delay = null;

		var subElement = this.element.down('div.ctMenu-level2');
		if (!this.isCurrent && subElement) {
			this.sub = new CtMenu_Level2(subElement);
		}


		if (!this.isCurrent && this.sub) {
			this.element.observe('mouseover', this.mouseOverHandler.bindAsEventListener(this));
			this.element.observe('mouseout', this.mouseOutHandler.bindAsEventListener(this));
		}
	},



	mouseOverHandler: function(event) {
		if (event.relatedTarget == null || event.relatedTarget == this.element || Element.descendantOf(event.relatedTarget, this.element) == true) {
			return;
		}

		this.delay = setTimeout(function() {
			this.link.addClassName('ctMenu-level1-item-opened');
			this.sub.show();
		}.bind(this), 300);
	},


	mouseOutHandler: function(event) {
		if (event.relatedTarget == null || event.relatedTarget == this.element || Element.descendantOf(event.relatedTarget, this.element) == true) {
			return;
		}

		if (this.delay) {
			clearTimeout(this.delay);
			this.delay = null;
		}
	},


	close: function() {
		if (!this.isCurrent && this.sub) {
			this.sub.hide();
			this.link.removeClassName('ctMenu-level1-item-opened');

		}
	}

});


var CtMenu_Level2 = Class.create({

	element: null,
	id: null,
	height: null,


	initialize: function(htmlElement) {
		this.element = $(htmlElement);
		this.id = this.element.identify();

		this.element.show();
		this.height = this.element.getHeight();
		this.element.hide();
	},


	show: function() {
		if (!this.element.visible()) {
			this.element.setStyle({height: '0px'});
			this.element.show();
		}
		new Effect.Morph(this.element, {
			duration: 0.3,
			style: {height: this.height + 'px'},
			queue: {scope: this.id, position: 'end'}
		});
	},


	hide: function() {
		new Effect.Morph(this.element, {
			duration: 0.3,
			style: {height: '0px'},
			afterFinish: function() {
				this.element.hide();
			}.bind(this),
			queue: {scope: this.id, position: 'end'}
		});
	}


});


var CtMenu = Class.create({

	element: null,
	items: [],
	delay: null,


	initialize: function() {
		this.delay = null;

		var ctMenu = $$('div.ctMenu');
		if (ctMenu.length == 0 ) {
			return;
		}
		this.element = ctMenu[0];

		var level1 = this.element.select('div.ctMenu-level1');

		for (var i = 0; i < level1.length; i++) {
			this.items.push(new CtMenu_Level1(level1[i]));
		}


		this.element.observe('mouseover', this.mouseOverHandler.bindAsEventListener(this));
		this.element.observe('mouseout', this.mouseOutHandler.bindAsEventListener(this));
	},


	mouseOverHandler: function(event) {
		if (this.delay) {
			clearTimeout(this.delay);
			this.delay = null;
		}
	},


	mouseOutHandler: function(event) {
		if (event.relatedTarget == null || event.relatedTarget == this.element || Element.descendantOf(event.relatedTarget, this.element) == true) {
			return;
		}

		this.delay = setTimeout(this.closeMenu.bind(this), 1000);

	},


	closeMenu: function() {
		this.items.each(function(item) { item.close(); });
	}

});

ScriptsManager.registerScript("CtMenu");