Varien.SideMenu = Class.create();
Varien.SideMenu.prototype = {
	initialize: function(selector) {
		var self = this;
		$$(selector + ' li.subcat').each(function(element, index) {
			Event.observe(element, 'mouseover', this.showButton.bind(this, element, index));
			Event.observe(element, 'mouseout', this.hideButton.bind(this, element, index));
			Event.observe(element, 'click', this.activateButton.bind(this, element));
		}.bind(this));
	},

	showButton: function(el, index) {
		if(!el.hasClassName('active') && !el.hasClassName('noslide')) {
			var queue = Effect.Queues.get('sidemenu' + index);
			queue.each(function(effect) { effect.cancel(); });

			new Effect.Morph(el, {style: 'left: 0px;', duration: 0.5, queue: { position: 'end', scope: 'sidemenu' + index}});
		}
	},

	hideButton: function(el, index) {
		if(!el.hasClassName('active') && !el.hasClassName('noslide')) {
			var queue = Effect.Queues.get('sidemenu' + index);
			queue.each(function(effect) { effect.cancel(); });

			new Effect.Morph(el, {style: 'left: -114px;', duration: 0.5, queue: { position: 'end', scope: 'sidemenu' + index}});
		}
	},

	activateButton: function(el) {
		if(!el.hasClassName('active') && !el.hasClassName('noslide')) {
			el.addClassName('active');
		}
	}
};

Varien.TopMenu = Class.create();
Varien.TopMenu.prototype = {
	initialize: function(selector) {
		$$(selector + ' li.tab').each(function(element) {
			Event.observe(element, 'mouseover', this.toggleOn.bind(this, element));
			Event.observe(element, 'mouseout', this.toggleOff.bind(this, element));

			if(element.hasClassName('language')) {
				$$(selector + ' li.tab.language a.tab').each(function(href) {
					Event.observe(href, 'click', this.clickTab.bind(this, element));
				}.bind(this));
			} else if(element.hasClassName('shopping-cart')) {
				$$(selector + ' li.tab.shopping-cart a.tab').each(function(href) {
					Event.observe(href, 'click', this.clickTab.bind(this, element));
				}.bind(this));
			}
		}.bind(this));
	},

	toggleOn: function(li) {
		if(!li.hasClassName('active')) {
			li.addClassName('active');
		}
	},

	toggleOff: function(li) {
		if(li.hasClassName('active') && !li.hasClassName('open')) {
			li.removeClassName('active');
		}
	},

	clickTab: function(li) {
		if(!li.hasClassName('open')) {
			$$('li.tab.open').each(function(element) {
				this.clickTab(element);
				element.removeClassName('active');
			}.bind(this));

			li.addClassName('open');

			if(li.hasClassName('language')) {
				Effect.toggle('langselector', 'slide');
			} else if(li.hasClassName('shopping-cart')) {
				Effect.toggle('shoppingbag', 'slide');
			}

			$(document.body).descendants().invoke('observe', 'click', this.documentClick.bind(this));
			this.obervingLi = li;
		} else {
			li.removeClassName('open');

			if(li.hasClassName('language')) {
				Effect.toggle('langselector', 'slide');
			} else if(li.hasClassName('shopping-cart')) {
				Effect.toggle('shoppingbag', 'slide');
			}

			$(document.body).descendants().invoke('stopObserving', 'click', this.documentClick.bind(this));
			this.obervingLi = null;
		}
	},

	documentClick: function(event) {
		element = Event.element(event);

		if(this.obervingLi != null && !element.hasClassName('form-button')) {
			if(element.descendantOf(this.obervingLi) !== true) {
				$$('li.tab.open').each(function(element) {
					this.clickTab(element);
					element.removeClassName('active');
				}.bind(this));
			}
		}
	}
};