//variable de logueo
var log;
//contiene el periodo de trabajo actuar 
var periodo;
//metetodo que recarga la informacion del grid 
var callData;
//variable de almacenamiento de datos para el grid 
var generoDataStore;
var indicadorDataStore
var TodosDataStore;
//por medio de esta variable almacenamos 
//ficha tecnica del indicador
var windowFicha;
//variable que identifica el genero de los indicadores
// que vamos a consulatar  
var genero    = {'desc':'Todos', id: -1};
var indicador = {'desc':null,id:-1};
//vaiable para indentificar el tipo de informacion a mostrar 
var typeInf = 'genero'
//variable de pruebas 
var sw = true;
var periodoAux = 0;

//Funciones renderes para las columnas  
var renderCumplimiento = function(data){
	return Math.round(data*10000)/100+'%';
}
//convierte  un dato especificado como parametro a minusculas 
var lowerCase = function(data){
return data.toLowerCase();
}

//de acuerdo con el cumplimiento del indicador califica con una 
//imagen de tipo semaforo horizontal 
var showImgSemaforo = function(data,metadata,record,row,col,store){
	var cumplimiento = record.data['cumplimiento'];
	var img = '<img src="getSemaforoByCumplimiento.action';
	img += '?idIndicador='+data
	img += '&cumplimiento='+cumplimiento
	img += '"/>';
	return(img);
	
}

//define el color de cada uno de los participantes del indicador 
var colorBox = function(data){
	var strColor = data.red+','+data.green+','+data.blue; 
	return '<div class="colorBox" style="background-color: rgb('+strColor+');"></div>'
}
//retorna la instrucion document.getElementById tomando como 
// id el parametro valor 
 var getEl = function(valor){
   	return document.getElementById(valor);
   }
   
   
   var updatevalores = function(){
   		var selectPeriodo = document.getElementById('selectPeriodo');
    	var selectedIndex = selectPeriodo.selectedIndex; 
    	if(selectPeriodo.length <= 0){
    		Ext.Msg.alert('Mensaje de Alerta','No existen Periodos con  valores para los indicadores ... ');
    		return false;
    	}
    	periodo.idPeriodo = selectPeriodo.options[selectedIndex].value;
    	periodo.descripcion = selectPeriodo.options[selectedIndex].text;
    	return true; 
   }
//funciones de utilidad
//por medio de esta funcion optenemos los valores de los indicadores en 
//un periodo determinado  
   var getValores = function(){
    	if(updatevalores()){
    		callData();
    	}
    }
    //si el valor de retorno es S pintamos un chulo notificando que 
    //el indicador esta certificado por la empresa KPMG
    var showImgCertificado = function(data){
    	if(data == 'S'){
    		return '<img src="img/cert.gif" width="15" height="15"/>';
    	}
    	return '';
    }
    //muestra las imagenes que traemos desde el servidor de base de datos 
   var setImage = function(valor){
   		var bar =  document.getElementById('bar');
   		var indTemp = TodosDataStore.getById(indicador.id+'').data;	
   		if(valor){
   			if(typeInf == 'genero'){
   				var url =  'getPie.action';
   				url += '?idPeriodo='+periodo.idPeriodo;
   				url += '&idGenero='+genero.id;
   				document.images['imgbar'].src = url;
			}else if (typeInf == 'indicador'){
				var url =  'getBarParticipantes.action';
   				url += '?idPeriodo='+periodo.idPeriodo;
   				url += '&idIndicador='+indicador.id;
   				url += '&numParticipantes='+indTemp.numParticipantes;
   				document.images['imgbar'].src = url;
			}   
			bar.style.display = 'block'
		}else{
			bar.style.display = 'none'
		}
   }
   
   //habilita la imagen 
   var enabledLineImage = function(flag){
   		var imgline = document.images['imgline'];
   		var divline = document.getElementById('line');
   		var compDiv = document.getElementById('compDiv');
   		var indName = document.getElementById('indName');
   		var detInd = document.getElementById('detInd');
   		var subBar = document.getElementById('subBar');
   		if(flag){
   			var url = 'getLineChart.action';
   			url += '?idIndicador='+indicador.id
   			var indTemp = TodosDataStore.getById(indicador.id+'').data;
   			imgline.src = url;
   			divline.style.display = 'block';   			
   			compDiv.style.display = 'block';
   			indName.style.display = 'block';
   			detInd.style.display = 'block';
   			if(indTemp.numParticipantes==0){
   				subBar.style.display = 'block';
   			}else{
   				subBar.style.display = 'none';
   			}
   		}else{
   			divline.style.display = 'none';
   			compDiv.style.display = 'none';
   			indName.style.display = 'none';
   			detInd.style.display = 'none';
   			subBar.style.display = 'none';
   		}   		
   }
   
	// seteamos los valores de las variables 
	// genero e indicador para la nueva consulta 
	// del o los indicadores 
   var screamInf = function(type,id,desc){
   		typeInf = type	
   		if(typeInf == 'genero'){
   			genero.id = id;	
			genero.desc = desc;
		}else if(typeInf == 'indicador'){
			indicador.id = id;
			indicador.desc = desc;
		}		
		getValores();
   } 
  	//seteamos los datos del indicador para la ficha tecnica  	
    var datosIndicador = function(){
    	var indicadores = TodosDataStore.getById(indicador.id+'').data;
    	getComportamiento();
		getEl('indName').innerHTML = indicadores.nombre.toUpperCase()+'<br>('+indicadores.metrica+')<a href="javascript:windowFicha.show()">Ver Ficha T&eacute;cnica</a>';    
    	getEl('fft_genero').innerHTML = indicadores.genero.abreviatura;
    	getEl('fft_idindicador').innerHTML = indicadores.idIndicador;
    	getEl('fft_nombre').innerHTML = indicadores.nombre;
    	getEl('fft_abreviatura').innerHTML = indicadores.abreviatura;
    	getEl('fft_objeto').innerHTML = indicadores.descripcion;
    	getEl('fft_formula').innerHTML = indicadores.formula;
    	getEl('fft_observacion').innerHTML = indicadores.observacion;
    	getEl('fft_metrica').innerHTML = indicadores.metrica;
    	//getEl('fft_ponderacion').innerHTML = '&nbsp;';
    	//getEl('fft_periodicidad').innerHTML = '&nbsp;';
    	getEl('fft_fuente').innerHTML = indicadores.fuente;    	
    	semaforoFichaTecnica();
    	getEl('fft_arearesponsable').innerHTML = '&nbsp;';
    	//getEl('fft_descripcion').innerHTML = indicadores.descripcion;  	
  	}
  	/**
  	* con este metodo dibujamos la tabla con cada uno del los semaforos, 
  	* y sus respectivos rangos,  en la ficha tecnica del indicadores 
  	*/
  	var semaforoFichaTecnica = function(){
  		Ext.Ajax.request({
  		url:'getLuces.action',
  		params:{'idIndicador':indicador.id},
  		success:function(data){
  			data = Ext.util.JSON.decode(data.responseText);
  			var paintTable = '<table width="100%">';
  			paintTable += '<tr><th align="center"><label>Imagenes</label></th><th align="center"><label>Rangos</label></th></tr>';
  			for(var index = 0; index < data.length; index++){
  				var lucesIndicador = data[index];
  				paintTable += '<tr><td align="center"><img src="getSemaforo.action?idLuz=';
  				paintTable += lucesIndicador.dfluces.idLuz+'"></td><td align="center">'
  				if(index == 0){
  					getEl('fft_tiposemaforo').innerHTML = lucesIndicador.dfluces.idSemaforo.descripcion+'&nbsp;';
  					paintTable += 'Menor que ';
  					//paintTable += lucesIndicador.rangoInicial*100 + '% y ';
  					paintTable += lucesIndicador.rangoFinal*100 + '%';
  				}else if(index == data.length-1){
  					paintTable += 'Mayor que ';
  					paintTable += lucesIndicador.rangoInicial*100 + '%';
  					//paintTable += lucesIndicador.rangoFinal*100 + '%';
  				}else{
  					paintTable += 'Entre ';
  					paintTable += lucesIndicador.rangoInicial*100 + '% y ';
  					paintTable += lucesIndicador.rangoFinal*100 + '%';
  				}
  				
  			}
  			paintTable += '</td></tr>';
  			paintTable += '</table>'
  			getEl('fft_semaforo').innerHTML = paintTable;
  			
  			
  		},
  		failure:function(data){
  			data = Ext.util.JSON.decode(data.responseText);
  			alert('Error 001\n\n'+data.errorMessage);
  		}});
  	}
  	//pintamos el comportamiento del indicador en una tabla 
  	var getComportamiento = function(){
  		Ext.Ajax.request({
	  	url: 'getComportamiento.action',
        params: {
        	'idIndicador':indicador.id
        },
	    success: function (data){
		    data = Ext.util.JSON.decode(data.responseText);
		    var compDiv = document.getElementById('compDiv');
		    var table = '<table></table>';
		    
		   	var per = '<th>Periodo</th>';
		   	var met = '<th>Meta</th>';
		   	var val = '<th>Resultado</th>';
		   	var cum = '<th>Cumplimiento</th>';
		   	var cal = '<th>Calificaci&oacute;n</th>';
		    
		    var length = data.length;
		    for(var i = 0; i < data.length; i++){
		    	if (length-- > 12) {
					continue;
				}
				var obj = data[i]
				var descInd =  obj.definicionPeriodos.descripcion;
				var subDescInd = descInd.substring(3,descInd.indexOf(' de '));
				
				var img = '<img src="getSemaforoByCumplimiento.action';
				var cumplimiento = obj.cumplimiento;	
				img += '?idIndicador='+indicador.id
				img += '&cumplimiento='+cumplimiento
				img += '"/>';
				
				per += '<th>'+obj.definicionPeriodos.descripcion.replace(subDescInd+' de ','')+'</th>';
		   		met += '<td>'+obj.meta+'</td>';
		   		val += '<td>'+obj.valor+'</td>';
		   		cum += '<td>'+renderCumplimiento(obj.cumplimiento)+'</td>';
		   		cal += '<td>'+img+'</td>';
		   		
				
			}
			
			var trs = '<tr>'+per+'</tr>'
			trs += '<tr>'+met+'</tr>';
			trs += '<tr>'+val+'</tr>';
			trs += '<tr>'+cum+'</tr>';
			trs += '<tr>'+cal+'</tr>';
			compDiv.innerHTML = '<label>Comportamiento del Indicador en los Ultimos Meses</label>';
			compDiv.innerHTML += ' <table>'+trs+'</table>'
	    },
	    failure:function(data){
  			data = Ext.util.JSON.decode(data.responseText);
  			alert('Error 002\n\n'+data.errorMessage);
	    }});
  	}
  	
  	
  	var reloadTree = function(){  	
	  	var div = getEl('tree');
	  	div.innerHTML = '';
  		  Ext.Ajax.request({
		  	url: 'getGeneros.action',
		        params: {
		        	'idPeriodo':periodo.idPeriodo
		        },
		    success: function (data){    	
		    	treeGeneros = Ext.util.JSON.decode(data.responseText);
		    	
				var tree = new Ext.tree.TreePanel({
					animate:true,
					enableDD:false,
					loader: new Ext.tree.TreeLoader(),
					containerScroll: true,
					useArrows:true,
					el:'tree',
					autoScroll:true,
					width:genero_tree_width,
					height:genero_tree_height,
					singleExpand:true
				});
				// set the root node
				var root = new Ext.tree.AsyncTreeNode({
					text: 'Todos',
					draggable:false,
					id:'source',
					children: treeGeneros
				});
				
				tree.on('click',function(node){
					node.expand();	
					var id = node.id;		
					if (id.indexOf('indicador')!= -1){
						screamInf('indicador',id.substring(9),node.text);
					}else if(id.indexOf('genero')!= -1){					
						screamInf('genero',id.substring(6),node.text);				
					}else{
						screamInf('genero',-1,'Todos');
					}
				});
				
				tree.setRootNode(root);
				
				tree.render();
				root.expand();
    },    
    failure:function(data){
  			data = Ext.util.JSON.decode(data.responseText);
  			alert('Error 004\n\n'+data.errorMessage);
    }});
  	}
   
Ext.onReady(
  function(){

  
  log = new Log(false);
  
  log.debug('applicaction is running ... ');
  
  Ext.Ajax.request({
  	url: 'periodosValores.action',
    success: function (data){    	
    	
    	data = Ext.util.JSON.decode(data.responseText)
 		var selectPeriodo = document.getElementById('selectPeriodo');
 		
 		selectPeriodo.length = data.length
 		for(var i = 0;i < data.length; i++){ 			
 			selectPeriodo.options[i].text = data[i].descripcion.trim();
 			selectPeriodo.options[i].value = data[i].idPeriodo; 			
 		}
 		
		if(data.length > 0){ 		
 			periodo = data[0];
 			reloadTree();
 			TodosDataStore.load();
 			getValores();
 		}
    },    
    failure:function(data){
  			data = Ext.util.JSON.decode(data.responseText);
  			alert('Error 003\n\n'+data.errorMessage);
    }});   
    
    

    var confTitle = function(valor){
	    if(valor.length > 20){
	    	return valor.substring(0,20)+'...';
	    }else{
	    	return valor;
	    }
    }
  callData = function(){
  	if(typeInf == 'genero'){
  		gridPanel.setWidth(740);
  		gridPanel.setHeight(genero_grid_height); 		  		
  		gridPanel.reconfigure(generoDataStore,generoColumnModel);
  		gridPanel.setTitle('Indicadores '+genero.desc+' - '+periodo.descripcion.trim());  
  		generoDataStore.load({params:{'idPeriodo':periodo.idPeriodo,'idGenero':genero.id}});
  		enabledLineImage(false);
  		setImage(false);
  		gridTT.enable();
	}else if(typeInf == 'indicador'){						
		gridPanel.setWidth(270);
		gridPanel.setHeight(300);		    
		gridPanel.reconfigure(indicadorDataStore,indicadoresColumnModel);
		gridPanel.setTitle(confTitle(indicador.desc)+' - '+periodo.descripcion.trim());	
		var indTemp = TodosDataStore.getById(indicador.id+'').data;		
		var numPar = document.getElementById("numPar");
		numPar.innerHTML = getNumPartiLabel(indTemp.numParticipantes);
		indicadorDataStore.load({params:{'idPeriodo':periodo.idPeriodo,
				'idIndicador':indicador.id,
				'numParticipantes':indTemp.numParticipantes}});	
		gridPanel.setWidth(270);
		gridPanel.setHeight(300);	
		datosIndicador();
		enabledLineImage(true);
		setImage(true);
		gridTT.disable();
	}
	
  	
  }

	var getNumPartiLabel = function(valor){
		if(valor == -1){
			return '(Todos)'
		}else if(valor == 0 ){
			return '(Sin Participantes)'
		}else{
			return '('+valor+')'
		}
	}
  
  var generoReader = new Ext.data.JsonReader(
  		{root:'data',id:'indicadores.idIndicador'},
  		[{name:'indicadores.idIndicador'},
  		 {name:'indicadores.nombre'},
  		 {name:'indicadores.metrica'},
  		 {name:'indicadores.abreviatura'},
  		 {name:'aprobado'},
  		 {name:'certificado'},
  		 {name:'valor',type:'float'},
  		 {name:'meta' ,type:'float'},  		 
  		 {name:'cumplimiento' ,type:'float'},
  		 {name:'indicadores'}]	        
  );
  
  var indicadorReader = new Ext.data.JsonReader(
  	{root:'data'},
  	[{name:'detalleIndicador.detalleIndicadorPK.participante'},
  	 {name:'detalleIndicador.valor', type:'float'},
  	 {name:'color'}]
  
  )
  
  var todosReader =new Ext.data.JsonReader(
  	{root:'data',id:'idIndicador'},
  	[{name:'idIndicador'},
  	 {name:'abreviatura'},
  	 {name:'nombre'},
  	 {name:'formula'},
  	 {name:'descripcion'},
  	 {name:'metrica'},
  	 {name:'fuente'},
  	 {name:'estado'},
  	 {name:'observacion'},
  	 {name:'ordenGenero'},
  	 {name:'responsable'},
  	 {name:'genero'},
  	 {name:'numParticipantes'}]
  
  ) 
  
  var generoProxyCon = new Ext.data.HttpProxy({url:'valoresPeriodos.action'});
  var indicadorProxyCon = new Ext.data.HttpProxy({url:'getDetallesIndicador.action'});
  
  generoDataStore = new Ext.data.Store(
  {	proxy : generoProxyCon,
  	reader : generoReader }
  );
  
  indicadorDataStore = new Ext.data.Store(
  {	proxy : indicadorProxyCon,
  	reader : indicadorReader }
  );
  
  TodosDataStore = new Ext.data.Store(
  {	proxy : new Ext.data.HttpProxy({url:'getAllIndicadores.action'}),
	reader : todosReader }
  );
  
  
  var generoColumnModel = new Ext.grid.ColumnModel([
	  {header:'Id'     ,width:20 ,sortable:true ,dataIndex:'indicadores.idIndicador' ,id:'idIndicador'},
	  {header:'Abrev.' ,width:130,sortable:true ,dataIndex:'indicadores.abreviatura' ,id:'abreviatura',renderer:lowerCase},
	  {header:'Nombre' ,width:270,sortable:true ,dataIndex:'indicadores.nombre'      ,id:'nombre'},
	  {header:'Metrica',width:50 ,sortable:true ,dataIndex:'indicadores.metrica'     ,id:'metrica',renderer:lowerCase},
	  {header:'KPMG'   ,width:40 ,sortable:true ,dataIndex:'certificado'			 ,id:'certificado',renderer:showImgCertificado, align:'center'},
	  {header:'Valor'  ,width:40 ,sortable:true ,dataIndex:'valor'				     ,id:'valor',align :'right'},
	  {header:'Meta'   ,width:40 ,sortable:true ,dataIndex:'meta'	   			     ,id:'meta',align :'right'},
	  {header:'Cump.'  ,width:60 ,sortable:false,dataIndex:'cumplimiento'      	     ,id:'cumplimiento',align :'right',renderer:renderCumplimiento},
	  {header:'Califi.',width:70 ,sortable:false,dataIndex:'indicadores.idIndicador' ,id:'Califi',align :'center',renderer:showImgSemaforo}	  
  ]);
  
  var indicadoresColumnModel = new Ext.grid.ColumnModel([
  		{header:'',width:30 ,sortable:false,dataIndex:'color',renderer:colorBox},
		{header:'Participantes',width:170 ,sortable:true,dataIndex:'detalleIndicador.detalleIndicadorPK.participante',id:'participante'},
		{header:'Valores',width:50 ,sortable:true,dataIndex:'detalleIndicador.valor',id:'valor',align :'right'}
  ]);
  var gridPanel = new Ext.grid.GridPanel({
     el:'gridIndicadores',
     ds:generoDataStore,
     cm:generoColumnModel,
     width:740,   
     title:'Indicadore KPMG ',
     loadMask: true
   });	
    
  gridPanel.on('rowdblclick',function(grid,rowIndex,evt){
  	if(typeInf == 'indicador')return;
	var indicadores = generoDataStore.getAt(rowIndex).data.indicadores;
	screamInf('indicador',indicadores.idIndicador,indicadores.abreviatura);
  });
  
  var gridTT = new Ext.ToolTip({
      target: 'gridIndicadores',
      html: 'Haga doble click aquí para ver la ficha técnica del indicador',
      trackMouse:true
  });
  new Ext.ToolTip({
      target: 'tree',
      html:  'Haga click aquí para ver la información \n de los Indicadores ',
      trackMouse:true
  }); 
  
  gridPanel.render();
 
  var panelFicha = new Ext.Panel({
  	el:'floatFichaT',
  	region:'center'
  });/**/
  
  windowFicha = new Ext.Window({
  	layout:'border',
  	title:'Indicadores',
    width:600,
    height :500,
    modal:true,
    resizable:false,
    closeAction:'hide',
  	items:[panelFicha],
  	buttons:[{
        text: 'Cerrar',
        handler: function(){
        	windowFicha.hide();
      }}]
  });
  
  windowFicha.show();
  windowFicha.hide();
  /**/
  var treeGeneros;
  

  
    
  
  });