var SelectBox = Class.create( {
	
	options: {
	    "class" :                        "selectbox"          ,
	    "hoverClass":                    "selectbox-hover"    ,
	    "pressedClass":                  "selectbox-pressed"
	},
	
	initialize: function( select , list , options ){
		
		this.select  = $( select );
		this.list    = $( list );
        this.options = $H( this.options ).merge( options || {} );

		//Create Dom
        var html = "<span>";
        html    += "  <span class='selectbox-left'></span>";
        html    += "  <span class='selectbox-content'></span>";
        html    += "  <span class='selectbox-right'></span>";
        html    += "</span>";
		
		this.element   = new Element("span")
		                    .addClassName("selectbox")
                            .addClassName( this.options.get("class") )
                            .update( html );
                         
		this.select.insert( {after: this.element } );					
		this.content      = this.element.down(".selectbox-content");
		
		
		//Hide the select box
		this.select.hide();
									
		//Create drop down list
        this.DropDownList    = new DropDownList( this.element , {
            multiple: false
        });

		//Prevent Selection
		this.element.onselectstart= function(){
			return false;
		};
		this.element.onmousedown = function(){
			return false;
		};
		this.element.click = function(){
			return true;
		};
	
        //Events					
		this.element.observe( "mouseover"                 , this.onMouseOver.bindAsEventListener( this ) );
		this.element.observe( "mouseout"                  , this.onMouseOut.bindAsEventListener( this ) );
		this.element.observe( "mousedown"                 , this.onMouseDown.bindAsEventListener( this ) );
		this.element.observe( "mouseup"                   , this.onMouseUp.bindAsEventListener( this ) );
		this.DropDownList.observe( "dropdownlist:change"  , this.onListChange.bind( this ) );

        //Initialize                                        
		this.attach();		
							
	},
	add:  function( value , text , group ){
		this.DropDownList.add( value , text , group );
	},
	clear:  function(){
	    this.DropDownList.clear();
	},
	text: function( i , j ){
	    return this.DropDownList.text( i , j );
	},
	value: function( i ){
	    return this.DropDownList.value( i );	
	},
	attach: function(){

		var len           = this.select.options.length;
		
        //Create DropDown
		this.DropDownList.clear();
		for( var i = 0 ; i < len ; i++ ){
			var option = this.select.options[i];
					this.DropDownList.add(option.value, option.text);
			if( option.selected ){
                this.DropDownList.setIndex( i );
            }             
		}
		this.onListChange();
		
	},
	onListChange: function(  ){
	    
	    var indexes                       = this.DropDownList.indexes();
        var count                         = indexes.length;
                
        //Update the caption        
        var text = this.DropDownList.text();
        this.content.update( text );
                
        //Update Values On Selectbox
        for( var i = 0 ; i < this.select.options.length ; i++ ){
            this.select.options[ i ].selected = false;
        }
        
        for( var i = 0 ; i < indexes.length ; i++ ){
            var index = indexes[ i ];
            this.select.options[ index ].selected = true;            
        }

        //Fire Callback
        this.select.fire("selectbox:change" , this );
        
	},
	onMouseOver: function( e ){
        this.element.addClassName( this.options.get("hoverClass") );
	},
	onMouseOut: function( e ){
        this.element.removeClassName( this.options.get("hoverClass") );
	},
	onMouseDown: function(){
        this.element.addClassName( this.options.get("pressedClass") );
	},
	onMouseUp:function(){
        this.element.removeClassName( this.options.get("pressedClass") );
	}
});