Hey Folks,

I am working on a calendar using javascript to make it a little more fun. Right now it does everything I want, when you mouse over a date the background color of the td element changes color, and when you mouseout the td background color returns to wat it was orginally. And if you click on a certain date it changes the background-color to a different color.

Here is what I need help with. If I click on say the 10th and then click on the 15th I want the days 10- 15 to all be the same background color. Let me know if I am explaining this properly.

Here is my code so far:
Code HTML4Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta name="keywords" content="Test"/>	
<meta name="description" content="Test"/>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
 
  .normal { color:#660000; padding:10px }
 
  .highlight { color:#660000; padding:10px; background-color:#dddddd }
 
  .selected { color:#eeeeee; background-color:#676767; }
</style>
<script type="text/javascript">
/* <![CDATA[*/
 
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
 
function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}
 
 
 
function highlightCell() {
  if(!document.getElementsByTagName) return false;
  var tbodies = document.getElementsByTagName("table");
  for (var j=0; j<tbodies.length; j++) {
     var rows = tbodies[j].getElementsByTagName("td");
     for (var i=0; i<rows.length; i++) {
           rows[i].oldClassName = rows[i].className;
           rows[i].onmouseover = function() {
 
              if( this.className.indexOf("selected") == -1)
                 addClass(this,"highlight");
 
           }
           rows[i].onmouseout = function() {
              if( this.className.indexOf("selected") == -1)
                 this.className = this.oldClassName
           }
     }
  }
}
 
 
 
function clickDate() {
 
  	  if(!document.getElementsByTagName) return false;
  var tbodies = document.getElementsByTagName("table");
  for (var j=0; j<tbodies.length; j++) {
     var rows = tbodies[j].getElementsByTagName("td");
     for (var i=0; i<rows.length; i++) {
        rows[i].oldClassName = rows[i].className
        rows[i].onclick = function() {
 
              if( this.className.indexOf("selected") != -1) {
 
 
                 this.className = this.oldClassName;
 
 
                 } else {
                 addClass(this,"selected");
 
 
                 //now we also need to highlight anyother cells if we have two clicked cells
 
                 }
 
           }
 
 
     }
  }
}	
  		/*]]>*/
 
addLoadEvent(highlightCell);		
addLoadEvent(clickDate);	
 
</script>
 
 
 
</head>
<body>
<table style="border-collapse:collapse; font-size:16px; padding:10px; cursor:pointer"><tr style="font-weight:bold; background-color:#333333; color:#ffffff; padding:10px"><th >Sun</th><th >Mon</th><th >Tues</th><th >Wed</th><th >Thu</th><th >Fri</th><th >Sat</th></tr>
<tr style="background-color:#eeeeee"><td id="skbetd1" class="normal">1</td><td id="skbetd2" class="normal">2</td><td id="skbetd3" class="normal">3</td><td id="skbetd4" class="normal">4</td><td id="skbetd5" class="normal">5</td><td id="skbetd6" class="normal">6</td><td id="skbetd7" class="normal">7</td></tr>
 
<tr ><td id="skbetd8" class="normal">8</td><td id="skbetd9" class="normal">9</td><td id="skbetd10" class="normal">10</td><td id="skbetd11" class="normal">11</td><td id="skbetd12" class="normal">12</td><td id="skbetd13" class="normal">13</td><td id="skbetd14" class="normal">14</td></tr>
<tr style="background-color:#eeeeee"><td id="skbetd15" class="normal">15</td><td id="skbetd16" class="normal">16</td><td id="skbetd17" class="normal">17</td><td id="skbetd18" class="normal">18</td><td id="skbetd19" class="normal">19</td><td id="skbetd20" class="normal">20</td><td id="skbetd21" class="normal">21</td></tr>
 
<tr ><td id="skbetd22" class="normal">22</td><td id="skbetd23" class="normal">23</td><td id="skbetd24" class="normal">24</td><td id="skbetd25" class="normal">25</td><td id="skbetd26" class="normal">26</td><td id="skbetd27" class="normal">27</td><td id="skbetd28" class="normal">28</td></tr>
 
<tr style="background-color:#eeeeee"><td id="skbetd29" class="normal">29</td><td id="skbetd30" class="normal">30</td><td id="skbetd31" class="normal">31</td><td colspan='4'>&nbsp;</td>
</tr></table></body>
</html>

Any guidance would be much appreciated, thanks!