var slideExtend = new Class({
    Extends: Fx.Slide,
    Implements: [Events, Options],
    initialize: function(element, dropTitle,options){
        this.parent(element, options);
        this.closed = false;
        this.onStart = function(){
			if(!this.closed){ // CLOSED FALSE //
				this.fireEvent('onMenuFocus', this)
				this.closed = true;
			}
		}.bind(this);
        this.onComplete = function(){
			if(this.closed){ // CLOSED TRUE //
				dropTitle.toggleClass('expanded');
				this.fireEvent('onMenuClose')
				this.closed = false;
			}
		}.bind(this);
    },
	toggle: function(mode){
		this.parent(mode);
	}
});

var dropdownselect = new Class({
        options:{
            duration: 180,
            onTorpedo:$empty,
            onSelect: $empty,
            defaultText: 'SELECT OPTION!',
            wait: true
        },
        initialize: function(id, options){
			//set//
            this.setOptions(options);
            this.defaultSelection = null;
            this.selectBox = $(id);
            this.getName = id.name;
            this.target = this.selectBox.getParent();
            this.contents = this.selectBox.getChildren();
            this.initialZ = 1000;
            this.focusZ = 1500;
            this.closed = false;
			this.hiddenEl = new Element('input', {
				'id':this.selectBox.id,
				'type':'hidden',
				'name':this.getName,
				'value':''
			})
            this.hiddenEl.inject( this.target,'top');
            //fire//
            this.createList(this.selectBox, this.target);
        },
		createList: function(el, target){
           /*
            * ELEMENTS
            * el 		==> input select
            * contents	==> options, converted to span
            * target   	==> dropdown container
            */

			
			//create new orientation//
			this.suggestedDropdown = new Element('div', {
				'class':'suggestedDropdown',
				'styles': {
			        'z-index': 1000
			    }
			})

			this.suggestedDropdown.inject(el, 'before');
			
			//create dropdown title(selected)//
			this.dropTitle = new Element('div',{
				'class':'dropTitle'
			});
			var dropSpan = new Element('span');
			dropSpan.inject(this.dropTitle)

			this.dropTitle.inject(this.suggestedDropdown,'top');
			
			//create menu area//
			var dropMenu = new Element('div',{
				'class':'dropMenu'
			});
			dropMenu.inject(this.dropTitle, 'bottom');
			//create spans from options, inject inside menu//
			this.contents.each(function(initOption){
				this.liItem = new Element('span',{
					'id':initOption.value
				});
				//check for selected attribute, set title//
				//this fires for the first option if no options are selected//
				if(initOption.selected == true){
					//dropSpan.setText(initOption.getText());
					dropSpan.set('text', (initOption.get('text')));
					//fire onSelect?//
					this.liItem.addClass('superSelected');
					this.defaultSelection = this.liItem;
					//this.defaultSelection.addEvent('onAlreadySelected',this.onSelect.bind([this, this.liItem]));
				} 

				//this.liItem.setText(initOption.getText());
				this.liItem.set('text', (initOption.get('text')));
				this.liItem.inject(dropMenu, 'top');
			}.bind(this));
			if(this.defaultSelection) this.defaultSelection.fireEvent('onAlreadySelected');
			
			//remove input select//
			this.selectBox.dispose();
			
			//give dropdown life!//
			 this.dropDown(this.dropTitle, dropMenu, this.initialZ, this.focusZ, this.suggestedDropdown, dropMenu.getChildren());
		},
        dropDown: function(dropTitle, dropMenu, initialZ, focusZ, suggestedDropdown, contents){
           /*
            * ELEMENTS
            * dropTitle ==> selected text sits here
            * dropMenu  ==> sliding menu
            * contents  ==> span's would be options
            */
            
            
			var	slide = new slideExtend(dropMenu, dropTitle,{hide:true, duration:this.options.duration,wait:this.options.wait, transition: Fx.Transitions.linear,
				onMenuClose:function(){
					// z-index
					if(dropTitle.hasClass('expanded')){
						suggestedDropdown.setStyle('z-index',1500);
						dropMenu.setStyle('z-index',1500);
						//console.log(dropMenu.className+' '+dropMenu.getStyle('z-index'));
					}else{
						suggestedDropdown.setStyle('z-index',1000);
						dropMenu.setStyle('z-index',1000);
					}
				}
			}).hide();
			
			
			dropTitle.addEvent('click', function(e){
				e = new Event(e); 
					slide.toggle();
				e.stop();
			}.bind(this));
			
			dropTitle.addEvent('mouseleave', function(e){
				e = new Event(e); 
				if(dropTitle.hasClass('expanded')){
					slide.slideOut(); 
				}
				e.stop();
			}.bind(this));
			
			dropTitle.addEvent('mouseleave', function(e){
				e = new Event(e); 
				if(dropTitle.hasClass('expanded')){
					slide.slideOut(); 
				}
				e.stop();
			}.bind(this));
			contents.each(function(el){
				el.addEvent('click', this.onSelect.bind([this,el]));
			},this);

        },
        onSelect: function(event){
           /*
            * instances
            * this[0] ==> instance of object 'dropdown'
            * this[1] ==> element
            * event   ==> click event
            */
            
            
            // get selection, change dropdown title to show selection, 
            // get selection id and set as dropdown title class.
        	this.current = this[1];
        	
        	//dropTitle span//
        	//this[0].dropTitle.getFirst().setText(this.current.getText());
        	this[0].dropTitle.getFirst().set('text', this.current.get('text'));
        	this.current.removeProperty('class');
        	
        	//set hidden input's value//
			this[0].hiddenEl.value = this.current.id;
				         	
        	//onTorpedo is the custom function you can create when you initialize the dropdown//
            //this[0].fireEvent('onTorpedo', this[1].id);
            this[0].fireEvent('onTorpedo',this[1].id);
        }
});

dropdownselect.implement(new Events, new Options);