$(function () {

    var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();
            $('#full-calendar').fullCalendar({
                    header: {
                            left: 'prev,next',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay'
                    },
                    editable: true,
                    droppable: true,
                    drop: function(date, allDay) { // this function is called when something is dropped
                            // retrieve the dropped element's stored Event Object
                            var originalEventObject = $(this).data('eventObject');
                            // we need to copy it, so that multiple events don't have a reference to the same object
                            var copiedEventObject = $.extend({}, originalEventObject);
                            // assign it the date that was reported
                            copiedEventObject.start = date;
                            copiedEventObject.allDay = allDay;
                            copiedEventObject.className = $(this).attr("data-category");
                            // render the event on the calendar
                            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                            $('#full-calendar').fullCalendar('renderEvent', copiedEventObject, true);
                            // is the "remove after drop" checkbox checked?
                            //if ($('#drop-remove').is(':checked')) {
                                    // if so, remove the element from the "Draggable Events" list
                                    $(this).remove();
                            //}
                    },
                    events: [
                            {
                                    title: 'All Day Event',
                                    start: new Date(y, m, 1),
                                    end: new Date (y, m, 2),
                                    className: 'fc-red'
                            },
                            {
                                    title: 'Long Event',
                                    start: new Date(y, m, d-5),
                                    end: new Date(y, m, d-2),
                                    className: 'fc-yellow'
                            },
                            {
                                    id: 999,
                                    title: 'Repeating Event',
                                    start: new Date(y, m, d-3, 16, 0),
                                    allDay: false,
                                    className: 'fc-grey'
                            },
                            {
                                    id: 999,
                                    title: 'Repeating Event',
                                    start: new Date(y, m, d+1, 14, 0),
                                    end: new Date(y, m, d+3, 14, 0),
                                    allDay: false,
                                    className: 'fc-charcoal'
                            },
                            {
                                    title: 'Meeting',
                                    start: new Date(y, m, d-13, 10, 30),
                                    end: new Date (y,m,d-11, 10,30),
                                    allDay: false,
                                    className: 'fc-grey'
                            },
                            {
                                    title: 'Lunch',
                                    start: new Date(y, m, d, 12, 0),
                                    end: new Date(y, m, d, 14, 0),
                                    allDay: false,
                                    className: 'fc-red'
                            }
                    ]
            });
    $('#external-events div.external-event').each(function() {
                    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                    // it doesn't need to have a start or end
                    var eventObject = {
                            title: $.trim($(this).text()) // use the element's text as the event title
                    };
                    // store the Event Object in the DOM element so we can get to it later
                    $(this).data('eventObject', eventObject);
                    // make the event draggable using jQuery UI
                    $(this).draggable({
                            zIndex: 999,
                            revert: true,      // will cause the event to go back to its
                            revertDuration: 0  //  original position after the drag
                    });
            });
    var addEvent = function (title, category) {
    title = title.length == 0 ? "Untitled Event" : title;
    category = category.length == 0 ? 'fc-secondary' : category;
    var html = $('<div data-category="' + category + '" class="external-event ui-draggable label ' + category + '">' + title + '</div>');
    jQuery('#event_box').append(html);
    initDrag(html);
}
$('#event-form').unbind('submit').submit(function (e) {
            e.preventDefault ();
            var title = $('#event_title');
            var category = $('#event_category');
            addEvent(title.val(), category.val ());
            title.val ('');
    });
var initDrag = function (el) {
    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
    // it doesn't need to have a start or end
    var eventObject = {
        title: $.trim(el.text()) // use the element's text as the event title
    };
    // store the Event Object in the DOM element so we can get to it later
    el.data('eventObject', eventObject);
    // make the event draggable using jQuery UI
    el.draggable({
        zIndex: 999,
        revert: true, // will cause the event to go back to its
        revertDuration: 0 //  original position after the drag
    });
}

});