var dropUpMenu = Class.create();
dropUpMenu.prototype = {
	
	animationDuration:0.5,
	buttonItem:null,
	menuItems:null,
	backgroundItems:null,
	
	initialize: function(element) {
		this.buttonItem = element;
		if(element.down('dl')) {
			this.menuItems = element.down('dl');
			Element.setStyle(this.menuItems, {'visibility':'visible'});
			Element.absolutize(this.menuItems);
			Element.addClassName(this.menuItems, 'clearfix');
			this.backgroundItems = new Element('div');
			Element.addClassName(this.backgroundItems, 'dropupMenu');
			Element.insert(this.menuItems, {before: this.backgroundItems});
			Element.absolutize(this.backgroundItems);
			Element.hide(this.menuItems);
			Element.hide(this.backgroundItems);
			this.activate();
		}
	},
	
	
	dispose: function(element) {
		this.inherit();
	},
	
	activate: function() {
		Event.observe(this.buttonItem, 'mouseover', this.expand.bind(this));
	},

	inherit: function() {
		Event.stopObserving(this.buttonItem, 'mouseover', this.expand.bind(this));
	},

	expand: function() {
		Element.show(this.menuItems);
		Element.show(this.backgroundItems);
		var itemDimensions = Element.getDimensions(this.menuItems.down('dt',1));
		var buttonCoordinates = Element.positionedOffset(this.buttonItem);
		var buttonDimensions = Element.getDimensions(this.buttonItem);
		var menuDimensions = Element.getDimensions(this.menuItems);
		var offsetY = Math.floor((itemDimensions.height-buttonDimensions.height)/2)+1;
		var offsetHeight = (Prototype.Browser.IE && Number(navigator.userAgent.match(/MSIE ([0-9.]+)/)[1])>6) ? buttonDimensions.height*(this.menuItems.descendants().length+0.5) : 0;
		this.menuItems.setStyle({'width':buttonDimensions.width+'px'});
		this.menuItems.setStyle({'left':buttonCoordinates.left+'px'});
		this.menuItems.setStyle({'top':(buttonCoordinates.top-offsetY-menuDimensions.height-offsetHeight)+'px'});
		this.backgroundItems.setStyle({'width':buttonDimensions.width+'px'});
		this.backgroundItems.setStyle({'height':(itemDimensions.height+menuDimensions.height+2+offsetHeight)+'px'});
		this.backgroundItems.setStyle({'left':(buttonCoordinates.left-1)+'px'});
		this.backgroundItems.setStyle({'top':(buttonCoordinates.top-offsetY-menuDimensions.height-1-offsetHeight)+'px'});
		this.expandFinish();
	},
	
	expandFinish: function() {
		Event.observe(document, 'mousemove', function(e) {
			if(this.backgroundItems.getStyle('display')!='none') {
				var left = Element.cumulativeOffset(this.backgroundItems).left;
				var top = Element.cumulativeOffset(this.backgroundItems).top;
				var width = Element.getDimensions(this.backgroundItems).width;
				var height = Element.getDimensions(this.backgroundItems).height;
				var mouseX = Event.pointerX(e);
				var mouseY = Event.pointerY(e);
				if(mouseX<left-20 || mouseX>left+width+20 || mouseY<top-20 || mouseY>top+height+20) {
					this.collapse();
				}
			}
		}.bind(this),false);
	},
	
	collapse: function() {
		this.collapseFinish();
		Event.stopObserving(document, 'mousemove', function(e) {
			if(this.backgroundItems.getStyle('display')!='none') {
				var left = Element.cumulativeOffset(this.backgroundItems).left;
				var top = Element.cumulativeOffset(this.backgroundItems).top;
				var width = Element.getDimensions(this.backgroundItems).width;
				var height = Element.getDimensions(this.backgroundItems).height;
				var mouseX = Event.pointerX(e);
				var mouseY = Event.pointerY(e);
				if(mouseX<left-20 || mouseX>left+width+20 || mouseY<top-20 || mouseY>top+height+20) {
					this.collapse();
				}
			}
		}.bind(this),false);
	},

	collapseFinish: function(obj) {
		Element.hide(this.menuItems);
		Element.hide(this.backgroundItems);
	}

}

function initdropUpMenus() {
	$$('.dropup').each(function(el) {
		var myDropUpMenu = new dropUpMenu(el);
	});
}
Event.observe(window, 'load', initdropUpMenus, false);