﻿/// <reference path="jquery-1.3.2.js" />


$(document).ready(function() {
    var hideDelay = 500;
    var hideDelayTimer = null;
    var distance = 10;
    var popup = $(".popupBubble");
    var calendarEventList = $("#calendarEventList");
    var eventList = null;
    HighlightDaysWithEvents();
    //AddDisplayEventsOnHover();
    AddDisplayOnClick();
    AddHoverEvent();


    /* function AddDisplayEventsOnHover() {
    $("#calendarContainer td.calendarDay").hover(
    function() {
    ShowEventsPopup($(this).find(".calendarEventPreview"), $(this).position());
    },
    function() {
    HideEventsPopup($(this).find(".calendarEventPreview"));
    }
    );
    }*/
    function AddHoverEvent() {
        $("#calendarContainer td.calendarDay").hover(
            function() {
                $(this).addClass("hover");
            },
            function() {
                $(this).removeClass("hover");
            }
        )
    }

    function AddDisplayOnClick() {

        $("#calendarContainer td.calendarDay").click(
            function() {
                $(".calendarSelectedDay").removeClass("calendarSelectedDay");        
                $(this).addClass("calendarSelectedDay");
                ShowEvents($(this).find(".calendarEventPreview"))

            });
        $("#calendarContainer td.calendarToday").click(
            function() {
                $(".calendarSelectedDay").removeClass("calendarSelectedDay");                
                $(this).addClass("calendarSelectedDay");
                ShowEvents($(this).find(".calendarEventPreview"))
            });
    }
    
    function ShowEvents(eventList) {
        CloseEventList();
        if (eventList.size() > 0) {
            calendarEventList.append(eventList.clone());
        }
        else {
            calendarEventList.append("No events scheduled on this day.");
        }
        OpenEventList();
    }

    function ClearEventList() {

        calendarEventList.html("");
    }

    function CloseEventList() {
        calendarEventList.hide("fast", ClearEventList());
    }

    function OpenEventList() {
        calendarEventList.show("slow");
    }



    function ShowEventsPopup(eventList, position) {
        if (eventList.size() > 0) {
            popup.append(eventList.clone());

            if (hideDelayTimer) {
                clearTimeout(hideDelayTimer);
            }
            if (popup.is(':animated, :visible')) {
                return;
            }
            var topPosition = position.top - 100;
            var leftPosition = position.left - 33;
            //popup.html("POSITION:top=" + position.top + "; left=" + position.left);
            //popup.css(top, position.top);
            //popup.css(left, position.left);
            popup.css({ display: 'block', top: topPosition, left: leftPosition });
            //popup.css({ top: -100, left: -33, display: 'block' });
            //popup.animate({ top: '-=10px', opacity: 1 }, 250, 'swing');

            //$(".popupBubble").append(eventList.clone());
        }
    }
    function HideEventsPopup(eventList) {
        if (eventList.size() > 0) {
            if (hideDelayTimer) {
                clearTimeout(hideDelayTimer);
            }
            hideDelayTimer = setTimeout(RunOut, hideDelay);
            //popup.html("");
        }
    }

    function RunOut() {
        hideDelayTimer = null;
        popup.animate({ top: '-=10px', opacity: 0 }, 250, 'swing', FinishOut);
    }
    function FinishOut() {
        popup.css('display', 'none');
        popup.html("");
    }

    function HighlightDaysWithEvents() {
        $(".calendarEventPreview").parent().addClass("calendarEventDay");
    }

});
/*
<div class="calendarEventPreview">
	<a href="<%# GetDocumentUrl() %>"><%# Eval("EventName") %></a><br/>
	<%# Eval("EventSummary") %><br />
	<%# Eval("EventLocation") %><br />
	<a href="<%# GetDocumentUrl() %>">More Details</a>
</div>


<div class="popupBubble"></div>
*/