//THIS FILE CONTAINS ALL THE COMPONENTS THAT WEB INTERFACE REQUIRE TO 
// - EDIT THE NEWS

//CLASS NEWS EDITOR

function MainPageEditorEditor(languages, renderTo){
	
	//i18n texts
	var mainPageEditorEditorTitleText = getLanguageForElement("mainPageEditorEditorTitleText", selectedLangId);
	var saveButtonText = getLanguageForElement("saveButtonText", selectedLangId);
	var mainPageEditorEditorImageText = getLanguageForElement("mainPageEditorEditorImageText", selectedLangId);

	this.selectedLanguage = null;

	/**
	 * QuickLinks
	 */
	this.quickLinkChooser = new GmSoft.components.QuickLinkChooser({
		comboID: 'edit_menu_itemsCategoryCombo',
		categoryURL: 'XmlGMServlet?action_type=quick_link_actions&action=get_quick_links_names',
		allowedQuickLinks: 3
	});
	
	this.mainPageImageCombo = new getComboSelector(	'MainPageImageID',
																	mainPageEditorEditorImageText,
																	'file',
																	'url',																	
																	'XmlGMServlet?action_type=get_info&action=get_main_page_images',
																	function(combo, value, index){
																		//first get the id and change image
																		var element = Ext.getDom(combo.scope.imageID); 
																		var elementValue =  unescape(value.get('url'));
																		//replace the path separator if path separator is \\ in firefox does not work
																		elementValue = replaceAll(elementValue, "\\", "/");
																		element.src = elementValue;
																	},this);	

	this.imageID = 'mainPageSelectedImage'; 

	this.image = new Ext.BoxComponent({
		xtype: 'box',
		width: 250,
		heigh: 100,
		autoEl: {
			tag: 'img',
			align: 'middle',
			id: this.imageID,
			src: "./img/mainPageImages/main.jpg"
		}
	});	
	
	
	this.displayImagePanel = new Ext.Panel({
	    layout:'form',
		border:false,
		bodyStyle:'padding:10px 0px 20px 0px',	
        width: 250,
        heigh: 100,
	    items: [this.image]
	});
	
	
	//init the language Fields
	this.itemFieldSetPanel = new Ext.Panel({
	        layout: 'form',
			bodyStyle: 'padding:20px 0px 0px 0px',				
	        border: false,
			width : 500 
	});	
	var i = 0;	
	this.langMainPageFieldSets = new Array(languages.length);	
	for(i=0 ; i<languages.length ; i++){
		//create language field
		var itemFields = new FieldSetWithFields(languages[i].id,languages[i].description,['name','description'],['textfield','textarea']);
		//all language field sets must be inside the array	
		this.langMainPageFieldSets[i]=itemFields;
		//add the field to the panel
		this.itemFieldSetPanel.add(itemFields.getFieldSet());		
	}

	//buttons of the panel
	//Save button
	this.edit_MainPageButtonSave = new Ext.Button(
		{
			text: saveButtonText,
			scope: this,
			minWidth: 100,			
			xtype: 'button',
			handler: function(This,e){
				//check if required field have value		
				//check if required field have value
				var image = This.scope.mainPageImageCombo.getCombo().getValue();
				var quickLinks = This.scope.quickLinkChooser.getXMLSelectedQuickLinksID();
				var langContent = getLanguageContentFromFieldSetArray(This.scope.langMainPageFieldSets);
				
				ajaxUpdateMainPage(image, quickLinks, langContent, this);	
	        }				
		}
	);
	
	this.buttonsPanel = new Ext.form.FormPanel({
			xtype:'form',	
			id: 'MainPanelSave',
	        width: 540,	
			autoHeight : true,
			bodyBorder: false,
			border: false,
			bodyStyle:'padding:0px 0px 0px 0px',	
			items:[this.itemFieldSetPanel],	
			buttons: [this.edit_MainPageButtonSave]		
	});

	/**
	 * MAIN PANEL THAT CONTAINS THE FORM TO CREATE AND DISPLAY THE NEWS AND THE TREE
	 */
	this.border = new Ext.Panel({
	    title: mainPageEditorEditorTitleText,
		id: 'Edit_LanguageMenu_ID',	
	    layout:'form',
		border:'false',
		bodyStyle:'padding:20px 20px 20px 20px; text-align: left;',	
	    width: 540,
	    items: [this.mainPageImageCombo.getCombo(), 
				this.displayImagePanel, 
				this.quickLinkChooser,				
				this.buttonsPanel]
	});
		
	
	this.border.render(renderTo);
	
	ajaxRequestMainPageInfo(this);


}

//Create new language
function ajaxUpdateMainPage(image, quickLinks, langContent, thisScope){
	ajaxGenericCall('XmlGMServlet?action_type=main_page_actions&action=update_main_page',					
					function(conn, response, options){
						var failure = lookForXMLFailureResponse(conn.responseXML);
						if (failure != null) { //in case there was an error show it
							showErrorDialog('ERROR!!', failure);
						}else {
							var scope = response.scope;
							var result = getResponseText(conn.responseXML);
							showInfoDialog('INFO', result);
							//update the navTree
						}
					},
					thisScope,
					{
						lang: selectedLangId,
						image: image,
						content: langContent,
						quick_links: quickLinks
					}
	);
}

//Create new language
function ajaxRequestMainPageInfo(thisScope){
	ajaxGenericCall('XmlGMServlet?action_type=main_page_actions&action=get_main_page_info',
					function(conn, response, options){
						var failure = lookForXMLFailureResponse(conn.responseXML);
						if (failure != null) { //in case there was an error show it
							showErrorDialog('ERROR!!', failure);
						}else {
							var scope = response.scope;

							//map elements to the class
							mapMainPageToForm(conn.responseXML,scope);
						}
					},
					thisScope,
					{
						lang: selectedLangId
					}
	);
}

function mapMainPageToForm(doc,scope){
	var image = findAttributValueInNode(doc.getElementsByTagName('image')[0],'src');
	if (image != '') {
		(Ext.getDom(scope.imageID)).src = image;
		scope.mainPageImageCombo.setComboValue(image);
	}
	
	//update the category
	var quickLinkNodes = doc.getElementsByTagName("quickLinks")[0];
	if (quickLinkNodes != null) {
		var nodeChilds = quickLinkNodes.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.quickLinkChooser.setQuickLinkRecords(idArray, nameArray);
	}
	
	//get the data
	var xmlData = doc.getElementsByTagName("lang_fields");
	//get the fields
	var fields = scope.langMainPageFieldSets;
	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');
				}
			}
		}
	}	
		
}