/// <reference name="MicrosoftAjax.js"/>
/// <reference path="VeJavaScriptIntellisenseHelper.js" />

Type.registerNamespace('EventList.ClientControl');

EventList.ClientControl.EventSelectControl = function(element) {
    EventList.ClientControl.EventSelectControl.initializeBase(this, [element]);
    this._servicePath = null;
    this._selectedEventID = null;
    this._itemList = null;
    this._itemCount = null;
}

EventList.ClientControl.EventSelectControl.prototype = {
    initialize: function() {
        EventList.ClientControl.EventSelectControl.callBaseMethod(this, 'initialize');
        Sys.Net.WebServiceProxy.invoke(this._servicePath, "GetEventsListItems", false, null, Function.createDelegate(this, this.set_itemList));
    },

    get_servicePath: function() { return this._servicePath; },
    set_servicePath: function(value) { this._servicePath = value; },

    get_itemList: function() { return this._itemList; },
    set_itemList: function(value) {
        this._itemList = value;
        this._itemCount = this._itemList.length;
        this._selectedEventID = 0;
        this.render();
    },

    get_selectedEventID: function() { return this._selectedEventID; },
    set_selectedEventID: function(value) {
        if (this._selectedEventID !== value) {
            this._selectedEventID = value;
            this.raisePropertyChanged('selectedEventID');
        }
    },

    get_itemCount: function() { return this._itemCount; },
    set_itemCount: function(value) { this._itemCount = value; },

    onChange: function(sender) {
        var eventID = $get("selEvents").value;
        this.set_selectedEventID(eventID);
    },

    render: function() {
        var element = this.get_element();
        element.innerHTML = '';
        var select = document.createElement('select');
        select.id = "selEvents";
        Sys.UI.DomElement.addCssClass(select, 'input');
        var defaultOption = document.createElement('option');
        defaultOption.value = "-1";
        defaultOption.innerText = "CHOOSE A LOCATION";
        select.appendChild(defaultOption);
        for (var x = 0; x < this._itemList.length; x++) {
            var option = document.createElement('option');
            option.value = this._itemList[x].Value;
            option.innerText = this._itemList[x].Text;
            select.appendChild(option);
        }
        $addHandler(select, 'change', Function.createCallback(Function.createDelegate(this, this.onChange), null));
        element.appendChild(select);
    },

    dispose: function() {
        EventList.ClientControl.EventSelectControl.callBaseMethod(this, 'dispose');
    }
}
EventList.ClientControl.EventSelectControl.registerClass('EventList.ClientControl.EventSelectControl', Sys.UI.Control);

EventList.ClientControl.EventListControl = function(element) {
    EventList.ClientControl.EventListControl.initializeBase(this, [element]);
    this._servicePath = null;
    this._eventCount = null;
    this._currentPage = null;
    this._perPage = null;
    this._search = null;
    this._mapID = null;
    this._eventList = null;
    this._elements = [];
    this._selectedIndex = null;
    this._mapDiv = null;
    this._map = null;
    this._mappingAvailable = null;
    this._eventSelectControl = null;
    this._browserName = null;
    this._browserVersion = null;
    this._zipCode = null;
}

EventList.ClientControl.EventListControl.prototype = {
    initialize: function() {
        EventList.ClientControl.EventListControl.callBaseMethod(this, 'initialize');
        this._eventSelectControl.add_propertyChanged(Function.createDelegate(this, this.onEventSelectChanged));
        BrowserDetect.init();
        this._browserName = BrowserDetect.browser;
        this._browserVersion = BrowserDetect.version;
        this.loadAllEvents(null, null);
    },

    onEventSelectChanged: function(sender, args) {
        if (args.get_propertyName() === 'selectedEventID') {
            if (this._mappingAvailable)
                this._map.Clear();
            var eventID = this._eventSelectControl.get_selectedEventID();
            if (eventID == -1)
                this.loadAllEvents(null, null);
            else
                this.loadSingleEvent(this._eventSelectControl.get_selectedEventID());
        }
    },

    loadAllEvents: function(sender, index) {
        this._search = "All Events";
        Sys.Net.WebServiceProxy.invoke(this._servicePath, "GetEvents", false, null, Function.createDelegate(this, this.set_eventList));
    },

    loadSingleEvent: function(value) {
        Sys.Net.WebServiceProxy.invoke(this._servicePath, "GetEvent", false, { "EventID": value }, Function.createDelegate(this, this.loadEvent));
    },

    loadEvent: function(value) {
        this._search = "Get event by location";
        this._eventList = value;
        this._eventCount = this._eventList.length;
        this.set_currentPage(0);
        if (this._mappingAvailable)
            this._map.SetCenterAndZoom(new VELatLong(this._eventList[0].Latitude, this._eventList[0].Longitude), 10);
    },

    loadRegionEvents: function(value) {
        this._search = "Get events by region - " + value;
        if (this._mappingAvailable)
            this._map.Clear();
        Sys.Net.WebServiceProxy.invoke(this._servicePath, "GetEventsByRegion", false, { "Region": value }, Function.createDelegate(this, this.set_eventList));
    },

    loadDistrictEvents: function(value) {
        this._search = "Get events by district - " + value;
        if (this._mappingAvailable)
            this._map.Clear();
        Sys.Net.WebServiceProxy.invoke(this._servicePath, "GetEventsByDistrict", false, { "District": value }, Function.createDelegate(this, this.set_eventList));
    },

    loadEventsByType: function(value) {
        this._search = "Get events by type - " + value;
        if (this._mappingAvailable)
            this._map.Clear();
        Sys.Net.WebServiceProxy.invoke(this._servicePath, "GetEventsByTypeID", false, { "EventTypeID": value }, Function.createDelegate(this, this.set_eventList));
    },

    loadZipCodeEvents: function(value) {
        if (value == "ZIP CODE SEARCH")
            alert("Please enter a zip code");
        else {
            if (this._mappingAvailable) {
                var re = /^\d{5}([\-]\d{4})?$/;
                if (!re.test(value)) {
                    alert("Zip Code must be in '99999' or '99999-9999' format");
                }
                else {
                    this._search = "Get events by zip code - " + value;
                    this._zipCode = value;
                    this._map.Clear();
                    Sys.Net.WebServiceProxy.invoke(this._servicePath, "GetEvents", false, null, Function.createDelegate(this, this.loadZipCodeEventsResults));
                }
            }
            else
                alert("Mapping features are currently unavailable.");
        }
    },

    loadZipCodeEventsResults: function(value) {
        this._eventList = value;
        this._eventCount = this._eventList.length;
        this._map.Find(null,      //what
                    this._zipCode,    // where
                    null,       // VEFindType (always VEFindType.Businesses)
                    null,       // VEShapeLayer (base by default)
                    null,       // start index for results (0 by default)
                    null,    // max number of results (default is 10)
                    null,    // show results? (default is true)
                    null,    // create pushpin for what results? (ignored since what is null)
                    null,    // use default disambiguation? (default is true)
                    null,    // set best map view? (default is true)
                    Function.createDelegate(this, this.loadZipCodeGeocodeResults));  // call back function
    },

    loadZipCodeGeocodeResults: function(shapeLayer, findResults, places, moreResults, errorMsg) {
        if (places == null) {
            alert((errorMsg == null) ? "Error locating zip code - please try your search again" : errorMsg);
            return;
        }
        var bestPlace = places[0];
        var location = bestPlace.LatLong;
        var radius = 323;       //323km = ~200mi
        //calc distance from zip for each event
        for (var i = 0; i < this._eventCount; i++) {
            this._eventList[i].Distance = this.distance(location, new VELatLong(this._eventList[i].Latitude, this._eventList[i].Longitude));
        }
        this._eventList.sort(this.distanceSort);
        this.set_currentPage(0);
        var searchLayer = new VEShapeLayer();
        searchLayer.SetTitle("Search");
        for (var x = 0; x < this._eventCount; x++) {
            var eventLocation = new VELatLong(this._eventList[x].Latitude, this._eventList[x].Longitude);
            var shape = new VEShape(VEShapeType.Pushpin, eventLocation);
            var pushpin = "<img src='/images/" + this._eventList[x].PushpinName + "' alt='event pushpin' />";
            if (x < 10) {
                if ((this._browserName == "Explorer") && (this._browserVersion == "7"))
                    pushpin += "<span class='mapPinTextIE7'>" + (x + 1) + "</span>";
                else
                    pushpin += "<span class='mapPinText'>" + (x + 1) + "</span>";
            }
            else {
                if ((this._browserName == "Explorer") && (this._browserVersion == "7"))
                    pushpin += "<span class='mapPinTextDoubleDigitIE7'>" + (x + 1) + "</span>";
                else
                    pushpin += "<span class='mapPinTextDoubleDigit'>" + (x + 1) + "</span>";
            }
            var eventDate = new Date(this._eventList[x].EventDate);
            var desc = eventDate.format("d") + "<br />" + this._eventList[x].Location + "<br />" + this._eventList[x].City + ", " + this._eventList[x].State + "  " + this._eventList[x].ZipCode;
            desc += "<br /><br /><a href='" + this._eventList[x].Url + "' target='_blank'><img src='/images/but_register.jpg' width='69' height='15' border='0'/></a>";
            shape.SetCustomIcon(pushpin);
            shape.SetTitle(this._eventList[x].EventName);
            shape.SetDescription(desc);
            searchLayer.AddShape(shape);
        }
        this._map.AddShapeLayer(searchLayer);
        this.drawZipCodeSearchCircle(location, radius);
    },

    drawZipCodeSearchCircle: function(origin, radius) {
        var earthRadius = 6371;

        //latitude in radians
        var lat = (origin.Latitude * Math.PI) / 180;

        //longitude in radians
        var lon = (origin.Longitude * Math.PI) / 180;
        //angular distance covered on earth's surface
        var d = parseFloat(radius) / earthRadius;
        var points = new Array();
        for (i = 0; i <= 360; i++) {
            var point = new VELatLong(0, 0)
            var bearing = i * Math.PI / 180; //rad
            point.Latitude = Math.asin(Math.sin(lat) * Math.cos(d) +
          Math.cos(lat) * Math.sin(d) * Math.cos(bearing));
            point.Longitude = ((lon + Math.atan2(Math.sin(bearing) * Math.sin(d) * Math.cos(lat),
          Math.cos(d) - Math.sin(lat) * Math.sin(point.Latitude))) * 180) / Math.PI;
            point.Latitude = (point.Latitude * 180) / Math.PI;
            points.push(point);
        }

        var circle = new VEShape(VEShapeType.Polyline, points);
        circle.HideIcon();
        var searchLayer = this.findMapLayer("Search");
        searchLayer.AddShape(circle);
        this._map.SetMapView(points);
    },

    moveMapToCurrentLocation: function(latitude, longitude) {
        if (this._mappingAvailable)
            this._map.SetCenterAndZoom(new VELatLong(latitude, longitude), 5);
    },

    distance: function(latlong, latlong2) {
        var lat1 = latlong.Latitude;
        var lon1 = latlong.Longitude;
        var lat2 = latlong2.Latitude;
        var lon2 = latlong2.Longitude;
        var earthRadius = 6371; //appxoximate radius in miles

        var factor = Math.PI / 180;
        var dLat = (lat2 - lat1) * factor;
        var dLon = (lon2 - lon1) * factor;
        var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * factor)
        * Math.cos(lat2 * factor) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        var d = earthRadius * c;
        return d;
    },

    distanceSort: function(a, b) {
        return a.Distance - b.Distance;
    },

    loadKeywordEvents: function(value) {
        if (value == "KEYWORD SEARCH")
            alert("Please enter a keyword");
        else {
            this._search = "Get events by keywords - " + value;
            if (this._mappingAvailable)
                this._map.Clear();
            Sys.Net.WebServiceProxy.invoke(this._servicePath, "GetEventsByKeyword", false, { "Keywords": value }, Function.createDelegate(this, this.set_eventList));
        }
    },

    findMapLayer: function(value) {
        var layer = null;
        for (var i = 0; i < this._map.GetShapeLayerCount(); i++) {
            layer = this._map.GetShapeLayerByIndex(i);
            var layerTitle = layer.GetTitle();
            if (layerTitle == value)
                break;
            layer = null;
        }
        return layer;
    },

    get_servicePath: function() { return this._servicePath; },
    set_servicePath: function(value) { this._servicePath = value; },

    get_perPage: function() { return this._perPage; },
    set_perPage: function(value) {
        if (value < 1)
            this._perPage = 1;
        else
            this._perPage = value;
    },

    get_eventSelectControl: function() { return this._eventSelectControl; },
    set_eventSelectControl: function(value) { this._eventSelectControl = value; },

    get_mapDiv: function() { return this._mapDiv; },
    set_mapDiv: function(value) {
        this._mapDiv = value;
        this._map = new VEMap(this._mapDiv);
        this._map.LoadMap();
        this._mappingAvailable = true;
    },

    get_map: function() { return this._map; },
    set_map: function(value) { this._map = value; },

    get_eventCount: function() { return this._eventCount; },
    set_eventCount: function(value) {
        this._eventCount = value;
    },

    get_currentPage: function() { return this._currentPage; },
    set_currentPage: function(value) {
        this._currentPage = value;
        this.render();
        if (this._eventCount > 0) {
            this._selectedIndex = -1;
            var index;
            if (this._currentPage > 0)
                index = (this._perPage * this._currentPage);
            else
                index = 0;
            this.onSelect(null, index);
        }
    },

    get_selectedIndex: function() { return this._selectedIndex; },
    set_selectedIndex: function(value) {
        this._selectedIndex = value;
    },

    get_latitude: function() { return this._latitude; },
    set_latitude: function(value) { this._latitude = value; },

    get_longitude: function() { return this._longitude; },
    set_longitude: function(value) { this._longitude = value; },

    get_eventList: function() { return this._eventList; },
    set_eventList: function(value) {
        this._eventList = value;
        this._eventCount = this._eventList.length;
        this.set_currentPage(0);
    },

    onSelect: function(sender, index) {
        for (var i = 0; i < this._elements.length; i++) {
            Sys.UI.DomElement.removeCssClass(this._elements[i], 'selectedEvent');
        }
        var elIndex;
        if (this._currentPage > 0)
            elIndex = index - (this._perPage * this._currentPage);
        else
            elIndex = index;
        Sys.UI.DomElement.addCssClass(this._elements[elIndex], 'selectedEvent');
        if (this._selectedIndex != -1 && this._mappingAvailable)
            this._map.SetCenterAndZoom(new VELatLong(this._eventList[index].Latitude, this._eventList[index].Longitude), 10);
        this.set_selectedIndex(index);
        var eventDate = new Date(this._eventList[index].EventDate);
        $get("divEventLocation").innerHTML = "<span style='color:" + this._eventList[index].Color + "'>" + (index + 1) + ") " + this._eventList[index].City + ", " + this._eventList[index].State + " - " + eventDate.format("d") + " - <a style='color:" + this._eventList[index].Color + "' href='" + this._eventList[index].Url + "' title='Register for this event'>REGISTER >></a></span>";
        $get("divEventTitle").innerHTML = this._eventList[index].EventName;
        Sys.Net.WebServiceProxy.invoke(this._servicePath, "GetEventDescription", false, { "EventID": this._eventList[index].EventID }, Function.createDelegate(this, this.updateEventDescription));
    },

    onPage: function(sender, newPage) { this.set_currentPage(newPage); },

    updateEventDescription: function(value) {
        var eventDate = new Date(this._eventList[this._selectedIndex].EventDate);
        var strHTML = "<p>" + value + " <a href='" + this._eventList[this._selectedIndex].Url + "' target='_blank' title='View more event details'>MORE INFO >></a></p><br />";
        $get("divEventDesc").innerHTML = strHTML;
        this.renderEventSelectionNavBar();
    },

    renderEventSelectionNavBar: function() {
        var divNavBar = $get("divEventSelectionNavBar");
        divNavBar.innerHTML = "";
        var spanResults = document.createElement('span');
        var firstIndex = this._currentPage * this._perPage;
        var lastIndex = ((this._currentPage + 1) * this._perPage) - 1;
        if (lastIndex > this._eventCount - 1)
            lastIndex = this._eventCount - 1;

        if (this._selectedIndex != firstIndex) {
            var first = document.createElement('a');
            first.href = 'javascript:void(0)';
            first.innerHTML = "&lt;&lt;&nbsp;";
            first.title = "View first event";
            $addHandler(first, 'click', Function.createCallback(Function.createDelegate(this, this.onSelect), firstIndex));
            spanResults.appendChild(first);
        }
        else {
            var first = document.createElement('span');
            Sys.UI.DomElement.addCssClass(first, 'eventListNavDisabled');
            first.innerHTML = "&lt;&lt;&nbsp;";
            spanResults.appendChild(first);
        }

        if (this._selectedIndex > firstIndex) {
            var back = document.createElement('a');
            back.href = 'javascript:void(0)';
            back.innerHTML = "&nbsp;Back&nbsp;";
            back.title = "View previous event";
            $addHandler(back, 'click', Function.createCallback(Function.createDelegate(this, this.onSelect), this._selectedIndex - 1));
            spanResults.appendChild(back);
        }
        else {
            var back = document.createElement('span');
            Sys.UI.DomElement.addCssClass(back, 'eventListNavDisabled');
            back.innerHTML = "&nbsp;Back&nbsp;";
            spanResults.appendChild(back);
        }

        var spanBreak1 = document.createElement('span');
        spanBreak1.innerHTML = "&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;";
        spanResults.appendChild(spanBreak1);

        var itemCount = (lastIndex - firstIndex) + 1;
        for (var i = firstIndex; i < lastIndex + 1; i++) {
            if (i == this._selectedIndex) {
                var page = document.createElement('span');
                page.innerHTML = "<strong>" + (i + 1) + "</strong>&nbsp;&nbsp;";
                spanResults.appendChild(page);
            }
            else {
                var page = document.createElement('a');
                page.href = 'javascript:void(0)';
                page.innerHTML = i + 1 + "&nbsp;&nbsp;";
                page.title = "View event " + (i + 1);
                $addHandler(page, 'click', Function.createCallback(Function.createDelegate(this, this.onSelect), i));
                spanResults.appendChild(page);
            }
        }

        var spanBreak2 = document.createElement('span');
        spanBreak2.innerHTML = "&nbsp;&nbsp;|&nbsp;";
        spanResults.appendChild(spanBreak2);

        if (this._selectedIndex < lastIndex) {
            var next = document.createElement('a');
            next.href = 'javascript:void(0)';
            next.innerHTML = "&nbsp;Next&nbsp;";
            next.title = "View next event";
            $addHandler(next, 'click', Function.createCallback(Function.createDelegate(this, this.onSelect), this._selectedIndex + 1));
            spanResults.appendChild(next);
        }
        else {
            var next = document.createElement('span');
            Sys.UI.DomElement.addCssClass(next, 'eventListNavDisabled');
            next.innerHTML = "&nbsp;Next&nbsp;";
            spanResults.appendChild(next);
        }

        if (this._selectedIndex != lastIndex) {
            var last = document.createElement('a');
            last.href = 'javascript:void(0)';
            last.innerHTML = "&nbsp;&gt;&gt;";
            last.title = "View last event";
            $addHandler(last, 'click', Function.createCallback(Function.createDelegate(this, this.onSelect), lastIndex));
            spanResults.appendChild(last);
        }
        else {
            var last = document.createElement('span');
            Sys.UI.DomElement.addCssClass(last, 'eventListNavDisabled');
            last.innerHTML = "&nbsp;&gt;&gt;";
            spanResults.appendChild(last);
        }

        divNavBar.appendChild(spanResults);
        divNavBar.style.display = "block";
    },

    mapClickHandler: function(e) {
        if (e.elementID != null) {
            var eventControl = $find("divEventListResults");
            var map = eventControl.get_map();
            var shape = map.GetShapeByID(e.elementID);
            var pushpin = shape.GetCustomIcon();
            var spanStart = pushpin.indexOf("<span");
            var spanEnd = pushpin.indexOf("</span>");
            var sub = pushpin.substring(spanStart, spanEnd);
            var endSpan = sub.indexOf("'>");
            var eventIndexString = sub.slice(endSpan + 2);
            var eventIndex = parseInt(eventIndexString) - 1;
            var eventList = eventControl.get_eventList();
            var eventId = eventList[eventIndex].EventID;
            eventControl.loadSingleEvent(eventId);
        }
    },

    renderEventsOnMap: function() {
        if (this._mappingAvailable) {
            try {
                this._map.Clear();
                var eventLayer = new VEShapeLayer();
                eventLayer.SetTitle("Events");
                for (var x = 0; x < this._eventCount; x++) {
                    var eventLocation = new VELatLong(this._eventList[x].Latitude, this._eventList[x].Longitude);
                    var shape = new VEShape(VEShapeType.Pushpin, eventLocation);
                    var pushpin = "<img src='/images/" + this._eventList[x].PushpinName + "' alt='event pushpin' />";
                    if (x < 10) {
                        if ((this._browserName == "Explorer") && (this._browserVersion == "7"))
                            pushpin += "<span class='mapPinTextIE7'>" + (x + 1) + "</span>";
                        else
                            pushpin += "<span class='mapPinText'>" + (x + 1) + "</span>";
                    }
                    else {
                        if ((this._browserName == "Explorer") && (this._browserVersion == "7"))
                            pushpin += "<span class='mapPinTextDoubleDigitIE7'>" + (x + 1) + "</span>";
                        else
                            pushpin += "<span class='mapPinTextDoubleDigit'>" + (x + 1) + "</span>";
                    }
                    var eventDate = new Date(this._eventList[x].EventDate);
                    var desc = eventDate.format("d") + "<br />" + this._eventList[x].Location + "<br />" + this._eventList[x].City + ", " + this._eventList[x].State + "  " + this._eventList[x].ZipCode;
                    desc += "<br /><br /><a href='" + this._eventList[x].Url + "' target='_blank'><img src='/images/but_register.jpg' width='69' height='15' border='0'/></a><input type='hidden' id='pushpinEventId' value='" + this._eventList[x].EventID + "' />";
                    shape.SetCustomIcon(pushpin);
                    shape.SetTitle(this._eventList[x].EventName);
                    shape.SetDescription(desc);
                    eventLayer.AddShape(shape);
                }
                this._map.AddShapeLayer(eventLayer);
                this._map.SetMapView(eventLayer.GetBoundingRectangle());
                this._map.AttachEvent("onclick", this.mapClickHandler);
            }
            catch (Error) {
                this._mappingAvailable = false;
                $("#eventMapErrorMessage").show();
                HideMap();
            }
        }
    },

    render: function() {
        var element = this.get_element();
        element.innerHTML = '';
        this._elements = [];

        var divResultMsg = document.createElement('div');
        Sys.UI.DomElement.addCssClass(divResultMsg, 'eventResultsMsg');
        var msg = this._eventCount;
        if (this._eventCount == 1)
            msg += " event found.&nbsp;&nbsp;&nbsp;";
        else
            msg += " events found.&nbsp;&nbsp;&nbsp;";
        divResultMsg.innerHTML = msg;

        var divShowAll = document.createElement('a');
        divShowAll.href = "javascript:void(0);";
        divShowAll.innerHTML = "View All Events";
        $addHandler(divShowAll, 'click', Function.createCallback(Function.createDelegate(this, this.loadAllEvents), null));
        divResultMsg.appendChild(divShowAll);
        element.appendChild(divResultMsg);

        var divResults = document.createElement('div');
        Sys.UI.DomElement.addCssClass(divResults, 'eventResults');
        var spanResults = document.createElement('span');

        if (this._currentPage > 0) {
            var first = document.createElement('a');
            first.href = 'javascript:void(0)';
            first.innerHTML = "|&lt;&lt;&nbsp;";
            first.title = "View first page of events";
            $addHandler(first, 'click', Function.createCallback(Function.createDelegate(this, this.onPage), 0));
            spanResults.appendChild(first);

            var back = document.createElement('a');
            back.href = 'javascript:void(0)';
            back.innerHTML = "&nbsp;Back&nbsp;";
            back.title = "View previous page of events";
            $addHandler(back, 'click', Function.createCallback(Function.createDelegate(this, this.onPage), this._currentPage - 1));
            spanResults.appendChild(back);
        }
        else {
            var first = document.createElement('span');
            Sys.UI.DomElement.addCssClass(first, 'eventListNavDisabled');
            first.innerHTML = "|&lt;&lt;&nbsp;";
            spanResults.appendChild(first);

            var back = document.createElement('span');
            Sys.UI.DomElement.addCssClass(back, 'eventListNavDisabled');
            back.innerHTML = "&nbsp;Back&nbsp;";
            spanResults.appendChild(back);
        }

        var pageCount = Math.ceil(this._eventCount / this._perPage);
        if ((this._currentPage + 1) * this._perPage < this._eventCount) {
            var next = document.createElement('a');
            next.href = 'javascript:void(0)';
            next.innerHTML = "&nbsp;Next&nbsp;";
            next.title = "View next page of events";
            $addHandler(next, 'click', Function.createCallback(Function.createDelegate(this, this.onPage), this._currentPage + 1));
            spanResults.appendChild(next);
        }
        else {
            var next = document.createElement('span');
            Sys.UI.DomElement.addCssClass(next, 'eventListNavDisabled');
            next.innerHTML = "&nbsp;Next&nbsp;";
            spanResults.appendChild(next);
        }

        if (this._currentPage != (pageCount - 1)) {
            var last = document.createElement('a');
            last.href = 'javascript:void(0)';
            last.innerHTML = "&nbsp;&gt;&gt;|";
            last.title = "View last page of events";
            $addHandler(last, 'click', Function.createCallback(Function.createDelegate(this, this.onPage), pageCount - 1));
            spanResults.appendChild(last);
        }
        else {
            var last = document.createElement('span');
            Sys.UI.DomElement.addCssClass(last, 'eventListNavDisabled');
            last.innerHTML = "&nbsp;&gt;&gt;|";
            spanResults.appendChild(last);
        }

        divResults.appendChild(spanResults);
        element.appendChild(divResults);

        var firstIndex = this._currentPage * this._perPage;
        var lastIndex = ((this._currentPage + 1) * this._perPage) - 1;
        if (lastIndex > this._eventCount - 1)
            lastIndex = this._eventCount - 1;
        if (this._eventCount > 0) {
            this.renderEventsOnMap();
            for (var x = firstIndex; x < lastIndex + 1; x++) {
                var divContainer = document.createElement('div');
                Sys.UI.DomElement.addCssClass(divContainer, 'eventContainer');
                divContainer.title = "View event details";
                var divEventListItem = document.createElement('div');
                Sys.UI.DomElement.addCssClass(divEventListItem, 'eventListItem');
                var divEventTitle = document.createElement('div');
                Sys.UI.DomElement.addCssClass(divEventTitle, 'eventListLocation');
                var eventDate = new Date(this._eventList[x].EventDate);
                divEventTitle.innerHTML = "<span style='color:" + this._eventList[x].Color + "'>" + (x + 1) + ') ' + this._eventList[x].City + ", " + this._eventList[x].State + " - " + eventDate.format("d") + "</span";
                divEventListItem.appendChild(divEventTitle);

                var div = document.createElement('div');
                Sys.UI.DomElement.addCssClass(div, 'eventListNormal');
                div.innerHTML = "<span style='color:" + this._eventList[x].Color + "'>" + this._eventList[x].EventName + "</span><br /><a style='color:" + this._eventList[x].Color + "' href='" + this._eventList[x].Url + "' target='_blank' title='Register for this event' alt='Register for this event'>REGISTER >></a>";
                divEventListItem.appendChild(div);
                divContainer.appendChild(divEventListItem);

                $addHandler(divContainer, 'click', Function.createCallback(Function.createDelegate(this, this.onSelect), x));
                this._elements.push(divContainer);
                element.appendChild(divContainer);

            }
            var divResults2 = document.createElement('div');
            Sys.UI.DomElement.addCssClass(divResults2, 'eventResults');
            var spanResults2 = document.createElement('span');

            if (this._currentPage > 0) {
                var first = document.createElement('a');
                first.href = 'javascript:void(0)';
                first.innerHTML = "|&lt;&lt;&nbsp;";
                first.title = "View first page of events";
                $addHandler(first, 'click', Function.createCallback(Function.createDelegate(this, this.onPage), 0));
                spanResults2.appendChild(first);

                var back = document.createElement('a');
                back.href = 'javascript:void(0)';
                back.innerHTML = "&nbsp;Back&nbsp;";
                back.title = "View previous page of events";
                $addHandler(back, 'click', Function.createCallback(Function.createDelegate(this, this.onPage), this._currentPage - 1));
                spanResults2.appendChild(back);
            }
            else {
                var first = document.createElement('span');
                Sys.UI.DomElement.addCssClass(first, 'eventListNavDisabled');
                first.innerHTML = "|&lt;&lt;&nbsp;";
                spanResults2.appendChild(first);

                var back = document.createElement('span');
                Sys.UI.DomElement.addCssClass(back, 'eventListNavDisabled');
                back.innerHTML = "&nbsp;Back&nbsp;";
                spanResults2.appendChild(back);
            }

            var pageCount = Math.ceil(this._eventCount / this._perPage);
            if ((this._currentPage + 1) * this._perPage < this._eventCount) {
                var next = document.createElement('a');
                next.href = 'javascript:void(0)';
                next.innerHTML = "&nbsp;Next&nbsp;";
                next.title = "View next page of events";
                $addHandler(next, 'click', Function.createCallback(Function.createDelegate(this, this.onPage), this._currentPage + 1));
                spanResults2.appendChild(next);
            }
            else {
                var next = document.createElement('span');
                Sys.UI.DomElement.addCssClass(next, 'eventListNavDisabled');
                next.innerHTML = "&nbsp;Next&nbsp;";
                spanResults2.appendChild(next);
            }

            if (this._currentPage != (pageCount - 1)) {
                var last = document.createElement('a');
                last.href = 'javascript:void(0)';
                last.innerHTML = "&nbsp;&gt;&gt;|";
                last.title = "View last page of events";
                $addHandler(last, 'click', Function.createCallback(Function.createDelegate(this, this.onPage), pageCount - 1));
                spanResults2.appendChild(last);
            }
            else {
                var last = document.createElement('span');
                Sys.UI.DomElement.addCssClass(last, 'eventListNavDisabled');
                last.innerHTML = "&nbsp;&gt;&gt;|";
                spanResults2.appendChild(last);
            }

            divResults2.appendChild(spanResults2);
            element.appendChild(divResults2);
        }
        else {
            var divContainer = document.createElement('div');
            Sys.UI.DomElement.addCssClass(divContainer, 'eventNoResults');
            divContainer.innerHTML = "No events found.";
            element.appendChild(divContainer);
            $get("divEventLocation").innerHTML = "We're sorry, there are no events available in this district at this time. Please check back as events are added often.";
            $get("divEventTitle").innerHTML = "&nbsp;";
            $get("divEventDesc").innerHTML = "&nbsp;";
            $get("divEventSelectionNavBar").innerHTML = "&nbsp;";
            $get("divEventSelectionNavBar").style.display = "none";
        }
    },

    dispose: function() {
        //Add custom dispose actions here
        if (this._map != null) {
            this._map.Dispose();
        }
        EventList.ClientControl.EventListControl.callBaseMethod(this, 'dispose');
    }
}
EventList.ClientControl.EventListControl.registerClass('EventList.ClientControl.EventListControl', Sys.UI.Control);

if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();