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

var CalendarUI =
{
    Back:             null,
    Box:              null,
    Container:        null,
    OldScroll:        null,
    OldResize:        null,
    IsLoading:        false,
    CurrentDate:      null,
    Tables:           new Array(),
    BackBTN:          null,
    NextBTN:          null,
    Header:           null,
    CalendarEvents:   new Array(),
    CalendarDates:    new Array(),
    BackWait:         null,
    NextWait:         null,
    EventImage:       null,
    EventTitle:       null,
    EventTitle2:      null,
    EventDate:        null,
    EventDescription: null,
    ButtonContainer:  null,
    Load:             function() 
    {
        CalendarUI.CurrentDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1)

        CalendarUI.BackBTN  = $get('backbtn')
        CalendarUI.NextBTN  = $get('nextbtn')
        CalendarUI.Header   = $get('calheader')
        CalendarUI.BackWait = $get('calbackwt')
        CalendarUI.NextWait = $get('calnextwt')

        $addHandler(CalendarUI.BackBTN, "click", CalendarUI.BackBTN_Click)
        $addHandler(CalendarUI.NextBTN, "click", CalendarUI.NextBTN_Click)

        var div = document.createElement("div")
        div.innerHTML = '<div id="calback" style="position: fixed;    visibility: hidden; display: none; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #391A06; opacity: 0.80; -moz-opacity: 0.80; filter: alpha(opacity=80); z-index: 10000;"></div>' +
                        '<div id="calbox"  style="position: absolute; visibility: hidden; display: none; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 10001;">' +
                        '<center><div id="calcont"></div></center></div>'

        document.body.appendChild(div)

        CalendarUI.Back      = $get('calback')
        CalendarUI.Box       = $get('calbox')
        CalendarUI.Container = $get('calcont')
        CalendarUI.Container.appendChild($get('calpopup'))

        BaseUI.Expand($get('calpopup'))

        CalendarUI.EventImage       = $get('evimage')
        CalendarUI.EventTitle       = $get('evtitle')
        CalendarUI.EventTitle2      = $get('evtitle2')
        CalendarUI.EventDate        = $get('evdate')
        CalendarUI.EventDescription = $get('evdescription')
        CalendarUI.ButtonContainer  = $get('evbtncont')

        if ((Sys.Browser.agent == Sys.Browser.InternetExplorer) && (Sys.Browser.version < 7)) 
        {
            CalendarUI.Back.style.position = 'absolute'

            CalendarUI.OldScroll = window.onresize
            CalendarUI.OldResize = window.onscroll

            window.onscroll = function() 
            {
                if (CalendarUI.OldScroll) CalendarUI.OldScroll()
                CalendarUI.Scroll()
            }
            window.onresize = function() 
            {
                if (CalendarUI.OldResize) CalendarUI.OldResize()
                CalendarUI.Resize()
            }
        }
        
        for (var i = 0; i < 42; i++)
        {
            CalendarUI.CalendarDates.push($get('cd' + i))
        }

        CalendarUI.ChangeDates(CalendarUI.CurrentDate)
    },
    Open: function(cevent) 
    {
        if (Sys.Browser.agent == Sys.Browser.Safari) 
        {   
            setTimeout('document.body.scrollTop = 0;', 100);
        }
        else 
        {
            window.scrollTo(0, 0)
        }

        CalendarUI.EventImage.style.visibility = cevent.Image.trim() == '' ? 'hidden' : 'visible'
        CalendarUI.EventImage      .src       = cevent.Image  
        CalendarUI.EventTitle      .innerHTML = cevent.Title
        CalendarUI.EventTitle2     .innerHTML = cevent.Title
        CalendarUI.EventDate       .innerHTML = cevent.Date.format('MMMM dd, yyyy')
        CalendarUI.EventDescription.innerHTML = cevent.Description
  
        BaseUI.RemoveAllChildren(CalendarUI.ButtonContainer)

        for (var i = 0; i < cevent.Buttons.length; i++)
        {
            var TheCallToAction    = cevent.Buttons[i];
            var TheCallToActionDiv = document.createElement('div')
            
            BaseUI.SetClass(TheCallToActionDiv, 'calbtn')
            CalendarUI.CreateButton(TheCallToActionDiv, TheCallToAction)
            CalendarUI.ButtonContainer.appendChild(TheCallToActionDiv)
        }
        
        if (cevent.IsShareable)
        {
            var TheShareAction    = { "Text": "Share", "Link": "", "OnClick": "", "Target": ""};
            var TheShareActionDiv = document.createElement('div')

            BaseUI.SetClass(TheShareActionDiv, 'calbtn')
            CalendarUI.ButtonContainer.appendChild(TheShareActionDiv)
            CalendarUI.CreateShareButton(TheShareActionDiv, TheShareAction)
        }
        
        var TheClear = document.createElement('div')
        TheClear.style.clear = 'both'
        CalendarUI.ButtonContainer.appendChild(TheClear)

        BaseUI.Expand(CalendarUI.Back)
        BaseUI.Expand(CalendarUI.Box)
    },
    Close: function() 
    {
        BaseUI.Collapse(CalendarUI.Back)
        BaseUI.Collapse(CalendarUI.Box)
    },
    BackBTN_Click: function() 
    {
        if (CalendarUI.IsLoading) return
        var TheDate = new Date(CalendarUI.CurrentDate.getFullYear(), CalendarUI.CurrentDate.getMonth() - 1, 1)
        CalendarUI.ChangeDates(TheDate)
        BaseUI.Show(CalendarUI.BackWait)
    },
    NextBTN_Click: function() 
    {
        if (CalendarUI.IsLoading) return
        var TheDate = new Date(CalendarUI.CurrentDate.getFullYear(), CalendarUI.CurrentDate.getMonth() + 1, 1)
        CalendarUI.ChangeDates(TheDate)
        BaseUI.Show(CalendarUI.NextWait)
    },
    ChangeDates: function(date) 
    {
        CalendarUI.IsLoading   = true
        CalendarUI.CurrentDate = date

        CalendarUI.FillOutCalendar()

        if ((CalendarUI.CurrentDate.getFullYear() == new Date().getFullYear()) && (CalendarUI.CurrentDate.getMonth() == new Date().getMonth())) 
        {
            BaseUI.Hide(CalendarUI.BackBTN)
        }
        else 
        {
            BaseUI.Show(CalendarUI.BackBTN)
        }

        var TheStartDate = CalendarUI.CurrentDate
        var TheEndDate   = new Date(CalendarUI.CurrentDate.getFullYear(), CalendarUI.CurrentDate.getMonth() + 1, 1)

        TheEndDate = new Date(TheEndDate.getFullYear(), TheEndDate.getMonth(), 1)

        BaseUI.MakeRequest('/handlers/CalendarEvents.ashx?sd=' + TheStartDate.format('yyyy-MM-dd') +
                                                        '&ed=' + TheEndDate  .format('yyyy-MM-dd') +
                                                         '&r=' + Math.random(), "GET", null, CalendarUI.ChangeDates_Complete)
    },
    ChangeDates_Complete: function(params) 
    {
        if (params.responseData) 
        {
            var TheItems = eval(Sys.Serialization.JavaScriptSerializer.deserialize(params.responseData))

            if (TheItems.Error) 
            {
                alert(TheItems.Error)
            }
            else 
            {
                CalendarUI.CalendarEvents = TheItems
                CalendarUI.FillOutDates()
            }
        }
        else 
        {
            alert('An error occurred getting Dates!')
        }

        BaseUI.Hide(CalendarUI.BackWait)
        BaseUI.Hide(CalendarUI.NextWait)
        CalendarUI.IsLoading = false
    },
    FillOutDates: function() 
    {
        var TheWeekDay = CalendarUI.CurrentDate.getDay()

        if (TheWeekDay == 0) TheWeekDay = 7

        for (var i = 0; i < CalendarUI.CalendarEvents.length; i++) 
        {
            var TheCalendarEvent = CalendarUI.CalendarEvents[i]
            var colidx = TheCalendarEvent.Date.getDate() + TheWeekDay - 1
            var col    = $get('cd' + colidx)

            var TheEventDiv = document.createElement('div')
            TheEventDiv.innerHTML     = TheCalendarEvent.Title
            TheEventDiv.CalendarEvent = TheCalendarEvent
            
            BaseUI.SetClass(TheEventDiv, 'datediv')
            
            switch (TheCalendarEvent.Category.toLowerCase())
            {
                case "onsite":
                    TheEventDiv.style.color = '#00408a'
                    break
                case "offsite":
                    TheEventDiv.style.color = '#423424'
                    break
            }
            
            $addHandler(TheEventDiv, "click", function()
            {
                CalendarUI.Open(this.CalendarEvent)
            })
            
            col.appendChild(TheEventDiv)
        }
    },
    FillOutCalendar: function() 
    {
        var TheWeekDay     = CalendarUI.CurrentDate.getDay()
        var TheDaysInMonth = BaseUI.DaysInMonth(CalendarUI.CurrentDate)
        
        if (TheWeekDay == 0) TheWeekDay = 7

        var TheIndex = 1

        CalendarUI.Header.innerHTML = CalendarUI.CurrentDate.format('MMMM yyyy')

        for (var i = 0; i < 42; i++) 
        {
            var col = $get('cd' + i)
            var colidx = i - TheWeekDay + 1

            BaseUI.RemoveAllChildren(col)
            
            if ((colidx > 0) && (colidx <= TheDaysInMonth)) 
            {
                var TheDateDiv = document.createElement('div')
                TheDateDiv.innerHTML = TheIndex
                col.appendChild(TheDateDiv)
                BaseUI.SetClass(TheDateDiv, 'caldate')
                TheIndex++
            }
            else
            {
                col.innerHTML = '&nbsp;'
            }
        }
    },
    Resize: function() 
    {
        CalendarUI.Back.style.height = document.documentElement.clientHeight + document.documentElement.scrollTop  + "px"
        CalendarUI.Back.style.width  = document.documentElement.clientWidth  + document.documentElement.scrollLeft + "px"
        CalendarUI.Box .style.height = document.documentElement.clientHeight + document.documentElement.scrollTop  + "px"
        CalendarUI.Box .style.width  = document.documentElement.clientWidth  + document.documentElement.scrollLeft + "px"
    },
    Scroll: function() 
    {
        CalendarUI.Back.style.height = document.documentElement.clientHeight + document.documentElement.scrollTop  + "px"
        CalendarUI.Back.style.width  = document.documentElement.clientWidth  + document.documentElement.scrollLeft + "px"
        CalendarUI.Box .style.height = document.documentElement.clientHeight + document.documentElement.scrollTop  + "px"
        CalendarUI.Box .style.width  = document.documentElement.clientWidth  + document.documentElement.scrollLeft + "px"
    },
    CreateButton: function(el, calltoaction)
    {
        var TheTable = document.createElement('table')
        
        TheTable.cellpadding = "0"
        TheTable.cellspacing = "0"
        TheTable.style.borderCollapse = 'collapse'

        var TheRow   = TheTable.insertRow(-1)
        var TheCol1  = TheRow.insertCell(-1)
        var TheCol2  = TheRow.insertCell(-1)
        var TheCol3  = TheRow.insertCell(-1)
        
        TheCol1.style.padding = '0px'
        TheCol2.style.padding = '0px'
        TheCol3.style.padding = '0px'
        
        TheCol1.innerHTML = '<div class="calbtnl">&nbsp;</div>'
        TheCol2.innerHTML = '<div class="calbtnm">' + calltoaction.Text + '</div>'
        TheCol3.innerHTML = '<div class="calbtnr">&nbsp;</div>'

        el.appendChild(TheTable)

        if ((calltoaction.OnClick && (calltoaction.OnClick != '')) || (calltoaction.Link && (calltoaction.Link != '')))
        {
            el.CallToAction = calltoaction

            $addHandler(el, "click", function()
            {
                if ((calltoaction.OnClick && (calltoaction.OnClick != '')))
                {
                    eval(this.CallToAction.OnClick)
                }
                
                if (this.CallToAction.Target == "_blank")
                {
                    window.open(this.CallToAction.Link)   
                }
                else
                {
                    document.location.href = this.CallToAction.Link   
                }
            })
        }
    },
    CreateShareButton: function(el, calltoaction)
    { 
        var TheTable = document.createElement('table')

        TheTable.cellpadding = "0"
        TheTable.cellspacing = "0"
        TheTable.style.borderCollapse = 'collapse'

        var TheRow  = TheTable.insertRow(-1)
        var TheCol1 = TheRow.insertCell(-1)
        
        TheCol1.style.padding = '0px'
        TheCol1.innerHTML = '<a name="tsdiv" href="http://www.travel-share.com/" username="" buttonimage="/images/caltravelshare.jpg" buttonheight="36px" buttonwidth="70px" orientation="topleft"></a>'

        el.appendChild(TheTable)
        
        var TheTravelShare = new TravelShare()
        TheTravelShare.Initialize(TheCol1.childNodes[0])
        TheTravelShares.push(TheTravelShare)
    }
}

Sys.Application.add_load(CalendarUI.Load)