var SelectionList = Class.create();

SelectionList.prototype = {
	initialize: function( el, allowMultiSelect ){
		this.el = $(el);
		this.multiselect = allowMultiSelect;
		
		var listEls = this.el.getElementsByTagName( 'li' );
		for( asdf=0; asdf<listEls.length; asdf++ )
			Event.observe( listEls[asdf], 'click', this.__item_clicked.bind( this, listEls[asdf] ) );
		
		this.inputEl = document.createElement( 'input' );
		this.inputEl.type = 'hidden';
		this.inputEl.name = this.el.attributes['name'].value;
		//Builder.node( 'input', {type:'hidden', name:this.el.name}, [] );
		this.el.appendChild( this.inputEl );
		this.__set_selected();
	},
	__set_selected: function(){
		try{
			var selected = this.el.select( '.selected' );
			var value = '';
			for( asdf=0; asdf<selected.length; asdf++ ){
				value += (value=='' ? '' : ',') + selected[asdf].value;
			}
			this.inputEl.value = value;
		}
		catch( e ){
			/*var selected = this.el.select( '.selected' );*/
		}
	},
	__item_clicked: function( clickedEl ){
		if( !this.multiselect ){
			var listEls = this.el.getElementsByTagName( 'li' );
			for( asdf=0; asdf<listEls.length; asdf++ )
				listEls[asdf].removeClassName( "selected" );
		}
		clickedEl.toggleClassName( "selected" );
		this.__set_selected();
	}
}

SelectionList.initPage = function(){
	var els = $$( '.SelectionList' );
	for( c=0; c<els.length; c++ )
		new SelectionList( els[c], els[c].hasClassName( 'MultiSelect' ) );
}

Event.observe( window, 'load', SelectionList.initPage );