/**
 * @author albert.sole
 */
function genericCateogryItemEditor(config){	
		
	var saveButtonText = getLanguageForElement("saveButtonText", selectedLangId);
	var deleteButtonText = getLanguageForElement("deleteButtonText", selectedLangId);		
	var updateButtonText = getLanguageForElement("updateButtonText", selectedLangId);		
	var editItemsLabelText = getLanguageForElement("editItemsLabelText", selectedLangId);
	var editCategoriesLabelText = getLanguageForElement("editCategoriesLabelText", selectedLangId);
		
	this.config = config;
		
	this.selectedItem = null;
	this.selectedCategory = null;
		
	/**
	 * navigation category item tree
	 */
	this.showNewsTree = new createNavMenuXmlTree(
								config.navigationTreeConfig.treeID, 
								config.navigationTreeConfig.treeRequestDataURL,
								this.config.navigationTreeConfig.treeRootNode,
								"category",
								"item",
								this.config.navigationTreeConfig.treeDoubleClickCategoryFunction,
								this.config.navigationTreeConfig.treeDoubleClickItemFunction,
								this	//scope to update the gui fields
							);        				
		
	/*************************************************************
	 ****************** COMPONENTS ITEM PANEL*********************
	 *************************************************************/
	//image and category fields selectors are mandatory
	//combo boxes for selecting the icons
	this.selectMenuItemsIcon = new GmSoft.components.ImageSelector({
	    iconsURL: this.config.globalParameters.iconsURL,
		comboID: 'edit_menu_itemsImageCombo',
		defaultImage: './img/icons/blank-48x48.gif'
	});
																
	this.edit_menu_itemsCategoryChooser = new GmSoft.components.CategoryEditor({
		comboID: 'edit_menu_itemsCategoryCombo',
		categoryURL: this.config.globalParameters.categoriesURL,
		allowedCategories: 1
	});																	
	
	//init the language Fields
	this.itemFieldSetPanel = new Ext.Panel({
	        layout: 'form',
			bodyStyle: 'padding:20px 0px 0px 0px',				
	        border: false
	});	
	var i = 0;	
	this.langMenuItemFieldSets = new Array(this.config.globalParameters.languages.length);	
	for(i=0 ; i<this.config.globalParameters.languages.length ; i++){
		//create language field
		var itemFields;
		if (this.config.globalParameters.addDestination == true) {
			itemFields = new FieldSetWithFields(this.config.globalParameters.languages[i].id, this.config.globalParameters.languages[i].description, ['name', 'description', 'destination'], ['textfield', 'textarea', 'field_destination_combo']);
		}else{
			itemFields = new FieldSetWithFields(this.config.globalParameters.languages[i].id, this.config.globalParameters.languages[i].description, ['name', 'description'], ['textfield', 'textarea']);
		}
		//all language field sets must be inside the array	
		this.langMenuItemFieldSets[i]=itemFields;
		//add the field to the panel
		this.itemFieldSetPanel.add(itemFields.getFieldSet());		
	}
	
	/**
	 * Panel to edit the menu items
	 */
	
	//Add the buttons
	//save button
	this.edit_menu_itemsButtonSave = new Ext.Button(
		{
			text: saveButtonText,
			scope: this,
			minWidth: 100,			
			xtype: 'button',
			handler: function(This,e){
				//check if required field have value
				var image = This.scope.selectMenuItemsIcon.getCombo().getValue();
				var content = getLanguageContentFromFieldSetArray(This.scope.langMenuItemFieldSets);
				var category = This.scope.edit_menu_itemsCategoryChooser.getXMLSelectedCategoriesID();
				
				this.config.itemEditor.send(image, category, content, this.config.itemEditor.specificComponents, This.scope);
	        }				
		}
	);
	
	//update button
	this.edit_menu_itemsButtonUpdate = new Ext.Button(
		{
			text: updateButtonText,
			xtype: 'button',
			minWidth: 100,		
			disabled: true,	
	        scope: this,			
	        handler: function(This,e){
				//check if required field have value
				var id = This.scope.selectedItem;
				var category = This.scope.edit_menu_itemsCategoryChooser.getXMLSelectedCategoriesID();
				
				if (id != null) {
					//check if required field have value
					var image = This.scope.selectMenuItemsIcon.getCombo().getValue();
					var content = getLanguageContentFromFieldSetArray(This.scope.langMenuItemFieldSets);
									
					this.config.itemEditor.update(id, image, category, content, this.config.itemEditor.specificComponents, This.scope);
				}else{
					showErrorDialog('Error!!', 'Select a category first.');
				}
	        }			
		}		
	);	

	//delete button
	this.edit_menu_itemsButtonDelete = new Ext.Button({
			text: deleteButtonText,
			xtype: 'button',
			disabled: true,
			minWidth: 100,
	        scope: this,
	        handler: function(This, e){
					if(This.scope.selectedItem != null){
						this.config.itemEditor.remove(This.scope.selectedItem, this.config.itemEditor.specificComponents, This.scope);
					}else{
						showInfoDialog('info', 'no item selected');
					}
	        }	
	});
	
	//Form to edit the nav items
	this.edit_menu_itemsForm =  new Ext.form.FormPanel(
		{
            layout:'form',
            title: editItemsLabelText,
			id: 'edit_menu_items',
			bodyStyle:'padding:20px 20px 0',
			labelWidth: 120,
        	autoHeight: true,
			buttons: [this.edit_menu_itemsButtonSave,this.edit_menu_itemsButtonUpdate,this.edit_menu_itemsButtonDelete]
        }				
	);	
	//add the components to the panel
	this.edit_menu_itemsForm.add(this.selectMenuItemsIcon);
	if(this.config.itemEditor.displayCategory != false){
		this.edit_menu_itemsForm.add(this.edit_menu_itemsCategoryChooser);		
	}
			
	//add specific components	
	var components = this.config.itemEditor.specificComponents;
	for (var i in components){
		this.edit_menu_itemsForm.add(components[i]);	
	}	
	
	//add the fieldsets
	this.edit_menu_itemsForm.add(
		{
	        layout: 'form',
			width: 450,
			bodyStyle: 'padding:20px 0px 0px 0px',				
	        border: false,
	        items: [this.itemFieldSetPanel]										
		}
	);
	
	//functions to enable and disable buttons
	this.enableUpdateDeleteItemButtons = function(){
		this.edit_menu_itemsButtonUpdate.enable();
		this.edit_menu_itemsButtonDelete.enable();	
	}
	this.disableUpdateDeleteItemButtons = function(){
		this.edit_menu_itemsButtonUpdate.disable();
		this.edit_menu_itemsButtonDelete.disable();
	}	
	/*************************************************************
	 ********************* END ITEM PANEL*************************
	 *************************************************************/

	/*************************************************************
	 ****************** COMPONENTS CATEGORY PANEL*********************
	 *************************************************************/
	//combo boxes for selecting the icons
	this.selectMenuCategoryIcon = new GmSoft.components.ImageSelector({
	    iconsURL: this.config.globalParameters.iconsURL,
		comboID: 'edit_menu_CategoryImageCombo',
		defaultImage: this.config.globalParameters.defaultIconImage
	});	
	
	
	//create language fields
	//init the language Fields
	this.categoryFieldSetPanel = new Ext.Panel({
	        layout: 'form',
			bodyStyle: 'padding:20px 0px 0px 0px',				
	        border: false
	});	
	var i = 0;	
	this.langMenuCategoryFieldSets = new Array(this.config.globalParameters.languages.length);	
	for(i=0 ; i<this.config.globalParameters.languages.length ; i++){
		//create language field
		var itemFields = new FieldSetWithFields(this.config.globalParameters.languages[i].id,this.config.globalParameters.languages[i].description,['name','description'],['textfield','textarea']);
		//all language field sets must be inside the array	
		this.langMenuCategoryFieldSets[i]=itemFields;
		//add the field to the panel
		this.categoryFieldSetPanel.add(itemFields.getFieldSet());		
	}	
								
	/**
	 * Panel to edit the categories
	 */ 
	//Add the buttons
	//save button
	this.edit_menu_categoriesButtonSave =  new Ext.Button(
		{
			text: saveButtonText,
			scope: this,
			minWidth: 100,
			handler: function(This,e){
				//check if required field have value
				var content = getLanguageContentFromFieldSetArray(This.scope.langMenuCategoryFieldSets);				
				var image = This.scope.selectMenuCategoryIcon.getCombo().getValue();
				//send the item
				this.config.categoryEditor.send(image, content, this.config.categoryEditor.specificComponents, This.scope);						
	        }					
		}
	);	

	//update button
	this.edit_menu_categoriesButtonUpdate =  new Ext.Button({
			text: updateButtonText,
			minWidth: 100,
			disabled: true,
	        scope: this,
	        handler: function(This,e){
				//check if required field have value
				var id = This.scope.selectedCategory;
				if (id != null) {
					var content = getLanguageContentFromFieldSetArray(This.scope.langMenuCategoryFieldSets);
					var image = This.scope.selectMenuCategoryIcon.getCombo().getValue();
					//update the item
					this.config.categoryEditor.update(id, image, content, this.config.categoryEditor.specificComponents, This.scope);											
				}else{
					showErrorDialog('Error!!', 'Select a category first.');
				}
	        }
	});
	//this.edit_menu_categoriesForm.addButton(this.edit_menu_categoriesButtonUpdate);
	//disable button until element selected
	
	//delete button
	this.edit_menu_categoriesButtonDelete = new Ext.Button({
			text: deleteButtonText,	
			minWidth: 100,		
			disabled: true,
	        scope: this,
	        handler: function(This, e){
					if(this.selectedCategory != null){
						this.config.categoryEditor.remove(this.selectedCategory, this.config.categoryEditor.specificComponents, this);
					}else{
						showInfoDialog('info', 'no item selected');
					}
	        }		
	});
	//this.edit_menu_categoriesForm.addButton(this.edit_menu_categoriesButtonDelete);
	
	//form to edit the categories
	this.edit_menu_categoriesForm = new Ext.form.FormPanel(
		{
            layout:'form',
            title: editCategoriesLabelText,
			id: 'edit_menu_categories',
			bodyStyle:'padding:20px 20px 0',			
			labelWidth: 120,		
        	autoHeight: true,
			buttons:[this.edit_menu_categoriesButtonSave,this.edit_menu_categoriesButtonUpdate,this.edit_menu_categoriesButtonDelete]		
        }		
	);
	
	//add the components to the panel
	this.edit_menu_categoriesForm.add(this.selectMenuCategoryIcon);
	//add specific components
	var components = this.config.categoryEditor.specificComponents;
	for (var i in components){
		this.edit_menu_categoriesForm.add(components[i]);	
	}	
	//add the fieldsets
	this.edit_menu_categoriesForm.add(
		{
		    layout: 'form',
			bodyStyle: 'padding:20px 0px 0px 0px',				
		    border: false,
		    items: [this.categoryFieldSetPanel]					
		}
	);
	
	
	this.enableUpdateDeleteCategoryButtons = function(){
		this.edit_menu_categoriesButtonUpdate.enable();
		this.edit_menu_categoriesButtonDelete.enable();	
	}

	this.disableUpdateDeleteCategoryButtons = function(){
		this.edit_menu_categoriesButtonUpdate.disable();
		this.edit_menu_categoriesButtonDelete.disable();
	}
	/*************************************************************
	 ****************** END CATEGORY PANEL*********************
	 *************************************************************/	
	
	/**
	 * Define the tab panel
	 */	
	this.tabPanel = new Ext.TabPanel(
		{
			xtype: 'tabpanel',
			id: 'updateNavMenuGUI_tabPanel',		
			//autoHeight: true,				
			width:490,
			deferredRender: false, //forces the tabpanel to render every time is accessed
			plain:true,
			defaults:{autoScroll: true},
			items:[this.edit_menu_itemsForm, this.edit_menu_categoriesForm]
	    }		
	);
	
	/**
	 * Main panel
	 */
	this.border = new Ext.Panel({
	    title: this.config.globalParameters.formTitle,
		id: 'Edit Navigation MenuID',	
	    layout:'column',
		border:'false',
		bodyStyle: 'padding: 20px 10px 20px 10px; text-align: left;',
	    width: 500,
	    items: [{
			xtype:'form',	
			id: 'navMenuTreePanel',
	        width: 500,	
			autoHeight : true,
			bodyBorder: false,
			border: false,		
			bodyStyle:'padding:0px 0px 20px 0px',
			items: [this.showNewsTree.getTree()]		
	    },
		this.tabPanel]
	});
	
	this.border.render(this.config.globalParameters.renderTo);
	
	//load the tree
	this.showNewsTree.loadTree();
	
	this.tabPanel.activate("edit_menu_items");  //if we don't select this way tab panel does not render well in ie6

}

/**
 * Function to show data to the menu items form 
 * @param {Object} d: XML document containing the following attributes
	<menu_item>
	    <image src="./img/icons/delicious-48x48.gif"/>
	    <destination>
	        ./staticHTML/ex1.html
	    </destination>
	    <lang_fields id="1">
	        <header>
	            link from category one
	        </header>
	        <content>
	            this is the frist link from category one
	        </content>
	    </lang_fields>
	    <lang_fields id="2">
	        <header>
	            link de la categoria 1
	        </header>
	        <content>
	            este es el primer link de la categoria uno
	        </content>
	    </lang_fields>
	</menu_item>
 */
function mapItemToMenuItemForm(doc,scope){
	//read and load image icon
	var image=doc.getElementsByTagName("image")[0].attributes[0].nodeValue;
	if(image != '')
		scope.selectMenuItemsIcon.selectImage(image);
	else{
		scope.selectMenuItemsIcon.selectImage(scope.config.globalParameters.defaultIconImage);
	}

	//MAP SPECIFIC COMPONENTS OF THE PANEL
	scope.config.itemEditor.updateComponentsFromXML(doc,scope.config.itemEditor.specificComponents);

	//update the category
	var categoryNodes = doc.getElementsByTagName("categories")[0];
	if (categoryNodes != null) {
		var nodeChilds = categoryNodes.childNodes;
		var i = 0;
		var idArray = new Array(nodeChilds.length);
		var nameArray = new Array(nodeChilds.length);
		for (i = 0; i < nodeChilds.length; i++) {
			idArray[i] = findDirectTextNodeInsideTagValue(nodeChilds[i], 'id');
			nameArray[i] = findDirectTextNodeInsideTagValue(nodeChilds[i], 'name');
		}
		scope.edit_menu_itemsCategoryChooser.setCategoryRecords(idArray, nameArray);
	}
	
	//get the data
	var xmlData = doc.getElementsByTagName("lang_fields");
	//get the fields
	var fields = scope.langMenuItemFieldSets;
	var i = 0;
	var j = 0;
	for( i = 0 ; i<fields.length ; i++ ){
		//get the languageId of the fieldset
		var langId = fields[i].getLanguageID();
		//var elem = doc.getElementById(id); this does not work see: http://www.webmasterworld.com/javascript/3545816.htm
		//look for the correct element
		for(j = 0 ; j<xmlData.length ; j++){
			var node = xmlData[j]; 
			var attr = node.attributes[0].nodeValue;
			if(attr==langId){
				fields[i].setXMLFieldValues(node);
				if(langId == selectedLangId){
					fields[i].fieldSet.expand('true');
				}else{
					fields[i].fieldSet.collapse('true');
				}
			}
		}
	}
}

/**
 * Function to show data to the edit categories form 
 * @param {Object} d: XML document containing the following attributes
 *	<image src="./img/icons/Magnolia-48x48.gif"/>
 *	<name>
 *		la nova web va de puta mare
 *	</name>
 *	<description>
 *		bla bla bla
 *	</content>
 *	<id>2</id>
 */
function mapCatgoryToCategoryForm(doc,scope){
	//read and load image icon
	//var image=doc.getElementsByTagName("image")[0].attributes[0].nodeValue;
	var image = findAttributValueInNode(doc.getElementsByTagName('image')[0], 'src');
	if (image != '') {
		scope.selectMenuCategoryIcon.selectImage(image);
	}else{
		scope.selectMenuCategoryIcon.selectImage(scope.config.globalParameters.defaultIconImage);		
	}
	
	//MAP SPECIFIC COMPONENTS OF THE PANEL
	scope.config.categoryEditor.updateComponentsFromXML(doc,scope.config.categoryEditor.specificComponents);
	
	//get the data
	var xmlData = doc.getElementsByTagName("lang_fields");
	//get the fields
	var fields = scope.langMenuCategoryFieldSets;
	var i = 0;
	var j = 0;
	for( i = 0 ; i<fields.length ; i++ ){
		//get the languageId of the fieldset
		var langId = fields[i].getLanguageID();
		//var elem = doc.getElementById(id); this does not work see: http://www.webmasterworld.com/javascript/3545816.htm
		//look for the correct element
		for(j = 0 ; j<xmlData.length ; j++){
			var node = xmlData[j]; 
			var attr = node.attributes[0].nodeValue;
			if(attr==langId){
				fields[i].setXMLFieldValues(node);
				if(langId == selectedLangId){
					fields[i].fieldSet.expand('true');
				}else{
					fields[i].fieldSet.collapse('true');
				}
			}
		}
	}	
}