var SelectBox = $Class( {
    $init : function() {
        this.info = this._initOption( arguments[0] );
        var select = $( this.info.id );
        if ( !select ) 
            return;

        this._getAttribute( select );
        this._setEvent();
        
        this.control = new SelectBox.Control( this );
        this.input = new SelectBox.Input( this );
        this.box = new SelectBox.NullBox( this ); // lazy initialization -> IE6 Renderer Bug
        //this.box = SelectBox.Factory.newBox( this  );
        
        this._initFirstValue();
        this._realignElement();
        
        if ( this.info.loadEvent ) {
            $Fn(this._initFirstValue, this).attach( window, "load" );
        }
    },
    _initOption : function( argu ) {
        var options = {
            keepTitle       : false,
            boxType         : "basic",
            handlerType     : "basic",
            cols            : 1,
            boxY            : 0,
            align           : "left",
            spanClass       : "seljs_selected",
            spanTitleClass  : "seljs_title",
            boxClass        : "seljs_option",
            boxOverClass    : "seljs_mover",
            iframeClass     : "seljs_iframe",
            focusClass      : "sopen",
            multiClass      : "selcol",
            maxHeight       : 1200,
            useIframe       : false,
            loadEvent       : true,
            BtnClick        : false
        };
        if (typeof argu == "undefined" ) argu = new Object;
        for(var x in argu) {
            options[x] = argu[x];
        }
        
        if ( options.cols != 1 ) {
            options.boxType = "multicolumn";
            options.handlerType = "multicolumn";
            options.boxClass = options.boxClass + " " + options.multiClass;
        }
        return options;
    },
    _getAttribute : function( select ) {        
        this.info.base = select;
        this.info.parent = select.parentNode;
        this.info.agent = $Agent().navigator();
        
        this.info.title     = select.getAttribute( "title" ) || false;
        this.info.name      = select.getAttribute( "name" ) || "";
        this.info.width     = 0;
        this.info.selected  = -1;
        this.info.list      = new Array();
        this.info.optionType = new Array();
        this.info.imgList   = new Array();
    
        var children = select.getElementsByTagName( "OPTION" );
        for ( var i = 0, j = 0 ; i < children.length ; i++ ) {
            var option = children[i];

            var type = SelectBox.getOptionType( option.firstChild.nodeValue );
            var newValue = option.firstChild.nodeValue;
            if ( type != SelectBox.NORMAL ) {
                newValue = ( type == SelectBox.PERIOD ? this.info.periodOption.value : type == SelectBox.URL ? this.info.urlOption.value : newValue );
            }
            this.info.optionType.push( type );
            this.info.list.push( new Array( newValue, ( option.getAttribute( "value" ) || "" ) ) );

            var imgSrc = ( this.info.agent.safari ? option.getAttribute( "style" ) || "none" : $Element( option ).css( "backgroundImage" ) );
            var imgAlt = option.getAttribute( "title" ) || "";

            if ( imgSrc != "none" ) {
                this.info.imgList.push( new Array( imgSrc.replace( /.*url\(\"?([^\"]+)\"?\)/, "$1" ), imgAlt ) );
            } else {
                this.info.imgList.push( new Array( "", "" ) );
            }
            if ( option.defaultSelected ) {
                this.info.selected = j;
            }
            j++;
        }
        this.info.width = parseInt( select.offsetWidth || select.style.width );
    },
    _setEvent : function() {
        var select = this.info.base;
        this.Onchange       = ( this._isValidEvent( select.onchange ) || this._nullEvent );
        this.Onkeydown      = ( this._isValidEvent( select.onkeydown ) || this._nullEvent );
        this.Onkeypress     = ( this._isValidEvent( select.onkeypress ) || this._nullEvent );
        this.Onmouseout     = ( this._isValidEvent( select.onmouseout ) || this._nullEvent );
        this.Onmouseover    = ( this._isValidEvent( select.onmouseover ) || this._nullEvent );
        this.Onclick        = ( this._isValidEvent( select.onclick ) || this._nullEvent );
        this.Onfocus        = ( this._isValidEvent( select.onfocus ) || this._nullEvent );
        this.Onblur         = ( this._isValidEvent( select.onblur ) || this._nullEvent );
    },
    _isValidEvent : function( func ) {
        if ( func && typeof func == "function" ) {
            return func;
        } else {
            return false;
        }
    },
    _initFirstValue : function() {
        if ( this.info.selected < 0 ) {
            if ( this.info.title ) { 
                this.input.setTitle( this.info.title );
            } else {
                this.input.setValue( this.info.list[0][0], this.info.list[0][1] );
            }
        } else {
            this.input.setValue( this.info.list[ this.info.selected ][0], this.info.list[ this.info.selected ][1] );
        }
    },
    _realignElement : function() {
        this.info.base.style.display = "none";
        this.info.base.removeAttribute( "name" );
        this.info.parent.insertBefore( this.input._span, this.info.base );
    },
    _getIndex : function( value ) {
        var index = -1;
        var list = this.info.list;
        
        for ( var i = 0 ; i < list.length ; i++ ) {
            if ( list[i][1] == value ) {
                index = i;
                break;
            }
        }
        return index;
    },
    length : function() {
        return this.info.list.length;
    },
    getValue : function() {
        return {
            displayValue : ( this.control.index.now == -1 ? this.info.title : this.info.list[ this.control.index.now ][0] ),
            value : ( this.control.index.now == -1 ? "" : this.info.list[ this.control.index.now ][1] ),
            index : this.control.index.now
        };
    },
    setValue : function( value, initFirstValue ) {
        var index = this._getIndex( value );
        if ( index == -1 ) 
            return;

        this.control.changeIndex( index );
        this.control.initAllIndex( index );
        if ( initFirstValue === true ) {
            this.info.selected = index;
        }
    },
    addValue : function( viewValue, value, imgSrc, imgAlt ) {
        
        var index = this._getIndex( value );
        
        if ( index != -1 ) return this; 
        
        this.info.list.push( new Array( viewValue, value ) );
        this.info.imgList.push( new Array( imgSrc || "", imgAlt || "" ) );
        if ( !this.box.nullBox ) {
            this.box.refresh();
        }
        
        return this;
    },
    focus : function() {
        this.input.focus();
    },
    show : function() {
        this.box.show();
    },
    hide : function() {
        this.box.hide();
    },
    _remove : function( index ) {
        this.info.list.splice( index, 1 );
        this.info.imgList.splice( index, 1 );
        
        if ( !this.box.nullBox ) {
            this.box.refresh();
            if ( index == this.control.index.now ) {
                this.control.changeIndex( 0 );
                this.box.changeChildStyle( 0 );
            }
        }
    },
    removeValue : function( value ) {
        var index = this._getIndex( value );
        if ( index == -1 ) return;

        this._remove( index );
        return this;
    },
    removePart : function( size ) {
        var length = this.info.list.length;
        
        if ( length > size ) {
            for ( var index = length ; index >= size ; index-- ) {
                this._remove( index );
            }
        }
    },      
    recovery : function() {
        this.input._span.display = "none";
        this.info.base.style.display = "block";
        this.info.base.name = this.info.name;
        this.input._hidden.name = "";
    },
    rrecovery : function() {
        this.info.base.style.display = "none";
        this.info.base.removeAttribute( "name" );
        this.input._span.display = "block";
        this.input._hidden.name = this.info.name;
    },
    Onchange : null,
    Onkeydown : null,
    Onkeypress : null,
    Onmouseout : null,
    Onmouseover : null,
    Onclick : null,
    Onfocus : null,
    Onblur : null,
    BtnClick : null,
    _nullEvent : function() {}
} );
SelectBox.fireEvent = function( func, event, select ) {
    func.call( select, event, select );
};
SelectBox.EXTRA_WIDTH = {
    ie      : 0,
    firefox : 0,
    opera   : 0,
    safari  : 0,
    getWidth : function( agent ) {
        return ( agent.ie ? this.ie : agent.firefox ? this.firefox : agent.safari ? this.safari : this.opera );
    },
    setWidth : function( extra ) {
        for ( var p in extra ) {
            if ( this[p] < extra[p] ) 
                this[p] = extra[p];
        }
    }
}
SelectBox.Factory = {
    newHandler : function( control ) {
        var handler = null;
        switch( control.select.info.handlerType ) {
            case "basic" :
                handler = new SelectBox.Handler( control );
                break;
            case "multicolumn" :
                handler = new SelectBox.MultiColumnHandler( control );
                break;
        }
        return handler;
    },
    newBox : function( select ) {
        var box = null;
        switch( select.info.boxType ){
            case "basic" :
                box = new SelectBox.Box( select );
                break;
            case "multicolumn" :
                box = new SelectBox.MultiBox( select );
                break;
        }
        return box;
    },
    newOption : function( select, box, index ) {
        var option = null;
        var type = select.info.optionType[index];
        switch( type ) {
            case SelectBox.PERIOD :
                option = new SelectBox.PeriodOption( select, box, index ); 
                break;
            case SelectBox.URL :
                option = new SelectBox.URLOption( select, box, index );
                break;
            default :
                option = new SelectBox.Option( select, box, index );
        }
        return option;
    }
};
SelectBox.getOptionType = function( value ) {
    var type = value.toLowerCase();
    var result = SelectBox.NORMAL;
    switch( type ) {
        case SelectBox.SHARP + SelectBox.PERIOD :
            result = SelectBox.PERIOD;
            break;
        case SelectBox.SHARP + SelectBox.URL :
            result = SelectBox.URL;
            break;
        default :
    }
    return result;

}
SelectBox.SHARP = "#";
SelectBox.NORMAL = "normal";
SelectBox.PERIOD = "period";
SelectBox.URL = "url";
SelectBox.INDEX = "index";
SelectBox.DOCTYPE = "transitional";
SelectBox.BOX_LIST = new Array();
SelectBox.CHECK_AREA = function( event ) {
    var element = event.element;
    var elementID = [];
    
    if ( !!element ) {
        for ( var i = 0 ; element != null && element.nodeType == 1 ; i++ ) {
            elementID[i] = element.id || "";
            element = element.parentNode;
        }
    }
    var hasID = false;
    for ( var i = 0 ; i < SelectBox.BOX_LIST.length ; i++, hasID = false ) {
        var box = SelectBox.BOX_LIST[i];
        
        for ( var j = 0 ; j < elementID.length ; j++ ) {
            if ( box[0] == elementID[j] || box[1] == elementID[j] ) {
                hasID = true;
                break;
            }
        }
        if ( hasID == false ) {
            $( box[2] ).style.display = "none";
            $( box[1] ).style.display = "none";
        }
    }
}
$Fn( SelectBox.CHECK_AREA, window ).attach( document, "click" );
SelectBox.Input = $Class( {
    $init : function( select ) {
        this.select = select;
        this.info = select.info;
        
        this._createDOM();
        this._addEvent();
    },
    _createDOM : function() {
        this._span = $( "<SPAN>" );
        this._span.className = this.info.spanTitleClass;
        
        this._span.appendChild( this._input = this._createInput() );        
        this._span.appendChild( this._hidden = this._createHidden() );
    },
    _createInput : function() {
        var input = $( "<INPUT>" );
        var ele = $Element( input );
        
        ele.attr( {
            id      : ( this.id = this.info.id + "Input" + new Date().getMilliseconds() ),
            //name      : this.info.name + new Date().getMilliseconds(),
            type        : "text",
            readOnly    : "readOnly",
            value       : ""
        } );
        ele.css( { width : this.info.width + "px" } );
        return input;       
    },
    _createHidden : function() {
        var hidden = $( "<INPUT>" );
        $Element( hidden ).attr({
            type    : "hidden",
            name    : this.info.name,
            value   : ""
        });
        hidden.style.display = "none";
        return hidden;              
    },
    _addEvent : function() {
        $Fn(this._onfocus,this).attach(this._input, "focus");
        $Fn(this._onblur,this).attach(this._input, "blur");
        $Fn(this._onclick,this).attach(this._input, "click");
        $Fn(this._onkeydown,this).attach(this._input, "keydown");
        //$Fn(this._onmousedown,this).attach(this._input, "mousedown");
        //$Fn(this._onmouseup,this).attach(this._input, "mouseup");
        //$Fn(this._onmouseover,this).attach(this._input, "mouseover");
        //$Fn(this._onmouseout,this).attach(this._input, "mouseout");
        //$Fn(this._onkeypress,this).attach(this._input, "keypress");
                
    },
    setValue : function( viewValue, value ) {
        if ( this.info.keepTitle ) {
            this._hidden.value = value;
        } else {
            this._input.value = viewValue;
            this._hidden.value = value;
        }
    },
    setHiddenValue : function( value ) {
        this._hidden.value = value;
    },
    setTitle : function( title ) {
        this._input.value = title;
        this._hidden.value = "";
    },
    getPos : function() {
        var inputElement = $Element( this._input );
        var pos = inputElement.offset();
        var leftGap = Math.abs( parseInt( $Element( document.body ).css( "borderLeftWidth" ) ) );
        var topGap = parseInt( inputElement.css( "borderTopWidth" ) );
        var left = ( this.select.info.agent.firefox ? pos.left + ( leftGap * 2 ) : pos.left );
        var top = ( this.select.info.agent.ie ? pos.top - topGap : pos.top );
        return {
            x : parseInt( left ), 
            y : parseInt( top ) + parseInt( this._input.offsetHeight ) 
        };
    },
    getWidth : function() {
        return this._input.offsetWidth;
    },
    getBorderWidth : function() {           
        var ele = $Element( this._input );

        var width = 0;
        if ( SelectBox.DOCTYPE == "transitional" ) {
            if ( !this.select.info.agent.ie )
                width = parseInt( ele.css( "borderLeftWidth" ) || 0 ) + parseInt( ele.css( "borderRightWidth" ) || 0 );
        } else if ( SelectBox.DOCTYPE == "loose" || SelectBox.DOCTYPE == "xhtml" ) {
            width -= parseInt( ele.css( "marginLeft" ) || 0 ) + parseInt( ele.css( "marginRight" ) || 0 );
            width -= parseInt( ele.css( "paddingLeft" ) || 0 ) + parseInt( ele.css( "paddingRight" ) || 0 );

        }
        return width;
    },
    focus : function() {        
        this._input.focus();
    },
    _onclick : function( e ) {
        this.select.box.display();
        SelectBox.fireEvent( this.select.Onclick, e, this.select );
    },
    _onfocus : function( e ) {
        this._span.className = this._span.className + " " + this.info.focusClass;
        SelectBox.fireEvent( this.select.Onfocus, e, this.select );
    },
    _blurStyle : function( cName ) {
        return cName.replace( new RegExp( this.info.focusClass ), "" );
    },
    _onblur : function( e ) {
        this._span.className = this._blurStyle( this._span.className );
        
        if ( !this.select.control.isFireOnchange() ) {
            this.select.control.firedOnchange();
            this.select.Onchange( e, this.select );
        }
        SelectBox.fireEvent( this.select.Onblur, e, this.select );
    },
    _onkeydown : function( e ) {
        this.select.control.keydown( e );
        SelectBox.fireEvent( this.select.Onkeydown, e, this.select );
    }
    /*
    _onmousedown : function( e ) {
        SelectBox.fireEvent( this.select.Onmousedown, e, this.select );
    },
    _onmouseup : function( e ) {
        SelectBox.fireEvent( this.select.Onmouseup, e, this.select );
    },
    _onmouseover : function( e ) {
        SelectBox.fireEvent( this.select.Onmouseover, e, this.select );
    },
    _onmouseout : function( e ) {
        SelectBox.fireEvent( this.select.Onmouseout, e, this.select );
    },
    _onkeypress : function( e ) {
        SelectBox.fireEvent( this.select.Onkeypress, e, this.select );
    }
    */
} );
SelectBox.Control = $Class( {
    $init : function( select ) {
        this.select = select;
        this.handler = SelectBox.Factory.newHandler( this );
        
        this.index = {
            now : -1, mouse : -1, old : -1, pre : -1
        };
        this._isBlur = true;
        this._initIndex();
    },
    _initIndex : function() {
        if ( this.select.info.selected < 0 ) {
            if ( !this.select.info.title ) {
                this.initAllIndex( 0 );
            }
        } else {
            this.initAllIndex( this.select.info.selected );
        }
    },
    initAllIndex : function( index ) {
        this.setIndex( index, SelectBox.Control.NOW );
        this.setIndex( index, SelectBox.Control.MOUSE );
        this.setIndex( index, SelectBox.Control.OLD );
        this.setIndex( index, SelectBox.Control.PRE );
    },
    getIndex : function() { 
        return this.index; 
    },
    setIndex : function( index, what ) { 
        this.index[ what ] = index; 
    },
    keydown : function( e ) {

        var isFireKey = false;
        var index = ( this.index.now == this.index.mouse ? this.index.now : this.index.mouse );
        
        var k = e.key();
        if ( k.alt && k.down ) {
            this.select.box.display();
        } else if ( k.up || k.down || k.left || k.right || ( k.keyCode >= 33 && k.keyCode <= 36 ) ) {
            
            var keyStr = ( k.up ? SelectBox.Control.UP : k.down ? SelectBox.Control.DOWN : k.left ? SelectBox.Control.LEFT : k.right ? SelectBox.Control.RIGHT : false );
            var next = -1;
            if ( keyStr ) { 
                next = this.handler.nextIndex( keyStr, index )
            } else {
                next = ( k.keyCode == 33 || k.keyCode == 36 ? 0 : this.handler.getMaxIndex() ); // 33(Home), 36(PageUP), 34(DOWN), 35(PageDown)
            }
            this.select.box.focus( next );
            e.stop();
        } else if ( k.enter ) {
            if ( this.index.mouse != -1 ) 
                this.changeIndex( parseInt( this.index.mouse ) );

            this.select.box.hide();
            isFireKey = true;
            this.select.input.focus();      
            e.stop();
        } else if ( k.keyCode == 9 ) { // Tab
            this.select.box.hide();
            isFireKey = true;
        } else if ( k.keyCode == 27 ) { // ESC
            this.select.box.hide();
        }

        SelectBox.fireEvent( this.select.Onkeydown, e, this.select );
        if ( !this.isFireOnchange() ) {
            if ( isFireKey && k.keyCode != 27 ) {
                this.firedOnchange();
                this.select.Onchange( e, this.select );
            } 
        }
    },
    changeIndex : function( index ) {
        this.changeValue( index );
        this.index.pre = this.index.now;
        this.index.now = index;
        this.index.mouse = index;
    },
    changeValue : function( index ) {
        if ( index != -1 )
            this.select.input.setValue( this.select.info.list[ index ][0], this.select.info.list[ index ][1] );
    },
    firedOnchange : function() {
        this.index.old = this.index.now;
    },
    isFireOnchange : function() {
        if ( this._isBlur == true ) {
            return this.index.old == this.index.now;
        } else {
            this._isBlur = true;
            return true;
        }
    },
    setIsBlur : function( flag ) {
        this._isBlur = flag;
    }
} );
SelectBox.Control.UP    = "UP";
SelectBox.Control.DOWN  = "DOWN";
SelectBox.Control.LEFT  = "LEFT";
SelectBox.Control.RIGHT = "RIGHT";
SelectBox.Control.NOW   = "now";
SelectBox.Control.MOUSE = "mouse";
SelectBox.Control.OLD   = "old";
SelectBox.Control.PRE   = "pre";
SelectBox.Handler = $Class( {
    $init : function( control ) {
        this.control = control;
        this.list = control.select.info.list;
    },
    nextIndex : function( key, index ) {
        
        var row = parseInt( index );
        var maxRow = this.getMaxIndex();
        
        var nextIndex = index;
        if ( key == "UP" ){     // || key == "LEFT" ) {
            nextIndex = ( index > 0 ? row - 1 : index );
        } else if ( key == "DOWN" ){    // || key == "RIGHT" ) {
            if ( index == -1 ) {
                nextIndex = 0;
            } else {
                if ( row != maxRow ) {
                    nextIndex = row + 1;
                } else {
                    nextIndex = index;
                }
            }           
        } 
        return nextIndex;       
    },
    getMaxIndex : function() {
        return this.list.length - 1;
    }
} );
/*
 * public function
 *      changeStyle
 *      getElement
 *      focus
 */
SelectBox.Option = $Class( {
    $init : function( select, box, index ) {
        this.select = select;
        this._box = box;
        this._index = index;
        
        this._element = this._initElement();
    },
    _initElement : function() {
        var li = $( "<LI>" );
        li.setAttribute( SelectBox.INDEX, this._index );
        var imgSrc = this.select.info.imgList[ this._index ][0];
        var imgAlt = this.select.info.imgList[ this._index ][1];
        
        if ( imgSrc != "" ) {
            var img = $( "<IMG>" );
            img.src = imgSrc;
            img.alt = imgAlt;
            li.appendChild( img );
        }
        $Fn( this._onmouseover, this ).attach( li, "mouseover" );
        $Fn( this._onclick, this ).attach( li, "click" );
        li.appendChild( document.createTextNode( this.select.info.list[ this._index ][0] ) );
        return li;
    },
    changeStyle : function() {
        this._box.initLIStyle();
        this._element.className = this.select.info.boxOverClass;
    },
    focus : function() {
        this.changeStyle();
        this.select.control.changeIndex( this._index );
    },
    getElement : function() {
        return this._element;
    },
    _onmouseover : function( e ) {
        this.changeStyle( this._index );
        this.select.control.index.mouse = this._index;
    },
    _onclick : function( e ) {      
        var isFireOnchange = false;
        
        var readIndex = this._index;
        if ( this.select.control.index.now != this._index ) {
            isFireOnchange = true;
            this.focus();
            //this.select.input.focus();
        }
        this._box.hide();
        this.select.input.focus();
        
        if ( isFireOnchange ) {
            this.select.control.firedOnchange();
            this.select.Onchange( e, this.select );
        }
    }
} );
SelectBox.NullBox = $Class( {
    $init : function( select ) {
        this.select = select;
    },
    display : function() {
        this.select.box = SelectBox.Factory.newBox( this.select  );
        this.select.box.show();
    },
    focus : function( index ) {
        this.select.control.changeIndex( index );
    },
    changeChildStyle : function() {},
    hide : function() {},
    nullBox : true
} );
SelectBox.Box = $Class( {
    $init : function( select ) {
        this.select = select;
        this.info   = select.info;
        this._optionList = new Array();
        this._initBox();
        this._addEvent();
    },
    _initBox : function() {
        this._createIframe();
        this._createUL();
        this._checkHeight();
    },
    refresh : function() {
        document.body.removeChild( this.element );
        this.element = null;
        
        this._createUL();
        this._checkHeight();
        this._addEvent();
    },
    _createUL : function() {
        var ul = $( "<UL>" );
        ul.setAttribute( "id", this.info.id + "optionList" );
        var width = this.info.width - this.select.input.getBorderWidth() + "px";
        
        $Element( ul ).css( {
            left        : -1000,
            top         : -1000,
            display     : "block"
        } );
        document.body.appendChild( this.element = ul );
                
        ul.className = this.info.boxClass;
        ul.ondragstart = function() { return false; };
        ul.onselectstart = function() { return false; };
        
        var list = this.info.list;
        for ( var i = 0 ; i < list.length ; i++ ) {
            this._optionList[i] = SelectBox.Factory.newOption( this.select, this, i );

            ul.appendChild( this._optionList[i].getElement() );
        }
        if ( this.element.offsetWidth > parseInt( width ) ) {
            width = this.element.offsetWidth + SelectBox.EXTRA_WIDTH.getWidth( this.select.info.agent ) + "px" ;
        }
        width = this._isIE55( width );

        $Element( this.element ).css( { 
            width : width,
            display : "none" 
        } );
        $Element( this.iframe ).css( { width : width, display : "none" } );
        SelectBox.BOX_LIST.push( new Array( this.select.input.id, ul.id, this.iframe.id ) );
    },
    _isIE55 : function( width ) {
        if ( this.select.info.agent.ie && this.select.info.agent.version < 6 ) {
            var hasExtra = false;
            for ( var i = 0 ; i < this._optionList.length ; i++ ) {
                if ( this._optionList[i] instanceof SelectBox.Box ) {
                    ;
                } else {
                    hasExtra = true;
                    break;
                }
            }
            if ( hasExtra ) 
                width = "197px";
        }
        return width;
    },
    _createIframe : function() {
        var iframe = $( "<IFRAME>" );
        iframe.setAttribute( "id", this.info.id + "Iframe" );
        
        iframe.className = this.info.iframeClass;
        this.iframe = iframe;
        document.body.appendChild( this.iframe );
    },
    _checkHeight : function() {
        var element = $Element( this.element );
        element.show();

        element.css( {
            left : "-1000px",
            top : "-1000px"
        } );
        
        if ( this.element.offsetHeight > this.info.maxHeight ) {
            this.iframe.style.height = this.info.maxHeight + "px";
            this.element.style.height = this.info.maxHeight + "px";
        } else {
            this.iframe.style.height = this.element.offsetHeight + "px";
        }
        element.hide();
    },
    _addEvent : function() {
        $Fn( this.hide, this ).attach( window, "resize" );
    },
    _onmouseout : function( e ) {},
    changeChildStyle : function( index ) {
        this._optionList[ index ].changeStyle();
    },
    initLIStyle : function() {
        for ( var i = 0 ; i < this._optionList.length ; i++ ) {
            this._optionList[i].getElement().className = "";
        }
    },
    focus : function( index ) {
        this._optionList[index].focus();
    },
    display : function() {
        
        if ( this.select.box.element.style.display == "none" ) 
            this.show();
        else
            this.hide();
    },
    show : function() {
        if ( this.select.control.index.now != -1 )
            this.changeChildStyle( this.select.control.index.now );
        var pos = this.select.input.getPos();
        
        var coordi = { x : 0, y : 0 };
        if ( this.info.align == "left" ) {
            coordi.x = pos.x + "px";
            coordi.y = ( pos.y + this.info.boxY ) + "px";
        }           
        $Element( this.element ).css( { display : "block", left : coordi.x, top : coordi.y } );
        if ( this.info.useIframe ) 
            $Element( this.iframe ).css( {  display : "block", left : coordi.x, top : coordi.y, height : this.element.offsetHeight + "px" } );
    
    },
    hide : function() {
        if ( this.info.useIframe )
            this.iframe.style.display = "none";
        this.element.style.display = "none";
    },
    isShow : function() {
        return this.element.style.display != "none";
    }
} );