var firstAvailableYear;
var lastAvailableYear;
var activeMonth;
var activeYear;
var activeCategory;
var currentDayOfMonth;
var currentDay;
var popUpDay;
var dateData = new Array();
var catData = new Array();
var monthArray = new Array();
var activeMode;
var searchString;

//***************************************************************
function toggleMode(mode)
{
    switch(mode)
    {
        case "calendar":
            activeMode = "calendar";
            outPutSelectItems();
            document.getElementById("mainSearch").innerHTML = getMainSearchCode();
            document.getElementById('modeLink').innerHTML = "View Event List";
            document.getElementById('modeLink').href = "javascript:toggleMode('list')";
            XMLHttpObject("calDiv", buildURL("calendar", null));
            break;
        case "list":
            activeMode = "list";
            outPutSelectItems();
            document.getElementById("mainSearch").innerHTML = getMainSearchCode();
            document.getElementById('modeLink').innerHTML = "View Calendar";
            document.getElementById('modeLink').href = "javascript:toggleMode('calendar')";
            XMLHttpObject("calDiv", buildURL("list", null));
            break;
        case "search":
            activeMode = "search";
            searchString = document.getElementById("searchField").value;
            XMLHttpObject("calDiv", buildURL("search", null));
            document.getElementById("mainSearch").innerHTML = "";
            document.getElementById("modeLink").innerHTML = "";
            document.getElementById("dateSelectBar").innerHTML = "";
            break;
        case "newSearch":
            searchString = document.getElementById("newSearchField").value;
            XMLHttpObject("calDiv", buildURL("search", null));
            break;
        default:
            break;
    }  
}
//***************************************************************
function closeEventInfo()
{
    document.getElementById(popUpDay).innerHTML = "";
    popUpDay = 0;         
}
//***************************************************************
function showEventInfo(divID)
{
    if(popUpDay != 0)
    {
        document.getElementById(popUpDay).innerHTML = ""; 
        XMLHttpObject(divID, buildURL("day", divID));
    }
    else
        XMLHttpObject(divID, buildURL("day", divID));
    popUpDay = divID; 

}
//***************************************************************
function selectCategory(newCategory)
{
    activeCategory = newCategory;
    if(activeMode == "calendar")
        showCalendar();
    else
        showList();
}
//***************************************************************
function selectYear(newYear)
{
    activeYear = newYear;
    document.getElementById('dateDisplay').innerHTML= monthArray[activeMonth-1] +" "+ activeYear; 
    if(activeMode == "calendar")
        showCalendar();
    else
        showList();
}
//***************************************************************
function selectMonth(newMonth)
{
    activeMonth = parseInt(newMonth) + 1;
    if(activeMonth < 10)
        activeMonth = '0' + activeMonth; 
    document.getElementById('dateDisplay').innerHTML= monthArray[activeMonth-1] +" "+ activeYear; 
    if(activeMode == "calendar")
        showCalendar();
    else
        showList();
}
//***************************************************************
function monthIncDec(incDec)
{
    if(incDec == 1)
    {
        if(activeMonth == 12)
        {
            if((parseInt(activeYear) + 1) <= lastAvailableYear)
            {
                activeMonth = "01";
                activeYear++;
                document.getElementById('dateDisplay').innerHTML= monthArray[activeMonth-1] +" "+ activeYear; 
                document.getElementById('monthSelection').innerHTML = getMonthSelectionCode();
                document.getElementById('yearSelection').innerHTML = getYearSelectionCode();
                if(activeMode == "calendar")
                    showCalendar();
                else
                    showList();
            } 
            else
                alert("There are no event entries after the year " + activeYear + ".");
        }
        else
        {
            activeMonth++;
            if(activeMonth < 10)
                activeMonth = '0' + activeMonth;
            document.getElementById('dateDisplay').innerHTML= monthArray[activeMonth-1] +" "+ activeYear; 
            document.getElementById('monthSelection').innerHTML = getMonthSelectionCode();
                if(activeMode == "calendar")
                    showCalendar();
                else
                    showList();
        } 
    }
    else
    {
        if(activeMonth == 1)
        {
            if((parseInt(activeYear) - 1) >= firstAvailableYear)
            {
                activeMonth = "12";
                activeYear--;
                document.getElementById('dateDisplay').innerHTML= monthArray[activeMonth-1] +" "+ activeYear; 
                document.getElementById('monthSelection').innerHTML = getMonthSelectionCode();
                document.getElementById('yearSelection').innerHTML = getYearSelectionCode();
                if(activeMode == "calendar")
                    showCalendar();
                else
                    showList();
            }
            else
                alert("There are no event entries prior to the year " + activeYear + ".");
        }
        else
        {
            activeMonth--;
            if(activeMonth < 10)
                activeMonth = '0' + activeMonth;
            document.getElementById('dateDisplay').innerHTML= monthArray[activeMonth-1] +" "+ activeYear; 
            document.getElementById('monthSelection').innerHTML = getMonthSelectionCode();
                if(activeMode == "calendar")
                    showCalendar();
                else
                    showList();
        } 
    } 
}
//***************************************************************
function displayCalendar()
{
    monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    firstAvailableYear = dateData[0];
    lastAvailableYear = dateData[1];
    activeYear = dateData[2];
    if(dateData[3] < 10)
        activeMonth = '0' + dateData[3];
    else
        activeMonth = dateData[3];
    currentDayOfMonth = dateData[4];    
    currentDay = dateData[5];
    activeCategory = 0;
    activeMode = "calendar";
    displayHeader();
    displaySelectItems();    
    showCalendar();   
}
//***************************************************************
function displayHeader()
{
    document.write("<div style=\"clear: left; font-family: verdana; width: 100%;\">");
    document.write("<h3 style=\"font-size: small; padding-top: 5px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px; float: left;\">Today is "+ currentDay +", "+ monthArray[activeMonth-1] +" "+ currentDayOfMonth +", "+ activeYear +".</h3>");
    document.write("<div style=\"float: right; width: 400px; text-align: right; padding-right: 5px;\" id=\"mainSearch\" >");
    document.write("</div>");
    document.write("</div>");
    
    document.getElementById('mainSearch').innerHTML = getMainSearchCode(); 
}
//***************************************************************
function displaySelectItems()
{
    document.write("<div style=\"font-family: verdana; width: 100%; height: 20px; padding-top: 10px; padding-bottom: 5px; clear: both;\">");
    document.write("<h3 style=\"padding: 0px; margin: 0px; font-size: medium; width: 250px; float: left;\" id=\"dateDisplay\"></h3>");
    document.write("<a style=\"float: right; font-size: small; font-family: verdana; padding-right: 5px; color: #005900; width: 250px; text-align: right;\" onmouseover=\"this.style.color = '#000000'\" onmouseout=\"this.style.color = '#005900'\" id=\"modeLink\"></a>");
    document.write("</div>");
      
    document.getElementById('modeLink').href = "javascript:toggleMode('list')";
    document.getElementById('modeLink').innerHTML = "View Event List";
    document.getElementById('dateDisplay').innerHTML = monthArray[activeMonth-1] +" "+ activeYear; 
    
    document.write("<div style=\"background-color: #005900; border-width: 1px 1px 0px 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; height: 30px;\" id=\"dateSelectBar\">");
    document.write("</div>");
    outPutSelectItems();
}
//***************************************************************
function outPutSelectItems()
{
    document.getElementById('dateSelectBar').innerHTML = getSelectItemsCode();    
    document.getElementById('monthSelection').innerHTML = getMonthSelectionCode();
    document.getElementById('yearSelection').innerHTML = getYearSelectionCode();
    document.getElementById('categorySelection').innerHTML = getCategorySelectionCode();
}
//***************************************************************
function getMainSearchCode()
{
    var returnCode = "<input type=\"text\" id=\"searchField\" name=\"\"searchField=\"\" style=\"width: 200px; margin-right: 5px;\" onkeypress=\"checkEnter(event)\"/>";
    returnCode = returnCode + "<input id=\"searchButton\" type=\"button\" value=\"Search Events\" style=\"margin-top: 3px\" onclick=\"toggleMode('search')\"/>";
    return returnCode;
}
//***************************************************************
function getSelectItemsCode()
{
    var returnCode = "<div style=\"width: 600px; float: left;\">";
    returnCode = returnCode + "<div style=\"float: left; width: 160px\">";
    returnCode = returnCode + "<button style=\"font-family: verdana; font-size: 10px; font-weight: bold; color: #FFFFFF; background-image: url('../graphics/communityCalendar/leftArrow.png'); background-repeat: no-repeat; background-position: left; background-color: transparent; border-width: 0px; width: 150px; height: 30px; text-align: left; padding-left: 35px;\" onclick=\"monthIncDec(-1)\" onmouseover=\"this.style.cursor = 'hand'\" onmouseout=\"this.style.cursor = 'cursor'\">Previous Month</button>";
    returnCode = returnCode + "</div>";
    
    returnCode = returnCode + "<div style=\"float: left; margin-top: 4px; margin-right: 5px; width: 102px;\" id=\"monthSelection\">";
    returnCode = returnCode + "</div>";
    
    returnCode = returnCode + "<div style=\"float: left; margin-top: 4px; width: 70px;\" id=\"yearSelection\">";
    returnCode = returnCode + "</div>";
    
    returnCode = returnCode + "<div style=\"float: left; width: 130px\">";
    returnCode = returnCode + "<button name=\"nextMonthButton\" style=\"font-family: verdana; font-size: 10px; font-weight: bold; color: #FFFFFF; background-image: url('../graphics/communityCalendar/rightArrow.png'); background-repeat: no-repeat; background-position: right; background-color: transparent; border-width: 0px; width: 125px; height: 30px; text-align: right; padding-right: 35px;\" onclick=\"monthIncDec(1)\" onmouseover=\"this.style.cursor = 'hand'\" onmouseout=\"this.style.cursor = 'cursor'\">Next Month</button>";
    returnCode = returnCode + "</div>";
    returnCode = returnCode + "</div>";
    
    returnCode = returnCode + "<div style=\"float: right; width: 300px; padding-right: 5px;\" id=\"categorySelection\">";
    returnCode = returnCode + "</div>";
    
    return returnCode;
}
//***************************************************************
function showCalendar()
{
    popUpDay = 0;
    XMLHttpObject("calDiv", buildURL("calendar", null));
}
//***************************************************************
function showList()
{
    popUpDay = 0;
    XMLHttpObject("calDiv", buildURL("list", null));
}
//***************************************************************
function getCategorySelectionCode()
{
    var categorySelectCode = "<select name=\"categorySelection\" onchange=\"selectCategory(this.value)\" style=\"float: right; margin-top: 4px; margin-left: 5px\">";
    if(activeCategory == 0)
        selectedCategory = "selected=\"selected\"";
    else
        selectedCategory = "";
    categorySelectCode = categorySelectCode + "<option " + selectedCategory + " style=\"color: #000000\" value=\"0\">View All Categories</option>";
    var i = 0;
    while(catData[i])
    {
        if(catData[i][0] == activeCategory)
            selectedCategory = "selected=\"selected\"";
        else
            selectedCategory = "";
        categorySelectCode = categorySelectCode + "<option " + selectedCategory + " style=\"color: " + catData[i][2] + "\" value=\"" + catData[i][0] + "\">" + catData[i][1] + "</option>";
        i++;
    }
    categorySelectCode = categorySelectCode + "</select>";
    categorySelectCode = categorySelectCode + "<p style=\"padding: 0px; margin: 0px; width: 80px; float: right; font-family: verdana; font-size: x-small; font-weight: bold; color: #FFFFFF; line-height: 30px; \">Categories:</p>";
    return categorySelectCode;
}
//***************************************************************
function getYearSelectionCode()
{
    var yearSelectCode = "<select name=\"yearSelector\" onchange=\"selectYear(this.value)\">";
    var currentYear = firstAvailableYear;
    
    while(currentYear <= lastAvailableYear)
    {
   	    if(currentYear == activeYear)
			selectedYear = "selected=\"selected\"";
		else
			selectedYear = "";
		yearSelectCode = yearSelectCode + "<option value=\"" + currentYear + "\" " + selectedYear + ">" + currentYear + "</option>";
		currentYear++;
    }
    yearSelectCode = yearSelectCode + "</select>";
    return yearSelectCode;
}
//***************************************************************
function getMonthSelectionCode()
{
    var monthSelectCode = "<select name=\"monthSelect\" onchange=\"selectMonth(this.value)\" >";
    var i = 0;
    for(i=0; i<12; i++)
    {
        if(i == (activeMonth - 1))
            isSelected = "selected=\"selected\"";
        else
            isSelected = "";
        monthSelectCode = monthSelectCode + "<option value=\""+ i +"\" "+ isSelected +">"+ monthArray[i] +"</option>";
    }
    monthSelectCode = monthSelectCode + "</select>";
    return monthSelectCode;
}
//***************************************************************
function buildURL(urlType, tagID)
{
    //var url="http://localhost/PHP/outputCalendar.php";
    var url="http://www.gpwmi.us/PHP/outputCalendar.php";
    switch(urlType)
    {
        case "calendar":
            url=url+"?showMonth=" + activeYear + activeMonth + activeCategory + '_';
            url=url+"&sid="+Math.random();
            break;
        case "day":
            url=url+"?showDay=" + tagID;
            url=url+"&sid="+Math.random();
            break;
        case "killDay":
            url=url+"?clearDIV";
            url=url+"&sid="+Math.random();
            break;
        case "list":
            url=url+"?listView=" + activeYear + activeMonth + activeCategory + '_';
            url=url+"&sid="+Math.random();
            break;
         case "search":
            url=url+"?search=" + searchString;
            url=url+"&sid="+Math.random();
            break;
        default:
            break;
    }
    return url;
}
//***************************************************************
function XMLHttpObject(divID, url)
{
    sendDivID = divID;
    mconnection = GetXmlHttpObject();
    if(mconnection==null)
    {
        alert ("Browser does not support HTTP Request");
        return;
    }
    mconnection.open("GET", url, true);
    mconnection.onreadystatechange = stateChanged;
    mconnection.send(null);
}
//***************************************************************
function GetXmlHttpObject()
{
    var xmlHttp=null;
    try
    {
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
        //Internet Explorer
        try
        {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}
//***************************************************************
function stateChanged() 
{ 
    if (mconnection.readyState==4 || mconnection.readyState=="complete")
    { 
        document.getElementById(sendDivID).innerHTML=mconnection.responseText; 
    } 
}
//***************************************************************
function setSearchFocus()
{
        document.getElementById('searchButton').focus; 
}
//***************************************************************
function checkEnter(e)
{
    var characterCode;

    if(e && e.which)
    {
        e = e;
        characterCode = e.which; //character code is contained in NN4's which property
    }
    else
    {
        e = event;
        characterCode = e.keyCode; //character code is contained in IE's keyCode property
    }

    if(characterCode == 13)
    { 
        if(activeMode == "search")
            toggleMode("newSearch");
        else
            toggleMode("search");
    }
}