﻿/// <reference name="MicrosoftAjax.js" />
/// <reference path="BaseUI.js"        />

var HotDatesUI =
{
    Property:      null,
    Code:          null,
    Back:          null,
    Box:           null,
    Container:     null,
    OldScroll:     null,
    OldResize:     null,
    IsCreated:     false,
    CurrentDate:   null,
    Tables:        new Array(),
    LoadingDiv:    null,
    PrevBTN:       null,
    NextBTN:       null,
    CategoriesDiv: null,
    HotDates:      new Array(),
    Categories:    new Array(),
    Header:        null,
    Load:          function() 
    {
        HotDatesUI.CurrentDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1)
        
        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: #000000; 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" class="popup"></div></center>' + 
                        '</div>'

        document.body.appendChild(div)

        HotDatesUI.Back      = $get('calback')
        HotDatesUI.Box       = $get('calbox')
        HotDatesUI.Container = $get('calcont')
        
        if ((Sys.Browser.agent == Sys.Browser.InternetExplorer) && (Sys.Browser.version < 7)) 
        {
            HotDatesUI.Back.style.position = 'absolute'

            HotDatesUI.OldScroll = window.onresize
            HotDatesUI.OldResize = window.onscroll

            window.onscroll = function() 
            {
                if (HotDatesUI.OldScroll) HotDatesUI.OldScroll()
                HotDatesUI.Scroll()
            }
            window.onresize = function() 
            {
                if (HotDatesUI.OldResize) HotDatesUI.OldResize()
                HotDatesUI.Resize()
            }
        }
    },
    Open:     function (property,code) 
    {
        if (Sys.Browser.agent == Sys.Browser.Safari) 
        {
            setTimeout('document.body.scrollTop = 0;', 100);
            BaseUI.Hide($get('alternativeContent'))
        }
        else 
        {
            window.scrollTo(0, 0)
        }
        
        HotDatesUI.Property = property
        HotDatesUI.Code     = code

        if (!HotDatesUI.IsCreated)
        {
            HotDatesUI.Create()
        }
        else
        {
            HotDatesUI.CurrentDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1)
            HotDatesUI.Header.innerHTML = HotDatesUI.Property + ' - Hot Dates'
            HotDatesUI.ChangeDates(HotDatesUI.CurrentDate)
        }
        
        BaseUI.Expand(HotDatesUI.Back)
        BaseUI.Expand(HotDatesUI.Box)
    },
    Close:     function() 
    {
        BaseUI.Collapse(HotDatesUI.Back)
        BaseUI.Collapse(HotDatesUI.Box)

        if (Sys.Browser.agent == Sys.Browser.Safari) 
        {
            BaseUI.Show($get('alternativeContent'))
        }
    },
    Create: function()
    {
        HotDatesUI.Header = document.createElement('h2')
        HotDatesUI.Header.innerHTML = HotDatesUI.Property + ' - Hot Dates'

        var closebtn = document.createElement('div')
        closebtn.innerHTML = '<img src="/images/closebtn.jpg" />'
       
        BaseUI.SetClass(closebtn, 'closebtn')
       
        $addHandler(closebtn, "click", HotDatesUI.Close)
        
        var d1 = document.createElement('div')
        BaseUI.SetClass(d1, 'hr')
        d1.innerHTML = '<img src="/images/blank.gif" />'

        var d2 = document.createElement('div')
        BaseUI.SetClass(d2, 'hr')
        d2.innerHTML = '<img src="/images/blank.gif" />'
        
        var cl = document.createElement('div')
        BaseUI.SetClass(cl, 'clear')
        cl.innerHTML = '<img src="/images/blank.gif" height="20" />'
        
        var pgr     = document.createElement('p')
        var nextbtn = document.createElement('a')
        var prevbtn = document.createElement('a')
        
        HotDatesUI.PrevBTN = prevbtn
        HotDatesUI.NextBTN = nextbtn
        
        HotDatesUI.LoadingDiv = document.createElement('div')
        
        nextbtn.href      = '#'
        prevbtn.href      = '#'
        nextbtn.innerHTML = '<img src="/images/btn_next.gif" align="right" />'
        prevbtn.innerHTML = '<img src="/images/btn_prev.gif" align="left"  />'
        
        HotDatesUI.LoadingDiv.innerHTML = '<center><table><tr><td><img src="/images/spinner.gif" /></td><td>Loading Hot Dates . . .</td></tr></table></center>'
        
        pgr.appendChild(nextbtn)
        pgr.appendChild(prevbtn)
        pgr.appendChild(HotDatesUI.LoadingDiv)
        
        $addHandler(nextbtn, "click", HotDatesUI.NextBTN_Click)
        $addHandler(prevbtn, "click", HotDatesUI.PrevBTN_Click)

        var TheDate1 = HotDatesUI.CurrentDate
        var TheDate2 = new Date(TheDate1.getFullYear(), TheDate1.getMonth() + 1, 1)
        var TheDate3 = new Date(TheDate1.getFullYear(), TheDate1.getMonth() + 2, 1)
        var TheDate4 = new Date(TheDate1.getFullYear(), TheDate1.getMonth() + 3, 1)
        var TheGut1  = document.createElement('div')
        var TheGut2  = document.createElement('div')
        var TheGut3  = document.createElement('div')

        BaseUI.SetClass(TheGut1, 'gutter')
        BaseUI.SetClass(TheGut2, 'gutter')
        BaseUI.SetClass(TheGut3, 'gutter')
        
        TheGut1.innerHTML = '<img src="/images/blank.gif" />'
        TheGut2.innerHTML = '<img src="/images/blank.gif" />'
        TheGut3.innerHTML = '<img src="/images/blank.gif" />'
        
        var TheTable1 = HotDatesUI.CreateCalendar(TheDate1, 0)
        var TheTable2 = HotDatesUI.CreateCalendar(TheDate2, 1)
        var TheTable3 = HotDatesUI.CreateCalendar(TheDate3, 2)
        var TheTable4 = HotDatesUI.CreateCalendar(TheDate4, 3)

        HotDatesUI.Tables.push(TheTable1)
        HotDatesUI.Tables.push(TheTable2)
        HotDatesUI.Tables.push(TheTable3)
        HotDatesUI.Tables.push(TheTable4)

        TheTable1.StartDate = TheDate1
        TheTable2.StartDate = TheDate2
        TheTable3.StartDate = TheDate3
        TheTable4.StartDate = TheDate4

        HotDatesUI.CategoriesDiv = document.createElement('div')

        BaseUI.SetClass(HotDatesUI.CategoriesDiv, 'calleg')

        HotDatesUI.Container.appendChild(closebtn)
        HotDatesUI.Container.appendChild(HotDatesUI.Header)
        HotDatesUI.Container.appendChild(d1)
        HotDatesUI.Container.appendChild(TheTable1)
        HotDatesUI.Container.appendChild(TheGut1)
        HotDatesUI.Container.appendChild(TheTable2)
        HotDatesUI.Container.appendChild(TheGut2)
        HotDatesUI.Container.appendChild(TheTable3)
        HotDatesUI.Container.appendChild(TheGut3)
        HotDatesUI.Container.appendChild(TheTable4)
        HotDatesUI.Container.appendChild(cl)
        HotDatesUI.Container.appendChild(pgr)
        HotDatesUI.Container.appendChild(d2)
        HotDatesUI.Container.appendChild(HotDatesUI.CategoriesDiv)

        HotDatesUI.PrevBTN.style.visibility = 'hidden'
        HotDatesUI.ChangeDates(HotDatesUI.CurrentDate)
        
        HotDatesUI.IsCreated = true
    },
    PrevBTN_Click: function()
    {
        if (BaseUI.IsVisible(HotDatesUI.LoadingDiv)) return
        var TheDate = new Date(HotDatesUI.CurrentDate.getFullYear(), HotDatesUI.CurrentDate.getMonth() - 4, 1)
        HotDatesUI.ChangeDates(TheDate)
    },
    NextBTN_Click: function()
    {
        if (BaseUI.IsVisible(HotDatesUI.LoadingDiv)) return
        var TheDate = new Date(HotDatesUI.CurrentDate.getFullYear(), HotDatesUI.CurrentDate.getMonth() + 4, 1)
        HotDatesUI.ChangeDates(TheDate)
    },
    ChangeDates: function(date)
    {
        BaseUI.Show(HotDatesUI.LoadingDiv)
        
        var TheDate1 = date
        var TheDate2 = new Date(TheDate1.getFullYear(), TheDate1.getMonth() + 1, 1)
        var TheDate3 = new Date(TheDate1.getFullYear(), TheDate1.getMonth() + 2, 1)
        var TheDate4 = new Date(TheDate1.getFullYear(), TheDate1.getMonth() + 3, 1)

        HotDatesUI.CurrentDate = TheDate1

        HotDatesUI.Tables[0].StartDate = TheDate1
        HotDatesUI.Tables[1].StartDate = TheDate2
        HotDatesUI.Tables[2].StartDate = TheDate3
        HotDatesUI.Tables[3].StartDate = TheDate4

        HotDatesUI.FillOutCalendar(0)
        HotDatesUI.FillOutCalendar(1)
        HotDatesUI.FillOutCalendar(2)
        HotDatesUI.FillOutCalendar(3)
        
        if ((HotDatesUI.CurrentDate.getFullYear() == new Date().getFullYear()) && (HotDatesUI.CurrentDate.getMonth() == new Date().getMonth()))
        {
            BaseUI.Hide(HotDatesUI.PrevBTN)
        }
        else
        {
            BaseUI.Show(HotDatesUI.PrevBTN)
        }

        var TheStartDate = HotDatesUI.CurrentDate
        var TheEndDate   = new Date(HotDatesUI.CurrentDate.getFullYear(), HotDatesUI.CurrentDate.getMonth() + 4, 1)
        
        TheEndDate = new Date(TheEndDate.getFullYear(), TheEndDate.getMonth(), BaseUI.DaysInMonth(TheEndDate) - 1)

        BaseUI.MakeRequest('/handlers/HotDates.ashx?sd=' + TheStartDate.format('yyyy-MM-dd') +
                                                  '&ed=' + TheEndDate  .format('yyyy-MM-dd') +
                                                  '&pr=' + HotDatesUI.Code                   +
                                                   '&r=' + Math.random(), "GET", null, HotDatesUI.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 
            {
                HotDatesUI.Categories = TheItems[0]
                HotDatesUI.HotDates   = TheItems[1]

                HotDatesUI.FillOutCategories()
                HotDatesUI.FillOutDates     ()
            }
        }
        else
        {
            //alert('An error occurred getting Hot Dates!')
        }

        BaseUI.Hide(HotDatesUI.LoadingDiv)
    },
    FillOutDates: function()
    {
        var TheIndex = 0

        for (var i = 0; i < HotDatesUI.HotDates.length; i++)
        {
            var TheHotDate = HotDatesUI.HotDates[i]
            var TheDiff    = ((TheHotDate.ED - TheHotDate.SD) / (24 * 60 * 60 * 1000)) + 1

            for (var j = 0; j < TheDiff; j++)
            {
                var TheDate       = new Date(TheHotDate.SD.getFullYear(), TheHotDate.SD.getMonth(), TheHotDate.SD.getDate() + j + 1)
                var TheTableIndex = TheDate.getMonth() - HotDatesUI.CurrentDate.getMonth()

                if (TheTableIndex < 0) TheTableIndex = 12 + TheTableIndex
                if (TheTableIndex > 3) continue

                var DOW = HotDatesUI.Tables[TheTableIndex].StartDate.getDay()
                
                if (DOW == 0) DOW = 7
                
                var TheStartIndex = DOW + TheDate.getDate() - 1

                var TheJ = TheStartIndex % 7
                var TheI = (TheStartIndex - TheJ) / 7
                var col  = $get('date' + TheTableIndex + '_' + TheI + '_' + TheJ)
                
                BaseUI.SetClass(col, TheHotDate.CR.toLowerCase())
            }
        }
    },
    FillOutCategories: function()
    {
        BaseUI.RemoveAllChildren(HotDatesUI.CategoriesDiv)
        
        for (var i = 0; i < HotDatesUI.Categories.length; i++)
        {
            var TheCategory = HotDatesUI.Categories[i]
            var TheTable    = document.createElement('table')
            var TheRow      = TheTable.insertRow(-1)
            var TheCol1     = TheRow  .insertCell(-1)
            var TheCol2     = TheRow  .insertCell(-1)
            var TheDiv      = document.createElement('div')
            var TheH3       = document.createElement('h3')
            
            TheCol1.style.width = '20px'
            
            TheCol1.appendChild(TheDiv)
            TheCol2.appendChild(TheH3)
            
            TheH3.innerHTML = TheCategory.NA
            BaseUI.SetClass(TheDiv, TheCategory.CR.toLowerCase())

            HotDatesUI.CategoriesDiv.appendChild(TheTable)
        }

//        var cl = document.createElement('div')
//        BaseUI.SetClass(cl, 'clear')
//        cl.innerHTML = '<img src="images/blank.gif" height="1" />'

//        HotDatesUI.CategoriesDiv.appendChild(cl)
    },
    FillOutCalendar: function(idx)
    {
        var TheTable       = HotDatesUI.Tables[idx]
        var TheWeekDay     = TheTable.StartDate.getDay()
        var TheDaysInMonth = BaseUI.DaysInMonth(TheTable.StartDate)

        $get('datehdr' + idx).innerHTML = TheTable.StartDate.format('MMMM yyyy')

        if (TheWeekDay == 0) TheWeekDay = 7

        var TheIndex = 1

        for (var i = 0; i < 6; i++)
        {
            for (var j = 0; j < 7; j++)
            {
                var col    = $get('date' + idx + '_' + i + '_' + j)
                var colidx = (i * 7) + j - TheWeekDay + 1

                if ((colidx > 0) && (colidx <= TheDaysInMonth))
                {
                    col.innerHTML = colidx
                    col.Day       = TheIndex
                    TheIndex++
                }
                else
                {
                    col.innerHTML = '&nbsp;'
                    col.Day       = 0
                }

                BaseUI.SetClass(col, '')
            }
        }
    },
    CreateCalendar: function(date, idx)
    {
        var table = document.createElement('table')
        
        table.cellpadding          = '0'
        table.cellspacing          = '0'
        table.style.borderCollapse = 'collapse'
        table.style.width          = '208px'
        
        BaseUI.SetClass(table, 'cal')
        
        var hrow = table.insertRow(-1)
        var hcol = hrow.insertCell(-1)
        
        BaseUI.SetClass(hcol, 'month')
        hcol.setAttribute('colspan', '7')
        hcol.colSpan = '7'
        
        hcol.innerHTML = date.format('MMMM yyyy')
        hcol.id = 'datehdr' + idx
        
        var drow = table.insertRow(-1)
        var dcol1 = drow.insertCell(-1)
        var dcol2 = drow.insertCell(-1)
        var dcol3 = drow.insertCell(-1)
        var dcol4 = drow.insertCell(-1)
        var dcol5 = drow.insertCell(-1)
        var dcol6 = drow.insertCell(-1)
        var dcol7 = drow.insertCell(-1)
        
        dcol1.innerHTML = "S"
        dcol2.innerHTML = "M"
        dcol3.innerHTML = "T"
        dcol4.innerHTML = "W"
        dcol5.innerHTML = "T"
        dcol6.innerHTML = "F"
        dcol7.innerHTML = "S"

        BaseUI.SetClass(dcol1, 'day')
        BaseUI.SetClass(dcol2, 'day')
        BaseUI.SetClass(dcol3, 'day')
        BaseUI.SetClass(dcol4, 'day')
        BaseUI.SetClass(dcol5, 'day')
        BaseUI.SetClass(dcol6, 'day')

        var TheRows = new Array()
        
        for (var i = 0; i < 6; i++)
        {
            var row = table.insertRow(-1)
            
            for (var j = 0; j < 7; j++)
            {
                var col = row.insertCell(-1)
                col.id = 'date' + idx + '_' + i + '_' + j
                col.innerHTML = '&nbsp;'
            }
        }

        return table
    },
    Resize: function() 
    {
        HotDatesUI.Back.style.height = document.documentElement.clientHeight + document.documentElement.scrollTop  + "px"
        HotDatesUI.Back.style.width  = document.documentElement.clientWidth  + document.documentElement.scrollLeft + "px"
        HotDatesUI.Box .style.height = document.documentElement.clientHeight + document.documentElement.scrollTop  + "px"
        HotDatesUI.Box .style.width  = document.documentElement.clientWidth  + document.documentElement.scrollLeft + "px"
    },
    Scroll: function() 
    {
        HotDatesUI.Back.style.height = document.documentElement.clientHeight + document.documentElement.scrollTop  + "px"
        HotDatesUI.Back.style.width  = document.documentElement.clientWidth  + document.documentElement.scrollLeft + "px"
        HotDatesUI.Box .style.height = document.documentElement.clientHeight + document.documentElement.scrollTop  + "px"
        HotDatesUI.Box .style.width  = document.documentElement.clientWidth  + document.documentElement.scrollLeft + "px"
    }
}

Sys.Application.add_load(HotDatesUI.Load)