var dp;

$(document).ready(function () {
    /**
     * Implementación del filtrado del calendario, utilizando los mismos dias
     */
    dp = new DayPilot.Scheduler("dp", {
        theme: "default",
        days: 365,
        // Behavior and appearance
        timeRangeSelectedHandling: "Disabled",
        treePreventParentUsage: true,
        useEventBoxes: "Never",
        snapToGrid: true,
        moveBy: 'Full',
        // Header control -> Resources
        rowHeaderWidthAutoFit: true,
        rowMinHeight: 25,
        eventHeight: 45,
        rowMarginTop: 1,
        rowMarginBottom: 1,
        rowHeaderColumns: [
            {text: "Crew", display: "name"}
        ],
        // Scrolling control
        infiniteScrollingEnabled: true,
        infiniteScrollingMargin: 20,
        infiniteScrollingStepDays: 100,
        // Performing
        scrollDelayDynamic: 500,
        scrollDelayCells: 500,
        scrollDelayEvents: 1000,
        scrollDelayFloats: 200,
        scrollDelayRows: 200,
        // events can loading dynamically with the scroll
        dynamicLoading: true,
        onScroll: function (args) {
            /*
             * The next line fix the problem of start with another date that we never set.
             * Now the scroll works with change of zoom, fixed the backward and forward of the dates.
             * Now when the scroll is moved, the first date is the same that scroll have at begining.
             */
            dp.startDate = DayPilot.Date.today().firstDayOfMonth();
            //
            var start = args.viewport.start.toString();
            var end = args.viewport.end.toString();
            //
            args.async = true;
            args.events = loadEvents(start, end);
            // Wait some time until load the events
            setTimeout(function () {
                args.loaded();
            }, 1000);
            return false;
        },
        // Event Handling
        eventMoveHandling: "Update",
        eventHoverHandling: "Bubble",
        bubble: new DayPilot.Bubble({
            onLoad: function (args) {
                // if event object doesn't specify "bubbleHtml" property
                // this onLoad handler will be called to provide the bubble HTML
                //args.html = "Event details";
            },
        }),
        onRowFilter: function (args) {
            var str = args.filter.toUpperCase();
            var trades = str.replace(/ +(?= )/g, ''); // Remove multiples spaces
            if (args.row.name.toUpperCase().indexOf(trades) === -1) {
                args.visible = false;
            }
        },
        onEventMoved: function (args) {
            args.preventDefault();
            if (args.external) {
                createEvent(args, "");
            } else {
                // Update the event move
                eventMoved(args, "");
            }
        },
        eventResizeHandling: "Update",
        onEventResized: function (args) {
            args.preventDefault();
            eventMoved(args, "resize");
        },
        eventDeleteHandling: "Disabled",
        eventClickHandling: "Enabled",
        onEventMouseOver: function (args) {
            var id = args.e.id();
            dp.bubble = new DayPilot.Bubble({
                cssOnly: true,
                theme: "bubble_event",
                onLoad: function (args) {
                    args.html = "Bubble";
                }
            });
            return false; // This line forced to hide the bubble.
        },
        onBeforeCellRender: function (args) {
            // We need to get the resource id first
            var id = "#days_" + args.cell.resource;
            var days = $.trim($(id).text());
            if (days.length > 0) {
                for (var i = 0; i < days.length; i++) {
                    if (args.cell.start.getDayOfWeek() == days[i]) {
                        args.cell.business = true; // Mark the days not availables
                        args.cell.backColor = "#f9f9f9";
                    }
                }
            }
        }
    });

    loadResources();
    //dp.zoomPosition = "middle";
    dp.zoomLevels = [
        {
            name: "Year",
            properties: {
                scale: "Day",
                cellWidth: 40,
                timeHeaders: [
                    {"groupBy": "Month"},
                    {"groupBy": "Day", "format": "ddd"},
                    {"groupBy": "Day", "format": "d"}
                ],
				// The lines below doesn't work, maybe for the scroll function.
                startDate: function (args) {
                    return DayPilot.Date.today().firstDayOfMonth();
                },
                days: 365,
            }
        },
        {
            name: "Month",
            properties: {
                scale: "Month",
                cellDuration: 720,
                cellWidth: 150,
                timeHeaders: [
                    {groupBy: "Year"},
                    {groupBy: "Month"}
                ],
				// The lines below doesn't work, maybe for the scroll function.
                startDate: function (args) {
                    return DayPilot.Date.today().firstDayOfMonth();
                },
                days: 365,
            }
        },
    ];
    // make sure the default zoom level is set before dp.init()
    applyLevel(0);
    dp.init();
    // filter control
    function filterCalendar(query) {
        dp.rows.filter(query); // see dp.onRowFilter below
    }
    function makeDraggable() {
        var parent = document.getElementById("external");
        var items = parent.getElementsByTagName("li");
        for (var i = 0; i < items.length; i++) {
            var e = items[i];
            var textF = e.getAttribute("data-address") + "/" + e.getAttribute("data-stage") +
                    "/" + e.getAttribute("data-contact") + "/" + e.getAttribute("data-company") +
                    "/" + e.getAttribute("data-vendor");
            var item = {
                element: e,
                id: e.getAttribute("data-id"),
                text: textF,
                duration: e.getAttribute("data-duration"),
                keepElement: true
            };
            DayPilot.Scheduler.makeDraggable(item);
        }
    }
    makeDraggable();
    function applyLevel(index) {
        dp.zoom.setActive(index);
    }
});