/**
 * COMPONENT TO NAVIGATE AMONG ITEMS, LIKE BACK AND FORTH navigation menu
 */		 
// DeskIcon constructor
GmSoft.components.ElementNavigator = function(config, rootElement) {
	
	 var elementNavigatorAllProductsTitleText = getLanguageForElement("elementNavigatorAllProductsTitleText", selectedLangId);

	this.config = config;

	this.ElementStore = new Ext.data.Store({}); 

	//add the root element
	this.ElementStore.add(rootElement);
													
	this.pushElement = function(element){
		this.ElementStore.add(element);
		var element2 = Ext.getDom('ElementNavigatorContainer');
		//element.innerHTML = '>> new Elment';
		generatePahtSequence(element2, this.ElementStore, this.config.scopeID, 'element_navigator_panel');
	};			
	
	this.render = function(){
		var element = Ext.getDom('ElementNavigatorContainer');
		generatePahtSequence(element, this.ElementStore, this.config.scopeID, 'element_navigator_panel');		
	};
 
    // Create a config object that will be passed to the Panel constructor.
    // The use of Ext.apply preserves the properties passed in the config object
    this.initialConfig = Ext.apply(config, {
		id: 'element_navigator_panel',
		scope: this,
        border: false,
        layout: 'form',	
		bodyStyle:'padding:10px 10px 10px 10px',
        items: [{
			xtype: 'box',
			autoEl: {
				tag: 'div',
				id: 'ElementNavigatorContainer',
				align: 'left',
				//html: '<span class=\'x-panel-header\' >root</span>'
				html: '<span onMouseOver=\'this.style.cursor="pointer";\' class=\'element_navigator_item\'>' + elementNavigatorAllProductsTitleText + '</span>'
			}
		}]
    });
 
    // Create a Panel instance and bind it to this DeskIcon instance
    this.panel = new Ext.Panel(this.initialConfig);
}; 
// The DeskIcon prototype defines all the methods shared by the DeskIcon instances
GmSoft.components.ElementNavigator.prototype = {
    myApplicationSpecificFunction: function(p1, p2, p3) {
        // Perform application-specific processing
    },
 
    // Make this class usable by a Container, so that we can add and remove it.
    // Create delegates in the scope of our contained Panel which reference Panel's methods
    render: Ext.Panel.prototype.render.createDelegate(this.panel),
    destroy: Ext.Panel.prototype.destroy.createDelegate(this.panel),
	fireEvent: Ext.Panel.prototype.destroy.createDelegate(this.panel)
};

function generatePahtSequence(rootElem, store, componentID, elementNavigatorPanelID){	
	var resultString = "";
	var elements = store.getCount();
	var i=0;
	removeAllNodeChilds(rootElem);
	
	var record = store.getAt(0);
	var tag;
	if(Ext.isIE){
		tag = document.createElement('<span onMouseOver=\'this.style.cursor="pointer";\' onclick=onItemClick(' + record.get('id') + ',\'' + componentID +'\',\'' +  elementNavigatorPanelID +'\'' + ')>');
		tag.appendChild(document.createTextNode(record.get('header'))); 
		//tag.className = 'x-panel-header'; //for explorer
		tag.className = 'element_navigator_item'; //for explorer
		rootElem.appendChild(tag);		
	}else{
		var tag = document.createElement('span');
		tag.appendChild(document.createTextNode(record.get('header')));
		tag.setAttribute('onclick','onItemClick(' + record.get('id') + ',\'' + componentID +'\',\'' +  elementNavigatorPanelID +'\'' + ')');
		//tag.setAttribute('class', 'x-panel-header'); 
		tag.setAttribute('class', 'element_navigator_item');
		tag.setAttribute('onmouseover', 'this.style.cursor=\'pointer\';'); //for firefox
		rootElem.appendChild(tag);		
	}
	
	for( i=1 ; i < elements ; i++ ){
		record = store.getAt(i);
		
		if (Ext.isIE) {
			//create a separator
			tag = document.createElement('span');
			tag.appendChild(document.createTextNode(' >> '));
			//tag.className = 'x-panel-header'; //for explorer
			tag.className = 'element_navigator_item'; //for explorer
			rootElem.appendChild(tag);
			
			tag = document.createElement('<span onMouseOver=\'this.style.cursor="pointer";\' onclick=onItemClick(' + record.get('id') + ',\'' + componentID +'\',\'' +  elementNavigatorPanelID +'\'' + ')>');
			tag.appendChild(document.createTextNode(record.get('header')));
			//tag.className = 'x-panel-header'; //for explorer
			tag.className = 'element_navigator_item'; //for explorer
			rootElem.appendChild(tag);
		}else{
			//create a separator
			tag = document.createElement('span');
			tag.appendChild(document.createTextNode(' >> '));
			//tag.setAttribute('class', 'x-panel-header'); //for firefox
			tag.setAttribute('class', 'element_navigator_item'); //for firefox
			rootElem.appendChild(tag);
			
			tag = document.createElement('span');
			tag.appendChild(document.createTextNode(record.get('header')));
			tag.setAttribute('onclick', 'onItemClick(' + record.get('id') + ',\'' + componentID + '\',\'' + elementNavigatorPanelID + '\'' + ')');
			//tag.setAttribute('class', 'x-panel-header');
			tag.setAttribute('class', 'element_navigator_item');
			tag.setAttribute('onmouseover', 'this.style.cursor=\'pointer\';'); //for firefox			
			rootElem.appendChild(tag);			
		}
	}
	
	//unselect text
	unselectAnyText();
	
	return resultString;
}

function onItemClick(categoryID,componentID,elementNavigatorPanelID){
	
	var component = Ext.getCmp(componentID);
	var elementNavigator = Ext.getCmp(elementNavigatorPanelID);
	var elementNavigatorScope = elementNavigator.scope; 
	
	//load the selected category
	component.scope.categoryStore.load({params: {category : categoryID, lang: selectedLangId}});
	component.scope.productStore.load({params: {category : categoryID, lang: selectedLangId}});
	
	component.scope.filterTextField.setValue('');
	component.scope.productStore.filter('header','');
	
	//remove all elements after the selected one
	//this is the navigator panel behavior
	var xxx =  elementNavigatorScope.ElementStore.indexOfId(categoryID);
	var elements = elementNavigatorScope.ElementStore.getCount();
	var i = 0;
	var found = false;
	var numElements = elementNavigatorScope.ElementStore.getCount();
	//find the element we just select
	for( i = 0 ; i < numElements && !found ; i++){
		var currentItemID = elementNavigatorScope.ElementStore.getAt(i).get('id'); 
		if(currentItemID == categoryID){
			found = true;
		}
	}	
	
	for(j = i ; j < numElements ; j++){
		var record = elementNavigatorScope.ElementStore.getAt(i);
		elementNavigatorScope.ElementStore.remove(record);
	}
	
	elementNavigatorScope.render();
}