var mmSelect = new Class({
	
	Implements: [Options, Events, Class.Occlude]
	, options: {
		parentEl: false
		, classes: {
			selector: 'mmSelect'
			, container: 'mmSelectContainer tL'
			, text: 'mmSelectText'
			, arrow: 'mmSelectArrow'
			, focus: 'mmSelectFocus'
			, optionsContainer: 'mmSelectOptionsContainer'
			, option: 'mmSelectOption'
			, optionHover: 'mmSelectOptionHover'
			, optionSelected: 'mmSelectOptionSelected'
		}
		, padding: {
			left: 6
		}
		, arrow: {
			// character: '♦'
			character: ' '
			, size: {
				width: 20
			}
			, opacity: {
				enter: 1
				, leave: 0.5
			}
		}
	}
	, property: 'mmSelect'
	, initialize: function(el, options) {
		this.setOptions(options);
		this.element = document.id(el);
		if (this.occlude()) return this.occluded;		
		this.setupElements();
		this.setupEvents();		
	}
	, setupElements: function() {
		this.displayParents();
		
		this.element.setStyles({'display':'block','z-index':1});
		var size = this.element.getSize();
		var select_el_height = size.y;
        var select_el_width = size.x;   

		var value = '';
		var text = '';
		var first = this.element.getFirst();
		if (first) {
        	value = first.get('value');     // SHOULD THIS NOT BE SELECTED ITEM?
	        text = first.get('text');		
		}	
	
		// create elements
		// this.container = new Element('div', {'class':this.options.classes.container});
        this.element.getElements('option').each(function(o){ 
			if(o.selected == true) { value = o.get('value'); text = o.get('text'); } 
		});		
		this.container = new Element('span',{'class':this.options.classes.selector+' '+this.options.classes.container}).inject(this.element,'before');
		this.container.setStyles({'z-index':0,'cursor':'pointer','width':select_el_width - this.options.padding.left - this.container.getStyle('border-left-width').toInt() - this.container.getStyle('border-right-width').toInt(),'display':'inline-block','height':select_el_height,'line-height':select_el_height,'overflow':'hidden','position':'relative','padding-left':this.options.padding.left});		
		this.textspan = new Element('span',{'class':this.options.classes.text}).set('text',text).inject(this.container).setStyles({'z-index':0,'display':'inline-block','overflow':'hidden','width':select_el_width - this.options.padding.left - this.options.arrow.size.width -this.container.getStyle('border-left-width').toInt() - this.container.getStyle('border-right-width').toInt(), 'height':select_el_height,'line-height':select_el_height,'text-align':'left'});	
		this.textarrow = new Element('span', {'class':this.options.classes.arrow,'html':this.options.arrow.character}).inject(this.container).setStyles({'z-index':0,'display':'inline-block','overflow':'hidden','opacity':this.options.arrow.opacity.leave,'height':select_el_height,'line-height':select_el_height});	
		this.element.addClass(this.options.classes.selector).setProperty('size',1).setStyles({'display':'block','width':select_el_width - this.options.padding.left + this.container.getStyle('border-left-width').toInt() + this.container.getStyle('border-right-width').toInt(),
		'opacity':.01,'display':'inline-block','position':'relative','margin-left':-(select_el_width  + this.container.getStyle('border-left-width').toInt() + this.container.getStyle('border-right-width').toInt())});
		
		this.element.addEvent('change',function(){ 
			this.textspan.set('text',this.element.options[this.element.options.selectedIndex].get('text')); 
			this.element.blur(); // opera text selection fix
		}.bind(this));		
		this.undisplayParents();		
	}
	, setupEvents: function() {
		this.element.addEvents({
			'mouseenter': function(e) {
				this.textarrow.setStyle('opacity',this.options.arrow.opacity.enter);
			}.bind(this)
			, 'mouseleave': function(e) {
				this.textarrow.setStyle('opacity',this.options.arrow.opacity.leave);
			}.bind(this)	
			, 'focus':function(e) {
// dbug.log('focus');							
				this.container.addClass(this.options.classes.focus);
			}.bind(this)
			, 'blur':function(e) {
// dbug.log('blur');				
				this.container.removeClass(this.options.classes.focus);				
			}.bind(this)
		});
	}
	, displayParents:function() {
		var parents = this.element.getParents();
		parents.each(function(parent) {
			var old_display = parent.getStyle('display');			
			if (old_display=='none') {
				parent.setStyle('display','block').store('tmp_old_display_mmselect', old_display);
			}
		});		
	}
	, undisplayParents:function() {
		var parents = this.element.getParents();		
		parents.each(function(parent) {
			var old_display = parent.retrieve('tmp_old_display_mmselect');
			if (old_display != null) {
				parent.setStyle('display',old_display);
			}
		});		
	}
	, toElement: function() {
		return this.element;
	}	
});

/*
	implementing element
*/
Element.implement({ 
    mmSelect: function(options){ 
      return this.store('mmSelect', new mmSelect(this, options)); 
    } 
});