var NetManagerPluginDropdown = NetManagerBase.extend({
														 
		options: {
			selectId		: false
		},
		
		container 			: false,
		source 				: false,
		selected 			: false,
		_select 			: false,
		current 			: false,
		selectedOption 		: false,
		dropDown 			: false,
		optionsContainer 	: false,
		multiOptions		: [],
		hiddenInput 		: false,
		baseClass 			: 'dropdownBox',
		optEventChain		: false,
		
		initialize: function(options) {
			this.setOptions(options);
			if (!this.options.selectId) {
				return;
			}
			
			
			this.selected  = false;
			
			this.source    = $(this.options.selectId);
			
			this.selected  = false;
			
			
			this.container = $(this.options.container);
			if (!$chk(this.container)) {
				this.container = $(this.options.selectId).getParent();	
			}
			
			this.source    = $(this.container).getElement('#' + this.options.selectId);
			
			this.buildDropdown();
			
			this.setHiddenInput();
			$(this.source).getElements('option').each(this.addOption, this);
			this.container.setHTML('');
			
			this._select.injectInside(this.container);
			this.hiddenInput.injectInside(this.container);
			
			this.bindEvents();
			
			return this;
		},
		
		setHiddenInput: function() {
			
			this.hiddenInput = new Element('input').setProperties({
				type  : 'hidden',
				id 	  : this.source.getProperty('id'),
				name  : this.source.getProperty('name')				
			});
		},
		
		buildDropdown: function() {
			this._select = new Element('div').addClass(this.baseClass).setProperty('id', this.source.getProperty('id') + '_dropdownBox').setStyles({'width': this.options.width, 'z-index': this.options.zindex});
			this.current = new Element('div').addClass('selected').injectInside($(this._select));
			this.selectedOption = new Element('div').addClass('selectedOption').injectInside($(this.current));
			this.dropDown = new Element('div').addClass('dropDown').injectInside($(this.current));
			this.optionsContainer = new Element('div').addClass('optionsContainer').injectInside($(this._select)).setStyles({'display': 'none', 'z-index': this.options.zindex});
		},
		
		bindEvents: function() {
			
			document.addEvent('click', this.toggleOptionContainer.bind(this));
			this.container.addEvent('click', function(e) {
				var event = new Event(e).stop();
			});		
			this.current.addEvent('click', this.onDropDown.bindWithEvent(this));
		},
		
		toggleOptionContainer: function(e) { 
			if ($defined($(this.optionsContainer))) {
				if($(this.optionsContainer).getStyle('display') == 'block') {
					if ($defined(this.onDropDown)) {
						this.fireEvent(this.onDropDown.bind(this));
					}
				}
			}
		},
		
		//add single option to select
		addOption: function(option) {
			var index = 0, selectedText = '';
	    	this.multiOptions.push(new Element('div').addClass('icon').setProperty('value', option.value));
	    	
	    	index = (this.multiOptions.length > 0) ? this.multiOptions.length - 1 : 0;
			if(option.disabled) {
				this.multiOptions[index].addClass('disabled');
			} else {
				this.multiOptions[index].addEvents({
					'click'    : this.onOptionClick.bindWithEvent(this),
					'mouseout' : this.onOptionMouseout.bindWithEvent(this),
					'mouseover': this.onOptionMouseover.bindWithEvent(this)
				});
			}
			
			if($defined(option.getProperty('class')) && $chk(option.getProperty('class'))) {
				this.multiOptions[index].addClass(option.getProperty('class'));
			}
			if ($defined(this.options.icon)) {
				this.multiOptions[index].addClass(this.options.icon);
			}
	
			if(option.selected) { 
				if(this.selected) {
					this.selected.removeClass('selected');
				}
				
				this.multiOptions[index].addClass('selected');
				selectedText = option.text.substring(0,43);
				if (option.text > 43) {
					selectedText += ' ...';
				}
				this.selectedOption.setText(selectedText);
				
				if ($defined(this.options.icon)) {
					this.selectedOption.addClass('icon');
					this.selectedOption.addClass(this.options.icon);
				}
				
				this.hiddenInput.setProperty('value',option.value);
				if ($defined(this.options.icon)) {
					this.multiOptions[index].addClass(this.options.icon);
				}
				this.selected = this.multiOptions[index];
			}
			
			this.multiOptions[index].setText(option.text);	
			if ($defined(this.options.optEvent)) {
				this.multiOptions[index].addEvents({
					'click'    : this.execOptEventChain.bindWithEvent(this)
				});
			}
			if ($defined(this.options.icon)) {
				this.multiOptions[index].addClass(this.options.icon);
			}
			this.multiOptions[index].inject($(this.optionsContainer));
			
	
		},
		
		
		execOptEventChain: function(e) {
			
			this.optEventChain = new Chain();
			this.optEventChain.chain(this.onOptionClick.pass([e], this));
			this.optEventChain.chain(this.onDropDown.pass([e], this));
			
			this.optEventChain.callChain();
			this.optEventChain.callChain();
			if ($defined(this.options.optEvent)) {
				this.optEventChain.chain(this.options.optEvent.pass([e], this));
				this.optEventChain.callChain();
			}
			
		},
		
		onDropDown: function(e) {
			var width = 0;
			if(this.optionsContainer.getStyle('display') == 'block') {
				this.optionsContainer.setStyle('display','none');
			} else {
				this.optionsContainer.setStyle('display','block');
				if ($defined(this.selected)){
					$(this.selected).addClass('selected');
				}
				//needed to fix min-width in ie6
				if($defined(this.options.containerWidth)) {
					width = this.options.containerWidth;
				} else {
					width = this._select.getStyle('width');
				}
				
				this.optionsContainer.setStyle('width', width);
			}						
		},
		
		onOptionClick: function(e) {
			
			var event = new Event(e), selectedText = '';
			if($(this.selected) != $(event.target)){
				this.selected.removeClass('selected');
				event.target.addClass('selected');
				this.selected = event.target;
				selectedText = this.selected.getText().substring(0,43);
				if (this.selected.getText().length > 43) {
					selectedText += ' ...';
				}
				this.selectedOption.setText(selectedText);
				this.selectedOption.addClass($(event.target).getProperty('class'));
				this.selectedOption.removeClass('selected');
				this.hiddenInput.setProperty('value',this.selected.getProperty('value'));
			} 
			this.onDropDown(e);
		},
		
		onOptionMouseover: function(e) {
			var event = new Event(e);
			this.selected.removeClass('selected');
			event.target.addClass('selected');
		},
		
		onOptionMouseout: function(e) {
			var event = new Event(e);
			event.target.removeClass('selected');
		},
		
		getValue: function() {
			return this.hiddenInput.value;
		},
		
		getSelectedOptionText: function() {
			return this.selected.getText();
		},
		
		setValue: function(sValue) {
			this.hiddenInput.value = sValue;
		},
		
		disable: function() {
			this.disabled = new Element('div').addClass('disabledDropdown').setOpacity(0.7).setStyles({
				'position'	: 'absolute',
				'top'		: -1,
				'left'		: -1,
				'width'		: this.container.getCoordinates().width,
				'height'	: this.container.getCoordinates().height,
				'background': '#fff'
			}).injectBefore(this.container.getFirst());
		},
		
		enable: function() {
			this.disabled.remove();
		},
		
		toggleVisibility: function() {
			if(this.container.getStyle('display') == 'none') {
				this.container.setStyle('display', 'block');
				this.container.getPrevious().setStyle('display', 'block');
			} else {
				this.container.setStyle('display', 'none');
				this.container.getPrevious().setStyle('display', 'none');
			}
		},
		
		hide: function() {
			if(this.container.getStyle('display') == 'block') {
				this.container.setStyle('display', 'none');
				this.container.getPrevious().setStyle('display', 'none');
			} 
		},
		
		show: function() {
			if(this.container.getStyle('display') == 'none') {
				this.container.setStyle('display', 'block');
				this.container.getPrevious().setStyle('display', 'block');
			} 
		},
		
		populate: function(xData) {
			var oData = {}, selectedText = '';
			
			if ($type(xData) == 'string') {
				oData = Json.evaluate(xData);
			} else if($type(xData) == 'object') {
				oData = xData;
			}
			
			var index = 0;
			if ($defined(this.optionsContainer)){
				this.optionsContainer.empty();
				//this.selectedOption.empty();
			}
			this.multiOptions = [];
			
			for (sValue in oData) {
				
				this.multiOptions.push(new Element('div').addClass('icon').setProperty('value', sValue).setText(oData[sValue]));
	    	
		    	index = (this.multiOptions.length > 0) ? this.multiOptions.length - 1 : 0;
		    	
				this.multiOptions[index].addEvents({
					'click'    : this.execOptEventChain.bindWithEvent(this),
					'mouseout' : this.onOptionMouseout.bindWithEvent(this),
					'mouseover': this.onOptionMouseover.bindWithEvent(this)
				});
		
				if ($defined(this.options.optEvent)) {
					this.multiOptions[index].addEvents({
						'click': this.options.optEvent.bindWithEvent(this)
					});
				}
				
				if ($defined(this.options.icon)) {
					this.multiOptions[index].addClass(this.options.icon);
				}
				
				this.multiOptions[index].inject($(this.optionsContainer));
				index++;
			}
			
			this.setValue(0);
			if ($defined(this.multiOptions[0])) {
				this.selected = this.multiOptions[0];
				selectedText = this.multiOptions[0].getText().substring(0,43);
				if (this.multiOptions[0].getText().length > 43) {
					selectedText += '...';
				}
				this.selectedOption.setText(selectedText);
				}
			this.selectedIndex = 0;
			
		}
		
	});
	
	NetManagerPluginDropdown.implement(new Events);
	NetManagerPluginDropdown.implement(new Options);