function fila(h,hmax,ancho,alto,titulo,tipo)
  //tipo es 0 para barra normal, 1 para barra con borde (ancho=17)
  {
    //alert("hola");
    ancho=60;
    document.writeln('   <table border="0" cellSpacing="0" cellPadding="0"  height="'+ alto +'">');
   a1=-5; //esto es para luego en los titulos distinguir entre valores con datos y sin datos
   a2=-5;
   if (h>=0)  //para ese mes hay datos. si un mes no tiene datos vale -1
   {
    var a1=Math.round(alto*(h/hmax)); //alto-alto*(h/hmax);
    var a2=(alto-a1);
    //alert(a1+":  "+a2);
    document.writeln('     <tr><td width="' + ancho +'" height="'+a2+'" bgcolor="#ccccff" valign="top"><img src="iconos/pixelrosa.jpg" border="0"></td></tr>');  
    if (tipo==0) //barra normal, cualquier ancho
       { if (a1>0) document.writeln('     <tr><td width="' + ancho + '" height="'+a1+'" bgcolor="#0000ff" valign="bottom"><img src="iconos/pixelazul.jpg" border="0"></td></tr>'); }
    else   
       { if (a1>0) document.writeln('     <tr><td width="' + ancho + '" height="'+a1+'" background="iconos/rellenoazul1.jpg" bgcolor="#0000ff" valign="top"><img src="iconos/supazul1.jpg" border="0"></td></tr>'); }
    //document.writeln('   </table>');
   }
  else document.writeln('     <tr><td width="' + ancho +'" height="'+alto+'" bgcolor="#999999" valign="top"><img src="iconos/pixelblanco.jpg" border="0"></td></tr>');  
 
    document.writeln( '</td></tr>');
    if ((a1!=-5)&&(a2!=-5))  { fcolor="#99bb99"; tcolor="#0"; }
    else  { fcolor="#999999"; tcolor="#dddddd"; }
    document.writeln(' <tr height="10"><td bgcolor="' + fcolor +'" width="' + ancho +'" height="10" align="center" valign="top" ><font size="1px" face="arial" color="' + tcolor + '">' + titulo + '</font></td></tr>');
    document.writeln('</table>');
  }

function fila2(h,hmax,ancho,alto,color,tipo)
  //tipo es 0 para barra normal, 1 para barra con borde (ancho=17)
  {
    //alert("hola");
    ancho=60;
    document.writeln('   <table border="0" cellSpacing="0" cellPadding="0"  height="'+ alto +'">');
   a1=-5; //esto es para luego en los titulos distinguir entre valores con datos y sin datos
   a2=-5;
   if (h>=0)  //para ese mes hay datos. si un mes no tiene datos vale -1
   {
    var a1=Math.round(alto*(h/hmax)); //alto-alto*(h/hmax);
    var a2=(alto-a1);
    //alert(a1+":  "+a2);
    document.writeln('     <tr><td width="' + ancho +'" height="'+a2+'" bgcolor="#ccccff" valign="top"><img src="iconos/pixelrosa.jpg" border="0"></td></tr>');  
    if (tipo==0) //barra normal, cualquier ancho
       { if (a1>0) document.writeln('     <tr><td width="' + ancho + '" height="'+a1+'" bgcolor="'+color+'" valign="bottom"><img src="iconos/pixelazul.jpg" border="0"></td></tr>'); }
    else   
       { if (a1>0) document.writeln('     <tr><td width="' + ancho + '" height="'+a1+'" background="iconos/rellenoazul1.jpg" bgcolor="#0000ff" valign="top"><img src="iconos/supazul1.jpg" border="0"></td></tr>'); }
    //document.writeln('   </table>');
   }
  else document.writeln('     <tr><td width="' + ancho +'" height="'+alto+'" bgcolor="#999999" valign="top"><img src="iconos/pixelblanco.jpg" border="0"></td></tr>');  
 
    
    document.writeln('</table>');
  }
 
 function fila1(h,hmax,ancho,alto,titulo)
  {
    //alert("hola");
    document.writeln('   <table border="0" cellSpacing="0" cellPadding="0"  height="'+h+'" width="' + ancho + '" bgcolor="#00ff00">');
    document.writeln('      <tr><td bgcolor="#0000ff" valign="bottom"><img src="../iconos/pixel.jpg" border="0"></td></tr>');
    document.writeln('   </table>');
  }

 var meses=new Array("E","F","Ma","Ab","My","Jn","Jl","Ag","S","O","N","D");
 var meses1=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
//para aņadir las lluvias de un aņo: definir una variable lluviasxxxx donde xxxx es el aņo completo. Escribir los litros para cada mes, 
// sin que falte ningun mes. Si para un mes no hay datos escribir -1.
//lluvias0000 es para calcular las medias por meses

 var lluvias1996= new Array(-1,-1,-1,-1,-1,-1,-1,-1,-1,20,100,241); // litros/mes. enero=0
 var lluvias1997= new Array(128,0,0,40,30,20,0,0,71,24,58,109); // litros/mes. 
 var lluvias1998= new Array(23,70,12,25,7,0,0,0,10,0,0,35); // litros/mes. 
 var lluvias1999= new Array(0,5,20,0,0,0,0,0,15,130,42,0); // litros/mes. 
 var lluvias2000= new Array(20,0,20,60,51,0,0,0,5,49,5,83); // litros/mes. 
 var lluvias2001= new Array(21,0,35,0,25,0,0,0,70,87,8,8); // litros/mes.
 var lluvias2002= new Array(0,0,85,30,8,11,0,0,12,9,139,41); // litros/mes.
 var lluvias2003= new Array(29,64,49,55,4,2,0,3,0,120,62,71); // litros/mes.
 var lluvias2004= new Array(9,50,89,77,71,3,0,3,3,9,10,69); // litros/mes. enero=0
 var lluvias2005= new Array(0,57,56,1,3,0,0,1.5,3,21,40,9); // litros/mes. enero=0
 var lluvias2006= new Array(68,30,43,55.5,10,8,0,2,45,17,42,26); // litros/mes. enero=0
 var lluvias2007= new Array(22,43.5,4.5,44.5,70.5,0,0,2,115,24,36,19.5); //litros/mes, enero=1...
 var lluvias2008= new Array(47,43,16.5,83,42,3,0,0,69,99,61,48); // litros/mes. enero=0
 var lluvias2009= new Array(51,104,46,32,4,0,0,9,36,23,13,231); // litros/mes. enero=0
 var lluvias2010= new Array(103,131.5,83.5,26,44,18.5,0,14.5,21,39,73.5,198.5); //lluvias medias
 var lluvias2011= new Array(27,26,75,72,63.5,13,0,0,0,0,0,0); //lluvias medias
 var lluvias0000= new Array(0,0,0,0,0,0,0,0,0,0,0,0); //lluvias medias
 var fechaact="28 de Agosto de 2011";
//ultima fecha metida 13 junio 2011, 13 litros 
//30 mayo 2010 2 litros 
 function calculamediames(ini,fin)
 {
  var n=fin-ini+1; //numero de aņos
  for (j=0;j<12; j++)
  {
    for(i=ini;i<=fin;i++)
    {
      t=eval("lluvias"+i);
      //alert(t[j]);
      if (t[j]>=0)  lluvias0000[j]=lluvias0000[j]+t[j];  //se mira que ese mes tenga datos, si no lo suma porque es negativo
    }
  }
  for(j=0;j<12;j++) lluvias0000[j]=Math.round(lluvias0000[j]/n); //media de ese mes
  return 0;
 }

 function colores(valor) 
 { //lo uso en la tabla lateral para variar el color de los meses segun la lluvia que haya
  var n=new Array(3); 
  if (valor<0) { a='n/d'; b='#999999'; c='#dddddd';}
  else if (valor==0) {a='0'; b='#ccccff'; c='#0';}
         else  {a=valor; b='#8888ff'; c='#0';}
  n[0]=a; n[1]=b; n[2]=c;
  return (n);
 }


 var n=new Array(3);
 var m=new Array(3);

 function sumaano(lluvias)
 {
  var t=0;
  for (i=0;i<12;i++) { h=(lluvias[i]>=0)?lluvias[i]:0; t=t+h; }
  return t;
 }

 function tabla(ncol,alto,ancho,lluviasano,ano,tipo)
 //si tipo=0 es una barra normal y puede tener cualquier ancho, si tipo=1 es con bordes y ancho=17
 {
  var maximo=0;
  for (i=0; i<12;i++) if (lluviasano[i]>maximo) maximo=lluviasano[i];  //calcular el valor mas alto para ajustar la tabla

  var anchocelda=17; //por si tipo=1
  if (tipo==0) anchocelda=ancho/ncol;
  else ancho=17*12;

  document.writeln('<table border="1" cellSpacing="0" cellPadding="0">');
  t=sumaano(lluviasano);
 if (ano!=0) document.writeln('<tr><td><table width="100%" bgcolor="#ccccff" border="1" cellpadding="2"><tr><td align="center"><b><font size="2px" face="arial">Aņo ' + ano + '</font></b></td><td align="right"><font size="1px" face="arial">Total anual: ' + t + ' litros/m<sup>2</sup></font></td></tr></table></tr>');
  else document.writeln('<tr><td><table width="100%" bgcolor="#ccccff" border="1" cellpaddign="2"><tr><td align="center"><b><font size="2px" face="arial">Media por Meses de los aņos indicados</font></td></tr></table></tr>');
  document.writeln('<tr><td>');

  document.writeln('<table bgcolor="#ccccff" border="1" cellspacing="0" cellPadding="0" height="' + alto + '">');
  //document.writeln('<tr><td width="' + ancho +'" colspan="10" align="center"><b><font size="2px" face="arial">Aņo '+ ano+ '</font></b></td></tr>');
  document.writeln(' <tr><td>');
 
  document.writeln('<table bgcolor="#ccccff" border="0" cellSpacing="1" cellPadding="0" height="'+ alto + '" width="' + ancho +'">');
  document.writeln('<tr>');

  for(var i=0; i<ncol; i++)
   {
     document.writeln('<td width="' + anchocelda + '" valign="bottom">');
     fila(lluviasano[i],maximo,anchocelda,alto,meses[i], tipo);
     document.writeln('</td>');
   }
  document.writeln('</tr>');
  document.writeln('<tr>');
  document.writeln('<td align="right" valign="bottom" width="' + anchocelda + '" height="15"><table width="15" height="15"bgcolor="#0000ff" border="1" cellspacing="0" cellPadding="0"><tr><td valign="bottom"><img src="iconos/pixelazul.jpg" border="0"></td></tr></table></td><td colspan="3" valign="bottom"><font size="1px" face="arial">Litros/m<sup>2</sup></font></td>');
  document.writeln('<td align="right" valign="bottom" width="' + anchocelda + '" height="15"><table width="15" height="15"bgcolor="#999999" border="1" cellspacing="0" cellPadding="0"><tr><td valign="bottom"><img src="iconos/pixelazul.jpg" border="0"></td></tr></table></td><td colspan="7" valign="bottom" align="left"><font size="1px" face="arial">No hay datos (n/d)</font></td>');
   document.writeln('</tr>');
  document.writeln('</table>');

  document.writeln('</td><td>');
   document.writeln('<table border="1" cellSpacing="0" cellPadding="1">');
     n=colores(lluviasano[0]);
     m=colores(lluviasano[6]);
     //var x=(lluviasano[0]<0)?'n/a':lluviasano[0];
     document.writeln('<tr><td bgcolor="'+n[1] +'"><font size="1px" face="arial" color="' + n[2] +'"> Enero: '+ n[0] + '</font></td><td bgcolor="'+m[1] +'"><font size="1px" face="arial" color="' + m[2] +'"> Julio: '+ m[0] + '</font></td></tr>');
     n=colores(lluviasano[1]);
     m=colores(lluviasano[7]);
     //x=(lluviasano[1]<0)?'n/a':lluviasano[1];
     document.writeln('<tr><td bgcolor="'+n[1] +'"><font size="1px" face="arial" color="' + n[2] +'"> Febrero: '+ n[0] + '</font></td><td bgcolor="'+m[1] +'"><font size="1px" face="arial" color="' + m[2] +'"> Agosto: '+ m[0] + '</font></td></tr>');
     n=colores(lluviasano[2]);
     m=colores(lluviasano[8]);
     //x=(lluviasano[2]<0)?'n/a':lluviasano[2];
     document.writeln('<tr><td bgcolor="'+n[1] +'"><font size="1px" face="arial" color="' + n[2] +'"> Marzo: '+ n[0] + '</font></td><td bgcolor="'+m[1] +'"><font size="1px" face="arial" color="' + m[2] +'"> Septiembre: '+ m[0] + '</font></td></tr>');
     n=colores(lluviasano[3]);
     m=colores(lluviasano[9]);
     //x=(lluviasano[3]<0)?'n/a':lluviasano[3];
     document.writeln('<tr><td bgcolor="'+n[1] +'"><font size="1px" face="arial" color="' + n[2] +'"> Abril: '+ n[0] + '</font></td><td bgcolor="'+m[1] +'"><font size="1px" face="arial" color="' + m[2] +'"> Octubre: '+ m[0] + '</font></td></tr>');
     //x=(lluviasano[4]<0)?'n/a':lluviasano[4];
     n=colores(lluviasano[4]); m=colores(lluviasano[10]);
     document.writeln('<tr><td bgcolor="'+n[1] +'"><font size="1px" face="arial" color="' + n[2] +'"> Mayo: '+ n[0] + '</font></td><td bgcolor="'+m[1] +'"><font size="1px" face="arial" color="' + m[2] +'"> Noviembre: '+ m[0] + '</font></td></tr>');
     //x=(lluviasano[5]<0)?'n/a':lluviasano[5];
     n=colores(lluviasano[5]);  m=colores(lluviasano[11]);
     document.writeln('<tr><td bgcolor="'+n[1] +'"><font size="1px" face="arial" color="' + n[2] +'"> Junio: '+ n[0] + '</font></td><td bgcolor="'+m[1] +'"><font size="1px" face="arial" color="' + m[2] +'"> Diciembre: '+ m[0] + '</font></td></tr>');
   document.writeln('</table>');

  document.writeln('</td></tr></table>');
 
  /*
  document.writeln( '</td></tr>');
  document.writeln('<tr><td>');
  //poner cellpadding y cellspacing igual que en la tabla anterior
  document.writeln('<table height="10" cellSpacing="1" cellPadding="0" width="' + ancho +'" border="1">');
  document.writeln('<tr>'); 
  for (i=0; i<ncol; i++)  document.writeln('<td bgcolor="#aaaaaa" width="' + anchocelda +'" height="10" align="center" valign="top"><font size="1px" face="arial">' + meses[i] + '</font></td>');
  document.writeln('</tr>');
  document.writeln('</table>');

  document.writeln('</td></tr>');
 */
  document.writeln('</table>');
 }


 function tabla1(ncol,alto,ancho,lluviasano1,lluviasano2,ano1,ano2,tipo)
 //si tipo=0 es una barra normal y puede tener cualquier ancho, si tipo=1 es con bordes y ancho=17
 {
  var maximo=0;
  for (i=0; i<12;i++) if (lluviasano1[i]>maximo) maximo=lluviasano1[i];  //calcular el valor mas alto para ajustar la tabla
  for (i=0; i<12;i++) if (lluviasano2[i]>maximo) maximo=lluviasano2[i];  //calcular el valor mas alto para ajustar la tabla

  var anchocelda=17; //por si tipo=1
  if (tipo==0) anchocelda=ancho/ncol;
  else ancho=17*12*2;

  document.writeln('<table border="1" cellSpacing="0" cellPadding="0">');
  document.writeln('<tr><td><table width="100%" bgcolor="#ccccff" border="1" cellpaddign="2"><tr><td align="center"><b><font size="2px" face="arial">Comparativa aņos ' +ano1+' - '+ ano2+' </font></td></tr></table></tr>');
  document.writeln('<tr><td>');

  document.writeln('<table bgcolor="#ccccff" border="1" cellspacing="0" cellPadding="0" height="' + alto + '">');
  //document.writeln('<tr><td width="' + ancho +'" colspan="10" align="center"><b><font size="2px" face="arial">Aņo '+ ano+ '</font></b></td></tr>');
  document.writeln(' <tr><td>');
 
  document.writeln('<table bgcolor="#ccccff" border="1" cellSpacing="3" cellPadding="0" height="'+ alto + '" width="' + ancho +'">');
  document.writeln('<tr>');

 
  for(var i=0; i<ncol; i++)
   {
     document.writeln('<td><table border="0" cellspacing="0" cellpadding="0" width="'+anchocelda+'"><tr>');
     document.writeln('<td width="' + anchocelda + '" valign="bottom">');
     fila2(lluviasano1[i],maximo,anchocelda,alto,"#0000ff", tipo);
     document.writeln('</td>');
     document.writeln('<td width="' + anchocelda + '" valign="bottom">');
     fila2(lluviasano2[i],maximo,anchocelda,alto,"#ff0000", tipo);
     document.writeln('</td>');
     document.writeln('</tr><tr bgcolor="#99bb99">');
     var tcolor="#0";
     document.writeln('<td colspan="2" align="center"><font size="1px" face="arial" color="' + tcolor + '">' + meses[i] + '</font></td>'); 
     document.writeln('</tr></table></td>');

   }
  document.writeln('</tr>');
  //document.writeln('<tr height="10" bgcolor="#99bb99">');
    //if ((a1!=-5)&&(a2!=-5))  { fcolor="#99bb99"; tcolor="#0"; }
    //else  { fcolor="#999999"; tcolor="#dddddd"; }
  //var tcolor="#0";
  //for (p=0;p<12;p++)  document.writeln('<td colspan="1" align="center"><font size="1px" face="arial" color="' + tcolor + '">' + meses[p] + '</font></td>'); 
  document.writeln('</tr>');
  document.writeln('<tr>');
  document.writeln('<td align="right" valign="bottom" width="' + anchocelda*2 + '" height="15" colspan="1"><table width="15" height="15"bgcolor="#0000ff" border="1" cellspacing="0" cellPadding="0"><tr><td valign="bottom"><img src="iconos/pixelazul.jpg" border="0"></td></tr></table><font size="1px" face="arial"> '+ ano1+' </font></td>');
  document.writeln('<td align="right" valign="bottom" width="' + anchocelda*2 + '" height="15" colspan="1"><table width="15" height="15"bgcolor="#ff0000" border="1" cellspacing="0" cellPadding="0"><tr><td valign="bottom"><img src="iconos/pixelazul.jpg" border="0"></td></tr></table><font size="1px" face="arial"> '+ ano2+' </font></td>');
  document.writeln('<td align="right" valign="bottom" width="' + anchocelda*2 + '" height="15" colspan="2"><table width="15" height="15"bgcolor="#999999" border="1" cellspacing="0" cellPadding="0"><tr><td valign="bottom"><img src="iconos/pixelazul.jpg" border="0"></td></tr></table><font size="1px" face="arial">No hay datos</font></td>');
  document.writeln('</tr>');
  document.writeln('</table>');

  document.writeln('</td><td>');
  /*
    document.writeln('<table border="1" cellSpacing="0" cellPadding="1">');
     n=colores(lluviasano1[0]);
     m=colores(lluviasano1[6]);
     //var x=(lluviasano1[0]<0)?'n/a':lluviasano1[0];
     document.writeln('<tr><td bgcolor="'+n[1] +'"><font size="1px" face="arial" color="' + n[2] +'"> Enero: '+ n[0] + '</font></td><td bgcolor="'+m[1] +'"><font size="1px" face="arial" color="' + m[2] +'"> Julio: '+ m[0] + '</font></td></tr>');
     n=colores(lluviasano1[1]);
     m=colores(lluviasano[7]);
     //x=(lluviasano1[1]<0)?'n/a':lluviasano1[1];
     document.writeln('<tr><td bgcolor="'+n[1] +'"><font size="1px" face="arial" color="' + n[2] +'"> Febrero: '+ n[0] + '</font></td><td bgcolor="'+m[1] +'"><font size="1px" face="arial" color="' + m[2] +'"> Agosto: '+ m[0] + '</font></td></tr>');
     n=colores(lluviasano1[2]);
     m=colores(lluviasano1[8]);
     //x=(lluviasano1[2]<0)?'n/a':lluviasano1[2];
     document.writeln('<tr><td bgcolor="'+n[1] +'"><font size="1px" face="arial" color="' + n[2] +'"> Marzo: '+ n[0] + '</font></td><td bgcolor="'+m[1] +'"><font size="1px" face="arial" color="' + m[2] +'"> Septiembre: '+ m[0] + '</font></td></tr>');
     n=colores(lluviasano1[3]);
     m=colores(lluviasano1[9]);
     //x=(lluviasano1[3]<0)?'n/a':lluviasano1[3];
     document.writeln('<tr><td bgcolor="'+n[1] +'"><font size="1px" face="arial" color="' + n[2] +'"> Abril: '+ n[0] + '</font></td><td bgcolor="'+m[1] +'"><font size="1px" face="arial" color="' + m[2] +'"> Octubre: '+ m[0] + '</font></td></tr>');
     //x=(lluviasano1[4]<0)?'n/a':lluviasano1[4];
     n=colores(lluviasano1[4]); m=colores(lluviasano1[10]);
     document.writeln('<tr><td bgcolor="'+n[1] +'"><font size="1px" face="arial" color="' + n[2] +'"> Mayo: '+ n[0] + '</font></td><td bgcolor="'+m[1] +'"><font size="1px" face="arial" color="' + m[2] +'"> Noviembre: '+ m[0] + '</font></td></tr>');
     //x=(lluviasano1[5]<0)?'n/a':lluviasano1[5];
     n=colores(lluviasano1[5]);  m=colores(lluviasano1[11]);
     document.writeln('<tr><td bgcolor="'+n[1] +'"><font size="1px" face="arial" color="' + n[2] +'"> Junio: '+ n[0] + '</font></td><td bgcolor="'+m[1] +'"><font size="1px" face="arial" color="' + m[2] +'"> Diciembre: '+ m[0] + '</font></td></tr>');
   document.writeln('</table>');
**/
  document.writeln('</td></tr></table>');
 
  /*
  document.writeln( '</td></tr>');
  document.writeln('<tr><td>');
  //poner cellpadding y cellspacing igual que en la tabla anterior
  document.writeln('<table height="10" cellSpacing="1" cellPadding="0" width="' + ancho +'" border="1">');
  document.writeln('<tr>'); 
  for (i=0; i<ncol; i++)  document.writeln('<td bgcolor="#aaaaaa" width="' + anchocelda +'" height="10" align="center" valign="top"><font size="1px" face="arial">' + meses[i] + '</font></td>');
  document.writeln('</tr>');
  document.writeln('</table>');

  document.writeln('</td></tr>');
 */
  document.writeln('</table>');
 }