menuDropDown = Class.create();
menuDropDown.prototype = Object({
	elementId : '',
	optionId : '',
	initialize : function(select, options) {
		this.elementId = select;
		this.options = options;
		


		this.addEvents(select);

	},
	addEvents : function(select) {
		var THIS = this;
		$(select).observe('click', this.displaySortOptions.bindAsEventListener(this)).setStyle({ cursor: 'pointer'});
		this.setOptionEvents(select);

		$(select +'_options').observe('mouseout', function(e) {
				if (!e) var e = window.event;
				var relTarg = e.relatedTarget || e.toElement.up('div').id;
				if ($(relTarg).up('div').id != (select +'_options')) {
					this.hideMenu();
				}		
			}.bindAsEventListener(THIS));
	
	},
	setOptionEvents : function(select) {
		var THIS = this;
		$$('#'+ select +'_options ul')[0].childElements().each(function(childOption) {
			
				
				$(childOption).observe('mouseover', function() { 
						$(childOption).addClassName('selected'); 
						THIS.optionId = this.title;
					}.bindAsEventListener(childOption));
			$(childOption).observe('mouseout', function() { 
						$(childOption).removeClassName('selected'); 
					}.bindAsEventListener(childOption));

				$(childOption).observe('mouseover', THIS.displaySortOptions.bindAsEventListener(THIS));
				$(childOption).observe('click', THIS.selectOption.bindAsEventListener(THIS));
			
			});	

		
	},
	selectOption : function(el) {
		var select = this.elementId;
		var optionId = this.optionId;

		this.options.callBack(select, optionId);
		$$('#'+ select +'_options ul')[0].childElements().each(function(optionId) {
			if ($(optionId).hasClassName('selected')) {
				$(optionId).removeClassName('selected');
			}
		});
		$$('#'+ select +'_options ul li[title='+ optionId +']')[0].addClassName('selected');
		$(select + '_selection').innerHTML = $$('#'+ select +'_options ul li[title='+ optionId +']')[0].innerHTML;
		this.hideMenu();
	},
	displaySortOptions : function(el) {
		var select = this.elementId;
		var THIS = this;
		var selectOptions = $(select + '_options');
		var selectPositions = $(select).positionedOffset();
		var selectTop = parseInt(selectPositions[1]);
		var selectLeft = parseInt(selectPositions[0]);
		var selectWidth = parseInt($(select).getWidth());
		var selectHeight = parseInt($(select).getHeight());
		var selectOptions = $(select +'_options');
		selectOptions.setStyle({	position: 'absolute',
											width: selectWidth +'px',
											
											borderLeft: '1px',
											borderRight: '1px',
											zIndex: '1000',
											//border: '0px 1px',
											padding: '0px',
											top: parseInt(selectTop + selectHeight) + 'px',
											left: selectLeft + 'px'
							});
		selectOptions.show();



	},
	onBlur : function() {
		if (this.hasFocus == false) {
			this.hideMenu();
		}	
	},
	hideMenu : function() {
	
		if (this.hasFocus == false) {
			$(this.elementId + '_options').hide();
		}
	},
 	setOptions: function(options) {
    	this.options = {
    			selectOptions : [ ],
                callBack : ''
        }
  	},
  	selectElement : '',
  	hasFocus : false,
  	options : {}
  
});