/*****************************
 * extjscsienricher v. 1.4.1 *
 *****************************/


///////////////////////////////////////////////////
//togglepanel
//////////////////////////////////////////////////
/**
 * @class ExtCsi.enrichments.TogglePanel
 * @extends Object funzione per mostrare o nascondere sezioni di pagina 
 * rappresentate da div o tabelle.
 * Esempio di utilizzo:
 <pre><code>
 	var toggle = new ExtCsi.enrichments.TogglePanel({
		label_on :'&nbsp;<span class="espandi">Visualizza</span>',
		label_off :'&nbsp;<span class="collapse">Nascondi</span>',
		menu2 : '.togglepanel_menu',//default: false (niente "menu") per menu si intende il link per
																//vizualizzare o nascondere tutte le sezioni.
		keep_status : true, //se impostato a true allora mantiene lo stato delle sezioni, default:false
		menu_on : 'apri tutte le sezioni',//default: visualizza tutte le sezioni
		menu_off : 'nascondi tutte le sezioni'//default : nascondi tutte le sezioni
	}).init(); 
 </code></pre>
 */
ExtCsi.enrichments.TogglePanel  = Ext.extend(Ext.util.Observable,
	{
		/**
		 * @cfg {String} link
		 * link generato sul click
		 * Defaults to <tt>'span'</tt>
		 */
		link : 'span',
		/**
		 * @cfg {String} pattern_panel
		 * prefisso del panel
		 * Defaults to <tt>''</tt>
		 * stringa vuota per compatibilità mdd
		 */
		pattern_panel : '',
		/**
		 * @cfg {String} pattern_link
		 * prefisso del link
		 * Defaults to <tt>'togglelink_'</tt>
		 */
		pattern_link : 'togglelink_',
		/**
		 * @cfg {String} pattern_handle
		 * prefisso handle
		 * Defaults to <tt>'toggle_'</tt>
		 */
		pattern_handle : 'toggle_',
		/**
		 * @cfg {String} label_on
		 * label sezione chiusa
		 * Defaults to <tt>'Apri'</tt>
		 */
		label_on : 'Apri',
		/**
		 * @cfg {String} label_off 
		 * label sezione aperta
		 * Defaults to <tt>'Chiudi'</tt>
		 */
		label_off : 'Chiudi',
		/**
		 * @cfg {String} open_onstart
		 * classe css che viene associata al link di apertura
		 * Defaults to <tt>'.toggle_open'</tt>
		 */
		open_onstart : '.toggle_open',
		/**
		 * @cfg {String} hide_onstart
		 * classe css che viene associata al link di chiusura
		 * Defaults to <tt>'.toggle_close'</tt>
		 */
		hide_onstart : '.toggle_close',
		/**
		 * @cfg {Boolean} menu
		 * Defaults to <tt>false</tt> 
		 */
		menu : false,
		/**
		 * @cfg {Boolean} menu2
		 * Default to <tt>false</tt>
		 */
		menu2 : false,
		/**
		 * @cfg {String} menu_on
		 * Defaults to <tt>'visualizza tutte le sezioni'</tt>
		 */
		menu_on : 'visualizza tutte le sezioni',
		/**
		 * @cfg {String} menu_off
		 * Default to <tt>'nascondi tutte le sezioni'</tt>
		 */
		menu_off : 'nascondi tutte le sezioni',
		/**
		 * @cfg {String} menu_on_class
		 * Default to <tt>'visualizza'</tt>
		 */
		menu_on_class : 'visualizza',
		/**
		 * @cfg {String} menu_off_class
		 * Default to <tt>'nascondi'</tt>
		 */
		menu_off_class : 'nascondi',
		/**
		 * @cfg {String} menu_sep
		 * Default to <tt>'&nbsp;|&nbsp;'</tt>
		 */
		menu_sep : '&nbsp;|&nbsp;',
		/**
		 * @cfg {Boolean} after_click
		 * Default to <tt>false</tt>
		 */
		after_click : false,
		/**
		 * @cfg {Boolean} keep_status
		 * Default to <tt>false</tt>
		 * se settato a true la pagina mantiene lo stato delle sezioni
		 */
		keep_status : false,
		/** @private
		 * instanzia il costruttore per l'oggetto*/
		constructor: function(config){
			config = config || {};
			Ext.apply(this, config);
		},
		/**
		 * @private
		 * @param {String} id dell'oggetto
		 * a cui si vuole aggiungere il link
		 * @return {String} il link da aggiungere
		 */
		addTextToLink : function(elId){				
				return '<a class="toggle_handle" href="#" id="'+ this.pattern_link + elId + '"></a>';
		},
		/**
		 * @private
		 * @param {String} id dell'oggetto padre
		 * @return {String} l'id dell'oggetto figlio
		 */
		getUid : function(str){
				str = str.replace(this.pattern_panel,"");
				str = str.replace(this.pattern_link,"");
				str = str.replace(this.pattern_handle,"");
				return str;
		},
		/**
		 * @private
		 * @param {String} elemento di cui reperire l'id
		 * @return {String} l'id dell'elemento
		 */
		linkToTarget : function(el){
			var _id = this.getUid(el.id);
			return this.pattern_panel + _id;
		},
		/**
		 * @private
		 * @return {String} il nome della pagina corrente
		 */
		pageName : function(){
			var tmp = location.href.toString();
			var str = tmp.lastIndexOf(".");
			var temp = tmp.substring(0, str);
			var start = temp.lastIndexOf("/")+1;
			var end = temp.length;
			return temp.substring(start, end);
		},
		/** @private 
		 * inizializza l'oggetto
		 */
		init: function(){
			//***inizializzo il cookieProvider per salvare lo stato della pagina
			Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
				expires: null //***scadenza a fine sessione
			}));
    
			var _pattern_panel = this.pattern_panel;
			var _pattern_handle = this.pattern_handle;
			var _labelOff = this.label_off;
			var _labelOn = this.label_on;
			var _afterClick = this.after_click;
			var _keep_status = this.keep_status;
			
			var _is_alternate = Ext.query(".toggle_alternate");
			
			var _links = Ext.query(this.link);
			if(this.menu){
				this.createMenu();
			}
			if(this.menu2){
				this.createMenu2();
			}			
									
			Ext.each(_links, function(el, index){
				if(!(el.id && el.id.indexOf(_pattern_handle) !== -1)){
					return;
				}
				if(Ext.fly(el).hasClass("ytogglepanel_handle")){
					return;
				}else{
				  Ext.fly(el).addClass("ytogglepanel_handle");				
				}
				
				var _target = ExtCsi.enrichments.TogglePanel.prototype.linkToTarget(el);				
				var _id = ExtCsi.enrichments.TogglePanel.prototype.getUid(el.id);
				var _link =  ExtCsi.enrichments.TogglePanel.prototype.addTextToLink(_id);

				el.innerHTML = _link;
				
				var _clean_html_for_ie = function(str){
					str = str.toString().toLowerCase().replace(/\"/g, '');
					return str;
				};	
				
				var bind = Ext.query("a[href*=#]", el);
				Ext.each(bind, function(_binds){
					
					//alert(Ext.fly(_pattern_panel + getUid(_binds.id)).hasClass("toggle_close"));
					//var child = Ext.get(_pattern_panel + getUid(_binds.id))
					var _c1 = Ext.fly(_pattern_panel + ExtCsi.enrichments.TogglePanel.prototype.getUid(_binds.id)).hasClass("toggle_close") ? _clean_html_for_ie(_labelOff) : _clean_html_for_ie(_labelOn);
					var _c2 = _clean_html_for_ie(_labelOff);
					var _flag = _c1 == _c2;
				
					//alert(_flag);
					if(_flag){
						_binds.innerHTML = _labelOn;
					}else{
						_binds.innerHTML = _labelOff;
					}
					
					if(_afterClick){
						_afterClick = _flag;
					}
				});
				/*aggiungo evento di click sul link*/
				el.onclick = function(){
					var bind = Ext.query("a[href*=#]", el);
					Ext.each(bind, function(_binds){
						
						if(_is_alternate){
							/*aggiungo al cookie provider*/
							
							if(!Ext.fly(_target).isStyle("display", "none")){
								/*aggiungo al cookie se chiudo la sezione solo se devo mantenere lo stato*/
								if(_keep_status){
									ExtCsi.enrichments.TogglePanel.prototype.addClosedSectionToCookie(_target);
								}
								el.trigger = "apri";
								_binds.innerHTML = _labelOn;
								Ext.fly(_target).setStyle('display', 'none');
							}else{
								/*rimuovo dal cookie la sezione solo se devo mantenere lo stato*/
								if(_keep_status){
									ExtCsi.enrichments.TogglePanel.prototype.removeSectionFromCookie(_target);
								}
								el.trigger = "chiudi";
								_binds.innerHTML = _labelOff;
								Ext.fly(_target).setStyle('display', 'block');
							}
													
						}else{
							el.trigger = "text";	
						}
						
					  return false;
					});
				};								
			});	
			this.autoHide();
		},
		/**
		 * aggiunge la sezione da chiudere al cookie
		 * @param {String} targetId
		 */
		addClosedSectionToCookie: function(targetId){
			var state = Ext.state.Manager.getProvider();
			var currentState = state.get(ExtCsi.enrichments.TogglePanel.prototype.pageName()+'_toggle_close_section',0);
			var sep = '';
			if(currentState.toString().length > 0){
				sep = ',';
			}
			if(currentState.toString().indexOf(targetId) == -1){
				currentState += sep+targetId
			}
			state.set(ExtCsi.enrichments.TogglePanel.prototype.pageName()+'_toggle_close_section',currentState);
		},
		/**
		 * rimuove la sezione da aprire dal cookie
		 * @param {String} targetId
		 */
		removeSectionFromCookie: function(targetId){
			var state = Ext.state.Manager.getProvider();
			var currentState = state.get(ExtCsi.enrichments.TogglePanel.prototype.pageName()+'_toggle_close_section',0);
			var newState = '';
			var sep = '';
			Ext.each(currentState.split(','), function(elemento){
				if(newState.length > 0){
					sep = ',';
				}
				if(elemento != targetId){
					newState += sep + elemento;
				}
			});
			/*
			if(currentState.toString().indexOf(targetId) != -1){
				var sp = S.split('@')[0]
				currentState = currentState.toString().substring(currentState.toString().indexOf(targetId),currentState.toString().indexOf(targetId)+targetId.length);
			}
			*/
			state.set(ExtCsi.enrichments.TogglePanel.prototype.pageName()+'_toggle_close_section',newState);
			
		},
		/**
		 * nasconde gli elementi delle varie sezioni allo startup
		 */
		autoHide: function(){
			var labelOff = this.label_off;
			var labelOn = this.label_on;
			
			/*
			var el = Ext.query(this.hide_onstart);
			Ext.each(el, function(elemento){
				Ext.fly(elemento).setStyle('display', 'none');
			});
			*/
			
			
			/*controllo se ho un cookie in memoria*/
			var state = Ext.state.Manager.getProvider();
			var currentState = state.get(ExtCsi.enrichments.TogglePanel.prototype.pageName()+'_toggle_close_section',0);
			if(currentState != 0){
				
				/*
				var el = Ext.query(this.open_onstart);
				Ext.each(el, function(elemento){
					Ext.fly(elemento).setStyle('display', 'none');
				});
				
				Ext.fly(startStoress).setStyle('display', 'block');
				var _h = Ext.query(".toggle_handle");	
				
				Ext.each(_h, function(elemento){
					var _target = ExtCsi.enrichments.TogglePanel.prototype.linkToTarget(elemento);
					if(_target == startStoress){
						ExtCsi.enrichments.TogglePanel.prototype.showHide(true, elemento, labelOff, labelOn);
					}else{
						ExtCsi.enrichments.TogglePanel.prototype.showHide(false, elemento, labelOff, labelOn);
					}
				});*/
				
				var elementi = currentState.split(',');
				
				Ext.each(elementi, function(els){
					if(els != 0){
						Ext.fly(els).setStyle('display', 'none');
					}
				});
				
				var _h = Ext.query(".toggle_handle");	
				
				Ext.each(_h, function(elemento){
					var _target = ExtCsi.enrichments.TogglePanel.prototype.linkToTarget(elemento);

					if(currentState.toString().indexOf(_target) == -1){
						ExtCsi.enrichments.TogglePanel.prototype.showHide(true, elemento, labelOff, labelOn);
					}else{
						ExtCsi.enrichments.TogglePanel.prototype.showHide(false, elemento, labelOff, labelOn);
					}
				});
				
				//ExtCsi.enrichments.TogglePanel.prototype.runClick(false, this.label_off, this.label_on);
			}
		},
		/**
		 * @private
		 * funzione di creazione del menu, per il momento non 
		 * utilizzata e comunque da testare
		 */
		createMenu: function(){
			var _start = false;
			var el = Ext.get(this.menu);
			if(el){
				if (el.hasClass("parti_chiuso")) {
					_start = true;
				}
			}			
			var _c1 = _start ? this.menu_off_class : this.menu_on_class;
			var _c2 = _start ? this.menu_on : this.menu_off;
			
			var _menu = '<a href="#" class="' + _c1 + '">' + _c2 + '</a>';
			
			el.dom.innerHTML = _menu;
			
			var _handles = Ext.query("a[href*=#]", this.menu);
				
			var menuAtt = this.menu_on;
			var menuDis = this.menu_off;
			var menuAttClass = this.menu_on_class;
			var menuDisClass = this.menu_off_class;
			
			Ext.each(_handles, function(elemento, index){
				
				elemento.onclick = function(){					
					var _flag = elemento.text == menuAtt;
					var _h = Ext.query(".toggle_handle");
					Ext.each(_h, function(elemento, index){
						if(_flag){
							elemento.innerHTML = menuDis;
							Ext.fly(elemento).replaceClass(menuDisClass, menuAttClass);
							_h.trigger = "apri";
						}else{
							elemento.innerHTML = menuAtt;
							Ext.fly(elemento).replaceClass(menuAttClass, menuDisClass);
							_h.trigger = "chiudi";
						}
					});
					return false;
				}
			});
		},
		/**
		 * @private
		 * funzione di creazione delle voci visualizza e nascondi tutte le sezioni
		 */
		createMenu2: function(){
			var labelOff = this.label_off;
			var labelOn = this.label_on;
			var _menu_on = '<a href="#" class="'+this.menu_on_class+'">' + this.menu_on + '</a>';
			var _menu_off = '<a href="#" class="'+this.menu_off_class+'">' + this.menu_off + '</a>';
			var _sep = this.menu_sep;
						
			var el = Ext.query(this.menu2);
			Ext.each(el, function(elemento, index){
				elemento.innerHTML = _menu_on + _sep + _menu_off;
				var _handles = Ext.query("a[href*=#]", elemento);
				Ext.each(_handles, function(hands, index){
					if(index == 0){
						hands.onclick = function(){
							ExtCsi.enrichments.TogglePanel.prototype.runClick(true, labelOff, labelOn);
						};
					}else if(index == 1){
						hands.onclick = function(){
							ExtCsi.enrichments.TogglePanel.prototype.runClick(false, labelOff, labelOn);
						};
					}
				});
			});
		},
		/**
		 * @private
		 * aggancio dell'evento di click sul link
		 * @param {Boolean} indica se devo aprire o chiudere
		 * @param {String} etichetta di chiusura
		 * @param {String} etichetta di apertura
		 */
		runClick : function(flag, labelOff, labelOn){
			var _h = Ext.query(".toggle_handle");	
			Ext.each(_h, function(elemento){
				ExtCsi.enrichments.TogglePanel.prototype.showHide(flag, elemento, labelOff, labelOn);
			});
			return false;
		},
		/**
		 * @private
		 * visualizza o nasconde le sezioni
		 * @param {Boolean} indica se devo visualizzare o chiudere
		 * @param {Object} oggetto su cui lavorare
		 * @param {String} etichetta di chiusura
		 * @param {String} etichetta di apertura
		 */
		showHide : function(flag, el, labelOff, labelOn){
			var _target = this.linkToTarget(el);
			if(flag){
				el.trigger = "apri";
				el.innerHTML = labelOff;					
				Ext.fly(_target).setStyle('display', 'block');
			}else{
				el.trigger = "chiudi";
				el.innerHTML = labelOn;
				Ext.fly(_target).setStyle('display', 'none');
			}
		}
	}
);