var selection = new Class({
    
    options: {
        //ROOTLAYER config
        rootLayer: {
            //id for root layer : 'rootLayer'
            id: 'rootLayer',
            //path for root layer bg image (!relative to the html-file!, or absolute (./img/gif/...)) : '../img/blank.gif'
            blankImg: 'img/blank.gif'
        },
        //WRAPPER: classname for wrapper div (mulitple classname posibble like 'block box') : 'block'
        wrapperClass: 'block',
        //MASK: classname for mask : 'selected-frame'
        maskClass: 'select-frame',
        //SELECTEDELEM: classname for selected element : 'selected-elem'
        selElemClass: 'selected-elem',
        //LIST: how many listelements shown ?autoScroll:'scroll' : 5
        amount: 5,
        //LIST: how many listelements shown minimum in auto scroll mode
        minAmount: 3,
        //LIST: add scrollbar if necessary : 'auto'/'scroll'
        listBehaviour: 'auto',        
        //LIST: class when hover a list element
        liHoverClass: 'hover',
        //LIST: minspace from list to browser bottom
        minSpace: 50,    
        ////BETA_TODO:LIST: overwrite onchange method manually : 0, e.g. 'myFunction();'
        onChange: 0,
        
        formId: 'myForm',
        autosubmit: 0
        
        
    },
    
    initialize: function(selectBox, options){
        //load passed options
        this.setOptions(options);
         
        if ($type(selectBox) == 'string') selectBox = $(selectBox); 

        //hide the original select box
        selectBox.setStyle('display', 'none');
        
        //BETA_TODO:get onchange method from origin select if overwrite is not set, beware that property name is 'onchange' and not 'onChange'
        if(!this.options.onChange) this.options.onChange = (selectBox.getProperty('onchange')) ? selectBox.getProperty('onchange') : this.options.onChange;
                
        //get the elements with value and text from original
        var options = selectBox.getChildren();
        
        //build selected Item [input]
        var selectedElem = new Element('input',{
            'class': this.options.selElemClass,
            'value': options[0].get('text'),
            'readonly': 'readonly'            
        });
        
        //build new select
        var list = new Element('ul', {'styles': {'display': 'none'}});     
        options.each(function(item, index){
            //if (index != 0){
                //set preselected element
                if (item.getProperty('selected')) selectedElem.set('value', item.get('text'));
                var listelem_li = new Element('li',{'html': item.get('text')}); 
                list.adopt(listelem_li);
            //}             
        });        
        
        //create wrapper for overlay the origin select box
        var wrapper = new Element('div', {'class': this.options.wrapperClass});
        
        //wrap origin select box
        wrapper.wraps(selectBox);

        //build new div (mask), insert to wrapper
        var mask = new Element('div', {'class': this.options.maskClass});
        wrapper.adopt(mask);

        //adopt selected element and new list in mask-wrapper    
        mask.adopt(selectedElem, list);
        
        //click on first element will popup the box
        selectedElem.addEvents({
            'click': function(){
                if (!$(this.options.rootLayer.id)){
                    //build new div for the whole page, insert to body
                    var rootLayer = new Element('div', {
                        'id': this.options.rootLayer.id,
                        'styles': {                                
                            'position': 'absolute',
                            'left': 0,
                            'top': 0,
                            'width': $(document.body).getSize().x,
                            'height': $(document.body).getSize().y,
                            'background-image': 'url('+this.options.rootLayer.blankImg+')'
                        },
                        
                        'events': {
                            'click': function(){
                                if (!Browser.Engine.webkit){
                                    wrapper.adopt(mask.removeProperty('style'));
                                    list.removeProperty('style').setStyle('display', 'none');
                                    mask.setStyle('height', selectedElem.getSize().y);
                                    rootLayer.destroy();
                                }
                            }
                        }

                    });
                    $(document.body).adopt(rootLayer);
                    rootLayer.adopt(mask);                    
                    
                    list.setStyle('display', 'block');
                    
                    if ((window.getSize().y - wrapper.getPosition().y - this.options.minSpace) < mask.getSize().y){
                        this.options.listBehaviour = 'scroll';                        
                        var sizeList = (list.getFirst().getSize().y);
                        var amountList = list.getChildren().length + 1;
                        while(($(document.body).getSize().y - wrapper.getPosition().y - this.options.minSpace) < (amountList * sizeList) && amountList > this.options.minAmount+1) amountList--;
                        this.options.amount = amountList-1;
                    }  
                    
                    switch (this.options.listBehaviour){
                        case 'auto':
                            list.removeProperty('style');                        
                            mask.setStyles({
                                'position': 'absolute',
                                'top': wrapper.getPosition().y,
                                'left': wrapper.getPosition().x,
                                'height': selectedElem.getSize().y + list.getSize().y
                            
                            });
                        break;
                        case 'scroll':
                            this.options.amount = (this.options.amount > (options.length-1)) ? (options.length-1) : this.options.amount;
                            list.removeProperty('style'); 
                            list.setStyles({
                                'height': ((list.getFirst().getSize().y)*(this.options.amount)).toInt(),
                                'overflow': 'scroll',
                                'overflow-x': 'hidden',
                                'overflow-y': ((options.length-1) <= this.options.amount) ? 'hidden' : ''                          
                            });                     
                            mask.setStyles({
                                'position': 'absolute',
                                'top': wrapper.getPosition().y,
                                'left': wrapper.getPosition().x,
                                'height': selectedElem.getSize().y + list.getSize().y
                            
                            });                        
                        break;
                    }                   
                                        
                } else {
                    wrapper.adopt(mask);
                    $(document.body).getLast().destroy();
                    //BUG: Safari didn't remove style property correctly
                    if (Browser.Engine.webkit) mask.setProperty('style', '');
                    mask.removeProperty('style').setStyle('height', selectedElem.getSize().y);
                    list.removeProperty('style').setStyle('display', 'none');
                    selectedElem.focus();
                }
            }.bind(this)
        });
        
        list.getChildren().each(function(listelem, index){
            listelem.addEvents ({            	
        	   'click': function(){
        			wrapper.adopt(mask);
                    $(document.body).getLast().destroy();
                    //BUG: Safari didn't remove style property correctly
                    if (Browser.Engine.webkit) mask.setProperty('style', '');
                    mask.removeProperty('style').setStyle('height', selectedElem.getSize().y);               
                    list.removeProperty('style').setStyle('display', 'none');
        			selectedElem.set('value', listelem.get('text')).focus();
        			options[index].setProperty('selected', 'selected');
        			list.getChildren().each(function(item){ 
                        listelem.removeClass(this.options.liHoverClass); 
                    }.bind(this));
                    if(this.options.autosubmit == 1 && $(this.options.formId)) $(this.options.formId).submit();
        		}.bind(this),
                
                'mouseenter': function(){
                    listelem.addClass(this.options.liHoverClass);
        		}.bind(this),
                
                'mouseleave': function(){
        			listelem.removeClass(this.options.liHoverClass);
        		}.bind(this)     		     		
        	});	
        }.bind(this));
    }
});

selection.implement(new Options);// Implements Options