$( function()
{
  var hideDelay = 500;
  var currentID = null;
  var hideTimer = null;

  // One instance that's reused to show info for the current person
  var container = $( '<div id="eventPopupContainer">'
    + '<table width="" border="0" cellspacing="0" cellpadding="0" class="eventPopup">'
    + '<tr>'
    + '   <td class="corner topLeft"></td>'
    + '   <td class="top"></td>'
    + '   <td class="corner topRight"></td>'
    + '</tr>'
    + '<tr>'
    + '   <td class="left">&nbsp;</td>'
    + '   <td><a href="javascript:;"><img id="idcerrar" align="right" src="images/cerrar.gif" alt="Click to Close" /></a>'
    + '<div id="eventContent"></div></td>'
    + '   <td class="right">&nbsp;</td>' + '</tr>' + '<tr>' + '   <td class="corner bottomLeft">&nbsp;</td>'
    + '   <td class="bottom">&nbsp;</td>' + '   <td class="corner bottomRight"></td>' + '</tr>' + '</table>' + '</div>');

  $('body').append( container);

  $('#datepicker').datepicker(
    {
      beforeShowDay: function( date)
      {
        var today = (new Date()).toDateString();
        var events = {};

        for (var i = 0; i < dates.length; i++)
        {
          var eventDate = dates[i];

          if (eventDate.toDateString() != today && eventDate.getTime() == date.getTime())
          {
            switch (event_type[i])
            {
              case EventType.NORMAL:
                events.normal = true;
                break;

              case EventType.SPECIAL:
                events.special = true;
                break;

              case EventType.BIG:
                events.big = true;
                break;
            }
          }
        }

        var eventType = '';

        if (events.big)
        {
          eventType = 'big-event';
        }
        else if (events.special)
        {
          eventType = 'special-event';
        }
        else if (events.normal)
        {
          eventType = 'normal-event';
        }

        return [true, eventType];
      },

      onSelect: function(dateText, inst)
      {
        if (hideTimer)
        {
          clearTimeout( hideTimer);
        }

        var pos = $( this).offset();
        var width = $( this).width();
        container.css( {
          left: (pos.left + width) + 'px',
          top: pos.top - 5 + 'px'
        });

        $('#eventContent').html( '&nbsp;');

        $.ajax({
          type: 'GET',
          url: 'pages/events.php',
          data: 'date=' + dateText,

          success: function( data)
          {
            if (data.indexOf( 'eventPopupResult') < 0)
            {
              $('#eventContent').html( '<span >Page  did not return a valid result for an event.</span>');
            }
            else
            {
              $('#eventContent').html( data);
            }

            if (data.indexOf( currentID) > 0)
            {
              var text = $( data).find( '.eventPopupResult').html();
              $('#eventContent').html( text);
            }
          }
        });

        container.css( 'display', 'block');

        $( '.eventPopupTrigger').live( 'mouseout', function()
        {
          if (hideTimer)
          {
            clearTimeout( hideTimer);
          }
          hideTimer = setTimeout( function()
          {
            container.css( 'display', 'none');
          }, hideDelay);
        });

        // Allow mouse over of details without hiding details
        $( '#eventPopupContainer').mouseover( function()
        {
          if (hideTimer)
          {
            clearTimeout( hideTimer);
          }
        });

        // Hide after mouseout
        $( '#idcerrar').click( function()
        {
          container.css( 'display', 'none');
        });
      }
    });
});