/************************************************************\
 *        (c) 2009, Bluebear Internet Data Solutions        *
 *    http://www.bluebear.nl/        http://www.tic4.nl/    *
 *                                                          *
 *                    Licensed under the                    *
 * Creative Commons Attribution-Share Alike 3.0 Netherlands *
 *      http://creativecommons.org/licenses/by-sa/3.0/      *
\************************************************************/
var bbMenu = new Class({
	Implements: [Events, Options],
	options: {
		'container': 'menu',
		'submenus': 'ul.submenu',
		// Main menu item effects:
		'mainEffect': false,        // [fade, lava, simple]
		'mainTransition': Fx.Transitions.Sine.easeOut,
		'mainOptions': undefined,
		'mainDuration': 0,
		// Sub menu appear effect:
		'subMenuEffect': false,     // [fade, slide, simple]
		'subMenuTransition': Fx.Transitions.Sine.easeOut,
		'subMenuOptions': undefined,
		'subMenuDuration': 0,
		// Sub menu item effects:
		'subItemEffect': false,     // [fade, none]
		'subItemTransition': Fx.Transitions.Sine.easeOut,
		'subItemOptions': undefined,
		'subItemDuration': 0
	},
	initialize: function(options) {
		// Set variables.
		this.setOptions(options);
		this.active = false;
		this.items = Array();
		this.submenus = Array();
		if (typeof this.options.container == 'string') {
			var m = $(this.options.container);
		} else {
			var m = this.options.container;
		}
		this.menu = m.getChildren();
		this.menu.each(function(item, i) {
			this.items[i] = item.getElement('a');
			this.submenus[i] = item.getElement(this.options.submenus);
			if (item.getChildren('a.active').length) {
				this.active = i;
			}
		}, this);
		this.subitems = m.getElements(this.options.submenus+' a');

		// Create functions to animate menu items.
		switch(this.options.mainEffect) {
			case 'fade':
				this.mainFade();
				break;

			case 'lava':
				this.mainLava();
				break;

			default:
				if (Browser.Engine.trident4) {
					this.mainSimple();
				}
		}

		// Create functions to make submenu appear.
		switch(this.options.subMenuEffect) {
			case 'slide':
				this.subMenuSlide();
				break;

			case 'fade':
				this.subMenuFade();
				break;

			default:
				if (Browser.Engine.trident4) {
					this.subMenuSimple();
				}
		}

		// Create functions to animate submenu items.
		switch(this.options.subItemEffect) {
			case 'fade':
				this.subItemFade();
				break;
		}

		if (typeof this.activate !== 'undefined' && typeof this.deactivate !== 'undefined') {
			// Attach events
			this.menu.each(function(item, i) {
				item.addEvents({
					'mouseenter': function() {
						this.activate(i);
					}.bind(this),
					'mouseleave': function() {
						this.deactivate(i);
					}.bind(this)
				});
			}, this);
		}
	},
	subMenuActivate: function(i) {
		return;
	},
	subMenuDeactivate: function(i) {
		return;
	},
	mainSimple: function() {
		this.activate = function(i) {
			if (this.active !== i) {
				this.items[i].addClass('active');
			}
			this.subMenuActivate(i);
		},
		this.deactivate = function(i) {
			if (this.active !== i) {
				this.items[i].removeClass('active');
			}
			this.subMenuDeactivate(i);
		}
	},
	mainFade: function() {
		this.mainStyles = Array();
		this.items.each(function(item, i) {
			if (typeof this.options.mainOptions !== 'undefined') {
				this.mainStyles[i] = {};
				for (var opt in this.options.mainOptions) {
					this.mainStyles[i][opt] = item.getStyle(opt);
				}
			}
			item.set('morph', {
				'duration': this.options.mainDuration,
				'transition': this.options.mainTransition
			}).setStyles(this.mainStyles[i]);
		}, this);
		this.activate = function(i) {
			if (this.active !== i) {
				this.items[i].morph(this.options.mainOptions);
			}
			this.subMenuActivate(i);
		},
		this.deactivate = function(i) {
			if (this.active !== i) {
				this.items[i].morph(this.mainStyles[i]);
			}
			this.subMenuDeactivate(i);
		}
	},
	mainLava: function() {
		if (typeof this.bg === 'undefined') {
			this.bg = new Element('li', {
				'class': 'background',
				'styles': {
					'display': 'block',
					'margin': 0,
					'position': 'absolute'
				}
			}).inject(this.menu[0], 'before').fade('hide').set('morph', {
				'transition': this.options.mainTransition,
				'duration': this.options.mainDuration
			});
			if (this.active !== false) {
				this.bg.setStyles({
					'left': this.menu[this.active].offsetLeft,
					'top': this.menu[this.active].offsetTop,
					'width': this.menu[this.active].offsetWidth,
					'height': this.menu[this.active].offsetHeight
				}).fade('show');
			}
			this.menu.setStyle('background', 'transparent none');
			this.items.each(function(item) {
				item.setStyle('background', 'transparent none');
			});
		}
		this.activate = function(i) {
			this.bg.morph({
				'left': this.menu[i].offsetLeft,
				'top': this.menu[i].offsetTop,
				'width': this.menu[i].offsetWidth,
				'height': this.menu[i].offsetHeight
			});
			if (this.active === false) {
				this.bg.fade('in');
			} else {
				this.items[this.active].removeClass('active');
			}
			this.items[i].addClass('active');
			this.subMenuActivate.delay(this.options.mainDuration/2,this,i);
		},
		this.deactivate = function(i) {
			this.items[i].removeClass('active');
			if (this.active !== false) {
				this.bg.morph({
					'left': this.menu[this.active].offsetLeft,
					'top': this.menu[this.active].offsetTop,
					'width': this.menu[this.active].offsetWidth,
					'height': this.menu[this.active].offsetHeight
				});
				this.items[this.active].addClass('active');
			}
			this.subMenuDeactivate(i);
		}
	},
	subMenuSimple: function() {
		this.subMenuActivate = function(i) {
			if (this.submenus[i]) {
				this.submenus[i].setStyle('display', 'block');
			}
		},
		this.subMenuDeactivate = function(i) {
			if (this.submenus[i]) {
				this.submenus[i].setStyle('display', 'none');
			}
		}
	},
	subMenuSlide: function() {
		this.submenus.each(function(sub) {
			if (sub) {
				sub.set('slide', {
					'duration': this.options.subMenuDuration,
					'transition': this.options.subMenuTransition
				}).setStyle('display', 'block').slide('hide');
			}
		}, this);
		this.subMenuActivate = function(i) {
			if (this.submenus[i]) {
				this.submenus[i].slide('in');
			}
		},
		this.subMenuDeactivate = function(i) {
			if (this.submenus[i]) {
				this.submenus[i].slide('out');
			}
		}
	},
	subMenuFade: function() {
		this.submenus.each(function(sub) {
			if (sub) {
				sub.set('tween', {
					'duration': this.options.subMenuDuration,
					'transition': this.options.subMenuTransition
				}).setStyle('display', 'block').fade('hide');
			}
		}, this);
		this.subMenuActivate = function(i) {
			if (this.submenus[i]) {
				this.submenus[i].fade('in');
			}
		},
		this.subMenuDeactivate = function(i) {
			if (this.submenus[i]) {
				this.submenus[i].fade('out');
			}
		}
	},
	subItemFade: function() {
		this.subItemStyles = Array();
		this.subitems.each(function(item, i) {
			if (typeof this.options.subItemOptions !== 'undefined') {
				this.subItemStyles[i] = {};
				for (var opt in this.options.subItemOptions) {
					this.subItemStyles[i][opt] = item.getStyle(opt);
				}
			}
			item.set('morph', {
				'duration': this.options.subItemDuration,
				'transition': this.options.subItemTransition
			}).setStyles(this.subItemStyles[i]).addEvents({
				'mouseenter': function() {
					if (!item.hasClass('active')) {
						item.morph(this.options.subItemOptions);
					}
				}.bind(this),
				'mouseleave': function() {
					if (!item.hasClass('active')) {
						item.morph(this.subItemStyles[i]);
					}
				}.bind(this)
			});
		}, this);
	}
});