var cs_appt_startTime = 10;
var cs_appt_endTime = 22;

function createCalSlotRow(date, timeslot, available) {
    var row = document.createElement("tr");
    var sDate = new Date();
    sDate.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
   // var cellTitle = document.createElement("td");
   // var cellText = document.createTextNode(timeslot);
    
    //cellTitle.appendChild(cellText);
    //row.appendChild(cellTitle);
    
    for (var i = 0; i < 5; i++) {
        // Create a <td> element and a text node, make the text
        // node the contents of the <td>, and put the <td> at
        // the end of the table row

        
        
        if (available[i] == 0)
        {
            var cell = document.createElement("td");
            var link = document.createElement("input");
            var hr = timeslot.toString().substring(0, 2);
            var mt = timeslot.toString().substring(2, 4);

            link.setAttribute("type", "button");
            link.setAttribute("id", $.datepicker.formatDate('dd_M_yy', sDate) + "_" + hr + ":" + mt);
            link.setAttribute("class", "calTimeslotNotAvailable");
            link.setAttribute("alt", "Time slot Not Available");
            link.setAttribute("onclick", 'return false;');
            link.setAttribute("value", timeslot);
            cell.appendChild(link);
            row.appendChild(cell);

        }
        else {
            var cell = document.createElement("td"); 
            var link = document.createElement("input");
            var hr = timeslot.toString().substring(0,2);
            var mt = timeslot.toString().substring(2, 4);
            
            link.setAttribute("type", "button");
            link.setAttribute("class", "lnkcalTimeslot");
            link.setAttribute("id", $.datepicker.formatDate('dd_M_yy', sDate) + "_" + hr + ":" + mt);
            link.setAttribute("class", "calTimeslotAvailable");
            link.setAttribute("onclick", 'selectTimeslot(this)');
            link.setAttribute("alt", "Available Time slot");
            link.setAttribute("value", timeslot);
            cell.appendChild(link);
            row.appendChild(cell);
        }
            sDate.setDate(sDate.getDate() + 1);

         
            
    }
    //alert(sDate);

    return row;
}

function createCalSlotRowIE(date, timeslot, available) {
    var row = document.createElement("tr");
    var sDate = new Date();
    sDate.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
    //var cellTitle = document.createElement("td");
    //var cellText = document.createTextNode(timeslot);
    //cellTitle.appendChild(cellText);
    //row.appendChild(cellTitle);

    for (var i = 0; i < 5; i++) {
        // Create a <td> element and a text node, make the text
        // node the contents of the <td>, and put the <td> at
        // the end of the table row



        if (available[i] == 0) {
            var cell = document.createElement("<td>");
            var btn = document.createElement("<input class='calTimeslotNotAvailable' type='button' onclick='return false;' alt='Time slot Not Available' id='' value='" + timeslot + "'>");
            var hr = timeslot.toString().substring(0, 2);
            var mt = timeslot.toString().substring(2, 4);
            btn.setAttribute("id", $.datepicker.formatDate('dd_M_yy', sDate) + "_" + hr + ":" + mt);
            cell.appendChild(btn);

            row.appendChild(cell);
        }
        else {
            var cell = document.createElement("<td>");
            var btn = document.createElement("<input class='calTimeslotAvailable' type='button' onclick='selectTimeslot(this)' alt='Available Time slot' id='' value='" + timeslot + "'>");
           
            var hr = timeslot.toString().substring(0, 2);
            var mt = timeslot.toString().substring(2, 4);
            btn.setAttribute("id", $.datepicker.formatDate('dd_M_yy', sDate) + "_" + hr + ":" + mt);
            cell.appendChild(btn);
            
            row.appendChild(cell);
        }
        sDate.setDate(sDate.getDate() + 1);


        
    }
    //alert(sDate);
    return row;
}

function createCalNavHeaderIE(startdate) {

    var calDate = new Date();
    //calDate.setDate(Date.parse(startdate));
    calDate.setFullYear(startdate.getFullYear(), startdate.getMonth(), startdate.getDate());

    //var previousdate = new Date();
    //var nextdate = new Date();
    //alert("previous = " + new Date(DateAdd(calDate.toDateString(), 1)).toDateString());
    var previousdate = new Date(DateAdd(calDate.toDateString(), "-1"));
    var nextdate = new Date(DateAdd(calDate.toDateString(), "1"));

    var row = document.createElement("tr");


    // Create a <td> element and a text node, make the text
    // node the contents of the <td>, and put the <td> at
    // the end of the table row
    var cell = document.createElement("<td colspan='5' class='ApptNavheader' align='right' style='text-align:right;'>");
  

    var previouslink = document.createElement("<a onclick='' id=''>");
    previouslink.setAttribute("onclick", "RerenderTimeslots('" + previousdate.getDate() + "','" + previousdate.getMonth() + "','" + previousdate.getFullYear() + "')");
    previouslink.setAttribute("id", "lnkTimeslotPreviousDate");
    
    previouslink.appendChild(document.createTextNode("Previous"));

    var nextlink = document.createElement("<a onclick='' id=''>");
    nextlink.setAttribute("onclick", "RerenderTimeslots('" + nextdate.getDate() + "','" + nextdate.getMonth() + "','" + nextdate.getFullYear() + "')");
    nextlink.setAttribute("id", "lnkTimeslotNextDate");
    nextlink.appendChild(document.createTextNode("Next"));

    //Append links and seperator in between
    cell.appendChild(previouslink);
    cell.appendChild(document.createTextNode(" | "));
    cell.appendChild(nextlink);
    
    row.appendChild(cell);

    return row;
}


function createCalNavHeader(startdate) {

    var calDate = new Date();
    //calDate.setDate(Date.parse(startdate));
    calDate.setFullYear(startdate.getFullYear(), startdate.getMonth(), startdate.getDate());

    //var previousdate = new Date();
    //var nextdate = new Date();
    //alert("previous = " + new Date(DateAdd(calDate.toDateString(), 1)).toDateString());
    var previousdate = new Date(DateAdd(calDate.toDateString(), "-1"));
    var nextdate = new Date(DateAdd(calDate.toDateString(), "1"));

    var row = document.createElement("tr");


    // Create a <td> element and a text node, make the text
    // node the contents of the <td>, and put the <td> at
    // the end of the table row
    var cell = document.createElement("td");
    cell.setAttribute("colspan", 5);
    cell.setAttribute("class", "ApptNavheader");
    cell.setAttribute("align", "right");
    cell.setAttribute("style", "text-align:right");

    
    
    var previouslink = document.createElement("a");
    previouslink.setAttribute("onclick", "RerenderTimeslots('" + previousdate.getDate() + "','" + previousdate.getMonth() + "','" + previousdate.getFullYear() + "')");
    previouslink.setAttribute("id", "lnkTimeslotPreviousDate");
    previouslink.appendChild(document.createTextNode("Previous" ));

    var nextlink = document.createElement("a");
    nextlink.setAttribute("onclick", "RerenderTimeslots('" + nextdate.getDate() + "','" + nextdate.getMonth() + "','" + nextdate.getFullYear() + "')");
    nextlink.setAttribute("id", "lnkTimeslotNextDate");
    nextlink.appendChild(document.createTextNode("Next"));

    //Append links and seperator in between
    cell.appendChild(previouslink);
    cell.appendChild(document.createTextNode(" | "));
    cell.appendChild(nextlink);
    
    row.appendChild(cell);

    return row;
}


function createCalHeader(startdate) {

    var calDate = new Date();
    calDate.setFullYear(startdate.getFullYear(), startdate.getMonth(), startdate.getDate());

    var row = document.createElement("tr");

    // Create a <td> element and a text node, make the text
    // node the contents of the <td>, and put the <td> at
    // the end of the table row

    for (var i = 0; i < 5; i++) {
        var cell = document.createElement("td");
       
            var dateStr = $.datepicker.formatDate('dd-M', calDate);
            
            cell.appendChild(document.createTextNode(dateStr));
            cell.setAttribute("class", "Apptheader");
            calDate.setDate(calDate.getDate() + 1);
        

        row.appendChild(cell);
    }
    
    return row;
}

function createCalHeaderIE(startdate) {

    var calDate = new Date();
    calDate.setFullYear(startdate.getFullYear(), startdate.getMonth(), startdate.getDate());

    var row = document.createElement("tr");

    // Create a <td> element and a text node, make the text
    // node the contents of the <td>, and put the <td> at
    // the end of the table row

    for (var i = 0; i < 5; i++) {
        var cell = document.createElement("<td class='Apptheader'>");

        var dateStr = $.datepicker.formatDate('dd-M', calDate);

        cell.appendChild(document.createTextNode(dateStr));
       
        calDate.setDate(calDate.getDate() + 1);


        row.appendChild(cell);
    }

    return row;
}




function RerenderTimeslots(day, month, year) {

    $("#divCalTimeslotsHolder").replaceWith("");
 
    var selecteddate = new Date();
    selecteddate.setFullYear(year, month, day);    
    
    var schedule = LoadScheduleByDate(selecteddate);

}

function selectTimeslot(element) {
    var dt = $(element).attr("id").split("_");
    if(dt[1] == "1"){dt[1] = "Jan";}
    if(dt[1] == "2"){dt[1] = "Feb";}
    if(dt[1] == "3"){dt[1] = "Mar";}
    if(dt[1] == "4"){dt[1] = "Apr";}
    if(dt[1] == "5"){dt[1] = "May";}
    if(dt[1] == "6"){dt[1] = "Jun";}
    if(dt[1] == "7"){dt[1] = "Jul";}
    if(dt[1] == "8"){dt[1] = "Aug";}
    if(dt[1] == "9"){dt[1] = "Sep";}
    if(dt[1] == "10"){dt[1] = "Oct";}
    if(dt[1] == "11"){dt[1] = "Nov";}
    if(dt[1] == "12"){dt[1] = "Dec";}
    
    //$("#txtTimeSlot").val($(element).attr("id"));
    //$("#txtTimeSlot").val(dt[0] + " " + dt[1] + " " + dt[2] + "  " + dt[3]);
    //$("#txtTimeSlot").val(dt[3]);

    $(".apptDatetime").val(dt[0] + "/" + dt[1] + "/" + dt[2] + " " + dt[3]);
    $("#txtAppointmentDay").val(dt[0]);
    $("#txtAppointmentMonth").val(dt[1]);
    $("#txtAppointmentYear").val(dt[2]);
    $("#txtAppointmentTime").val(dt[3]);
    //Event to trigger to close facebox.
    $(document).trigger('close.facebox');
  
}


function LoadScheduleByDate(sdate)
{
    if (BrowserDetect.browser == "Explorer") {
        renderCalIE(sdate);

    } else {
       renderCal(sdate);
    }
    return false;
}

function renderCalIE(sdate) {
    //url: "/Support/CustomerSupport/ws/SupportWebService.asmx/LoadSchedulePerWeek",
    
    $.ajax
    (
        {
            type: "POST",
            url: SupportServiceURL + '/LoadSchedulePerWeek',
            data: "startDate=" + sdate.toLocaleDateString(),
            success: function(msg) {
                var schGlobal = new Array(24);
                var si = 0;
                $(msg).find("ArrayOfString").each
                (
                    function() {
                        var $kids = $(this).children("string");

                        var temp = new Array($kids.length);
                        for (var j = 0; j < $kids.length; j++) {
                            temp[j] = $($kids[j]).text();
                        }
                        schGlobal[si] = temp;
                        si++;

                    }
                );

                var caldiv = document.createElement("<div id=''>");
                caldiv.setAttribute("id", "divCalTimeslotsHolder")

                //Call ajax to our Contact Center web service to get data xml.
                // input is StartDate -- output [startdate + 5 days]
                //format  hour [date1 | date2 | date3 | date4 | date5]

                // creates a <table> element and a <tbody> element
                var tbl = document.createElement("<table id=''>");
                tbl.setAttribute("id", "tblTimeslots");
                //tbl.setAttribute("border", 1);


                var tblBody = document.createElement("tbody");

                //NavHeader Row
                var tmpNavrow = document.createElement("tr");
                tmpNavrow = createCalNavHeaderIE(sdate);

                tblBody.appendChild(tmpNavrow);

                var tmpHdrow = document.createElement("tr");
                tmpHdrow = createCalHeaderIE(sdate);
                tblBody.appendChild(tmpHdrow);

                // creating all cells for every hours of the date
                //for (var j = 0; j < schGlobal.length; j++) {
                for (var j = cs_appt_startTime; j < cs_appt_endTime; j++) {
                    // creates a table row
                    var row = document.createElement("tr");
                    var starttime = j * 100;


                    //populate next time of each day
                    var padstr = starttime;
                    if (starttime == 0) {
                        padstr = "0000";
                    }
                    else if (starttime < 1000) {
                        padstr = "0" + padstr;
                    }
                    row = createCalSlotRowIE(sdate, padstr, schGlobal[j]);


                    //starttime = starttime + 100;

                    // add the row to the end of the table body
                    tblBody.appendChild(row);
                }

                // put the <tbody> in the <table>
                tbl.appendChild(tblBody);

                caldiv.appendChild(tbl);

                $.facebox(caldiv);
              
               
            }
        }
    );
}

function renderCal(sdate) {
    //url: "/Support/CustomerSupport/ws/SupportWebService.asmx/LoadSchedulePerWeek",
    $.ajax
    (
        {
            type: "POST",
            url: SupportServiceURL + '/LoadSchedulePerWeek',
            data: "startDate=" + sdate.toLocaleDateString(),
            success: function(msg) {
                var schGlobal = new Array(24);
                var si = 0;
                $(msg).find("ArrayOfString").each
                (
                    function() {
                        var $kids = $(this).children("string");

                        var temp = new Array($kids.length);
                        for (var j = 0; j < $kids.length; j++) {
                            temp[j] = $($kids[j]).text();
                        }
                        schGlobal[si] = temp;
                        si++;

                    }
                );

                var caldiv = document.createElement("div");
                caldiv.setAttribute("id", "divCalTimeslotsHolder")

                //Call ajax to our Contact Center web service to get data xml.
                // input is StartDate -- output [startdate + 5 days]
                //format  hour [date1 | date2 | date3 | date4 | date5]

                // creates a <table> element and a <tbody> element
                var tbl = document.createElement("table");
                tbl.setAttribute("id", "tblTimeslots");
                //tbl.setAttribute("border", 1);


                var tblBody = document.createElement("tbody");

                //var starttime = 0;

                //NavHeader Row
                var tmpNavrow = document.createElement("tr");
                tmpNavrow = createCalNavHeader(sdate);

                tblBody.appendChild(tmpNavrow);

                var tmpHdrow = document.createElement("tr");
                tmpHdrow = createCalHeader(sdate);
                tblBody.appendChild(tmpHdrow);

                // creating all cells for every hours of the date
                for (var j = cs_appt_startTime; j < cs_appt_endTime; j++) {
                    // creates a table row
                    var row = document.createElement("tr");
                    var starttime = j * 100;

                    //populate next time of each day
                    var padstr = starttime;
                    if (starttime == 0) {
                        padstr = "0000";
                    }
                    else if (starttime < 1000) {
                        padstr = "0" + padstr;
                    }
                    row = createCalSlotRow(sdate, padstr, schGlobal[j]);

                    //starttime = starttime + 100;

                    // add the row to the end of the table body
                    tblBody.appendChild(row);
                }

                // put the <tbody> in the <table>
                tbl.appendChild(tblBody);

                caldiv.appendChild(tbl);

                $.facebox(caldiv);
                //$("#divCalTimeslotsHolder").replaceWith(caldiv);
                //showLightBox("divCalTimeslotsHolder", 355, 450);
            }
        }
    );
}


function DateAdd(txtDate, days)
{

    var returnDate = new Date(txtDate);
    if(days.toString() == "-1")
    {
        return returnDate.setDate(returnDate.getDate() - 1);
    }
    else if(days.toString() == "1")
    {
        return returnDate.setDate(returnDate.getDate() + 1);
    }
}