var Class_searchInput = function( target_input, data )
{
    this.instance_name = 'searchInput';
    
    var me = this;
        
    this.target_input = target_input;   //alert( this.target_input );  
    this.search_list = null;
    this.players = [];
    this.selected_row = 0;
    
    this.data = data;
    this.list_opened = 0;
    
    this.ini = function()
    {
        me.target_input.value = '[input nickname]';
    
        //this.target_input.autocomplete = false;
        var div = document.createElement( 'div' );
        div.style.position = 'relative';
        div.id = 'test1'
        //div.innerHTML = "<div id='search_list' style='position: absolute; top:-3px; left:12px; display: none; border: 1px solid #b1ad92; padding: 3px; background-color: #ecebe6; z-index: 9; width: 220px;'></div>";
        
        var tmp = me.target_input.parentNode.insertBefore( div, me.target_input.nextSibling ); 
        $j( tmp ).html( "<div id='search_list' style='position: absolute; top:-3px; left:12px; display: none; border: 1px solid #b1ad92; padding: 3px; background-color: #ecebe6; z-index: 9; width: 220px;'></div>" );
        me.search_list = $j( '#search_list' );
        
        alert( me.search_list.style );
        
        me.target_input.onkeydown = this.tabulateList;
        me.target_input.onkeyup = this.doSearch; 
        
        me.target_input.onfocus = function( event ) {
            var el;
            if (!event) var event = window.event;
            if (event.target) el = event.target;
            else if (event.srcElement) el = event.srcElement;
                
            if( el.value == '[input nickname]' ) el.value = '';
            return true;
        }
    }
            
    this.search = function( words, max_matches )
    {
       //alert( abc );
       if( words == null || words.length < 2 ) return [];
       
       var matches_1 = [];
       var matches_2 = [];
       var cnt_matches = 0;
       var index = -1;       

       for( i in me.data ) {
            
            //alert( me.data[i] ); break;
            
            var tmp = me.data[i].toString();
            tmp = tmp.toLowerCase();
            
            index = tmp.indexOf( words.toLowerCase() );
            if( index == -1 ) continue;
            try{ 
                cnt_matches++;
                if( index == 0 ) {
                    matches_1.push( this.data[i] );
                } else { 
                    matches_2.push( this.data[i] );
                }    
            } catch( e ) {
               //alert( e ); 
            }                                                                                                                                   
            if( cnt_matches == max_matches ) break; 
       }
       
       return matches_1.concat( matches_2 );
    }
    
    this.selectFounded = function( founded_str )
    {
        this.target_input.value = founded_str; 
        me.search_list.style.display = 'none';      
    }
    
    this.doSearch = function( event )
    {
        var code;
        if (!event) var event = window.event;
        if (event.keyCode) code = event.keyCode;
        else if (event.which) code = event.which;
        
        if( code == 38 || code == 40 || code == 13 ) return true;
        
        var words = me.target_input.value;
        if( words.length < 2 ) {
            me.search_list.style.display = 'none';
            me.list_opened = 0;
        } else {
            var res = me.search( me.target_input.value, 15 ); alert( me.search_list.html() );
            //me.search_list.innerHTML = '[Searcing...]';
            
            if( !res || res.length == 0 ) {
                var newHTML = '<font color="red">[Not found]</font>';    
            } else {
                var newHTML = '';
                for( var i=0; i<res.length; i++ ) {
                      newHTML += 
                      '<a href="#'+res[i]+'" onclick="'+me.instance_name+'.selectFounded(\''+res[i]+'\'); return false;" class="simple_row">' + res[i] + '</a>'; 
                }
            }
            
            me.search_list.innerHTML = newHTML;    
            me.search_list.style.display = 'block';
            me.list_opened = 1;  
        } 
    }
    
    this.tabulateList = function( event )
    {
        var code;
        if (!event) var event = window.event;
        if (event.keyCode) code = event.keyCode;
        else if (event.which) code = event.which;
         
        if( code == 38 ) {
             me.selected_row.className = 'simple_row';
             if( !me.selected_row || !me.selected_row.previousSibling ) {
                 var rows = me.search_list.getElementsByTagName( 'A' );
                 if( rows.length == 0 ) return true;
                 me.selected_row = rows[rows.length-1]; 
                 me.selected_row.className = 'simple_row selected_row';
                      
             } else {
                 //nextSibling, previousSibling
                 me.selected_row = me.selected_row.previousSibling;
                 me.selected_row.className = 'simple_row selected_row'; 
             }
        } else if( code == 40 ) {
             me.selected_row.className = 'simple_row';
             if( !me.selected_row || !me.selected_row.nextSibling ) {
                 var rows = me.search_list.getElementsByTagName( 'A' );
                 if( rows.length == 0 ) return true;
                 me.selected_row = rows[0]; 
                 me.selected_row.className = 'simple_row selected_row';
                      
             } else {
                 //nextSibling, previousSibling
                 me.selected_row = me.selected_row.nextSibling;
                 me.selected_row.className = 'simple_row selected_row'; 
             }
        } else if( code == 13 ) {
            if( me.selected_row ) {
                me.selectFounded( me.selected_row.innerHTML );
                me.selected_row = 0;
                me.list_opened = 0;
                me.search_list.style.display = 'none';
                return false;
            } else {
                if( !me.list_opened ) return true; else return false;
            }
        } else {  
            return true;
        }
        
        return true
    }
    
    this.ini();
    
}