function colorFade(id,element,start,end,steps,speed) {
  var startrgb,endrgb,er,eg,eb,step,rint,gint,bint,step;
  var target = document.getElementById(id);
  steps = steps || 20;
  speed = speed || 20;
  clearInterval(target.timer);
  endrgb = colorConv(end);
  er = endrgb[0];
  eg = endrgb[1];
  eb = endrgb[2];
  if(!target.r) {
    startrgb = colorConv(start);
    r = startrgb[0];
    g = startrgb[1];
    b = startrgb[2];
    target.r = r;
    target.g = g;
    target.b = b;
  }
  rint = Math.round(Math.abs(target.r-er)/steps);
  gint = Math.round(Math.abs(target.g-eg)/steps);
  bint = Math.round(Math.abs(target.b-eb)/steps);
  if(rint == 0) { rint = 1 }
  if(gint == 0) { gint = 1 }
  if(bint == 0) { bint = 1 }
  target.step = 1;
  target.timer = setInterval( function() { animateColor(id,element,steps,er,eg,eb,rint,gint,bint) }, speed);
}

// incrementally close the gap between the two colors //
function animateColor(id,element,steps,er,eg,eb,rint,gint,bint) {
  var target = document.getElementById(id);
  var color;
  if(target.step <= steps) {
    var r = target.r;
    var g = target.g;
    var b = target.b;
    if(r >= er) {
      r = r - rint;
    } else {
      r = parseInt(r) + parseInt(rint);
    }
    if(g >= eg) {
      g = g - gint;
    } else {
      g = parseInt(g) + parseInt(gint);
    }
    if(b >= eb) {
      b = b - bint;
    } else {
      b = parseInt(b) + parseInt(bint);
    }
    color = 'rgb(' + r + ',' + g + ',' + b + ')';
    if(element == 'background') {
      target.style.backgroundColor = color;
    } else if(element == 'border') {
      target.style.borderColor = color;
    } else {
      target.style.color = color;
    }
    target.r = r;
    target.g = g;
    target.b = b;
    target.step = target.step + 1;
  } else {
    clearInterval(target.timer);
    color = 'rgb(' + er + ',' + eg + ',' + eb + ')';
    if(element == 'background') {
      target.style.backgroundColor = color;
    } else if(element == 'border') {
      target.style.borderColor = color;
    } else {
      target.style.color = color;
    }
  }
}

// convert the color to rgb from hex //
function colorConv(color) {
  var rgb = [parseInt(color.substring(0,2),16), 
    parseInt(color.substring(2,4),16), 
    parseInt(color.substring(4,6),16)];
  return rgb;
}

// -- Final del color fader



var getCalendario = null;
var xmlCalendario = null;
var CualMes=0;

function CrearCalendario(QueMes){
	
	if (window.XMLHttpRequest){
		getCalendario=new XMLHttpRequest()
	}else if (window.ActiveXObject){
		getCalendario=new ActiveXObject("Microsoft.XMLHTTP")
	}
	if (getCalendario){
		var url="/ca/jp/calendario";
		getCalendario.onreadystatechange=CambioDeEstado;
		getCalendario.open("GET",url,true);
		getCalendario.send();
		CualMes=QueMes;
	}else{
		alert ("Tu explorador no soporta XMLHttpRequest");
	}
}

function CambioDeEstado(){
	if (getCalendario.readyState == 4){
		xmlCalendario = getCalendario.responseXML;
		xmlCalendario = xmlCalendario.getElementsByTagName('cita');
		setCal(CualMes);
	} 
} 

function bisiesto(Anio) {
	if (Anio % 4 == 0)
	return true
	return false
}

function diasPorMes(mes, Anio) {
var meses = new Array(12)
meses[1] = 31; // Enero
meses[2] = (((Anio % 4 == 0) && (Anio % 100 != 0)) || (Anio % 400 == 0)) ? 29 : 28
meses[3] = 31 // Marzo
meses[4] = 30 // Abril
meses[5] = 31 // Mayo
meses[6] = 30 // Junio
meses[7] = 31 // Julio
meses[8] = 31 // Agosto
meses[9] = 30 // Septiembre
meses[10] = 31 // Octubre
meses[11] = 30 // Noviembre
meses[12] = 31 // Diciembre
return meses[mes]
}

function getNombreDelMes(mes) {
var meses = new Array(12)
meses[1] = "Gener"
meses[2] = "Febrer"
meses[3] = "Mar&ccedil;"
meses[4] = "Abril"
meses[5] = "Maig"
meses[6] = "Juny"
meses[7] = "Juliol"
meses[8] = "Agost"
meses[9] = "Setembre"
meses[10] = "Octubre"
meses[11] = "Novembre"
meses[12] = "Desembre"
return meses[mes]
}

function setCal(QueMes) {
	var now = new Date()
	var anio = now.getYear()
	if (anio < 1000) {anio+=1900}
	var mes = now.getMonth()+QueMes
	if (now.getMonth()+QueMes > 11) {mes-=12;anio++}
	if (now.getMonth()+QueMes < 0) {mes+=12;anio--}
	var fecha = now.getDate()
	var primerDia = new Date(anio, mes, 1)
	var primerDia2 = primerDia.getDay() - 1
	if (primerDia2 < 0) {primerDia2=6}
	primerDia = null
	var dias = diasPorMes(mes+1, anio)
	drawCal(primerDia2 + 1, dias, fecha, mes+1, anio)
}

function drawCal(firstDay, lastDate, date, Mes, Anio) {
var now = new Date()
var codigo = ""

/*codigo += '<ul id="cal" style="padding: 0;margin:0;">'
codigo += '<li class="izquierda"><a value="" onClick="CrearCalendario(--MesSeleccionado)"></a></li>'
codigo += '<li class="mes">'
codigo += getNombreDelMes(Mes) + ' ' + Anio 
codigo += '</li>'
codigo += '<li class="derecha"><a type="button" value="" onClick="CrearCalendario(++MesSeleccionado)"></a></li>'
codigo += '</ul>'
*/

codigo += '<table width="100%" class="cabecera"><tr width="100%">'
codigo += '<td class="izquierda"><a value="" onClick="CrearCalendario(--MesSeleccionado)"></a></td>'
codigo += '<td class="mes">'
codigo += getNombreDelMes(Mes) + ' ' + Anio 
codigo += '</td>'
codigo += '<td class="derecha"><a type="button" value="" onClick="CrearCalendario(++MesSeleccionado)"></a></td>'
codigo += '</tr></table>'


var diasSemana = new Array(7)
diasSemana[0] = "<acronym title=\"Dilluns\">DL</acronym>"
diasSemana[1] = "<acronym title=\"Dimarts\">DM</acronym>"
diasSemana[2] = "<acronym title=\"Dimecres\">DX</acronym>"
diasSemana[3] = "<acronym title=\"Dijous\">DJ</acronym>"
diasSemana[4] = "<acronym title=\"Divendres\">DV</acronym>"
diasSemana[5] = "<acronym title=\"Dissabte\">DS</acronym>"
diasSemana[6] = "<acronym title=\"Diumenge\">DG</acronym>"

codigo += '<table class="taula_calendari">'
codigo += '<tr>'
for (var dayNum = 0; dayNum < 7; ++dayNum) {
codigo += '<td class="dia">' + diasSemana[dayNum] + '</td>';
}
codigo += '</tr>'


var cDia = 1
var curCell = 1

for (var row = 1; row <= Math.ceil((lastDate + firstDay) / 7); ++row) {
	codigo += '<tr>'
for (var col = 1; col <= 7; ++col) {

if (cDia > lastDate)
break
if (curCell < firstDay) {
codigo += '<td></td>';
curCell++
} else {
var textoCelda = cDia;
var textoTd = '<td>';

var aux=0,rojo=false,amarillo=false,verde=false;
for (i=0;i<xmlCalendario.length;i++){
	var cadena=new Array();
	var fecha = xmlCalendario[i].getAttribute('fecha');

	if (fecha == cDia+ "-" + Mes + "-" + Anio){
		var titulo = xmlCalendario[i].getAttribute('titulo');
		var descripcion = xmlCalendario[i].getAttribute('descripcion');
		var url = xmlCalendario[i].getAttribute('url');
		var tipo = xmlCalendario[i].getAttribute('tipo');
				
		if(tipo!=undefined){
			cadena[i]=tipo;	
			if(cadena[i]=="rojo"){ rojo=true; }
			if(cadena[i]=="amarillo"){ amarillo=true; }
			if(cadena[i]=="verde"){ verde=true; }
		}
		
		if(rojo==true && amarillo==true && verde==true){
			textoCelda = '<a href="#calendari" onclick="javascript:_Ajax(\'' + fecha + '\'); window.location.hash=\'calendario\';" alt="'+titulo+'" title="'+titulo+'" class="rojo_verde_amarillo">' + cDia + '</a>';
		}
		else if(rojo==true && amarillo==true && verde==false){
			textoCelda = '<a href="#calendari" onclick="javascript:_Ajax(\'' + fecha + '\'); window.location.hash=\'calendario\';" alt="'+titulo+'" title="'+titulo+'" class="rojo_amarillo">' + cDia + '</a>';
		}
		else if(rojo==true && verde==true && amarillo==false){
			textoCelda = '<a href="#calendari" onclick="javascript:_Ajax(\'' + fecha + '\'); window.location.hash=\'calendario\';" alt="'+titulo+'" title="'+titulo+'" class="rojo_verde">' + cDia + '</a>';
		}
		else if(amarillo==true && verde==true && rojo==false){
			textoCelda = '<a href="#calendari" onclick="javascript:_Ajax(\'' + fecha + '\'); window.location.hash=\'calendario\';" alt="'+titulo+'" title="'+titulo+'" class="amarillo_verde">' + cDia + '</a>';
		}
		else if(rojo==true && verde==false && amarillo==false){
			textoCelda = '<a href="#calendari" onclick="javascript:_Ajax(\'' + fecha + '\'); window.location.hash=\'calendario\';" alt="'+titulo+'" title="'+titulo+'" class="solorojo">' + cDia + '</a>';
		}
		else if(amarillo==true && rojo==false && verde==false){
			textoCelda = '<a href="#calendari" onclick="javascript:_Ajax(\'' + fecha + '\'); window.location.hash=\'calendario\';" alt="'+titulo+'" title="'+titulo+'" class="amarillo">' + cDia + '</a>';
		}
		else if(verde==true && amarillo==false && rojo==false){
			textoCelda = '<a href="#calendari" onclick="javascript:_Ajax(\'' + fecha + '\'); window.location.hash=\'calendario\';" alt="'+titulo+'" title="'+titulo+'" class="verde">' + cDia + '</a>';
		}
		else{
			textoCelda = '<a href="#calendari" onclick="javascript:_Ajax(\'' + fecha + '\'); window.location.hash=\'calendario\';" alt="'+titulo+'" title="'+titulo+'">' + cDia + '</a>';
		}
		
		//textoCelda = '<a href="javascript:void(0);" onclick="javascript:_Ajax(\'' + fecha + '\'); window.location.hash=\'calendario\';" alt="'+titulo+'" title="'+titulo+'" id="selected">' + cDia + '</a>';
	
			for (j=i+1;j<xmlCalendario.length;j++){
				var fecha = xmlCalendario[j].getAttribute('fecha');
				var tipo = xmlCalendario[j].getAttribute('tipo');
				
				if (fecha == cDia+ "-" + Mes + "-" + Anio){
					if(tipo!=undefined){
						cadena[j]=tipo;	
						if(cadena[j]=="rojo"){ rojo=true; }
						if(cadena[j]=="amarillo"){ amarillo=true; }
						if(cadena[j]=="verde"){ verde=true; }
					}

					titulo += ' - ' + xmlCalendario[j].getAttribute('titulo');
					descripcion += ' - ' + xmlCalendario[j].getAttribute('descripcion');
					
					if(rojo==true && amarillo==true && verde==true){
						textoCelda = '<a href="javascript:void(0);" onclick="javascript:_Ajax(\'' + fecha + '\'); window.location.hash=\'calendario\';" alt="'+titulo+'" title="'+titulo+'" class="rojo_verde_amarillo">' + cDia + '</a>';
					}
					else if(rojo==true && amarillo==true && verde==false){
						textoCelda = '<a href="javascript:void(0);" onclick="javascript:_Ajax(\'' + fecha + '\'); window.location.hash=\'calendario\';" alt="'+titulo+'" title="'+titulo+'" class="rojo_amarillo">' + cDia + '</a>';
					}
					else if(rojo==true && verde==true && amarillo==false){
						textoCelda = '<a href="javascript:void(0);" onclick="javascript:_Ajax(\'' + fecha + '\'); window.location.hash=\'calendario\';" alt="'+titulo+'" title="'+titulo+'" class="rojo_verde">' + cDia + '</a>';
					}
					else if(amarillo==true && verde==true && rojo==false){
						textoCelda = '<a href="javascript:void(0);" onclick="javascript:_Ajax(\'' + fecha + '\'); window.location.hash=\'calendario\';" alt="'+titulo+'" title="'+titulo+'" class="amarillo_verde">' + cDia + '</a>';
					}
					else if(rojo==true && verde==false && amarillo==false){
						textoCelda = '<a href="javascript:void(0);" onclick="javascript:_Ajax(\'' + fecha + '\'); window.location.hash=\'calendario\';" alt="'+titulo+'" title="'+titulo+'" class="solorojo">' + cDia + '</a>';
					}
					else if(amarillo==true && rojo==false && verde==false){
						textoCelda = '<a href="javascript:void(0);" onclick="javascript:_Ajax(\'' + fecha + '\'); window.location.hash=\'calendario\';" alt="'+titulo+'" title="'+titulo+'" class="amarillo">' + cDia + '</a>';
					}
					else if(verde==true && amarillo==false && rojo==false){
						textoCelda = '<a href="javascript:void(0);" onclick="javascript:_Ajax(\'' + fecha + '\'); window.location.hash=\'calendario\';" alt="'+titulo+'" title="'+titulo+'" class="verde">' + cDia + '</a>';
					}
					else{
						textoCelda = '<a href="javascript:void(0);" onclick="javascript:_Ajax(\'' + fecha + '\'); window.location.hash=\'calendario\';" alt="'+titulo+'" title="'+titulo+'">' + cDia + '</a>';
					}
					
					//textoCelda = '<a href="javascript:void(0);" onclick="javascript:_Ajax(\'' + fecha + '\'); window.location.hash=\'calendario\';" alt="'+titulo+'" title="'+titulo+'">' + cDia + '</a>';
				}
				//break;
			}	
			
		textoTd = '<td>';
					
		break;
	}
}

if (cDia == date && Mes == now.getMonth()+1) {
textoTd = '<td>';
}

codigo += textoTd + textoCelda + '</td>';
cDia++
}
}
codigo += '</tr>';
}

codigo += '</table>';
document.getElementById("calendario").innerHTML=codigo;
}



function XMLHttp(){
var Object;
if (typeof XMLHttpRequest == "undefined" )
{
if(navigator.userAgent.indexOf('MSIE 5') >= 0)
{ Object= new ActiveXObject("Microsoft.XMLHTTP");}
else
{ Object=new ActiveXObject("Msxml2.XMLHTTP");}
}
else
{ Object=new XMLHttpRequest();}
return Object;
}

var ajax=XMLHttp();


function _Ajax(dia)
{
<!--var nombre=document.getElementById('nombre').value;-->
var nombre = dia;
ajax.open("GET","/ca/jp/calendario?day="+nombre,true);
// http://www.jordipujol.cat/ca/jp/calendario?day=24-10-2011
//window.alert("/ca/jp/calendario?day="+nombre);
//ajax.open("GET","http://www.red-online.es/jordi_calendar/texto.html?day="+nombre,true);
ajax.onreadystatechange=function() {
	if(ajax.readyState==4) {
		var respuesta=ajax.responseText;
		document.getElementById('resultado').innerHTML=respuesta;
		colorFade('resultat_calendari_title','background','444444','ffffaa', 75, 20)
	}
}
ajax.send(null);
}