$(document).ready(function() {


	var $calendar = $('#calendar');
	var id = Math.floor(Math.random()*11100000);

   $calendar.weekCalendar({
		date: new Date(2010, 03, 12, 00, 00, 00, 00),
		buttons:false,
      timeslotsPerHour : 4,
      allowCalEventOverlap : true,
      overlapEventsSeparate: true,
      firstDayOfWeek : 1,
      businessHours : {start: 8, end: 24, limitDisplay: true },
      daysToShow : 7,
      height : function($calendar) {
         return 1400;
      },
      readonly:true,
      eventRender : function(calEvent, $event) {
         calEvent.readOnly = true;
         
         // set bg colour
		$event.attr('class', $event.attr('class') + ' category' + calEvent.category);
      },
      draggable : function(calEvent, $event) {
         return calEvent.readOnly != true;
      },
      resizable : function(calEvent, $event) {
         return calEvent.readOnly != true;
      },
      eventNew : function(calEvent, $event) {
      },
      eventDrop : function(calEvent, $event) {
      			$.post(ajaxurl,
					{
						action: 'save_my_event',
						"id": calEvent.id,
						"start": calEvent.start,
						"end": calEvent.end,
						"title": calEvent.title,
						"body": calEvent.body,
						"category": calEvent.category
					}, 
					function(response) {
					//	alert('RESPONSE: ' + response);
					}
				);
      },
      eventResize : function(calEvent, $event) {
      			$.post(ajaxurl,
					{
						action: 'save_my_event',
						"id": calEvent.id,
						"start": calEvent.start,
						"end": calEvent.end,
						"title": calEvent.title,
						"body": calEvent.body,
						"category": calEvent.category
					}, 
					function(response) {
					//	alert('RESPONSE: ' + response);
					}
				);
      },
      eventClick : function(calEvent, $event) {
      },
      eventMouseover : function(calEvent, $event) {
      },
      eventMouseout : function(calEvent, $event) {
      },
      noEvents : function() {

      },
      calendarBeforeLoad : function(calendar) {
      	$('#calendar-status').show();
      },
      calendarAfterLoad : function(calendar) {
      	$('#calendar-status').slideUp('slow');
      },
      data : function(start, end, callback) {
      	$.ajaxSetup({ cache: false });
		$.getJSON(ajaxurl, {
				action: 'get_my_events'
			},
			function(data){
				callback({events:data});
			}
		);
      }
   });

   function resetForm($dialogContent) {
      $dialogContent.find("input").val("");
      $dialogContent.find("textarea").val("");
   }

   /*
    * Sets up the start and end time fields in the calendar event
    * form for editing based on the calendar event being edited
    */
   function setupStartAndEndTimeFields($startTimeField, $endTimeField, calEvent, timeslotTimes) {

      for (var i = 0; i < timeslotTimes.length; i++) {
         var startTime = timeslotTimes[i].start;
         var endTime = timeslotTimes[i].end;
         var startSelected = "";
         if (startTime.getTime() === calEvent.start.getTime()) {
            startSelected = "selected=\"selected\"";
         }
         var endSelected = "";
         if (endTime.getTime() === calEvent.end.getTime()) {
            endSelected = "selected=\"selected\"";
         }
         $startTimeField.append("<option value=\"" + startTime + "\" " + startSelected + ">" + timeslotTimes[i].startFormatted + "</option>");
         $endTimeField.append("<option value=\"" + endTime + "\" " + endSelected + ">" + timeslotTimes[i].endFormatted + "</option>");

      }
      $endTimeOptions = $endTimeField.find("option");
      $startTimeField.trigger("change");
   }

   var $endTimeField = $("select[name='end']");
   var $endTimeOptions = $endTimeField.find("option");

   //reduces the end time options to be only after the start time options.
   $("select[name='start']").change(function() {
      var startTime = $(this).find(":selected").val();
      var currentEndTime = $endTimeField.find("option:selected").val();
      $endTimeField.html(
            $endTimeOptions.filter(function() {
               return startTime < $(this).val();
            })
            );

      var endTimeSelected = false;
      $endTimeField.find("option").each(function() {
         if ($(this).val() === currentEndTime) {
            $(this).attr("selected", "selected");
            endTimeSelected = true;
            return false;
         }
      });

      if (!endTimeSelected) {
         //automatically select an end date 2 slots away.
         $endTimeField.find("option:eq(1)").attr("selected", "selected");
      }

   });


   var $about = $("#about");

   $("#about_button").click(function() {
      $about.dialog({
         title: "About this calendar demo",
         width: 600,
         close: function() {
            $about.dialog("destroy");
            $about.hide();
         },
         buttons: {
            close : function() {
               $about.dialog("close");
            }
         }
      }).show();
   });


});