//SKIP-COMPRESSION
CH.ns(function() {with(CH) {
	custom_select = Class.create({
		
		initialize: function(container_id) {
			this.elements = {};

			this.css_class_name = "custom_select";

			this.container_id = container_id;

			this.elements.container = $(this.container_id);
			Event.observe(this.elements.container, "click", this.toggleOptions.bindAsEventListener(this));
			Element.addClassName(this.elements.container, this.css_class_name);

			this.elements.original_list = this.elements.container.select('select')[0];
			this.elements.original_list_elements = this.elements.original_list.select('option');

			this.createCustomList();
			this.showSelected();

			this.clickCaptureFunc = function() {
				Element.removeClassName(this.elements.container, 'show');
				this.removeClickCloseEvent();
			}.bind(this);

			// prevent the user from highlighting/selecting the text
			if(Browser.isMSIE)
				this.elements.container.onselectstart = function(){ return false; }
			else
				this.elements.container.onmousedown = function(){ return false; }

		},

		showSelected: function(){
			this.elements.viewer.update(this.elements.selected.innerHTML);
		},

		toggleOptions: function(e){
			e.cancelBubble = true;
			Element.toggleClassName(this.elements.container, "show");

			if(Element.hasClassName(this.elements.container, 'show'))
				this.addClickCloseEvent();
			else
				this.removeClickCloseEvent();
			
			$$('.' + this.css_class_name + ':not([id=' + this.container_id + '])').invoke('removeClassName', 'show');
		},

		addClickCloseEvent: function() {
			Event.observe(document, 'click', this.clickCaptureFunc);
		},

		removeClickCloseEvent: function() {
			Event.stopObserving(document, 'click', this.clickCaptureFunc);
		},
		
		createCustomList: function(){

			// loop through the original select element and create a ul and li elements
			var ul = new Element('ul');
			this.elements.original_list_elements.each(
				function(opt){
					var li = new Element('li').update(opt.innerHTML);
					if(opt.selected)
						Element.addClassName(li, "selected");

					ul.appendChild(li);
				}
			);

			// hide the original select and append the newley created ul
			Element.addClassName(this.elements.original_list, "hide");
			this.elements.container.appendChild(ul);

			this.elements.list = this.elements.container.select('ul')[0];
			this.elements.list_elements = this.elements.list.select('li');

			// if an option is already selected use that one, otherwise make the first one selected
			var selected = this.elements.list.select('li.selected')[0];
			if(!selected){
				selected = this.elements.list_elements[0];
				Element.addClassName(selected, "selected");
			}
			this.elements.selected = selected;

			// loop through the options and give them hover and click functionality
			this.elements.list_elements.each(
				function(li){
					Event.observe(li, "mouseover", function(){
							Element.removeClassName(this.elements.list.select('li.selected')[0], "selected");
							Element.addClassName(li, "selected");
						}.bind(this)
					);
					
					Event.observe(li, "click", function(){
							this.elements.selected = li;
							this.showSelected();
							
							var current_key = this.elements.original_list.selectedIndex;
							var key = this.elements.list_elements.indexOf(this.elements.selected);

							if(current_key!=key){
								this.elements.original_list_elements[key].selected = true;

								if(typeof(this.elements.original_list.onchange) == 'function')
									this.elements.original_list.onchange();
							}

						}.bind(this)
					);
				}.bind(this)
			);

			// create the viewport for selected options
			this.elements.viewer = new Element('div', { 'class': 'viewport' });
			Element.insertAfter(this.elements.container, this.elements.viewer);

			//add the dropdown arrow div and watch for hover and clicks
			var dropArrow = new Element('div', { 'class': 'drop_arrow' });
			this.elements.container.appendChild(dropArrow);
			
			Event.observe(dropArrow, "mouseover", function(){ Element.addClassName(dropArrow, "hover"); });
			Event.observe(dropArrow, "mouseout", function(){ Element.removeClassName(dropArrow, "hover"); });
		}
	});
}});