var gridWidth = 27;
            var gridHeight = 26;
            var headerWidth = 122;
            var headerHeight = 40;
            var headerMonthHeight = (headerHeight / 2) - 1;
            var headerDateHeight = (headerHeight / 2);
            var monthLeft = headerWidth;
            var monthDays = 0;

function loadCalendar(popup) {
    if (popup == true) {
        $('#pnlCalendars').css({ 'background-color': 'white',
            'height': ($(window).height() - 100) + 'px',
            'padding-top': '30px',
            'padding-left': '30px',
            'padding-right': '25px',
            'padding-bottom': '25px'
        });
        $('#pnlCalendars').find('div.calendars').css({ 'height': ($(window).height() - 100) + 'px', 'overflow-y': 'auto', 'overflow-x': 'hidden', 'width':'1099px' }); 
       // $('#pnlCalendars').css('height': 'white', 'padding': '30px' });
    }
    var data = { 'rid': ResortId };
    $.ajax({ url: 'services/QuoteServices.svc/GetCalendarGroups',
        type: 'POST',
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(data),
        success: function (msg) {
            var days;
            var Today = new Date();
            var EndDate = new Date();
            EndDate.setDate(EndDate.getDate() + 750);

            var month = Today.getMonth();

            var monthstr = monthString[month];
            var year = Today.getFullYear();
            days = days_between(EndDate, Today);
            var calendarWidth = days * gridWidth;

            for (cg = 0; cg < msg.d.length; cg++) {
                var villas = msg.d[cg].villas;

                //var villas = msg.d[i];

                var $wrapper = $('<div class=\'calendar-scroll-wrapper\'>');
                var $scrollview = $('<div class=\'calendar-scrollview\'>');

                $wrapper.append($scrollview);






                var villaCnt = villas.length;


                var calendarHeight = (villaCnt * gridHeight) - 1;

                for (v = 0; v < villaCnt; v++) {
                    var top = headerHeight + (v * gridHeight);
                    if (v == 0) {
                        $wrapper.append("<div class='calendar-villa-row-header' style='height:" + (headerHeight - 3) + "px;border-top:none;'></div>");
                    }
                    if (v < villaCnt - 1) {
                        $wrapper.append("<div class='calendar-villa-row-header' style='height:" + (gridHeight - 4) + "px;'>" + villas[v].vref + "</div>");
                    }
                    else {
                        $wrapper.append("<div class='calendar-villa-row-header' style='border-bottom: 1px solid grey;height:" + (gridHeight - 4) + "px;'>" + villas[v].vref + "</div>");
                    }
                    $scrollview.append("<div villaid='" + villas[v].id + "' class='calendar-row-marker' style='width:" + calendarWidth + "px;left:" + headerWidth + "px;'></div>");
                }

                $wrapper.css('height', headerHeight + (gridHeight * villaCnt) + 'px');
                $scrollview.css('height', headerHeight + 18 + (gridHeight * villaCnt) + 'px');



                for (d = 0; d < days; d++) {
                    var left = headerWidth + (d * gridWidth);
                    var newDate = new Date();
                    newDate.setDate(Today.getDate() + d);
                    var date = newDate.getDate();
                    var newMonth = newDate.getMonth();
                    monthDays++;
                    if (newMonth != month) {
                        $scrollview.append("<div class='calendar-month-header' style='width:" + (gridWidth * monthDays) + "px;left:" + monthLeft + "px;height:" + headerMonthHeight + "px;'>" + monthString[month] + " " + year + "</div>");
                        month = newMonth;
                        year = newDate.getFullYear();
                        monthDays = 0;
                        monthLeft = left;
                    }
                    $scrollview.append("<div class='calendar-grid-col' style='width:" + gridWidth + "px;height:" + calendarHeight + "px;left:" + left + "px;top:" + headerHeight + "px;'></div>");
                    $scrollview.append("<div class='calendar-date-header' style='width:" + gridWidth + "px;left:" + left + "px;height:" + headerDateHeight + "px;top:" + headerMonthHeight + "px;'>" + date + "</div>");
                }
                $scrollview.append("<div class='calendar-month-header' style='width:" + (gridWidth * (monthDays + 1)) + "px;left:" + monthLeft + "px;height:" + headerMonthHeight + "px;'>" + monthString[month] + " " + year + "</div>");

                var bookingStart = new Date();
                var bookingEnd = new Date();
                var villaIndex = 5;
                var bookingStatus = '#FF99CC';
                var bookingText = "Dunlop";
                var villarowid;

                bookingEnd.setDate(bookingStart.getDate() + 5);
                //$scrollview.append(bookingHTM(bookingStart, bookingEnd, bookingStatus, villaIndex, bookingText));

                //                bookingStart.setDate(bookingStart.getDate() + 5);
                //                bookingEnd.setDate(bookingStart.getDate() + 7);
                //                villaIndex = 6;
                //                villarowid = 'e8fc078e-f2e9-447e-a4d0-9b43075a5f27';
                //                bookingStatus = 2;
                //                bookingText = "Meakin";
                //                $scrollview.append(bookingHTM(bookingStart, bookingEnd, bookingStatus, villaIndex, 124, headerHeight, gridWidth, gridHeight, bookingText, villarowid));

                //                bookingStart.setDate(bookingStart.getDate() + 3);
                //                bookingEnd.setDate(bookingStart.getDate() + 3);
                //                villaIndex = 7;
                //                bookingStatus = '#66FF66';
                //                bookingText = "Conway";
                //                $scrollview.append(bookingHTM(bookingStart, bookingEnd, bookingStatus, villaIndex, bookingText,null,true,false));

                //                bookingStart.setDate(bookingStart.getDate() + 3);
                //                bookingEnd.setDate(bookingStart.getDate() + 3);
                //                villaIndex = 2;
                //                bookingStatus = '#FFFF99';
                //                bookingText = "Marsh";
                //                $scrollview.append(bookingHTM(bookingStart, bookingEnd, bookingStatus, villaIndex, 124, bookingText));

                //                bookingStart.setDate(bookingStart.getDate() + 3);
                //                bookingEnd.setDate(bookingStart.getDate() + 3);
                //                villaIndex = 3;
                //                bookingStatus = '#6699FF';
                //                bookingText = "Rodney";
                //                $scrollview.append(bookingHTM(bookingStart, bookingEnd, bookingStatus, villaIndex, bookingText, null, false, true));

                //                bookingStart.setDate(bookingStart.getDate() + 3);
                //                bookingEnd.setDate(bookingStart.getDate() + 3);
                //                villaIndex = 6;
                //                bookingStatus = '#FF9966';
                //                $scrollview.append(bookingHTM(bookingStart, bookingEnd, bookingStatus, villaIndex, bookingText));


                // <table><tr><td><div class='arrow'></div></td><td><h3>' + villas[0].groupname + '</h3></td></tr></table>
                $('.calendars').append('<div class=\'calendar-tools\'><table><tr><td style="width:121px;"><div class=\'arrow\'></div></td><td><h4>' + villas[0].groupname + ' Availability Calendar - (' + villaCnt + ' Units)</h4></td></tr></table></div>');
                $('.calendars').append($wrapper);
            }
            var bookingStart = new Date();
            var bookingEnd = new Date();
            var villaIndex = 5;
            var bookingStatus = '#CC99FF';
            var bookingText = "Dunlop";
            var villarowid;

            bookingEnd.setDate(bookingStart.getDate() + 5);
            //$scrollview.append(bookingHTM(bookingStart, bookingEnd, bookingStatus, villaIndex, 124, headerHeight, gridWidth, gridHeight, bookingText));

            bookingStart.setDate(bookingStart.getDate() + 5);
            bookingEnd.setDate(bookingStart.getDate() + 7);
            villaIndex = 6;
            villarowid = 'd7cea1bf-f3d1-465f-97d6-ba75fcf5f4ea';
            bookingStatus = '#FF99CC';
            bookingText = "Meakin";
            //$scrollview.append(bookingHTM(bookingStart, bookingEnd, bookingStatus, villaIndex,bookingText, villarowid));

            $('.arrow').click(function () {
                var sv = $(this).parents('div.calendar-tools').next();
                $(sv).toggle();

            });
            if (popup == false) {
                loadBookings(popup);
            }
            $('.calendar-scrollview').scroll(function () {
                var sc = $(this);
                $('.calendar-scrollview').each(function () {
                    if ($(this) != sc)
                        $(this).scrollLeft(sc.scrollLeft());
                });

            });
        },
        error: AjaxFailed
    });
}
//jDate(b.arrive), jDate(b.depart), b.status, null,b.bref, b.villaid, b.early, b.late
bookingHTM = function (b) {
    var delBooking = $('div.booking-wrapper[bid=\'' + b.id + '\']');
    delBooking.remove();
   
    var ba = jDate(b.arrive);
    var bd = jDate(b.depart);
    var bDays;
    var bookingDays = days_between(bd, ba);
    bDays = bookingDays;
    var bookingArrive;
    if (ba < new Date()) {
        bookingArrive = 0;
        bookingDays = days_between(bd, new Date()) + 1;
        //alert('hello');
    }
    else {
        var bookingArrive = days_between(ba, new Date()) + 1;
    }

    var bLeft = bookingLeft(headerWidth + 1, bookingArrive, gridWidth);
    var villarowTop = getVillaGridRow(b.villaid).css('top');
    var bTop = getVillaGridRow(b.villaid).position().top + 1; // parseInt(villarowTop.substring(0,villarowTop.length - 2)) + 1; 


    var bWidth = bookingWidth(gridWidth, bookingDays);
    var wrapperWidth = bookingArrive > 0 ? bWidth + 50 : bWidth + 25;

    var $wrapper = $('<div bid=\'' + b.id + '\' class=\'booking-wrapper\' style=\'top:' + bTop + 'px; left:' + bLeft + 'px;width:' + wrapperWidth + 'px;\'></div>');
    var $start = $('<div class=\'booking-start\'></div>');
    var $end = $('<div class=\'booking-end\'></div>');
    var $booking = $("<div class='booking' style='height:" + (gridHeight - 1) + "px;width:" + bWidth + "px;background-color:" + b.status + "'></div>");
    var $body = $('<div class=\'booking-text\'>' + b.bref + ' - ' + bDays + 'D</div>');




    if (b.early == true && bookingArrive > 0) {
        $wrapper.append('<div class=\'booking-early\'></div>');
        $start.css('border-color', '#CC99FF #CC99FF transparent transparent');
    }
    else {
        var early = b.status + ' ' + b.status + ' transparent transparent';
        $start.css('border-color', early);
    }
    if (b.late == true) {
        $booking.append('<div class=\'booking-late\'></div>');
        $end.css('border-color', 'transparent transparent #CC99FF #CC99FF');
    }
    else {
        $end.css('border-color', 'transparent transparent ' + b.status + ' ' + b.status);
    }
    $booking.append($body);
    if (bookingArrive > 0) {
        $wrapper.append($start);
    }
    $wrapper.append($booking);
    $wrapper.append($end);

    //    $booking.append('<div style="position:absolute;">' + b.bref + ' - ' + bDays + 'D</div>');
    $booking.data('booking', { 'id': ba.id, 'vid': b.villaid, 'arrive': ba.format('ddd, d MMM yyyy'), 'depart': bd.format('ddd, d MMM yyyy'), 'name': b.bref, 'durration': bDays });

    var $cal = $('.calendar-row-marker[villaid=\'' + b.villaid + '\']').parents('div.calendar-scrollview');
    //alert($booking.html());
    $cal.append($wrapper);

    // return $booking;
}
getVillaGridRow = function (id) {
    var vr = $('.calendar-row-marker[villaid=\'' + id + '\']');
    return vr;
}
loadBookings = function (popup) {
    var data = { 'cid': CompanyId };
    $.ajax({ url: 'services/QuoteServices.svc/GetBookings',
        type: 'POST',
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(data),
        success: function (msg) {
            for (bk = 0; bk < msg.d.length; bk++) {
                var b = msg.d[bk];
                bookingHTM(b);
            }
            if (popup == false) {
                $('.booking').bind('click', function () { clearSelection(); });
                $('.booking').bind('dblclick', function () { clearSelection(); showBooking($(this)) });
            }
        }
    });
}
bookingWidth = function (gridWidth, bookingDays) {
    return (gridWidth * bookingDays) - 1 - 3 - 20;
}
bookingTop = function (headerHeight, gridHeight, villaIndex) {
    return headerHeight + (gridHeight * villaIndex) + 1;
}
bookingLeft = function (headerWidth, bookingArrive, gridWidth) {
    return headerWidth + (bookingArrive * (gridWidth));
}
bookingColor = function (status) {
    switch (status) {
        case 0: return "#FFF";
        case 1: return "#FF99FF";
        case 2: return "#FFCC66";
        case 3: return "#66FF33";
    }
    return "#FFF";
}
showBooking = function (elem) {
    //clearSelection();
    //$('#MainContent_Panel1').next().append($(this).text());
    var $booking = $(elem);
    var data = $booking.data('booking');
    $('.bookingName').html(data['name']);
    $('.arrivalDate').html(data['arrive']);
    $('.departureDate').html(data['depart']);
    $('.durrationDays').html(data['durration'] + ' Day(s)');
    $('#MainContent_TabContainer1_TabPanel1').html('This will then show you all the booking data that you want or need to know!!!.');
    $('#MainContent_TabContainer1_TabPanel2').html('And this is even more information that will be attached to the booking - wow this can give us lots of informatojn');
    $('#MainContent_TabContainer1_TabPanel3').html('Ohh my golly gosh - this is a third tab we can used to show EVEN more info...');
    $find('MainContent_ModalPopupExtenderBooking').show();
}
function clearSelection() {
    var sel;
    if (document.selection && document.selection.empty) {
        document.selection.empty();
    } else if (window.getSelection) {
        sel = window.getSelection();
        if (sel && sel.removeAllRanges)
            sel.removeAllRanges();
    }
}