////////////////////////////////////////////////////////////////
// This script will display a calendar for the current month  //
// Copyright (c) 2007  -- T. Michael Clark & GrafX-Design.com //
////////////////////////////////////////////////////////////////


/////////////////
//  Variables  //
/////////////////

var monthNames = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December") ;

var dayNames = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"); 

var numberOfMonthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

var theDate = new Date();

var calendarDate = new Date();
calendarDate.setDate(1);
var firstDay = calendarDate.getDay();

var numberOfRows = Math.ceil((numberOfMonthDays[theDate.getMonth()] + firstDay)/7);

var totalDateFields = numberOfRows * 7;

var dates = new Array();

for(var i=0; i< totalDateFields; i++)
   dates[i] = "&nbsp;";
   
var count = 1;

for(var i=firstDay; i< numberOfMonthDays[theDate.getMonth()] + firstDay; i++)
   dates[i] = count++;


/////////////////////////////
//  Display the Month Name //
/////////////////////////////

document.write("<table bgcolor='#ffffff' style='font-size : 10px; border-width : 1px 1px 1px 1px; border-color : Black Black Black Black; border-style : solid solid solid solid; border-collapse : collapse;' width='215'>");
document.write("<tr bgcolor='cyan'>");
document.write("<td align='center' colspan='7'><strong>");
document.write(monthNames[theDate.getMonth()], " - ", theDate.getFullYear());
document.write("</strong></td>");
document.write("</tr>");


//////////////////////////////////////////
//  Display the Days of the Week Names  //
//////////////////////////////////////////

document.write("<tr bgcolor='#cccccc'>");
for(var i=0; i<dayNames.length; i++)
   document.write("<td align='center' width='14%'>", dayNames[i], "</td>");
document.write("</tr>");


/////////////////////////
//  Display the Dates  //
/////////////////////////

var count = 0;
for(var i=0; i<numberOfRows; i++)
{

document.write("<tr>");

for(var k=0; k<7; k++)
   {
      // If 'today' write the date in red,
      if (dates[k+count] == theDate.getDate())
	  {
	  	     document.write("<td align='center' valign='top'><strong><span style='color: red;'>", dates[k+count], "</span></strong></td>");
	  }
	  // otherwise write the date in black
	  else
      document.write("<td align='center' valign='top'>", dates[k+count], "</td>");
   }

count+=7;
   
document.write("</tr>");
}

document.write("</table>");

document.write("<table bgcolor='#ffffff' style='font-family : verdana, sans-serif; font-size : 12px; border-width : 0px 1px 1px 1px; border-color : Black Black Black Black; border-style : none solid solid solid; border-collapse : collapse;' width='215' cellpadding='5'>");

document.write("<tr><td align='center' style='font-size : 9px;'><a href='http://www.grafx-design.com'>www.grafx-design.com</a></td></tr>");


document.write("</table>");