var monthStrings = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
// Date object that represents the currently displayed month
var monthOnDisplay;
// Table that maps a date (in milliseconds) to the corresponding Day object
var dateToDayObjectMap;
// Calendar type currently selected
var selectedCalendarType = "home";
// Calendar event currently selected
var selectedCalendarEvent = null;
// The highest ID number that we have assigned so far
var highestID = 0;
// Date (in milliseconds) of the first day displayed in the calendar
var calendarStartTime = 0;
// Date (in milliseconds) of the last day displayed in the calendar
var calendarEndTime = 0;
// Audio sound for network connection lost event
var networkDropSound = new Audio("Boom.aiff");

// Override day box height if the number of rows in calendar is not 5 
var insertedStyleRuleIndexForDayBox = -1;
function updateCalendarRowCount(count) 
{
    var stylesheet = document.styleSheets[0];
    if (count == 5) {   // The case our stylesheet already handles, and probably the most common case
        if (insertedStyleRuleIndexForDayBox >= 0) {
            // Remove the style rule we previously added
            stylesheet.deleteRule(insertedStyleRuleIndexForDayBox);
        }
        insertedStyleRuleIndexForDayBox = -1;
        return;
    }
    if (insertedStyleRuleIndexForDayBox < 0)
        insertedStyleRuleIndexForDayBox = stylesheet.insertRule(".day.box { }", stylesheet.cssRules.length);
    var styleRule = stylesheet.cssRules[insertedStyleRuleIndexForDayBox];
    var h = 100 / count;
    styleRule.style.height = h + "%";
}

function initMonthOnDisplay() 
{
    monthOnDisplay = CalendarState.currentMonth();
    monthOnDisplayUpdated();
}

function monthOnDisplayUpdated() 
{
    var monthTitle = monthStrings[monthOnDisplay.getMonth()] + " " + monthOnDisplay.getFullYear();
    document.getElementById("monthTitle").innerText = monthTitle;
    CalendarState.setCurrentMonth(monthOnDisplay.toString());
    initDaysGrid();
    CalendarDatabase.openWebKitCalendarEvents(); 
}

function initDaysGrid() 
{
    // Figure out the first day that should be displayed in this grid.
    var displayedDate = new Date(monthOnDisplay);
    displayedDate.setDate(displayedDate.getDate() - displayedDate.getDay());
    
    // Fill out the entire grid
    var daysGrid = document.getElementById("daysGrid");
    daysGrid.removeChildren();
    dateToDayObjectMap = new Object();
    
    calendarStartTime = displayedDate.getTime();
    var doneWithThisMonth = false;
    var rows = 0;
    while (!doneWithThisMonth) {
        rows++;
        for (var i = 0; i < 7; ++i) {
            var dateTime = displayedDate.getTime();
            var dayObj = new Day(displayedDate);
            dateToDayObjectMap[dateTime] = dayObj;
            dayObj.attach(daysGrid);
            // Increment by a day
            displayedDate.setDate(displayedDate.getDate() + 1);
        }
        doneWithThisMonth = (displayedDate.getMonth() != monthOnDisplay.getMonth());
    }
    updateCalendarRowCount(rows);
    displayedDate.setDate(displayedDate.getDate() - 1);     // Roll back to the last displayed date
    displayedDate.setHours(23, 59, 59, 999);
    calendarEndTime = displayedDate.getTime();
}

function isCalendarTypeVisible(type) 
{
    var input = document.getElementById(type);
    if (!input || input.tagName != "INPUT")
        return;
    return input.checked;
}

function addEventsOfCalendarType(calendarType)
{
    CalendarDatabase.loadEventsFromDBForCalendarType(calendarType);
}

function removeEventsOfCalendarType(calendarType)
{
    var daysGridElement = document.getElementById("daysGrid");
    var dayElements = daysGridElement.childNodes;
    for (var i = 0; i < dayElements.length; i++) {
        var dayObj = dayObjectFromElement(dayElements[i]);
        if (!dayObj)
            continue;
        dayObj.hideEventsOfCalendarType(calendarType);
    }
}

// Event handlers --------------------------------------------------

function pageLoaded() 
{
    document.getElementById("gridView").addEventListener("selectstart", stopEvent, true);
    document.getElementById("searchResults").addEventListener("selectstart", stopEvent, true);
    document.body.addEventListener("keyup", keyUpHandler, false);
    document.body.addEventListener("online", displayOnlineStatus, true);
    document.body.addEventListener("offline", displayOnlineStatus, true);
    displayOnlineStatus();

    initSearchArea();
    // Initialize the checked states of the calendars
    var calendarCheckboxes = document.getElementById("calendarList").getElementsByTagName("INPUT");
    for (var i = 0; i < calendarCheckboxes.length; i++)
        calendarCheckboxes[i].checked = CalendarState.calendarChecked(calendarCheckboxes[i].id);
    // Initialize the calendar grid.
    initMonthOnDisplay();
}

function previousMonth() 
{
    monthOnDisplay.setMonth(monthOnDisplay.getMonth() - 1);
    monthOnDisplayUpdated();
}

function nextMonth() 
{
    monthOnDisplay.setMonth(monthOnDisplay.getMonth() + 1);
    monthOnDisplayUpdated();
}

function calendarSelected(event) 
{
    if (event.target.tagName == "INPUT")
        return;
    var oldSelectedInput = document.getElementById(selectedCalendarType);
    var oldListItemElement = oldSelectedInput.findParentOfTagName("LI");
    oldListItemElement.removeStyleClass("selected");
    event.target.addStyleClass("selected");
    selectedCalendarType = event.target.getElementsByTagName("INPUT")[0].id;
}

function calendarClicked(event) 
{
    if (event.target.tagName != "INPUT")
        return;
    var calendarType = event.target.id;
    var checked = event.target.checked;
    CalendarState.setCalendarChecked(calendarType, checked);
    if (checked)
        addEventsOfCalendarType(calendarType);
    else
        removeEventsOfCalendarType(calendarType);
}

function keyUpHandler(event) 
{
    switch (event.keyIdentifier) {
        case "U+007F":   // Delete key
            if (selectedCalendarEvent && selectedCalendarEvent.day)
                selectedCalendarEvent.day.deleteEvent(selectedCalendarEvent);
            break;
        case "Enter":
            if (selectedCalendarEvent && !document.getElementById("eventOverlay").hasStyleClass("show"))
                selectedCalendarEvent.selected();
            break;
        default:
            break;
    }
}

function eventDetailsDismissed(event) 
{
    if (selectedCalendarEvent) {
        selectedCalendarEvent.listItemNode.removeStyleClass("selected");
        // Update selected event
        selectedCalendarEvent.detailsUpdated();
    }
    
    // Hide event details
    var eventOverlayElement = document.getElementById("eventOverlay");
    // FIXME: would have added transitionend listener here but not supported yet.  Use setTimeout for now.
    // Set timer to hide map and disclosure arrow - this is delayed so things wouldn't change while event details is fading out.
    setTimeout("hideMapDisclosureArrow()", 1000);
    eventOverlayElement.removeStyleClass("show");

    selectedCalendarEvent = null;

    // Show the gridView
    document.getElementById("gridView").removeStyleClass("inactive");
}

function searchForEvent(query) 
{
    if (query.length == 0) {
        var searchResultsList = document.getElementById("searchResults");
        searchResultsList.removeChildren();
        unhighlightAllEvents();
        return;
    }
    query = "%" + query + "%";
        
    CalendarDatabase.queryEventsInDB(query);
}

// Online status ----------------------------------------------------

function isOnline()
{
    return navigator.onLine;
}

function displayOnlineStatus()
{
    var statusIcon = document.getElementById("onlineStatusIcon");
    if (isOnline())
        statusIcon.removeStyleClass("offline");
    else {
        statusIcon.addStyleClass("offline");
        networkDropSound.play();
    }
}

// Map revelation ---------------------------------------------------

function hideMap() 
{
    document.getElementById("eventDisclosureArrow").removeStyleClass("expanded");
    document.getElementById("map").removeStyleClass("show");
    document.getElementById("details").removeStyleClass("showingMap");
}

function showMap() 
{
    document.getElementById("eventDisclosureArrow").addStyleClass("expanded");
    document.getElementById("map").addStyleClass("show");
    document.getElementById("details").addStyleClass("showingMap");
}

function toggleArrow() 
{
    var newMapShowState = !document.getElementById("map").hasStyleClass("show");
    if (newMapShowState)
        showMap();
    else
        hideMap();
}

function hideMapDisclosureArrow() 
{
    document.getElementById("eventDisclosureArrow").removeStyleClass("show");
    document.getElementById("map").removeChildren();
    hideMap();
}

function showMapDisclosureArrow() 
{
    document.getElementById("eventDisclosureArrow").addStyleClass("show");
}

var locationImage;

function mapImageReceived(image) 
{
    if (!image)
        return;
    image.addStyleClass("mapImage");
    document.getElementById("map").appendChild(image);
    showMapDisclosureArrow();
}

function requestMapImage() 
{
    if (!isOnline())
        return;
    if (!locationImage)
        locationImage = new LocationImage();
    var address = document.getElementById("eventLocation").innerText;
    locationImage.requestLocationImage(address, mapImageReceived);
}

// Search area ------------------------------------------------------

var dividerBarDragOffset = 0;
var dividerBarHeight = 24;

function initSearchArea() 
{
    document.getElementById("dividerBar").addEventListener("mousedown", startDividerBarDragging, true);
}

function startDividerBarDragging(event) 
{
    var dividerBarElement = document.getElementById("dividerBar");
    if (event.target !== dividerBarElement)
        return;

    document.addEventListener("mousemove", dividerBarDragging, true);
    document.addEventListener("mouseup", endDividerBarDragging, true);
    
    document.body.style.cursor = "row-resize";
    
    dividerBarDragOffset = event.pageY - document.getElementById("searchArea").totalOffsetTop;
    stopEvent(event);
}

function dividerBarDragging(event) 
{
    var dividerBarElement = document.getElementById("dividerBar");
    var searchAreaElement = document.getElementById("searchArea");
    var sidePanelHeight = document.getElementById("sidePanel").offsetHeight;
    var calendarListElement = document.getElementById("calendarList");
    var calendarListBottom = calendarListElement.totalOffsetTop + calendarListElement.offsetHeight;
    
    var dividerTop = event.pageY + dividerBarDragOffset;
    dividerTop = Number.constrain(dividerTop, calendarListBottom, sidePanelHeight - dividerBarHeight);
    var searchAreaTop = dividerTop + dividerBarHeight;
    
    dividerBarElement.style.top = dividerTop + "px";
    searchAreaElement.style.top = searchAreaTop + "px";

    stopEvent(event);
}

function endDividerBarDragging(event) 
{
    document.removeEventListener("mousemove", dividerBarDragging, true);
    document.removeEventListener("mouseup", endDividerBarDragging, true);

    document.body.style.removeProperty("cursor");
    dividerBarDragOffset = 0;
    stopEvent(event);
}

// LocalStorage access ---------------------------------------------

var CalendarState = {
    currentMonth: function() 
    {
        var month = new Date();
        // Retrieve the month on display saved from last time this app is launched.
        if (localStorage.monthOnDisplay)
            month.setTime(Date.parse(localStorage.monthOnDisplay));
        // First time we load this page - just use the current month.
        month.setDate(1);
        month.setHours(0, 0, 0, 0);
        return month;
    },

    setCurrentMonth: function(monthString) 
    {
        localStorage.monthOnDisplay = monthString;
    },

    toCalendarKey: function(calendarType) 
    {
        return calendarType + "CalendarChecked";
    },

    calendarChecked: function(calendarType) 
    {
        var value = localStorage.getItem(CalendarState.toCalendarKey(calendarType));
        if (!value)
            return true;
        return (value == "yes") ? true : false;
    },

    setCalendarChecked: function(calendarType, checked) 
    {
        localStorage.setItem(CalendarState.toCalendarKey(calendarType), checked ? "yes" : "no");
    },
}

// Database access -------------------------------------------------

var CalendarDatabase = {
    // The Events database object
    db: null,
    
    // Flag that tracks if we have opened the database for the very first time
    dbOpened: false,

    // REVIEW: can probably have a method that takes in a SQL statement, the arguments to the statement, optional callback and error
    // callback methods and execute the transaction on the database, and then have other methods just call that one method.
    // But we'll spell out the steps to make the database transaction in each method here for demonstration purposes.

    openWebKitCalendarEvents: function() 
    {
        // We have already made sure the WebKitCalendarEvents table has been created. Just load events directly.
        if (CalendarDatabase.dbOpened) {
            CalendarDatabase.loadEventsFromDB();
            return;
        }
        CalendarDatabase.dbOpened = true;
        
        // Query for opening WebKitCalendarEvents table
        var openTableStatement = "CREATE TABLE IF NOT EXISTS WebKitCalendarEvents (id REAL UNIQUE, eventTitle TEXT, eventLocation TEXT, startTime REAL, endTime REAL, eventCalendar TEXT, eventDetails TEXT)";
        
        // SQLStatementCallback - gets called after the table is created
        function sqlStatementCallback(result) { CalendarDatabase.loadEventsFromDB(); };

        // SQLStatementErrorCallback - gets called if there's an error opening the table
        function sqlStatementErrorCallback(tx, err) { alert("Error opening WebKitCalendarEvents: " + err.message); };

        // SQLTransactionCallback
        function sqlTransactionCallback(tx) { tx.executeSql(openTableStatement, [], sqlStatementCallback, sqlStatementErrorCallback); };

        CalendarDatabase.db.transaction(sqlTransactionCallback);
    },

    open: function() 
    {
        try {
            if (!window.openDatabase) {
                alert("Couldn't open the database.  Please try with a WebKit nightly with the database feature enabled.");
                return;
            }
            CalendarDatabase.db = openDatabase("Events", "1.0", "Events Database", 1000000);
            if (!CalendarDatabase.db)
                alert("Failed to open the database on disk.");
        } catch(err) { }
    },

    loadEventsFromDB: function() 
    {
        var self = this;

        // SQL query to retrieve all the events for this month
        var eventsQuery = "SELECT id, eventTitle, eventLocation, startTime, endTime, eventCalendar, eventDetails FROM WebKitCalendarEvents WHERE (startTime BETWEEN ? and ?)";
        
        // Arguments to the SQL query above
        var sqlArguments = [calendarStartTime, calendarEndTime];
        
        // SQLStatementCallback to process the query result
        function sqlStatementCallback(tx, result) { self.processLoadedEvents(result.rows); };
        
        // SQLStatementErrorCallback that handles any error from the query
        function sqlStatementErrorCallback(tx, error) { alert("Failed to retrieve events from database - " + error.message); };
        
        // SQLTransactionCallback
        function sqlTransactionCallback(tx) { tx.executeSql(eventsQuery, sqlArguments, sqlStatementCallback, sqlStatementErrorCallback); };
        
        CalendarDatabase.db.transaction(sqlTransactionCallback);
    },

    saveAsNewEventToDB: function(calendarEvent) 
    {
        // SQL statement to insert new event into the database table
        var insertEventStatement = "INSERT INTO WebKitCalendarEvents(id, eventTitle, eventLocation, startTime, endTime, eventCalendar, eventDetails) VALUES (?, ?, ?, ?, ?, ?, ?)";
        
        // Arguments to the SQL statement above
        var sqlArguments = [calendarEvent.id, calendarEvent.title, calendarEvent.location, calendarEvent.from.getTime(), calendarEvent.to.getTime(), calendarEvent.calendar, calendarEvent.details];
        
        // SQLTransactionCallback
        function sqlTransactionCallback(tx) { tx.executeSql(insertEventStatement, sqlArguments); };

        CalendarDatabase.db.transaction(sqlTransactionCallback);
    },

    saveEventToDB: function(calendarEvent) {
        // SQL statement to update an event in the database table
        var updateEventStatement = "UPDATE WebKitCalendarEvents SET eventTitle = ?, eventLocation = ?, startTime = ?, endTime = ?, eventCalendar = ?, eventDetails = ? WHERE id = ?";
        
        // Arguments to the SQL statement above
        var sqlArguments = [calendarEvent.title, calendarEvent.location, calendarEvent.from.getTime(), calendarEvent.to.getTime(), calendarEvent.calendar, calendarEvent.details, calendarEvent.id];
        
        // SQLTransactionCallback
        function sqlTransactionCallback(tx) { tx.executeSql(updateEventStatement, sqlArguments); };

        CalendarDatabase.db.transaction(sqlTransactionCallback);
    },

    deleteEventFromDB: function(calendarEvent) 
    {
        // SQL statement to delete an event from the database table
        var deleteEventStatement = "DELETE FROM WebKitCalendarEvents WHERE id = ?";
        
        // Arguments to the SQL statement above
        var sqlArguments = [calendarEvent.id];

        // SQLTransactionCallback
        function sqlTransactionCallback(tx) { tx.executeSql(deleteEventStatement, sqlArguments); };
        CalendarDatabase.db.transaction(sqlTransactionCallback);
    },

    queryEventsInDB: function(query) 
    {
        var self = this;

        // SQL query to search for events with keyword
        var searchEventQuery = "SELECT id, eventTitle, eventLocation, startTime, endTime, eventCalendar, eventDetails FROM WebKitCalendarEvents WHERE eventTitle LIKE ? OR eventDetails LIKE ? OR eventLocation LIKE ?";
        
        // Arguments to the SQL query
        var sqlArguments = [query, query, query];
        
        // SQLStatementCallback that processes the query result
        function sqlStatementCallback(tx, result) { self.processQueryResults(result.rows); };
        
        // SQLStatementErrorCallback that reports any error from the query
        function sqlStatementErrorCallback(tx, error) { alert("Failed to retrieve events from database - " + error.message); };
        
        // SQLTransactionCallback
        function sqlTransactionCallback(tx) { tx.executeSql(searchEventQuery, sqlArguments, sqlStatementCallback, sqlTransactionCallback); };
        
        CalendarDatabase.db.transaction(sqlTransactionCallback);    
    },

    loadEventsFromDBForCalendarType: function(calendarType) 
    {
        var self = this;

        // SQL query to retrieve all the events for this month
        var eventsQuery = "SELECT id, eventTitle, eventLocation, startTime, endTime, eventCalendar, eventDetails FROM WebKitCalendarEvents WHERE (startTime BETWEEN ? and ?) AND eventCalendar = ?";
        
        // Arguments to the SQL query above
        var sqlArguments = [calendarStartTime, calendarEndTime, calendarType];
        
        // SQLStatementCallback to process the query result
        function sqlStatementCallback(tx, result) { self.processLoadedEvents(result.rows); };
        
        // SQLStatementErrorCallback that handles any error from the query
        function sqlStatementErrorCallback(tx, error) { alert("Failed to retrieve events from database - " + error.message); };
        
        // SQLTransactionCallback
        function sqlTransactionCallback(tx) { tx.executeSql(eventsQuery, sqlArguments, sqlStatementCallback, sqlStatementErrorCallback); };
        
        CalendarDatabase.db.transaction(sqlTransactionCallback);
    },

    processLoadedEvents: function(rows)
    {
        for (var i = 0; i < rows.length; i++) {
            var row = rows.item(i);
            var dayDate = Date.dayDateFromTime(row["startTime"]);
            var dayObj = dateToDayObjectMap[dayDate.getTime()];
            if (!dayObj)
                continue;

            dayObj.insertEvent(CalendarEvent.calendarEventFromResultRow(row, false));

            // Keep track of the highest id seen.
            if (row["id"] > highestID)
                highestID = row["id"];
        }
    },

    processQueryResults: function(rows)
    {
        var searchResultsList = document.getElementById("searchResults");
        searchResultsList.removeChildren();
        unhighlightAllEvents();
        for (var i = 0; i < rows.length; i++) {
            var row = rows.item(i);
            var calendarEvent = CalendarEvent.calendarEventFromResultRow(row, true);
            highlightEventInCalendar(calendarEvent);
            searchResultsList.appendChild(calendarEvent.searchResultAsListItem());
        }
    }
}

// Open Database!
CalendarDatabase.open();

function highlightEventInCalendar(calendarEvent)
{
    var itemsToHighlight = document.querySelectorAll("ul.contents li." + calendarEvent.calendar);
    for (var i = 0; i < itemsToHighlight.length; ++i) {
        var listItem = itemsToHighlight[i];
        if (listItem.innerText !== calendarEvent.title)
            continue;
        if (listItem.hasStyleClass("highlighted"))
            continue;
        listItem.addStyleClass("highlighted");
        break;
    }
}

function unhighlightAllEvents()
{
    var highlightedItems = document.querySelectorAll("ul.contents li.highlighted");
    for (var i = 0; i < highlightedItems.length; ++i)
        highlightedItems[i].removeStyleClass("highlighted");
}

// Day object -------------------------------------------------------

function dayObjectFromElement(element) 
{
    var parent = element;
    while (parent && !parent.dayObject)
        parent = parent.parentNode;
    return parent ? parent.dayObject : null;
}

function Day(date) 
{
    this.date = new Date(date);
    this.divNode = null;
    this.contentsListNode = null;
    this.eventsArray = null;
}

Day.prototype.attach = function(parent) 
{
    /* The HTML of each day looks like this:
        <div class="day box">
            <div class="date">1</div>
            <ul class="contents">
                <li>Event 1</li>
                <li>Event 2</li>
            </ul>
        </div>
    */

    if (this.divNode)
        throw("We have already created html elements for this day!");
    this.divNode = document.createElement("div");
    this.divNode.dayObject = this;
    this.divNode.addStyleClass("day");
    this.divNode.addStyleClass("box");
    if (this.date.getMonth() != monthOnDisplay.getMonth())
        this.divNode.addStyleClass("notThisMonth");
    if (this.date.isToday())
        this.divNode.addStyleClass("today");
    
    var dateDiv = document.createElement("div");
    dateDiv.addStyleClass("date");
    dateDiv.innerText = this.date.getDate();
    this.divNode.appendChild(dateDiv);
    
    this.contentsListNode = document.createElement("ul");
    this.contentsListNode.addStyleClass("contents");
    this.contentsListNode.addEventListener("dblclick", Day.newEvent, false);
    this.divNode.appendChild(this.contentsListNode);
    
    parent.appendChild(this.divNode);
}

Day.newEvent = function(event) 
{
    var element = event.target;
    var dayObj = dayObjectFromElement(element);
    if (!dayObj || dayObj.contentsListNode != element)
        return;
        
    var calendarEvent = new CalendarEvent(dayObj.date, dayObj, selectedCalendarType, false);
    calendarEvent.title = "New Event";
    calendarEvent.from = dayObj.defaultEventStartTime();
    var endTime = new Date(calendarEvent.from);
    endTime.setHours(endTime.getHours() + 1);
    calendarEvent.to = endTime;
    dayObj.insertEvent(calendarEvent);
    CalendarDatabase.saveAsNewEventToDB(calendarEvent);
    selectedCalendarEvent = calendarEvent;
    calendarEvent.show();
    
    stopEvent(event);
}

Day.prototype.insertEvent = function(calendarEvent) 
{
    if (!this.eventsArray)
        this.eventsArray = new Array();
    // Remove the event from array if it's already there.
    var index = this.eventsArray.indexOf(calendarEvent);
    if (index >= 0)
        this.eventsArray.splice(index, 1);
    calendarEvent.detach();
    // Don't display this in the calendar if the calendar is unchecked
    if (!isCalendarTypeVisible(calendarEvent.calendar))
        return;
    // We want to insert the calendarEvent in order of start time
    for (index = 0; index < this.eventsArray.length; index++) {
        if (this.eventsArray[index].from > calendarEvent.from)
            break;
    }
    this.eventsArray.splice(index, 0, calendarEvent);
    calendarEvent.attach();
}

Day.prototype.deleteEvent = function(calendarEvent) 
{
    CalendarDatabase.deleteEventFromDB(calendarEvent);
    this.hideEvent(calendarEvent);
}

Day.prototype.hideEvent = function(calendarEvent)
{
    calendarEvent.detach();
    selectedCalendarEvent = null;
    if (!this.eventsArray)
        return;
    var index = this.eventsArray.indexOf(calendarEvent);
    if (index >= 0)
        this.eventsArray.splice(index, 1);
}

Day.prototype.hideEventsOfCalendarType = function(calendarType) 
{
    if (!this.eventsArray)
        return;
    var i = 0;
    while (i < this.eventsArray.length) {
        if (this.eventsArray[i].calendar == calendarType)
            this.hideEvent(this.eventsArray[i]);
        else
            i++;
    }
}

Day.prototype.defaultEventStartTime = function() 
{
    var startTime;
    if (!this.eventsArray || !this.eventsArray.length) {
        startTime = new Date(this.date);
        startTime.setHours(9, 0, 0, 0);     // Default: events start at 9am!
        return startTime;
    }
    var lastEvent = this.eventsArray[this.eventsArray.length-1];
    startTime = new Date(lastEvent.to);
    startTime.roundToHour();
    return startTime;
}

// CalendarEvent object -------------------------------------------------------

function calendarEventFromElement(element) 
{
    var parent = element;
    while (parent) {
        if (parent.calendarEvent)
            return parent.calendarEvent;
        parent = parent.parentNode;
    }
    return null;
}

function CalendarEvent(date, day, calendar, fromSearch) 
{
    this.date = date;
    this.day = day;
    this.fromSearch = fromSearch;
    this.id = ++highestID;
    this.title = "";
    this.location = "";
    this.from = null;
    this.to = null;
    this.calendar = calendar;
    this.details = "";
    this.listItemNode = null;
}

CalendarEvent.prototype.attach = function() 
{
    var parentNode = this.day.contentsListNode;
    if (!parentNode)
        throw("Must have created day box's html hierarchy before adding calendar events.");
    if (this.listItemNode)
        parentNode.removeChild(this.listItemNode);
    this.listItemNode = document.createElement("li");
    this.listItemNode.calendarEvent = this;
    this.listItemNode.addStyleClass(this.calendar);
    this.listItemNode.innerText = this.title;
    this.listItemNode.addEventListener("click", CalendarEvent.eventSelected, false);
    var index = this.day.eventsArray.indexOf(this);
    if (index < 0)
        throw("Cannot attach if CalendarEvent does not belong to a Day object.");
    var adjacentNode = null;
    if (index < this.day.contentsListNode.childNodes.length)
        adjacentNode = this.day.contentsListNode.childNodes[index];
    this.day.contentsListNode.insertBefore(this.listItemNode, adjacentNode);
}

CalendarEvent.prototype.detach = function() 
{
    var parentNode = this.day.contentsListNode;
    if (parentNode && this.listItemNode)
        parentNode.removeChild(this.listItemNode);
    this.listItemNode = null;
}

CalendarEvent.eventSelected = function(event) 
{
    var calendarEvent = calendarEventFromElement(event.target);
    if (!calendarEvent)
        return;
    calendarEvent.selected();
    stopEvent(event);
}

CalendarEvent.prototype.selected = function() 
{
    if (selectedCalendarEvent == this) {
        selectedCalendarEvent.show();
        return;
    }
    if (selectedCalendarEvent)
        selectedCalendarEvent.listItemNode.removeStyleClass("selected");
    selectedCalendarEvent = this;
    if (selectedCalendarEvent)
        selectedCalendarEvent.listItemNode.addStyleClass("selected");
}

function minutesString(minutes) 
{
    if (minutes < 10)
        return "0" + minutes;
    return minutes.toString();
}

CalendarEvent.prototype.show = function() 
{
    // Update the event details
    document.getElementById("eventTitle").innerText = this.title;
    document.getElementById("eventLocation").innerText = this.location;
    document.getElementById("eventFromDate").innerText = this.date.toLocaleDateString();
    document.getElementById("eventFromHours").innerText = this.from.getHours();
    document.getElementById("eventFromMinutes").innerText = minutesString(this.from.getMinutes());
    document.getElementById("eventToDate").innerText = this.date.toLocaleDateString();
    document.getElementById("eventToHours").innerText = this.to.getHours();
    document.getElementById("eventToMinutes").innerText = minutesString(this.to.getMinutes());
    document.getElementById("eventCalendarType").value = this.calendar;
    document.getElementById("eventDetails").innerText = this.details;
    
    // Reset the map
    requestMapImage();

    // Fade out the gridView
    document.getElementById("gridView").addStyleClass("inactive");
        
    // Show event details
    document.getElementById("eventOverlay").addStyleClass("show");
}

CalendarEvent.prototype.detailsUpdated = function() 
{
    // FIXME: error checking!!
    this.title = document.getElementById("eventTitle").innerText;
    this.location = document.getElementById("eventLocation").innerText;
    this.from.setHours(document.getElementById("eventFromHours").innerText);
    this.from.setMinutes(document.getElementById("eventFromMinutes").innerText);
    this.to.setHours(document.getElementById("eventToHours").innerText);
    this.to.setMinutes(document.getElementById("eventToMinutes").innerText);
    this.calendar = document.getElementById("eventCalendarType").value;
    this.details = document.getElementById("eventDetails").innerText;

    CalendarDatabase.saveEventToDB(this);
    if (!this.fromSearch && this.day)
        this.day.insertEvent(this);
}

CalendarEvent.prototype.toString = function() 
{
    return "CalendarEvent: " + this.title + " starting on " + this.from.toString();
}

CalendarEvent.prototype.searchResultAsListItem = function() 
{
    var listItem = document.createElement("li");
    var titleText = document.createTextNode(this.title);
    var locationText = this.location.length > 0 ? document.createTextNode(this.location) : null;
    var startTimeText = document.createTextNode(this.from.toLocaleString());
    listItem.appendChild(titleText);
    listItem.appendChild(document.createElement("br"));
    if (locationText) {
        listItem.appendChild(locationText);
        listItem.appendChild(document.createElement("br"));
    }
    listItem.appendChild(startTimeText);
    listItem.calendarEvent = this;
    listItem.addStyleClass(this.calendar);
    listItem.addEventListener("click", CalendarEvent.eventSelected, false);
    this.listItemNode = listItem;
    return listItem;
}

CalendarEvent.calendarEventFromResultRow = function(row, fromSearch) 
{
    var dayDate = Date.dayDateFromTime(row["startTime"]);
    var dayObj = dateToDayObjectMap[dayDate.getTime()];
    var calendarEvent = new CalendarEvent(dayDate, dayObj, row["eventCalendar"], fromSearch);
    calendarEvent.id = row["id"];
    calendarEvent.title = row["eventTitle"];
    calendarEvent.location = row["eventLocation"];
    calendarEvent.from = new Date();
    calendarEvent.from.setTime(row["startTime"]);
    calendarEvent.to = new Date();
    calendarEvent.to.setTime(row["endTime"]);
    calendarEvent.details = row["eventDetails"];
    return calendarEvent;
}

// Miscellaneous methods ------------------------------------------------

function stopEvent(event) 
{
    event.preventDefault();
    event.stopPropagation();
}