var Dropdown = new Class({
    Implements : [Options,Events],
    options : {
        max : {
            y : 110
        },
		border : { // border styles. set to width: 0 to disable
			width: 1,
			style: 'solid',
			color: '#000'
		},
		parent_selector : 'p', // selector for accessing the parent node to set relative and append dropdown to
		ban_rel : 'disallow' // add this rel to items to stop them appearing in the dropdown
    },
    select : undefined,
    opts_full : {},
    opts : {},
    opts_orig: [],
    dropdown : undefined,
    dropdown_opts : {},
    dropdown_selected : undefined,
    selected_opt : 0,
    list_wrapper : undefined,
    close_bind : undefined,
    overlay: undefined,

    initialize : function( select , options ){
        var self = this;
        this.select = select;
        this.select.setStyle( 'display' , 'none' );
        this.setOptions( options );
        this.select.getElements( 'option' ).each(function(e){
            var text = e.get('text'),
                value = e.get('value');
            this.opts[value] = text;
            if (e.get('rel') !== this.options.ban_rel) {
                if ( e.get('selected') === true ) {
                    this.selected_opt = e.get('value');
                }
                this.opts_full[value] = text;
                this.opts_orig.push({
                    value: value,
                    text: text
                });
            }
        } , this);

        this.make_wrapper();
        this.set_selected();
    },

    make_wrapper : function(){
        var self = this,
            ul = new Element('ul');
        this.list_wrapper = new Element( 'div.list-wrapper' );
        this.dropdown = new Element( 'div.dropdown' );
        this.dropdown.addClass( this.select.get('class') );

        Object.each( this.opts_orig , function(e){
            var k = e.value, v = e.text, opt = new Element( 'li[rel="'+k+'"]' ).set('text' , v);
            ul.grab( opt );
            this.dropdown_opts[k] = opt;
            opt.addEvent( 'click' , function(){self.option_clicked(this)} );
        } , this );
        this.list_wrapper.grab(ul);
        this.dropdown_selected = new Element('div.selected');
        this.dropdown_selected.addEvent( 'click' , this.toggle.bind(this) );
        this.dropdown.grab(this.dropdown_selected).grab(this.list_wrapper);
        this.select.getParents(this.options.parent_selector).shift().grab( this.dropdown );
        this.list_wrapper.setStyles({
            'display' : 'none'
        });
    },

    set_selected : function(){
        this.select.set( 'value' , this.selected_opt );
        if ( this.dropdown_opts[ this.selected_opt ] !== undefined ) {
            this.dropdown_opts[ this.selected_opt ].addClass( 'selected' );
        }
        this.dropdown_selected.set( 'text' , this.opts[ this.selected_opt ] );
    },

    remove_selected : function(){
        this.select.set( 'value' , this.selected_opt );
        if ( this.dropdown_opts[ this.selected_opt ] !== undefined ) {
            this.dropdown_opts[ this.selected_opt ].removeClass( 'selected' );
        }
        this.dropdown_selected.set( 'text' , this.opts_full[ this.selected_opt ] );
    },

    toggle : function(){
        if ( this.list_wrapper.getStyle('display') === 'block' ) {
            this.overlay.dispose();
            this.list_wrapper.setStyle( 'display' , 'none' );
            this.dropdown.setStyles({
                'z-index' : 1,
                'position' : 'relative'
            });
        } else {
            this.overlay = new Element('div' , {id: 'overlayyo'});
            document.getElements( '.dropdown .list-wrapper' ).setStyle('display' , 'none');
            document.getElements('.dropdown').setStyles({
                'z-index' : 1,
                'position' : 'relative'
            });
            var adjust_height = false;
            this.list_wrapper.setStyle( 'display' , 'block' );
            this.dropdown.setStyles({
                'z-index' : 9999,
                'position' : 'relative'
            });
            adjust_height = this.list_wrapper.getSize().y >= this.options.max.y;
            this.list_wrapper.setStyles({
                'height' : adjust_height ? this.options.max.y : 'auto',
                'overflow-y' : adjust_height ? 'scroll' : 'visible'
            });
            this.overlay.setStyles({
                top: 0,
                left: 0,
                position: 'fixed',
                width: window.getSize().x,
                height: window.getSize().y,
                zIndex: 9998
            });
            if ( Browser.version === 6 && Browser.ie ) {
                this.overlay.setStyle('display' , 'none');
            }
            this.overlay.addEvent('click' , this.toggle.bind(this));
            this.dropdown.getParent().grab( this.overlay , 'top' );
        }
    },

    option_clicked : function(element){
        this.remove_selected();
        this.selected_opt = element.get('rel');
        this.set_selected();
        this.overlay.dispose();
        this.list_wrapper.setStyle( 'display' , 'none' );
        this.dropdown.setStyles({
            'z-index' : 1,
            'position' : 'relative'
        });
        this.select.fireEvent( 'change' );
    }
});

implement_dropdown = {
	dropdown : function( options ){
		try {
			return new Dropdown( this , options );
		} catch (e) {
            console.log(e);
		}
	}
};

 Element.implement( implement_dropdown );

window.addEvent('domready' , function(){
	document.getElements('select[rel="dropdown"]').each(function(e){
		e.dropdown();
	});
});