$(document).ready(function () {

    $.getJSON(
        '/Home/GetCalenderInformation',
        function (data) {
            if (data != null) {

                // Show the calendar
                $('#calendar').append(data);

                // Because we assign these 3 images with jQuery, the paths can be
                // incorrect if we are on a 'dynamic page'.  This is because the
                // dynamic pages can be any depth from the root, and because the
                // route doesn't really exist.  To correc the problem we need to 
                // get the path of a generated image and replace the image name
                // with the correct path of the left, right, and black caps.
                // 
                // The description background image is in the same directory as 
                // the caps so grab that image, and replace the image name with
                // the cap names
                var basePath = '';
                var blackCapPath = '../Content/Images/eventBlackCap.jpg';
                var leftCapPath = '../Content/Images/eventHighlightCap-Left.jpg';
                var rightCapPath = '../Content/Images/eventHighlightCap-Right.jpg';

                if ($('.description').css('background-image') != null) {
                    basePath = $('.description').css('background-image').replace('calendarPopOutBG.png', '').replace('url(', '').replace(')', '');
                    basePath = basePath.replace('"', '').replace('"', '');
                    blackCapPath = basePath + 'eventBlackCap.jpg';
                    leftCapPath = basePath + 'eventHighlightCap-Left.jpg';
                    rightCapPath = basePath + 'eventHighlightCap-Right.jpg';
                }

                // Preload the images.. we have to preload these manually because
                // they don't exist in the stylesheet for the preloadCssImages to
                // load for us. ** This is the soonest we can load these images **               
                if (document.images) {
                    leftCapImage = new Image();
                    leftCapImage.src = leftCapPath;
                    rightCapImage = new Image();
                    rightCapImage.src = rightCapPath;
                }

                // Hardcode the events to have a width of 350px so that the
                // hover works in all scenarios
                $('.events').css('width', '350px');

                // Set the default date to look like a hover
                $('.defaultPopupEvents').parent().addClass('datesDefaultPopup');

                // Set the date hover to increase the size of the number
                $('.dates').hover(
                    function () {
                        // Remove the default on the first hover, then reset the hover for this one element
                        $('.datesDefaultPopup').removeClass('datesDefaultPopup').addClass('dates').hover(function () {
                            // Animate the date to grow
                            $(this).stop().animate({ fontSize: "18px", top: "-=6px" }, 250).css('font-weight', 'bold').css('color', 'white');

                            // Show the events
                            $('ul', this).stop().show();

                            // Get the default event, and set it to the 'hover' state
                            var defaultEventId = $('ul > :first-child', this).attr('id');
                            $('ul > :first-child', this).removeClass('event').addClass('defaultSelected');
                            $('#' + defaultEventId + 'LeftCap').attr('src', leftCapPath);
                            $('#' + defaultEventId + 'RightCap').attr('src', rightCapPath);

                            // Check the position of the date element, if its left + 380 (the width of the 
                            // events div image) is greater than 950 (the width of the calenderContent div,
                            // set the left of the events div to right justifiy (get the day's left, and subtract
                            // 293).
                            if ($(this).position().left + 380 > 950)
                                $('.events', this).css('left', $(this).position().left - 293);

                            // Show the default event description
                            $('ul > :first-child', this).children().stop().show();
                        },
                            function () {
                                // Shrink the date
                                $(this).stop(true, true).animate({ fontSize: "11px", top: "+=6px" }, 250).css('font-weight', 'normal').css('color', '#919195');

                                // Hide the event and description
                                $('ul', this).stop().hide();
                                $('ul > li > .description', this).stop().hide();
                            }
                        );

                        // Re-hardcode the width of the event
                        $('.defaultPopupEvents').removeClass('defaultPopupEvents').addClass('events').css('width', '350px');
                        $('.defaultSelected').removeClass('defaultSelected').addClass('event');
                        $('.descriptionDefaultPopup').removeClass('descriptionDefaultPopup').addClass('description');

                        // Animate the date to grow
                        $(this).stop().animate({ fontSize: "18px", top: "-=6px" }, 250).css('font-weight', 'bold').css('color', 'white');

                        // Show the events
                        $('ul', this).stop().show();

                        // Get the default event, and set it to the 'hover' state
                        var defaultEventId = $('ul > :first-child', this).attr('id');
                        $('ul > :first-child', this).removeClass('event').addClass('defaultSelected');
                        $('#' + defaultEventId + 'LeftCap').attr('src', leftCapPath);
                        $('#' + defaultEventId + 'RightCap').attr('src', rightCapPath);

                        // Check the position of the date element, if its left + 380 (the width of the 
                        // events div image) is greater than 950 (the width of the calenderContent div,
                        // set the left of the events div to right justifiy (get the day's left, and subtract
                        // 293).
                        if ($(this).position().left + 380 > 950)
                            $('.events', this).css('left', $(this).position().left - 293);

                        // Show the default event description
                        $('ul > :first-child', this).children().stop().show();
                    },
                    function () {
                        // Shrink the date
                        $(this).stop(true, true).animate({ fontSize: "11px", top: "+=6px" }, 250).css('font-weight', 'normal').css('color', '#919195');

                        // Hide the event and description
                        $('ul', this).stop().hide();
                        $('ul > li > .description', this).stop().hide();
                    }
                );

                // We need to do this because the default description is a special case, that only lasts until some other
                // other element is either clicked or hovered over.  Because of the fact that when the defaultPopup classes
                // are changed to the regular classes the existing event handlers wont fire until they are reassigned in the
                // date hover.  This will cause the default description to disappear when the default even is hovered over.
                // To fix this we put in this flag to immediatly show the default description after the class name is changed.
                var showDefaultDescription = true;

                $('.defaultSelected').hover(
                    function () {
                        // If there is a element with defaultSelected, remove it and set it to event
                        $(this).removeClass('defaultSelected').addClass('event');
                        $('div.descriptionDefaultPopup', this).removeClass('descriptionDefaultPopup').addClass('description');

                        if (showDefaultDescription) {
                            $('div.description', this).stop().show();
                            showDefaultDescription = false;
                        }

                        // Get the event name from the parent
                        var eventName = $(this).attr('id');

                        // Set the red caps on the selected event
                        $('#' + eventName + 'LeftCap').attr('src', leftCapPath);
                        $('#' + eventName + 'RightCap').attr('src', rightCapPath);

                        // Add the click event to the event
                        $(this).click(function () {
                            // Hide all other descriptions
                            $(this).parent().find('div.description').stop().hide();

                            // Show our description
                            $('.description', this).stop().show();
                        });
                    },
                    function () {
                        // Change the background image caps
                        $(this).children('img').attr('src', blackCapPath);
                    }
                );

                $('.event').hover(
                    function () {
                        // If there is a element with defaultSelected, remove it and set it to event
                        $(this).parent().find('li').removeClass('defaultSelected').addClass('event');

                        // Get the event name from the parent
                        var eventName = $(this).attr('id');

                        // Set the red caps on the selected event
                        $('#' + eventName + 'LeftCap').attr('src', leftCapPath);
                        $('#' + eventName + 'RightCap').attr('src', rightCapPath);

                        // Add the click event to the event
                        $(this).click(function () {
                            // Hide all other descriptions
                            $(this).parent().find('div.description').stop().hide();                            

                            // Show our description
                            $('.description', this).stop().show();
                        });
                    },
                    function () {
                        // Change the background image caps
                        $(this).children('img').attr('src', blackCapPath);
                    }
                );


                Cufon.refresh();
            }
        }
    );
});