var modeDebug = 0;
var dynamicUI_LOADCALLBACK_ERROR_MSG = "";
var GUI_AJAX_TIMEOUT = 5*60*1000; // en milliseconde

Ext.Ajax.defaultHeaders = {'Content-Type': 'application/x-www-form-urlencoded; charset=ISO-8859-15' };

//Ext.lib.Ajax.encoder = escape;

function uiUrlEncoder(str) {
	var string = '' + str;
	string = string.replace(/=/g, escape("="));
	string = string.replace(/&/g, escape("&"));
	return string;
}

function initDynamicUI(containerId, urlRequest, replaceComponent, cleanContainer , disabledCache) {
		
	//Ext.Msg.wait('Chargement', 'Merci de patienter ...');	
	
	var currentTime = new Date().getTime(); // useful for cache
	var urlRequestProxy;	
	if(typeof urlRequest === "string") {
		/*
		if(disabledCache) {
			urlRequestProxy = new Ext.data.HttpProxy({url: urlRequest, method: 'POST' });
		} else {
			urlRequestProxy = new Ext.data.HttpProxy({url: urlRequest + "&responseCacheId=" + currentTime, method: 'POST' });
		}
		*/
		
		urlRequestProxy = new Ext.data.HttpProxy({url: urlRequest, method: 'POST' });
	} else {
		urlRequestProxy = urlRequest; // it is a MemoryProxy in this case
	}
	
	var datasetStore = new Ext.data.Store({
		proxy: urlRequestProxy,
		reader: new Ext.data.XmlReader({
			record: "dataset" 
		}, Ext.data.Record.create([
	                             {name: 'dataset', mapping: 'dataset'}
	                          ])                   
	    )
	}); 


	datasetStore.on('load', function(){
		sourceDataStore.loadData(datasetStore.reader.xmlData);
		eventDataStore.loadData(datasetStore.reader.xmlData);		
		componentDataStore.loadData(datasetStore.reader.xmlData);
	});
	
	datasetStore.load({callback: function(records, options, success){
		if(success) {
		
			if(cleanContainer) {
				Ext.getCmp(containerId).removeAll(true);
			}
			
			componentDataStore.each(function(record){
				buildComponentUI( record, replaceComponent );
			});
			
			var contenaire = Ext.getCmp(containerId);
			if(contenaire) {
				contenaire.doLayout();
			}	

			//the components are all built up. let's load the events
			eventDataStore.each(function(record){
				bindEventUI(record);
			});
			

		}}}			
	);		
	
}

/*
 * Depending on the component type, this method dispatch to a dedicated component builder for each component type
 */
function buildComponentUI(record, replaceComponent) {	
	
	if( record.get('type') == 'message' ) {
		var abort = buildComponentUI_message(record);
		if(abort) {
			// 'error message' will abort here.
			// 'information message' will abort none.
			return;
		}	
	}
	
	if(replaceComponent) {
		//alert('replace: ' + record.get('id'));
		var destroyMeComponent = Ext.getCmp(record.get('id'));
		if(destroyMeComponent) {
			destroyMeComponent.destroy();
		}
	}
		
	if( record.get('type') == 'panel' ) {
		buildComponentUI_panel(record);
	} else if( record.get('type') == 'gridPanel' ) {
		buildComponentUI_gridPanel(record);
	} else if( record.get('type') == 'button' ) {
		buildComponentUI_button(record);
	} else if( record.get('type') == 'tabPanel' ) {
		buildComponentUI_tabPanel(record);
	} else if( record.get('type') == 'tabPanelAddHtml' ) {
		buildComponentUI_tabPanel_addHtml(record);
	} else if( record.get('type') == 'tree' ) {
		buildComponentUI_tree(record);
	} else if( record.get('type') == 'columnTree' ) {
		buildComponentUI_columnTree(record);
	} else if( record.get('type') == 'external' ) {
		var externalComponentCreatorFunction = record.get('external');
		buildComponentUI_externalComponent(externalComponentCreatorFunction, record);				
	} else if( record.get('type') == 'formPanel' ) {
		buildComponentUI_formPanel(record);
	} else if( record.get('type') == 'fieldset' ) {
		buildComponentUI_fieldset(record);
	} else if( record.get('type') == 'textField' ) {
		buildComponentUI_textField(record);
	} else if( record.get('type') == 'radioGroup' ) {
		buildComponentUI_radioGroup(record);
	} else if( record.get('type') == 'radio' ) {
		buildComponentUI_radio(record);
	} else if( record.get('type') == 'checkboxGroup' ) {
		buildComponentUI_checkboxGroup(record);
	} else if( record.get('type') == 'checkbox' ) {
		buildComponentUI_checkbox(record);
	} else if( record.get('type') == 'combobox' ) {
		buildComponentUI_combobox(record);
	} else if( record.get('type') == 'hidden' ) {
		buildComponentUI_hidden(record);
	} else if( record.get('type') == 'editorgrid' ) {
		buildComponentUI_editorgrid(record);
	} else if( record.get('type') == 'window' ) {
		buildComponentUI_window(record);
	} else if( record.get('type') == 'htmleditor' ) {
		buildComponentUI_htmleditor(record);
	} else if( record.get('type') == 'textfield' ) {
		buildComponentUI_textfield(record);
	} else if( record.get('type') == 'textarea' ) {
		buildComponentUI_textarea(record);
	} else if( record.get('type') == 'fileuploadfield' ) {
		buildComponentUI_fileuploadfield(record);
	//} else if( record.get('type') == 'paging' ) {
	//	buildComponentUI_paging(record);
	} else if( record.get('type') == 'columnModel' ) {
		buildComponentUI_columnModel(record);
	} else if( record.get('type') == 'array-list' ) {
		buildComponentUI_arrayList(record);
	} else if( record.get('type') == 'array-map' ) {
		buildComponentUI_arrayMap(record);
	} else if( record.get('type') == 'complex-list' ) {
		buildComponentUI_complexList(record);	
	} else if( record.get('type') == 'message' ) {
		buildComponentUI_message(record);		
	} else {
		// by default, we considere the type as a xtype
		try {
			buildComponentUI_xtype(record);
		} catch(err) {
			Ext.Msg.hide();
			alert("component '" +  record.get('type') + "' cannot be built: there is no defined builder: " + err);
		}
		
	}	
	
}

/**
 * Collect arrays as list and map
 *
 */
var arrayDirectory = new Ext.util.MixedCollection();
function buildComponentUI_arrayList(record) {
	var listId = record.get('id');	
	var list = record.get('propertyValues');	
	arrayDirectory.add(listId, list);
}

function buildComponentUI_arrayMap(record) {
	var mapId = record.get('id');
	var keys = record.get('propertyKeys');
	var values = record.get('propertyValues');
	var map = new Array();
	for(var k = 0; k < keys.length; k++) {
	map[keys[k]] = values[k];
	}
	arrayDirectory.add(mapId, map);
	
	//alert(arrayDirectory.get('my-map-1')['A']);
}

function buildComponentUI_complexList(record) {
	var complexId = record.get('id');
	var listIds = record.get('propertyValues');
	var complexArray = new Array();
	for(var v = 0; v < listIds.length; v++) {
		complexArray[v] = arrayDirectory.get(listIds[v]);
	}
	arrayDirectory.add(complexId, complexArray);
}

/**
 * Build a FormPanel UI
 * @param record
 * @return
 */
function buildComponentUI_formPanel(record) {	
	var container = Ext.getCmp(record.get('containerId'));
	var properties = record.get('properties');
	properties['id'] = record.get('id');
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

    var component =  new Ext.form.FormPanel(properties);
    
    var itemIds = record.get('itemIds');
    for(var i = 0; i < itemIds.length; i++) {
	   var itemComponent = Ext.getCmp(itemIds[i]);
	   component.add(itemComponent);
    }
          
	if(container) {
		if(container.isXType('tabpanel')) {
			container.add(component);
			container.setActiveTab(component.id);
		} else {
			container.add(component);
		}
		container.doLayout();
	}
}

function buildComponentUI_fieldset(record) {	
	var container = Ext.getCmp(record.get('containerId'));
	var properties = record.get('properties');
	properties['id'] = record.get('id');
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

    var component =  new Ext.form.FieldSet(properties);
    
    var itemIds = record.get('itemIds');
    for(var i = 0; i < itemIds.length; i++) {
	   var itemComponent = Ext.getCmp(itemIds[i]);
	   component.add(itemComponent);
    }
          
	if(container) {
		if(container.isXType('tabpanel')) {
			container.add(component);
			container.setActiveTab(component.id);
		} else {
			container.add(component);
		}
		container.doLayout();
	}
}

function buildComponentUI_textField(record) {	
	var container = Ext.getCmp(record.get('containerId'));
	var properties = record.get('properties');
	properties['id'] = record.get('id');
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

    var component =  new Ext.form.TextField(properties);
    
    if(record.get('value')) {
    	component.setValue(record.get('value'));
    }
    
	if(container) {
		container.add(component);
		container.doLayout();
	}	
}

function buildComponentUI_paging(record) {	
	var container = Ext.getCmp(record.get('containerId'));
	var properties = record.get('properties');
	properties['id'] = record.get('id');
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

    var component = new new Ext.PagingToolbar(properties);
    
    if(record.get('value')) {
    	component.setValue(record.get('value'));
    }
    
	if(container) {
		container.add(component);
		container.doLayout();
	}	
}


function buildComponentUI_xtype(record) {	
	var container = Ext.getCmp(record.get('containerId'));
	var properties = record.get('properties');
	properties['id'] = record.get('id');
	properties['xtype'] = record.get('type');
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			properties[index] = arrayDirectory.get(componentProperties[index]);
			if( Ext.getCmp(componentProperties[index]) ) {				
				properties[index] = Ext.getCmp(componentProperties[index]);
			} 
		}		
	}
    var component =  new Ext.ComponentMgr.create(properties, properties['xtype']);    
  	
	if(container) {
		container.add(component);
		container.doLayout();
	}
	
	return true;
}

function buildComponentUI_columnModel(record) {
	var properties = record.get('properties');
	properties['id'] = record.get('id');

	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}
	
	var component =  new Ext.grid.ColumnModel(properties);
}

function buildComponentUI_textarea(record) {	
	var container = Ext.getCmp(record.get('containerId'));
	var properties = record.get('properties');
	properties['id'] = record.get('id');
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

    var component =  new Ext.form.TextArea(properties);
    
    if(record.get('value')) {
    	component.setValue(record.get('value'));
    }
    
	if(container) {
		container.add(component);
		container.doLayout();
	}	
}

function buildComponentUI_fileuploadfield(record) {	
	var container = Ext.getCmp(record.get('containerId'));
	var properties = record.get('properties');
	properties['id'] = record.get('id');
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

    var component =  new Ext.form.FileUploadField(properties);
    
    if(record.get('value')) {
    	component.setValue(record.get('value'));
    }
    
	if(container) {
		container.add(component);
		container.doLayout();
	}	
} 

function buildComponentUI_radioGroup(record) {	
	var container = Ext.getCmp(record.get('containerId'));
	var properties = record.get('properties');
	properties['id'] = record.get('id');
	
	
	var items = new Array();
    var itemIds = record.get('itemIds');
    for(var i = 0; i < itemIds.length; i++) {
	   var itemComponent = Ext.getCmp(itemIds[i]);
	   items[i] = itemComponent;
    }    
    properties['items'] = items;
    
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

	
    var component =  new Ext.form.RadioGroup(properties);
    
	if(container) {
		container.add(component);
		container.doLayout();
	}	
}

function buildComponentUI_radio(record) {	
	var container = Ext.getCmp(record.get('containerId'));
	var properties = record.get('properties');
	properties['id'] = record.get('id');
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

    var component =  new Ext.form.Radio(properties);
        
	if(container) {
		container.add(component);
		container.doLayout();
	}	
}

function buildComponentUI_checkboxGroup(record) {	
	var container = Ext.getCmp(record.get('containerId'));
	var properties = record.get('properties');
	properties['id'] = record.get('id');
	
	
	var items = new Array();
    var itemIds = record.get('itemIds');
    for(var i = 0; i < itemIds.length; i++) {
	   var itemComponent = Ext.getCmp(itemIds[i]);
	   items[i] = itemComponent;
    }    
    properties['items'] = items;
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

    var component =  new Ext.form.CheckboxGroup(properties);
    
	if(container) {
		container.add(component);
		container.doLayout();
	}	
}

function buildComponentUI_checkbox(record) {	
	var container = Ext.getCmp(record.get('containerId'));
	var properties = record.get('properties');
	properties['id'] = record.get('id');
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

    var component =  new Ext.form.Checkbox(properties);
        
	if(container) {
		container.add(component);
		container.doLayout();
	}	
}

function buildComponentUI_combobox(record) {	
	var container = Ext.getCmp(record.get('containerId'));
	
	
	
	var rowArray; // let search for this
	var sourceId = record.get('sourceId');
	sourceDataStore.each(function(sourceRecord){
		if(sourceRecord.get('id') === sourceId) {
			rowArray = sourceRecord.get('datacombo');
		}		
	});
	
	var properties = record.get('properties');
	properties['id'] = record.get('id');
	
	if(rowArray) {
		var store = new Ext.data.SimpleStore({
		    fields: ['keyAbbr', 'label'],
		    data : rowArray
		});

		//properties['store'] = rowArray;
		properties['store'] = store;
		properties['valueField'] = 'keyAbbr',
		properties['displayField'] = 'label';
	}
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

    var component =  new Ext.form.ComboBox(properties);
    
    var defaultValueId = record.get('defaultValueId');
    if(defaultValueId) {
    	component.setValue(defaultValueId);
    }
        
	if(container) {
		container.add(component);
		container.doLayout();
	}	
}


function buildComponentUI_hidden(record) {	
	var container = Ext.getCmp(record.get('containerId'));
	var properties = record.get('properties');
	properties['id'] = record.get('id');
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

    var component =  new Ext.form.Hidden(properties);
        
	if(container) {
		container.add(component);
		container.doLayout();
	}	
}

/**
 * Stand to build an external component where the builder is an outstanding function
 * @param externalComponentCreatorFunction
 * @param record
 * @return
 */
function buildComponentUI_externalComponent(externalComponentCreatorFunction, record) {
	var component = eval(externalComponentCreatorFunction+ "('" + record.get('containerId') + "')");
}

/**
 * Sub function designed to build a Panel component
 * @param record
 * @return
 */
function buildComponentUI_panel(record) {	
	var container = Ext.getCmp(record.get('containerId'));
	var properties = record.get('properties');
	properties['id'] = record.get('id');
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

    var component =  new Ext.Panel(properties);
    
    var itemIds = record.get('itemIds');
    for(var i = 0; i < itemIds.length; i++) {
	   var itemComponent = Ext.getCmp(itemIds[i]);
	   component.add(itemComponent);
    }
      
    
	if(container) {
		if(container.isXType('tabpanel')) {
			container.add(component);
			container.setActiveTab(component.id);
		} else {
			container.add(component);
		}
		container.doLayout();
	}
}


function buildComponentUI_tree(record) {	
	var container = Ext.getCmp(record.get('containerId'));

	var treeArray; // let search for this
	var sourceId = record.get('sourceId');
	sourceDataStore.each(function(sourceRecord){
		if(sourceRecord.get('id') === sourceId) {
			treeArray = sourceRecord.get('datatree');
		}		
	});

	var properties = record.get('properties');
	properties['id'] = record.get('id');	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

	
	var component = new Ext.tree.TreePanel({
		id: properties['id'],
        width: properties['width'],
        height: properties['height'],
        root: new Ext.tree.AsyncTreeNode({
            children: treeArray
        }),
        loader: new Ext.tree.TreeLoader(),
        rootVisible: false,
        border: true
	});

    /*
    component.on('click', function(node, e){
        alert(node.id);
    }, this);
    */

    container.add(component);
	container.doLayout();

}

function buildComponentUI_columnTree(record) {
	var container = Ext.getCmp(record.get('containerId'));
	var properties = record.get('properties');
	
	var headerArray = record.get('columnTreeModel');
	var headers = [];
	for(var i = 0; i < headerArray.length; i++) {
		var h = headerArray[i];
		headers[i] = { header: h[0], width: parseInt(h[1]), dataIndex: h[2]};
	}
	
	/*
	var colModel = Ext.ux.tree.ColumnTree([
	  { header: "", width: 160, dataIndex:'id'},
      { header: "Task", width: 160, dataIndex:'task'},
      { header: "Duration", width: 160, dataIndex:'duration'},
      { header: "Assigned To", width: 160, dataIndex:'user'}
    ]);
    */
	
	properties['columns'] = headers;
	
	properties['loader'] = new Ext.tree.TreeLoader({
        dataUrl:'column-data2.json',
        uiProviders:{
            'col': Ext.ux.tree.ColumnNodeUI
        }
    })
	
	properties['root'] = new Ext.tree.AsyncTreeNode({
        text:'Tasks'
    });
	
	properties['listeners'] = {
			click: function(node, e) {
				alert(node.id);
			}
	};
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

	var component = new Ext.ux.tree.ColumnTree(properties);

	component.doLayout();
    
	if(container) {
		container.add(component);
		container.doLayout();
	}
}

function buildComponentUI_gridPanel(record) {	
	var container = Ext.getCmp(record.get('containerId'));

	var headerArray = record.get('columnModel');
	var headers = [];
	for(var i = 0; i < headerArray.length; i++) {
		var h = headerArray[i];		
		//headers[i] = { header: h[0], width: parseInt(h[1]), sortable: (h[2] == 'true'), resizable: (h[3] == 'true')};
		headers[i] = { header: h[0], width: parseInt(h[1]), sortable: h[2], resizable: h[3]};
	}
	
	/*
	var colModel = new Ext.grid.ColumnModel([
      { header: "Nom du circuit de validation", width: 160, sortable: true},
      { header: "Champ d'application", width: 250, sortable: true},
      { header: "Employees", width: 100, sortable: true, resizable: false}
    ]);
    */
	var colModel = new Ext.grid.ColumnModel(headers);
	
	var rowArray; // let search for this
	var sourceId = record.get('sourceId');
	sourceDataStore.each(function(sourceRecord){
		if(sourceRecord.get('id') === sourceId) {
			rowArray = sourceRecord.get('datarows');
		}		
	});
	
	// now we create a local store with rowArray to bind with the component.
	var fieldCols = new Array();
	for(var i = 0; i < (headerArray.length * 2); i=i+2) {
		fieldCols[i] = 'name';
		fieldCols[i+1] = 'col' + i;
	}
	var componentStore = new Ext.data.SimpleStore({
        fields: fieldCols
	});
	
	componentStore.loadData(rowArray);

	var properties = record.get('properties');
	properties['store'] = componentStore;
	properties['colModel'] = colModel;
	properties['stripeRows'] = true;	
	
	if(properties['paging-pageSize']) {
	var comboPageSize = new Ext.form.ComboBox({
		id: 'page-combo-size',
	    typeAhead: true,
	    triggerAction: 'all',
	    lazyRender:true,
	    mode: 'local',
	    name: 'pageSize',
	    width: 50,
	    editable: false,
	    store: new Ext.data.ArrayStore({
	        id: 0,
	        fields: [
	            'myId',
	            'displayText'
	        ],
	        data: [[10, '10'], [50, '50'], [100, '100'], [200, '200']]
	    }),
	    valueField: 'myId',
	    displayField: 'displayText'
	});
	
	comboPageSize.setValue(properties['paging-pageSize']);
	
	properties['bbar'] = new Ext.Toolbar({
		width: 500,
		height: 25,
		border: false,	
		items: [{
			cls: 'x-btn-text-icon',
			id: 'page-first',
			icon: 'image/page-first.gif',
			width: 16,
			text: ''
		},
		{
			cls: 'x-btn-text-icon',
			id: 'page-prev',
			icon: 'image/page-prev.gif',
			width: 16,
			text: ''
		},
		'Page:',
		{
			id: 'page-number',
			xtype: 'numberfield',
			width: 50,
			name: 'pageNumber',
			value: parseInt(properties['paging-pageNumber'])
		},
		'/ '+ properties['paging-fullPageNumber'] + ' de ' + properties['paging-fullListSize'] + ' résultat(s)',
		'-',
		comboPageSize,
		{
			id: 'page-fullPageNumber',
			xtype: 'hidden',
			name: 'fullPageNumber',
			value: properties['paging-fullPageNumber']
		},
		{
			cls: 'x-btn-text-icon',
			id: 'page-next',
			icon: 'image/page-next.gif',
			width: 16,
			text: ''
		},
		{
			cls: 'x-btn-text-icon',
			id: 'page-last',
			icon: 'image/page-last.gif',
			width: 16,
			text: ''
		},
		{
			cls: 'x-btn-text-icon',
			id: 'loc_help',
			icon: 'image/info16.png',
			text: 'Need help?'
		}]
		});
	}
	properties['viewConfig'] = { forceFit: true, enableRowBody:true, showPreview:true};
	
	properties['sm'] = new Ext.grid.RowSelectionModel({singleSelect:true});

	
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {			
			
			try {
				var subComponent = Ext.getCmp(componentProperties[index]);
				if(subComponent) {
				alert('T:' + index + ':' + componentProperties[index]);
					//alert(Ext.getCmp(componentProperties[index]).pageSize);
					properties[index] = subComponent;
				}
			}catch(err){}
			
			
		}		
	}
	
	var component = new Ext.grid.GridPanel(properties);
	
	component.doLayout();
    
	if(container) {
		container.add(component);
		container.doLayout();
	}
}

function buildComponentUI_editorgrid(record) {
	var container = Ext.getCmp(record.get('containerId'));
	
	var properties = record.get('properties');
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

	var component = new Ext.grid.EditorGridPanel(properties);

	component.doLayout();
    
	if(container) {
		container.add(component);
		container.doLayout();
	}
}

function buildComponentUI_button(record) {
	var container = Ext.getCmp(record.get('containerId'));

	var properties = record.get('properties');
	properties['id'] = record.get('id');

	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

	var component = new Ext.Button(properties);	
	if(container) {
		container.add(component);
		container.doLayout();
	}
}

function buildComponentUI_tabPanel(record) {
	var container = Ext.getCmp(record.get('containerId'));

	var properties = record.get('properties');
	properties['id'] = record.get('id');
	properties['defaults'] = {autoScroll:true};
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

	var component = new Ext.TabPanel(properties);		
	
	if(container) {
		container.add(component);
		container.doLayout();
	}
}

function buildComponentUI_tabPanel_addHtml(record) {
	var container = Ext.getCmp(record.get('containerId'));

	var properties = record.get('properties');
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

	container.add(properties).show();
}

function buildComponentUI_window(record) {	
	var container = Ext.getCmp(record.get('containerId'));
	var properties = record.get('properties');
	properties['id'] = record.get('id');

	var items = new Array();
    var itemIds = record.get('itemIds');
    for(var i = 0; i < itemIds.length; i++) {
	   var itemComponent = Ext.getCmp(itemIds[i]);
	   items[i] = itemComponent;
    }    
    properties['items'] = items;

	var buttons = new Array();
    var buttonIds = record.get('buttonIds');
    for(var i = 0; i < buttonIds.length; i++) {
	   var buttonComponent = Ext.getCmp(buttonIds[i]);
	   buttons[i] = buttonComponent;
    }    
    properties['buttons'] = buttons;
	
	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

	var component =  new Ext.Window(properties);       

      
    component.show();
    
	if(container) {		
		container.add(component);
		container.doLayout();
	}
}

function buildComponentUI_htmleditor(record) {	
	var container = Ext.getCmp(record.get('containerId'));
	var properties = record.get('properties');
	properties['id'] = record.get('id');

	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

	var component =  new Ext.form.HtmlEditor(properties);

	if(container) {		
		container.add(component);
		container.doLayout();
	}	
		
}

function buildComponentUI_textfield(record) {
	var container = Ext.getCmp(record.get('containerId'));
	var properties = record.get('properties');
	properties['id'] = record.get('id');

	var componentProperties = record.get('components');
	if(componentProperties) { 
		for(var index in componentProperties) {
			if( Ext.getCmp(componentProperties[index]) ) {
				properties[index] = Ext.getCmp(componentProperties[index]);
			}
		}		
	}

	var component =  new Ext.form.TextField(properties);

	if(container) {		
		container.add(component);
		container.doLayout();
	}
}


function buildComponentUI_message(record) {
			
	 Ext.MessageBox.show({
       title: record.get('properties')['msgTitle'],
       msg: record.get('properties')['msgBody'],
       buttons: Ext.MessageBox.OK,
       icon: Ext.MessageBox.WARNING								
       
       //fn: delDirectoryResult,
       //value: dir_values
   });

	
	return true;
}

/**
 * dynamicEventsDirectory
 */
var dynamicEventsDirectory = new Ext.util.MixedCollection();

function genericDynamicUICall(eventId) {
	var record = dynamicEventsDirectory.get(eventId);
	var node = dynamicEventsDirectory.get(eventId+ '_node');
	var e = dynamicEventsDirectory.get(eventId+ '_e'); // evennement click ou autre je pense
	var component = dynamicEventsDirectory.get(eventId+ '_component');
	var paramArgs = record.get('paramArgs');	
	var waitMessage = record.get('waitMessage');
	waitMessage = false; // désactivation au profit du Spinner sur requete AJAX
	
	if(record.get('beforeEventHandler')) {
		eval(record.get('beforeEventHandler') + "()");		
	}
		
	
	// seeking for new elements in a form to completed the request
	var formValues = '';
	var formId = record.get('formId');
	var htmlFormId;
	if(formId) {
		var formPanel = Ext.getCmp(formId);
		//formValues = formPanel.getForm().getValues(true);		
		htmlFormId = formPanel.formId;
	}	
		
	
	var request = record.get('paramRequest');
	var responseCache = record.get('responseCache');
	if(component && component.isXType('combo')) {
		request = request.replace(/{nodeid}/, component.getValue());
	} else {
		if(node) {
			request = request.replace(/{nodeid}/, node.id);
			request = request.replace(/{nodetext}/, node.text); // TODO il faudrait faire en url encode (à tester si nécessaire: peut etre qu'ajax implémente le mécanisme)
		}
	}
	if(formValues.length > 0) {
		//request = request + '&foo=foo&' + formValues;
		request = request;
	}
	
	logAlert(1, 'request: ' + request)

	if(waitMessage) {
		var waitMessageHeader = record.get('waitMessageHeader');
		if(! waitMessageHeader) {
			waitMessageHeader = 'Chargement en cours';
		}
		Ext.Msg.wait(waitMessageHeader, waitMessage);
	}	
	
	if(record.get('renderContainerId')) {
		if(formId) {			
			//var form = Ext.getDom(htmlFormId);
			//var params = Ext.Ajax.serializeForm(form);
			
			var useThisFormId;
			var useThisParams;
			var useThisUrl;
			var useThisMethod;
			if(Ext.isIE) {				
				useThisFormId = null;
				
				var params = '';
				
				var paramMap = Ext.getCmp(formId).getForm().getValues();
				for (var key in paramMap) {
					//alert(key + " : " + paramMap[key]+" : " +  unescape(encodeURIComponent( paramMap[key] )) );
					//alert(key + " : " + paramMap[key]+" : " +  escape( paramMap[key] ) );
					//alert(key + " : " + paramMap[key]);
					params = params + key + "=" + uiUrlEncoder( paramMap[key] ) + "&";
				}
				params = params + "foo=foo";
				
				useThisUrl = formPanel.url + '?' + params;
				useThisParams = {};
				useThisMethod = 'POST';
			} else  {
				useThisFormId = htmlFormId;
				useThisUrl = formPanel.url;
				useThisParams = {};				
				useThisMethod = 'POST';
			}
			
			Ext.Ajax.request({			
				autoAbort : true,
				url: useThisUrl,
				//form: useThisFormId,
				//form: Ext.getDom(useThisFormId),
				form: Ext.getCmp(formId).getForm().getEl(),
				method: useThisMethod,
				params: useThisParams,
				timeout: GUI_AJAX_TIMEOUT,
				loadMask: {msg: 'Merci de patienter ...'},
				//params: {},
				//form: 'panelForm',
				//CHOIX-1 form: htmlFormId,
				headers:{'Content-Type' : 'application/x-www-form-urlencoded'},
				success: function(responseObject, opts) {	
					// this response can be XML string or a simple string.
					// if the response contains <dataset> we will appreciate a XML string.
					var xmlStr = '';
					if (responseObject.responseXML.xml) {
						xmlStr = responseObject.responseXML.xml; // IE
					} else {				
						xmlStr = (new XMLSerializer()).serializeToString(responseObject.responseXML); // Mozilla
					}
					
					if(xmlStr.match('<dataset>')) {						
						var doc;						
						//load XML string code for IE
						if (window.ActiveXObject) {
		 					doc = new ActiveXObject("Microsoft.XMLDOM");
							doc.async="false";
							doc.loadXML(xmlStr);
						} else {
							//load XML string code for Mozilla, Firefox, Opera, etc.
							var parser = new DOMParser();
							doc = parser.parseFromString(xmlStr,"text/xml");
						}
	
						var xmlObject = doc.documentElement;
						var memoryProxy = new Ext.data.MemoryProxy(xmlObject);
						initDynamicUI(record.get('renderContainerId'), memoryProxy, record.get('replaceComponent') == 'true', record.get('cleanContainer') == 'true' );
					} else {
						initDynamicUI(record.get('renderContainerId'), request, record.get('replaceComponent') == 'true', record.get('cleanContainer') == 'true' );
					}
				},
				failure: function(response, opts) {
					Ext.Msg.alert('Connection error', 'Server or network is not responding properly!: ' + response.status);
				}
			});

		} else {
			initDynamicUI(record.get('renderContainerId'), request,    record.get('replaceComponent') == 'true', record.get('cleanContainer') == 'true' );
		}
	}
	if(record.get('linkToUrl')) {
		Ext.Ajax.request({
			url: request,
			method: 'POST',
			params: {},
			timeout: GUI_AJAX_TIMEOUT,
			loadMask: {msg: 'Merci de patienter ...'},
			//form: formPanel.getForm(),
			success: function(responseObject) {
				window.location.href = record.get('linkToUrl');
			},
			failure: function() {
				Ext.Msg.alert('Connection error', 'Server or network is not responding properly!');
			}
		});
				
	}
	
	if(waitMessage) {
		Ext.Msg.hide();
	}
}


/**
 * 
 * @param record
 * @return
 */
function bindEventUI(record) {
	if(record.get('type') != 'firenow') {
		var component = Ext.getCmp(record.get('componentId'));
		component.on(record.get('type'), function(node, e) {
			//register the arguments for this event method
			dynamicEventsDirectory.add(record.get('id'), record);
			dynamicEventsDirectory.add(record.get('id')+'_node', node);
			dynamicEventsDirectory.add(record.get('id')+'_e', e);
			dynamicEventsDirectory.add(record.get('id')+'_component', component);
			
			eval(record.get('handler')+'("' + record.get('id') + '")');		
		});	
	
		logAlert(2, 'binded event: ' + record.get('type') + ' on component: ' + record.get('componentId') + ' with: ' + record.get('id'));
	} else {
		// firenow
		//register the arguments for this event method
		dynamicEventsDirectory.add(record.get('id'), record);
		eval(record.get('handler')+'("' + record.get('id') + '")');
	}
}

function executeHandlerUI(functionName) {
	//eval(functionName + "()");
	//alert('eval');
	initDynamicUI('dynamic-panel-container', 'gui.xml');
}

function testFormValues() {
	var form = Ext.getCmp('my-add-selected-form-panel');
	if(form && form.getForm()) {
		alert(form.getForm().getValues(true));
	}
}

function totoCall(arg) {
	Ext.Msg.alert('totoCall', arg);
}


/**
 * Make an evaluation of the method in parameter
 * @return
 */
function externalHandler(eventId) {
	var record = dynamicEventsDirectory.get(eventId);
	var functionName = record.get('external');
	eval(functionName + "()");
}

/**
 * Well, maybe sometime you would like to execute... nothing?
 * @return
 */
function emptyHandler() {
	// nothing to do here!
}

function externalTree(containerId) {

	 //Ext.QuickTips.init();


	    // Create the "SampleTreePanel" pre-configured class

	    SampleTreePanel = Ext.extend(Ext.tree.TreePanel, {
	        //title: 'Sample Tree Panel',
	        width: 200,
	        height: 400,
	        loader: new Ext.tree.TreeLoader(),
	        rootVisible: false,
	        border: true,

	        initComponent: function(){
	            Ext.apply(this, {

	                root: new Ext.tree.AsyncTreeNode({
	                    children: [{
	                    	id: '1',
	                        text: 'First',
	                        expanded: true,
	                        children: [{
	                        	id: '11',
	                            text: 'one',
	                            leaf: true
	                        }, {
	                        	id: '12',
	                            text: 'two',
	                            leaf: true
	                        }]
	                    }, {
	                    	id: '2',
	                        text: 'Second',
	                        expanded: true,
	                        children: [{
	                        	id: '21',
	                            text: 'one',
	                            leaf: true
	                        }]
	                    }]
	                })
	            })

	            SampleTreePanel.superclass.initComponent.apply(this, arguments);
	        }
	    });

	    // Instantiate the tree panel, then attach an event listener..

	    var component = new SampleTreePanel();

	    component.on('click', function(node, e){
	        alert(node.id);
	    }, this);

	    var container = Ext.getCmp(containerId);
	    container.add(component);
		container.doLayout();	
}

function recursiveTreeData(treeArray, node) {
	  var child = new Array(); // it is a hashmap
	  child['id'] = Ext.DomQuery.selectValue('id', node);
	  child['text'] = Ext.DomQuery.selectValue('text', node);
	  if(Ext.DomQuery.selectValue('expanded', node)) {
		  child['expanded'] = Ext.DomQuery.selectValue('expanded', node) == 'true';		  
	  }
	  if(Ext.DomQuery.selectValue('checked', node)) {
		  child['checked'] = Ext.DomQuery.selectValue('checked', node) == 'true';
	  }
	  if(Ext.DomQuery.selectValue('disabled', node)) {
		  child['disabled'] = Ext.DomQuery.selectValue('disabled', node) == 'true';
	  }
	  if(Ext.DomQuery.selectValue('iconCls', node)) {
		  child['iconCls'] = Ext.DomQuery.selectValue('iconCls', node);
	  }
	  if(Ext.DomQuery.selectValue('qtip', node)) {
		  child['qtip'] = Ext.DomQuery.selectValue('qtip', node);
	  }
	  if(Ext.DomQuery.selectValue('qtipCfg', node)) {
		  child['qtipCfg'] = Ext.DomQuery.selectValue('qtipCfg', node);
	  }
	  if(Ext.DomQuery.selectValue('isTarget', node)) {
		  child['isTarget'] = Ext.DomQuery.selectValue('isTarget', node) == 'true';
	  }
	  	  
	  var beans = Ext.DomQuery.select(' /bean ', node);
	  if(beans.length > 0) {
		  child['children'] = new Array();
	  } else {
		  child['leaf'] = true;
	  }
	  for(var i = 0; i < beans.length; i++) {
		  recursiveTreeData(child['children'], beans[i]);		  
	  }
	  treeArray[treeArray.length] = child;
}

function logAlert(level, message) {
	if(modeDebug >= level) {
		alert(message);
	}
}

function pagingFirst() {
	var pageNumber = Ext.getCmp('page-number');
	pageNumber.setValue(1);
}
function pagingNext() {
	var pageNumber = Ext.getCmp('page-number');
	var fullPageNumber = Ext.getCmp('page-fullPageNumber');
	if(parseInt(pageNumber.getValue()) == parseInt(fullPageNumber.getValue())) {
		return false;
	}
	pageNumber.setValue(parseInt(pageNumber.getValue()) + 1);
}
function pagingPrev() {
	var pageNumber = Ext.getCmp('page-number');
	if(parseInt(pageNumber.getValue()) == 1) {
		return false;
	}
	pageNumber.setValue(parseInt(pageNumber.getValue()) - 1);
}
function pagingLast() {
	var fullPageNumber = Ext.getCmp('page-fullPageNumber');
	var pageNumber = Ext.getCmp('page-number');
	pageNumber.setValue(fullPageNumber.getValue());
}

var msg = function(title, msg){
    Ext.Msg.show({
        title: title,
        msg: msg,
        minWidth: 200,
        modal: true,
        icon: Ext.Msg.INFO,
        buttons: Ext.Msg.OK
    });
};