<!-- T-Ball schedule generated Sun Mar 10 20:58:30 2013 -->
<form style="border-width:0px">
<br />
Highlight: <br />
<table style="border:0px">
<tr style="border:0px;padding:5px">
<td>
<input class="AllButton"
id="AthleticsButton"
type="button"
style="width:110px;background-color:#99CCFF;border-style:solid;border-width:medium;border-color:#1F2933"
value="Athletics"
onclick="handleClick('Athletics')" />
</td>
<td>
<input class="AllButton"
id="GiantsButton"
type="button"
style="width:110px;background-color:#99CCFF;border-style:solid;border-width:medium;border-color:#1F2933"
value="Giants"
onclick="handleClick('Giants')" />
</td>
<td>
<input class="AllButton"
id="IndiansButton"
type="button"
style="width:110px;background-color:#99CCFF;border-style:solid;border-width:medium;border-color:#1F2933"
value="Indians"
onclick="handleClick('Indians')" />
</td>
<td>
<input class="AllButton"
id="Red_SoxButton"
type="button"
style="width:110px;background-color:#99CCFF;border-style:solid;border-width:medium;border-color:#1F2933"
value="Red Sox"
onclick="handleClick('Red_Sox')" />
</td>
</tr>
<tr style="border:0px;padding:5px">
<td>
<input class="AllButton"
id="TodayButton"
type="button"
style="width:110px;background-color:#E1E1E1;border-style:solid;border-width:medium;border-color:#1F2933"
value="Today"
onclick="handleClick('Today')" />
</td>
<td>
<input class="AllButton"
id="NextButton"
type="button"
style="width:110px;background-color:#E1E1E1;border-style:solid;border-width:medium;border-color:#1F2933"
value="Next"
onclick="handleClick('Next')" />
</td>
<td>
<input class="AllButton"
id="ClearButton"
type="button"
style="width:110px;background-color:#E1E1E1;border-style:solid;border-width:medium;border-color:#1F2933"
value="Clear"
onclick="handleClick('Clear')" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
document.title = 'T-Ball Schedule - Sunnyvale Metro Little League';
var FutureNoHighlight = 'rgb(255,255,178)'; // pale yellow #ffffb2
var FutureHighlight = 'rgb(255,255,0)'; // bright yellow #ffff00
var PastNoHighlight = 'rgb(194,194,194)'; // gray #c2c2c2
var PastHighlight = 'rgb(102,255,255)'; // light blue #66ffff
var HexFutureNoHighlight = '#ffffb2';
var HexPastNoHighlight = '#c2c2c2';
var darkBorder = 'rgb(31,41,51)'; // dark blue #1F2933
var yellowBorder = 'rgb(255,255,0)'; // bright yellow #FFFF00
function getDateString(indate) {
var year = indate.getFullYear();
var month = indate.getMonth() + 1; // Javascript months go 0 to 11
var day = indate.getDate();
var mstring = month.toString();
if (mstring.length == 1) {
mstring = "0" + mstring;
}
var dstring = day.toString();
if (dstring.length == 1) {
dstring = "0" + dstring;
}
return(year.toString() + mstring + dstring);
}
function get_today() {
return(new Date());
}
function get_todaystring() {
return(getDateString(get_today()));
}
var onloadtodaystring = get_todaystring();
var nextdate = get_today();
var nextdatestring = getDateString(nextdate);
var hArray =
['Num', 'DateString', 'Date', 'Day', 'Time', 'Visitor', 'Home', 'Field', 'Notes', 'Class'];
var numcols = hArray.length;
var sArray = [
[1, "20130316", "3/16/13", "Sat", "1:00 PM", "Red Sox", "Indians", "Panama 2", "", "AllRows Red_Sox Indians D20130316"],
[2, "20130316", "3/16/13", "Sat", "2:00 PM", "Giants", "Athletics", "Panama 2", "", "AllRows Giants Athletics D20130316"],
[3, "20130323", "3/23/13", "Sat", "10:00 AM", "Athletics", "Giants", "Panama 2", "", "AllRows Athletics Giants D20130323"],
[4, "20130323", "3/23/13", "Sat", "2:00 PM", "Indians", "Red Sox", "Panama 2", "", "AllRows Indians Red_Sox D20130323"],
[5, "20130330", "3/30/13", "Sat", "10:00 AM", "Red Sox", "Athletics", "Panama 2", "", "AllRows Red_Sox Athletics D20130330"],
[6, "20130330", "3/30/13", "Sat", "2:00 PM", "Giants", "Indians", "Panama 2", "", "AllRows Giants Indians D20130330"],
[7, "20130406", "4/6/13", "Sat", "10:00 AM", "Athletics", "Red Sox", "Panama 2", "", "AllRows Athletics Red_Sox D20130406"],
[8, "20130406", "4/6/13", "Sat", "2:00 PM", "Indians", "Giants", "Panama 2", "", "AllRows Indians Giants D20130406"],
[9, "20130420", "4/20/13", "Sat", "10:00 AM", "Giants", "Indians", "Panama 2", "", "AllRows Giants Indians D20130420"],
[10, "20130420", "4/20/13", "Sat", "2:00 PM", "Red Sox", "Athletics", "Panama 2", "", "AllRows Red_Sox Athletics D20130420"],
[11, "20130427", "4/27/13", "Sat", "10:00 AM", "Red Sox", "Giants", "Panama 2", "", "AllRows Red_Sox Giants D20130427"],
[12, "20130427", "4/27/13", "Sat", "2:00 PM", "Athletics", "Indians", "Panama 2", "", "AllRows Athletics Indians D20130427"],
[13, "20130504", "5/4/13", "Sat", "10:00 AM", "Giants", "Athletics", "Panama 2", "", "AllRows Giants Athletics D20130504"],
[14, "20130504", "5/4/13", "Sat", "2:00 PM", "Red Sox", "Indians", "Panama 2", "", "AllRows Red_Sox Indians D20130504"],
[15, "20130511", "5/11/13", "Sat", "10:00 AM", "Athletics", "Giants", "Panama 2", "", "AllRows Athletics Giants D20130511"],
[16, "20130511", "5/11/13", "Sat", "2:00 PM", "Indians", "Red Sox", "Panama 2", "", "AllRows Indians Red_Sox D20130511"],
[17, "20130518", "5/18/13", "Sat", "10:00 AM", "Giants", "Red Sox", "Panama 2", "", "AllRows Giants Red_Sox D20130518"],
[18, "20130518", "5/18/13", "Sat", "2:00 PM", "Indians", "Athletics", "Panama 2", "", "AllRows Indians Athletics D20130518"],
[19, "20130525", "5/25/13", "Sat", "10:00 AM", "Athletics", "Giants", "Panama 2", "", "AllRows Athletics Giants D20130525"],
[20, "20130525", "5/25/13", "Sat", "2:00 PM", "Red Sox", "Indians", "Panama 2", "", "AllRows Red_Sox Indians D20130525"],
[21, "20130601", "6/1/13", "Sat", "10:00 AM", "Giants", "Athletics", "Panama 2", "", "AllRows Giants Athletics D20130601"],
[22, "20130601", "6/1/13", "Sat", "2:00 PM", "Indians", "Red Sox", "Panama 2", "", "AllRows Indians Red_Sox D20130601"]
];
var numrows = sArray.length;
var lastdatestring = sArray[numrows-1][1];
var breakpoint = numrows;
function cellfontweight(row, weight) {
tdelements = row.getElementsByTagName("td");
for (var j = 0; j < tdelements.length; j++) {
tdelements[j].style.fontWeight = weight;
}
}
function getDateFromId(idstring) {
// given id of the form "nn_yyyymmdd"
// return string "yyyymmdd"
var i = idstring.indexOf("_");
return(idstring.slice(i+1));
}
function handleClick(teamname) {
todaystring = get_todaystring();
if (todaystring > onloadtodaystring) {
nextdate = get_today();
nextdatestring = getDateString(nextdate);
dd = document.getElementById('sched_div_id');
tt = document.getElementById('sched_table_id');
dd.removeChild(tt);
build_table();
onloadtodaystring = todaystring;
}
// clear all rows
var myArray = document.getElementsByClassName('AllRows');
for (var i = 0; i < myArray.length; i++) {
cellfontweight(myArray[i], "normal");
var rowid = myArray[i].id;
var datestring = getDateFromId(rowid); // yyyymmdd
if (datestring >= todaystring) {
myArray[i].style.backgroundColor = FutureNoHighlight;
}
else {
myArray[i].style.backgroundColor = PastNoHighlight;
}
}
// clear all buttons
var buttonArray = document.getElementsByClassName('AllButton');
for (var i = 0; i < buttonArray.length; i++) {
buttonArray[i].style.borderColor = darkBorder
}
if (teamname != 'Next' && teamname != 'Today') {
nextdate = get_today();
nextdatestring = getDateString(nextdate);
}
if (teamname != 'Clear') {
if (teamname == 'Today') {
myArray = document.getElementsByClassName('D' + todaystring);
nextdate = get_today();
nextdate.setDate(nextdate.getDate() + 1);
nextdatestring = getDateString(nextdate);
}
else if (teamname == 'Next') {
for (var i = 0; i < 14; i++) {
myArray = document.getElementsByClassName('D' + nextdatestring);
nextdate.setDate(nextdate.getDate() + 1);
nextdatestring = getDateString(nextdate);
if (nextdatestring > lastdatestring) {
nextdate = get_today();
nextdatestring = getDateString(nextdate);
}
if (myArray.length > 0) {
break;
}
}
}
else {
myArray = document.getElementsByClassName(teamname);
}
for (var i = 0; i < myArray.length; i++) {
cellfontweight(myArray[i], "bold");
var rowid = myArray[i].id;
var datestring = getDateFromId(rowid); // yyyymmdd
if (datestring >= todaystring) {
myArray[i].style.backgroundColor = FutureHighlight;
}
else {
myArray[i].style.backgroundColor = PastHighlight;
}
}
buttonid = teamname + 'Button';
document.getElementById(buttonid).style.borderColor = yellowBorder;
}
}
function add_header(value_array, color) {
// pass in hex color such as '#ffffb2'
var newheader = document.createElement('tr');
for (var j=2; j < numcols-2; j++) {
var newcell = document.createElement('th');
var textnode = document.createTextNode(value_array[j]);
newcell.appendChild(textnode);
newheader.appendChild(newcell);
}
newheader.setAttribute('style', 'background-color:' + color);
newheader.setAttribute('align', 'center');
return(newheader);
}
function add_row(value_array, color) {
// pass in hex color such as '#ffffb2'
var newrow = document.createElement('tr');
for (var j=2; j < numcols-2; j++) {
var newcell = document.createElement('td');
var textnode = document.createTextNode(value_array[j]);
newcell.appendChild(textnode);
newrow.appendChild(newcell);
}
newrow.setAttribute('style', 'background-color:' + color);
newrow.setAttribute('align', 'center');
newrow.setAttribute('id', 'n' + value_array[0].toString() + '_' + value_array[1]);
newrow.setAttribute('class', value_array[9]);
return(newrow);
}
function build_table() {
var todaystring = get_todaystring();
if (todaystring > lastdatestring) {
document.getElementById('TodayButton').disabled = true;
document.getElementById('NextButton').disabled = true;
}
for (var i=0; i < numrows; i++) {
var comparestring = sArray[i][1];
if (comparestring >= todaystring) {
breakpoint = i;
break;
}
}
var firstdatestring = lastdatestring;
if (breakpoint < numrows) {
firstdatestring = sArray[breakpoint][1];
}
var newtable = document.createElement('table');
newtable.setAttribute('id', 'sched_table_id');
newtable.setAttribute('border', '1');
newtable.setAttribute('cellspacing', '0');
newtable.setAttribute('cellpadding', '5');
newtable.setAttribute('align', 'left');
newtable.setAttribute('width', '100%');
caption = newtable.createCaption();
caption.innerHTML = '<br />Updated: 3/10/13';
caption.setAttribute('style', 'text-align:right');
var tablebody = document.createElement('tbody');
tablebody.appendChild(add_header(hArray, "#b8dbff"));
// add future games to table. if all games are in the past, then
// breakpoint will = numrows and following loop will not execute.
for (var i = breakpoint; i < numrows; i++) {
tablebody.appendChild(add_row(sArray[i], HexFutureNoHighlight));
}
// breakpoint = 0 means all games are in the future
// breakpoint > 0 means at least one game is in the past
// breakpoint = numrows means all games are in the past
// add past header to the table
if (breakpoint > 0) {
var newrow = document.createElement('tr');
var newcell = document.createElement('td');
var textnode = document.createTextNode("Previous games:")
newcell.appendChild(textnode);
newcell.setAttribute('colspan', '7');
newcell.setAttribute('style', 'text-align:left;font-weight:bold;');
newrow.appendChild(newcell);
newrow.setAttribute('style', 'background-color:' + HexPastNoHighlight);
newrow.setAttribute('align', 'center');
tablebody.appendChild(newrow);
}
// add past games to the table. if all games are in the future,
// breakpoint will = 0 and this loop will not execute.
for (var i = 0; i < breakpoint; i++) {
tablebody.appendChild(add_row(sArray[i], HexPastNoHighlight));
}
newtable.appendChild(tablebody);
document.getElementById('sched_div_id').appendChild(newtable);
}
</script>
<div id="sched_div_id"></div>
<script type="text/javascript">
build_table();
var param = "highlight=";
var query = window.location.search.substring(1); // everything after the ?
var ii = query.indexOf(param);
if (ii >= 0) {
var vv = query.substring(ii + param.length);
handleClick(vv);
}
</script>
<!-- End T-Ball schedule -->