/*
 * Ext JS Library 2.2.1
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){
	if (document.getElementById("name_search_field")) {
	    var name_ds = new Ext.data.Store({
	        proxy: new Ext.data.HttpProxy({
	            url: g_params["base_domain"]+'/members/my_friends/&get_member_names',
	            method: 'post'
	        }),
	        reader: new Ext.data.JsonReader({
	            root: 'names',
	            totalProperty: 'totalCount',
	            id: 'post_id'
	        }, [
	            {name: 'sf_name'},
	            {name: 'sf_picture'},
	            {name: 'sf_id'}
	        ])
	    });
	
	    // Custom rendering Template
	    var resultTpl = new Ext.XTemplate(
	        '<tpl for="."><div class="name-search-item">',
	            '<div class="name-search-item-photo"><img src="{sf_picture}" alt="{sf_name}" /></div>',
	            '<div class="name-search-item-name">{sf_name}</div>',
	        '</div></tpl>'
	    );
	    
	    var search = new Ext.form.ComboBox({
	        store: name_ds,
	        displayField:'sf_name',
	        typeAhead: false,
	        loadingText: 'Searching...',
	        width: 156,
	        autoHeight:true,
	        listClass:'name-search-combo',
	        shadow:false,
	        hideTrigger:true,
	        tpl: resultTpl,
	        applyTo: 'name_search_field',
	        selectedClass: 'name-search-item-selected',
	        itemSelector: 'div.name-search-item',
	        onSelect: function(record){ // override default onSelect to do redirect
	            window.location =
	                String.format(g_params["base_domain"]+'/members/member_profile/{0}', record.data.sf_id);
	        },
	        listeners: {
			    specialkey: function(field, e){
			        if (e.getKey() == e.ENTER) {
			            name_search();
			        }
			    }
			}
	    });
	} 
});