GoldmanSachs.SelectBox = new Class({
	presets: {
		CONTAINER_CLASSNAME: 'gs_selectBox',
		TITLE_CLASSNAME: 'gs_sel_title',
		HANDLE_CLASSNAME: 'gs_sel_handle',
		DRAWER_CLASSNAME: 'gs_sel_drawer',
		OPTION_CLASSNAME: 'gs_sel_option',
		SELECTED_OPTION_CLASSNAME: 'gs_sel_selected'
	},
	options : {
		genericPrompt: 'Select',
		showGeneric: false,
		keepGeneric: false,
		onEvent: 'click'
	},
	value : null,
	onChange : Class.empty,
	selectElement: null,
	initialize: function(selBox, options){
		// TODO - UPADATE FORM ELEMENT
		this.optionNodes= [];
		this.setOptions(options);
		this.mainNode = new Element('div', {'class': this.presets.CONTAINER_CLASSNAME});
		this.mainNode.addEvent('mouseleave', this.doCloseDrawer.bind(this));
		this.doc = $$('body')[0];
		this.titleNode = new Element('div', {'class': this.presets.TITLE_CLASSNAME});
		this.titleNode.addEvent(this.options.onEvent, this.doToggleDrawer.bind(this));
		
		this.mainNode.adopt(this.titleNode);
		this.handleNode = new Element('div', {'class': this.presets.HANDLE_CLASSNAME});
		this.mainNode.adopt(this.handleNode);
		this.handleNode.addEvent(this.options.onEvent, this.doToggleDrawer.bind(this));
		var clearer = new Element('div', {'class':'gs_clearer'});
		this.mainNode.adopt(clearer);
		
		this.drawerNode = new Element('div', {'class': this.presets.DRAWER_CLASSNAME});
		this.drawerNode.isOpen = false;
		this.mainNode.adopt(this.drawerNode);
		
		if ($defined(selBox) == true){ 
			if (selBox.getTag() == 'select') {
			this.selectElement = selBox;
			this.selectElement.setStyle('display', 'none')
			}
		}
		if (this.selectElement != null) {
			var selectedExists = false;
			this.staticOptionNodes = this.selectElement.getElements('option');
			for ( var i=0;i<this.staticOptionNodes.length;i++) {
				var son = this.staticOptionNodes[i];
				var s = son.getProperty('selected');
				var testResult = ((s == 'selected' || s == true) && (this.options.showGeneric == false));
				
				if (testResult == true ) {selectedExists = true}
				if (son.getProperty('disabled') != true) {
					this.addOptionNode(son.getAttribute('value'), son.innerHTML, testResult, i);	
				}
			}
			
			this.mainNode.injectBefore(this.selectElement);
			if (selectedExists == false) {
				this.doGeneric();
			}
		} else {
			this.doGeneric();
		}
	},
	doToggleDrawer: function (){
		(this.drawerNode.isOpen == true) ? this.doCloseDrawer(): this.doOpenDrawer();
	},
	doOpenDrawer : function () {
		var cds = this.mainNode.getCoordinates();
		var t = (cds.top + cds.height - 1) + 'px';
		var l = (window.ie == true)? (cds.left + 0) + 'px': cds.left + 'px';
		
		this.drawerNode.setStyles({'display': 'block', 'top': t, 'left': l});
		this.drawerNode.isOpen = true;
	},
	doCloseDrawer : function () {
		if (this.drawerNode.isOpen == true) {
			this.drawerNode.setStyle('display', 'none');
			this.drawerNode.isOpen = false;	
		}
	},
	doOptionMouseEnter : function (option) {
		option.setStyle('background-color', '#e6e6e6');
	},
	doOptionMouseLeave : function (option) {
		option.setStyle('background-color', '#ffffff');
	},
	addOptionNode : function (val,title, selected, index) {
		var option = new Element ('div', {'class':this.presets.OPTION_CLASSNAME});
		option.sel_value = val;
		option.sel_title = title;
		option.setText(title);
		option.sel_isSelected = selected;
		option.sel_index = ($defined(index) == true) ? index: 0;
		option.addEvent('click', this.doSelect.pass([option], this));
		option.addEvent('mouseenter', this.doOptionMouseEnter.pass([option], this));
		option.addEvent('mouseleave', this.doOptionMouseLeave.pass([option], this));
		
		this.drawerNode.adopt(option);
		this.optionNodes.push(option);
		if (option.sel_isSelected == true) {
			this.doSelect(this.optionNodes.getLast());
		}
	},
	doGeneric: function (){
		this.titleNode.setText(this.options.genericPrompt);
		for (var i = 0;i<this.optionNodes.length; i++) {
			this.optionNodes[i].removeClass(this.presets.SELECTED_OPTION_CLASSNAME);
			this.optionNodes[i].isSelected = false;
			(this.drawerNode.isOpen == true) ? this.doCloseDrawer(): null;
		}
		if (this.selectElement != null) {
			for (j=0;j<this.staticOptionNodes.length;j++) {
				this.staticOptionNodes[j].removeProperty('selected');
			}
		}
	},
	doSelect : function (option) {
		if ($defined(option) == false) {
			this.doGeneric();
		} else {
			this.value = option.sel_value;
			for (var i = 0;i<this.optionNodes.length; i++) {
				if (option == this.optionNodes[i]) {
					if (!this.options.showGeneric) 
						this.titleNode.setText(this.optionNodes[i].sel_title );
					else if (!this.options.keepGeneric) {
						this.titleNode.setText(this.optionNodes[i].sel_title );						
					}	
					this.optionNodes[i].addClass(this.presets.SELECTED_OPTION_CLASSNAME);
					this.optionNodes[i].isSelected = true;
					if (this.selectElement != null) {
						for (j=0;j<this.staticOptionNodes.length;j++) {
							(j == this.optionNodes[i].sel_index)? 
								this.staticOptionNodes[j].setProperty('selected', true): 
								this.staticOptionNodes[j].setProperty('selected', false); 
						}
					}
				} else {
					this.optionNodes[i].removeClass(this.presets.SELECTED_OPTION_CLASSNAME);
					this.optionNodes[i].isSelected = false;
				}
			}
			(this.drawerNode.isOpen == true) ? this.doCloseDrawer(): null;
			this.fireEvent('onChange');
		}
	}
});
GoldmanSachs.SelectBox.implement(new Events, new Options);