var DropMenu = Class.create({

	initialize: function(className) {

		

		// Get options

		this.options = Object.extend({

			textPadding:		8

		}, arguments[1] || {} );

		

		this.className = className;

		

		// Make menu items for each link

		var i = 0;

		this.menuItems = new Array();

		$$('a.' + this.className).each(function(elem) {

			this.menuItems[i++] = new DropMenuItem(elem, this.options);

		}, this);

	}

});



var DropMenuItem = Class.create({

	initialize: function(elem) {

		

		// Get options

		this.options = Object.extend({

			textPadding:		8

		}, arguments[2] || {} );

		

		// Initialize members

		this.element = $(elem);

		this.delayTimer = null;

		

		// Look for a submenu

		var matchArray = /([^\/]+)\.(php|html?)/i.exec(this.element.href);

		this.page = matchArray[1];

		this.submenu = $(this.page);

		this.isWidthSet = false;

		

		// Don't bother attaching events if we cant find the submenu

		if(this.submenu == null) {

			return; }

		

		// Attach events

		this.bonMouseOver = this.onMouseOver.bindAsEventListener(this);

		this.bonMouseOut  = this.onMouseOut.bindAsEventListener(this);

		this.element.observe('mouseover', this.bonMouseOver);

		this.element.observe('mouseout',  this.bonMouseOut);

		

		this.bonSubmenuOver = this.onSubmenuOver.bindAsEventListener(this);

		this.bonSubmenuOut  = this.onSubmenuOut.bindAsEventListener(this);

		this.bonSubmenuUp   = this.onSubmenuUp.bindAsEventListener(this);

		this.submenu.observe('mouseover', this.bonSubmenuOver);

		this.submenu.observe('mouseout',  this.bonSubmenuOut);

		this.submenu.observe('mouseup',   this.bonSubmenuUp);

	},

	

	onSubmenuUp: function(event) {

		var thisObj = this;

		this.delayTimer = setTimeout(function() { thisObj.submenu.hide(); }, 50);

	},

	

	onSubmenuOver: function(event) {

		clearTimeout(this.delayTimer);

	},

	

	onSubmenuOut: function(event) {

		var thisObj = this;

		this.delayTimer = setTimeout(function() { thisObj.submenu.hide(); }, 200);

	},

	

	onMouseOver: function(event) {

		

		// Get rid of a hide timer if there is one

		if(this.delayTimer != null) {

			clearTimeout(this.delayTimer); }

		

		// Set the original height of the submenu

		if(!this.submenu.originalHeight) {

			this.submenu.originalHeight = this.submenu.getHeight(); }

		

		// Set the width properly

		if(this.isWidthSet == false)

		{

			var newWidth;

			var origWidth = this.submenu.getWidth();

			var parentWidth = this.element.getWidth();

			

			// For some reason FF3 adds an extra pixel, every other borwser checked (including FF2) was fine

			if(navigator.oscpu && navigator.userAgent.match("rv:1\.9") && navigator.userAgent.match("Gecko\/2")) {

				parentWidth -= 1; }

			

			// If the width is less than the parent, use the parent width

			if(origWidth + 2*this.options.textPadding < parentWidth) {

				newWidth = parentWidth; }

			else {

				newWidth = origWidth + 2*this.options.textPadding; }

			

			// Set the width

			this.submenu.setStyle({width: newWidth + 'px'});

			this.isWidthSet = true;

		}

		

		// Show it

		this.submenu.show();

	},

	

	onMouseOut: function(event) {

		var thisObj = this;

		this.delayTimer = setTimeout(function() { thisObj.submenu.hide(); }, 200);

	}

});