function buildCal()
{
	var calDate = new Date();
	calDateField = arguments[0];
    calDateField.style.position = "relative";
	
	CalFrame = document.getElementById("spCal");
	if (CalFrame== undefined)
	 {
	    CalFrame =document.createElement("<iframe id='spCal' STYLE='display:none; border:ridge;position:absolute;width:200;height:150;z-index=100' MARGINHEIGHT='0' MARGINWIDTH='0' NORESIZE FRAMEBORDER='0' width:156 SCROLLING='NO'></iframe>"); 
    	document.body.insertBefore(CalFrame);
	 }
	else
	 {
		CalFrame = document.all.spCal;
	 }
	
    CalFrame.style.position = "absolute";
    CalFrame.style.left = calDateField.offsetLeft;
	
	var eT = calDateField.offsetTop; //window.event.srcElement.offsetTop;
	var eH = calDateField.offsetHeight;//window.event.srcElement.offsetHeight;
	var dH = CalFrame.style.pixelHeight;
	var sT = document.body.scrollTop;
	
	CalFrame.style.top = eT+eH;	
    if (calDateField.value == "")
		calDate = new Date();
	else {
		var lTargetYear;
		var lTargetMonth;
		var lTargetDay;
		var sSplitDate;
		sSplitDate = calDateField.value.split('/');
		lTargetDay = sSplitDate[0];
		lTargetMonth = sSplitDate[1] -1;
		lTargetYear = sSplitDate[2];
		calDate = new Date(lTargetYear, lTargetMonth, lTargetDay);
	}
	if (CalFrame.style.display == "block")
	{
		CalFrame.style.display = "none";
		return;
	}
	if (calDate.getDay())
  	  drawCal(calDate.getDay() + '/' + (calDate.getMonth() + 1) + '/' +  calDate.getFullYear())
	else
  	  drawCal(calDate.getDay() + '/' + (calDate.getMonth() + 2) + '/' +  calDate.getFullYear());
	//CalFrame.style.display = "inline";
	CalFrame.style.display = "none";
	CalFrame.style.display = "block";
}

function drawCal (sDate)
{
	var sHTML = new String();
	var lTargetYear;
	var lTargetMonth;
	var lTargetDay;
	var sSplitDate;
	var objPop;
	sSplitDate = sDate.split('/');
	lTargetDay = sSplitDate[0];
	lTargetMonth = sSplitDate[1] -1;
	lTargetYear = sSplitDate[2];
	
 	//Estilos para definir el look&feel del calendario
	sHTML += '<style>';
	sHTML += '.calHeading {background-color : Silver; border-top-style: outset; font: 8px Verdana;}'
	sHTML += '.calRegularDay {background-color : #FFCC99;}';
	sHTML += 'A.calRegularDay.HOVER {background-color : #FFCC99;}';
	sHTML += '.calReg, TD.calReg:ACTIVE, TD.calReg:FOCUS, TD.calReg:HOVER, TD.calReg:VISITED {';
	sHTML += 'background-color : #FFCC99; cursor: hand; 	display : block; font-size: 9pt; text-decoration: none;}';
	sHTML += 'TD.calReg:VISITED {	background-color : Blue;} </style>';
	 //Comienzo del Calendario	
	sHTML += '<table cellspacing=0 border=0 cellpadding=0>';
	sHTML += '<tr class="calHeading">';
	sHTML +=  '<td width=1><img src="dot.gif" width=1 height=1></td>';
	sHTML +=   '<td width=200><img src="dot.gif" width=200 height=1></td>';
	sHTML +=   '<td width=1><img src="dot.gif" width=1 height=1></td></tr>';
	sHTML +=  '<tr class="heading"><td width=1><img src="dot.gif" width=1 height="100%"></td>';
	sHTML +=  '<td width=200>';
    //document.write (sHTML);
    sHTML += DrawCalendarMonth(lTargetYear, lTargetMonth, lTargetDay);
    //DrawOtherDay(Date.getDay());
    // document.write (sHTML);
	sHTML +=  '</tr></table></td><td width=1><img src="dot.gif" width=1 height="100%"></td>';
	sHTML +=  '</tr>'; // & chr(13))
    sHTML +=  '<tr>';
    sHTML +=  '<td width=1><img src="dot.gif" width=1 height=1></td>'; //" & chr(13))
    sHTML +=  '<td width=200><img src="dot.gif" width=200 height=1></td>'; //" & chr(13))
    sHTML +=  '<td width=1><img src="dot.gif" width=1 height=1></td>'; //" & chr(13))
    sHTML +=  '</tr>' // & chr(13))
    sHTML +=  '</table>'; //" & chr(13))

	self.spCal.document.open();
	self.spCal.document.write(sHTML);
	self.spCal.document.close();
}

function DrawCalendarMonth(lYear, lMonth, lDay)
{
   var sCal = new String();
   var dcurrDate= new Date(lYear, lMonth, lDay);
   
	monthArray = new Array('Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre');
    weekdayList  = new Array('Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Friday', 'Sábado');
    weekdayArray = new Array('Do','Lu','Ma','Mi','Ju','Vi','Sa');
    var lDaysInMonth = GetDaysInMonth(dcurrDate.getMonth()+1, dcurrDate.getYear());
    var thisMonthFirstDay = new Date(dcurrDate.getYear(), dcurrDate.getMonth(), 1);
   
    var sNextYear = 1 + '/' + (thisMonthFirstDay.getUTCMonth()+ 1) + '/' + (thisMonthFirstDay.getFullYear() +1);
    var sPrevYear = 1 + '/' + (thisMonthFirstDay.getUTCMonth()+ 1) + '/' + (thisMonthFirstDay.getFullYear() -1);    
    var sNextMonth = 1 + '/' + (thisMonthFirstDay.getUTCMonth()+ 2) + '/' + (thisMonthFirstDay.getFullYear());
    var sPrevMonth = 1 + '/' + (thisMonthFirstDay.getUTCMonth()+ 0) + '/' + (thisMonthFirstDay.getFullYear());
     
   sCal = '<table width=200 bordercolor="white" border=1 style="border-collapse:collapse">' + '<tr class="heading" bgcolor="#FFCC33">';
   sCal += '<td style="cursor:hand;" onclick="javascript:parent.drawCal(\'' + sPrevYear +'\');" align=center><font face=verdana, arial size=1 color=#FFFFFF><b>&lt;&lt;</b></font></td>';
   sCal += '<td style="cursor:hand;" onclick="parent.drawCal(\'' + sPrevMonth +'\');" align=center><font face="verdana, arial" size=1 color=#FFFFFF><b>&lt;</b></font></td>';
   sCal += '<td colspan=3 align=center><font face="verdana, arial" size=1 color=#FFFFFF>' + monthArray[dcurrDate.getMonth()] + '<br>' + dcurrDate.getFullYear() + '</font></td>';
   //self.onerror = alert('Error in draw occured');
   sCal += '<td style="cursor:hand;" onclick="parent.drawCal(\'' + sNextMonth +'\');" align=center><font face="verdana, arial" size=1 color=#FFFFFF><b>&gt;</b></font></td>';
   sCal += '<td style="cursor:hand;" onclick="parent.drawCal(\'' + sNextYear +'\');" align=center><font face="verdana, arial"  size=1 color=#FFFFFF><b>&gt;&gt;</b></font></td>';
   sCal += '</tr>';
   //document.write(sCal);
 weekdays = '<tr bgcolor="#FF9933">';
		for (i in weekdayArray) {
	
			weekdays += '<td width="14%" align=center><font face="verdana, arial" size=1 color=#FFFFFF>' + weekdayArray[i] +'</font></td>';
		}
		weekdays += '</TR><TR>';
  sCal += weekdays;
  for (i=0; i < thisMonthFirstDay.getDay(); i++)  
		sCal += DrawOtherDay(thisMonthFirstDay.getDay() - i, dcurrDate);
  
  for (i=1; i < lDaysInMonth+1; i++) {
		dcurrDate.setDate(i);
		sCal += DrawNormalDay(i, dcurrDate);
		
		if (dcurrDate.getDay() ==6) //Si es sábado => nueva linea
				sCal +='</tr><tr>';      
	}
 return sCal;
}

function DrawOtherDay(lDayOffset, dDate)
{
 var DayNumber;
 var dWorkingDate = new Date(dDate.getYear(), dDate.getMonth(), (- lDayOffset) + 1) 
 var sTemp = new String(); 
 DayNumber = dWorkingDate.getDate();
 sTemp = '<td bgcolor="#eeeeee" align=center>';
 sTemp += '<font face="verdana, arial" size=2 color="darkgray" style="font-size: 9pt;">';
 sTemp += DayNumber + '</font></td>';
 return sTemp;
}

function DrawNormalDay(DayNumber, dDate)
{
  var sDayDate = new String();
  var sTemp = new String(); 
  sDayDate = DayNumber + '/' + (dDate.getMonth() + 1) + '/' + dDate.getFullYear();
  sTemp += '<td class="calReg" ';
  sTemp += 'onclick="javascript:parent.calDateField.value=(\'' + sDayDate + '\'); parent.HideCal();"';
  //sTemp += 'onmouseover="this.style.backgroundColor=\'white\';"';
  //sTemp += 'onmouseout="this.style.backgroundColor=\'#cccccc\';" ';
  sTemp += ' align=center>';
  sTemp += '<font face="verdana, arial"><a href="#" onclick="void(\'' + sDayDate + '\');"><font color=#000000 style="text-decoration: none;"><b>' + DayNumber + '</b></font></a>';
  sTemp +='</font></td>';
  return sTemp;
}

function HideCal()
{
	CalFrame.style.display = "none"
}

function GetNextMonth(dCurrentDate) {
	var lbmonth;
	var lbyear;
	    // Si el mes es Diciembre, mes=Enero y año++
        if (dCurrentDate.getMonth == 11) {
            dCurrentDate.setMonth(0);
            dCurrentDate.setYear(dCurrentDate.getYear() + 1);
        }
        else {
            dCurrentDate.setMonth(dCurrentDate.getMonth() + 1);
        }
        return dCurrentDate;
}

function GetDaysInMonth(iMonth, iYear) 
{
	var dPrevDate = new Date(iYear, iMonth, 0);
	return dPrevDate.getDate();
}