/*
SimpleSelectStyle v.1.2
Simple select tag styling; cosmetic only.

Author: Ben Stilson

Required:
- CSS class for styling the alternate "select" span / select tags
- option select_class must be defined with CSS class name
- specify a select width, either in the CSS class or directly to the select tag
- use only with single line selects (size=1/default)

Optional:
- to use with all selects in an entire form, provide the form id for the option form_id
- left_padding is used to add left padding (indent) before the text in the span element, defaults to 3px

*/

if (!window.ie6) {

	var SimpleSelectStyle = new Class(
	{

		options :
		{
			select_class : '',
			fallback_width: '180',
			throb_background: '/img/bg/dropdownAnimation.gif?',
			form_id : '',
			left_padding : 6,
			toString : function () {
				return 'select_class:' + this.select_class + ', form_id:' + this.form_id + ', left_padding: ' + this.left_padding;
			}
		},

		initialize: function(options)
		{
			this.setOptions(options);

			if ($chk(this.options.select_class))
			{

				if ($chk($(this.options.form_id))) {
					this.selects = $ES('select', this.options.form_id);
				} else {
					this.selects = $$('select.' + this.options.select_class);
				}

				this.selects.each(this.style_selects.bind(this));
			}

		},

		style_selects : function(select_el)
		{
			var select_el_width = select_el.getStyle('width').replace('px', '');
			var value = select_el.getFirst().getValue();
			var text = select_el.getFirst().getText();
			var backgroundAnimation = this.options.throb_background + new Date().getTime()

			if (select_el_width < 10) {
				select_el_width = this.options.fallback_width;
			}

			select_el.getElements('option').each(function(o) {
				if (o.selected == true) {
					value = o.getValue();
					text = o.getText();
				}
			});

			var span = new Element('span', {
				'styles': {
					'width':select_el_width.toInt() - 7,
					'display':'block',
					'position':'relative',
					'padding-left':this.options.left_padding
				},
				'class': this.options.select_class
			}).setText(text).inject(select_el, 'before');

			select_el.addClass(this.options.select_class).setProperty('size', 1).setStyles({
				'width':select_el_width.toInt(),
				'opacity':.01,
				'position':'absolute',
				'top': '3px',
				'left': '3px'
			}).addEvent('change', function() {
				span.setText(this.options[this.options.selectedIndex].getText());

				if (this.options[this.options.selectedIndex].value == -1) {
					this.getParent().addClass('active');
				} else {
					this.getParent().removeClass('active');

	//  Disabling the single throb on change. This has been replaced by a pulse on an enclosing element (done in CollegeCenter.js)
	//				// throb once
	//					select_el.getParent().setStyles({'background' : 'url(' + backgroundAnimation + ') no-repeat left top'});
	//				(function () {
	//					select_el.getParent().setStyles({'background' : ''});
	//				}).delay(850);
				};
			});
		},

		toggleThrob : function (select_el) {

			if (select_el.options[select_el.options.selectedIndex].value == -1) {
				select_el.getParent().addClass('active');
			} else {
				select_el.getParent().removeClass('active');
			};
		}
	});

	SimpleSelectStyle.implement(new Options);
}