var dateSelected = false;
var timeSelected = false;
var numOfPersonsChosen = 0;
var infoGiven = false;
var cssIdToDbIds = new Array();
var smsReminder = false;
var emailReminder = false;
var bookingId = -1;

$(document).ready(function(){
    
    $("#explanatory-text-box").html(formtext1);
    
    $("#navlink1").click(navlink1Click);
    
    $("#navlink2").click(checkDateSelect);
    $("#navlink2").click(navlink2Click);
    $("#navlink3").click(checkDateSelect);
    $("#navlink3").click(navlink3Click);
    $("#navlink4").click(checkDateSelect);
    $("#navlink4").click(navlink4Click);
    
    $("#navlink1").click();
    
    hideAll();
    
    showLoadMessage("#datepicker-loadtext", "Indlæser tilgængelige datoer...");
    
    $.post("AJAXHandler.aspx", { type: "availabledates", booking_range: booking_range.toString(), cal_info_id: calendar_info_id, multi: book_multiple  }, avalableDatesHandler);
});

function avalableDatesHandler(data) {
    
    hideLoadMessage("#datepicker-loadtext");
    
    if(data.substr(0,5) == "error")
    {
        reportError("Kunne ikke modtage tilgængelige datoer.<br /> Prøv venligst igen!");
        return;
    }
    else
    {
        var parsed_data = $.parseJSON(data);
        
        var startingDate = new Date();
        startingDate.setDate(startingDate.getDate() + 1);
        
        $("#datepicker").datepicker(
        {
            dayNamesMin: ['Sø', 'Ma', 'Ti', 'On', 'To', 'Fr', 'Lø'],
            monthNames: ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December'],
            firstDay: 1,
            dateFormat: 'dd-mm-yy',
            minDate: startingDate.getDate() == 1 ? startingDate : new Date(),
            maxDate: "+" + booking_range + "d",
            beforeShowDay: 
            function(date)
            {
                for(var i = 0; i < parsed_data.length; i++)
                {
                    // "Dato" looks like this: /Date(1267484400000+0100)/
                    var avail_date = new Date(parseInt(parsed_data[i].Dato.substr(6,13)));
                    if(avail_date.toDateString() == date.toDateString())
                    {
                        return [true, ''];
                    }
                }
                return [false, ''];
            },
            onSelect: onDatePickerSelect
        });
        
    }
    
}

function onDatePickerSelect(dateText, inst)
{
    dateSelected = true;
    
    $("#navlink3").click(checkTimeSelect);
    $("#navlink4").click(checkTimeSelect);
    
    $("#timepicker-date").html(dateText);

    $("#navlink2").click();
    
    $("#timepicker").hide();
    
    showLoadMessage("#timepicker-loadtext", "Indlæser ledige tider...");
    
    $.post("AJAXHandler.aspx", { type: "datechosen", date: dateText }, dateChoseHandler);
    
}

function dateChoseHandler(data)
{
    hideLoadMessage("#timepicker-loadtext");
    
    $("#timepicker").show();
    
    if(data.substr(0,5) == "error")
    {
        reportError("Kunne ikke modtage tilgængelige tider.<br /> Prøv venligst igen!");
        return;
    }
    else
    {
        $("#explanatory-text-box").html(formtext2);
    
        var parsed_data = $.parseJSON(data);
        
        $("#timepicker-inner #timestable").detach(); // to avoid duplication
        $("#timepicker-inner").append(parsed_data.table);
        
        $(".person-picker").hover(
            function () {
                $(this).addClass("ui-state-hover", 0);
            }, 
            function () {
                $(this).removeClass("ui-state-hover", 0);
            }
        );
        
        $(".person-picker").click(
            function() {
                $(".person-picker").removeClass("ui-state-active", 0);
                $(this).addClass("ui-state-active", 0);
                onPersonNumberClick($(this).html());
            }
        );
        
         // hide options for more than max_people
        $(".person-picker").hide();
        switch(max_people)
        {
            case 4:
            $("#person-picker-4").show();
            case 3:
            $("#person-picker-3").show();
            case 2:
            $("#person-picker-2").show();
            case 1:
            $("#person-picker-1").show();
            default:
            break;
        }
        
        $(".person-picker:first").click();
        
    }

}

function onPersonNumberClick(num)
{
    numOfPersonsChosen = num;

    displayLoader();
    
    $.post("AJAXHandler.aspx", { type: "personCountChosen", numOfPersons: num }, personCountChosenHandler);
}

function personCountChosenHandler(data) 
{
    hideLoader();
    
    if(data.substr(0,5) == "error")
    {
        reportError("Kunne ikke modtage tilgængelige tider.<br /> Prøv venligst igen!");
        return;
    }
    else
    {
        var parsed_data = $.parseJSON(data);
    
        ids_array = $.parseJSON(parsed_data.ids_array);
        
        // load key, values into global lookup table
        for(var i = 0; i < ids_array.length; i++)
        {
            cssIdToDbIds[ids_array[i].Key] = ids_array[i].Value;
        }
        
        $("#timepicker-inner #timestable").detach();
        $("#timepicker-inner").append(parsed_data.table);
        
        if (book_multiple)
        {
            $(".hover-active").hover(
                function () {
                    var index = parseInt($(this).attr("id").match(/[0-9]+/));
                    for(var i = 0; i < numOfPersonsChosen; i++)
                    {
                        var tmp = index + i;
                        var id_value = "time-cell-" + tmp;
                        $("#" + id_value).addClass("ui-state-hover");
                    }
                }, 
                function () {
                    var index = parseInt($(this).attr("id").match(/[0-9]+/));
                    for(var i = 0; i < numOfPersonsChosen; i++)
                    {
                        var tmp = index + i;
                        var id_value = "time-cell-" + tmp;
                        $("#" + id_value).removeClass("ui-state-hover");
                    }
                }
            );
        }
        else
        {
            $(".hover-active").hover(
                function () {
                    $(this).addClass("ui-state-hover");
                }, 
                function () {
                    $(this).removeClass("ui-state-hover");
                }
            );
        }
        
        $(".person-picker").click(
            function() {
                $(".person-picker").removeClass("ui-state-active", 0);
                $(this).addClass("ui-state-active", 0);
                onPersonNumberClick($(this).html());
            }
        );
        
        // highlight the previously chosen number of persons
        $(".person-picker:contains(" + numOfPersonsChosen + ")").addClass("ui-state-active");
        
        $(".time-picker").click(
            function () {
                var time_id = parseInt($(this).attr("rel"));
                onTimeClick(time_id, numOfPersonsChosen);
            }
        );
        
        // hide options for more than max_people
        $(".person-picker").hide();
        switch(max_people)
        {
            case 4:
            $("#person-picker-4").show();
            case 3:
            $("#person-picker-3").show();
            case 2:
            $("#person-picker-2").show();
            case 1:
            $("#person-picker-1").show();
            default:
            break;
        }
    }
}

/*
 * Params:
 *  time_id:
 *      id of the selected time slot
 *  time_count:
 *      number of consecutive times to reserve,
 */
function onTimeClick(time_id, time_count)
{
    displayLoader();
    
    $.post(
        "AJAXHandler.aspx",
        {
            type: "timechosen",
            id: time_id,
            count: time_count
        },
        timeChosenHandler
    );
}

function timeChosenHandler(data)
{
    hideLoader();
    
    if(data.substr(0,5) == "error")
    {
        if(numOfPersonsChosen > 1)
        {
            reportError("Reservering af tider ikke mulig.<br /> Vælg venligst en ny.");
        }
        else
        {
            reportError("Reservering af tid ikke mulig. <br /> Vælg venligst en ny.");
        }
        return;
    }
    else
    {
        //if dates got reserved, they are returned as json
        //var parsed_data = $.parseJSON(data);
        
        $("#explanatory-text-box").html(formtext3);
        
        timeSelected = true;
    
        $("#navlink4").click(checkInfoGiven);
        
        $("#navlink3").click();
        
        $("#name-field").focus();
        
        $("#next-button").hover(
	        function() {
	            $(this).addClass("ui-state-hover", 0);
	        },
	        function() {
	            $(this).removeClass("ui-state-hover", 0);
	        }
	    );
    	
	    $("#next-button").click(onNextButtonClick);
        
    }
    
}

function onNextButtonClick()
{
    var missing_input = false;
    
    $(".error-label").removeClass("error-label");
    
    if($("#name-field").val() == "")
    {
        missing_input = true;
        $("#name-field-label").addClass("error-label");
    }
    
    var phone_stationary = false;
    var phone_cell = false;
    var email = false;
    
    if($("#phone-stationary-field").val() == "")
    {
        phone_stationary = true;
    }
    
    if($("#phone-cell-field").val() == "")
    {
        phone_cell = true;
    }
    
    if($("#email-field").val() == "")
    {
        email = true;
    }
    
    if(phone_stationary && phone_cell && email)
    {
        missing_input = true;
    }
    
    if (missing_input)
    {
        reportError("Nødvendig information mangler!");
        infoGiven = false;
    }
    else
    {
        var name = $("#name-field").val();
        var stationary = $("#phone-stationary-field").val();
        var cell = $("#phone-cell-field").val();
        var email = $("#email-field").val();
        var value_string = name + ":" + stationary + ":" + cell + ":" + email;
        
        showLoadMessage("#confirmation-box-loadtext", "Indlæser oplyste informationer...");
        
        $.post("AJAXHandler.aspx", { type: "infogiven", info: value_string }, infoGivenHandler);
    }
    
}

function infoGivenHandler(data)
{
    hideLoadMessage("#confirmation-box-loadtext");
    
    if(data.substr(0,5) == "error")
    {
        reportError("Der er sket en fejl! <br /> Prøv venligst at sende<br /> dine kontaktinformationer igen.");
        $("#navlink3").click();
        return;
    }
    else
    {
        $("#explanatory-text-box").hide();
        
        infoGiven = true;
        
        $("#navlink4").click();
        
        var parsed_data = $.parseJSON(data);
        
        $("#confirmation-box-name").html(parsed_data.name);
        $("#confirmation-box-stationary").html(parsed_data.stationary);
        $("#confirmation-box-cell").html(parsed_data.cell);
        $("#confirmation-box-email").html(parsed_data.email);
        
        if (book_multiple)
        {
            var list_items = "";
            for(var i = 0; i < parsed_data.datetimes.length; i++)
            {
                list_items += "<li>Person " + (i + 1) + ": kl.&nbsp;" + parsed_data.datetimes[i].time + "</li>\n";
            }
            $("#confirmation-box-datetimes ul").html(list_items);
        }
        else
        {
            list_item = "<li>Kl. " + parsed_data.datetimes[0].time + "<br />" + numOfPersonsChosen + " " + (numOfPersonsChosen > 1 ? "personer" : "person") + "</li>\n";
            $("#confirmation-box-datetimes ul").html(list_item);
        }
        
        $("#confirmation-box-date").html(parsed_data.datetimes[0].date);
        
        
        $("#confirm-button").hover(
	        function() {
	            $(this).addClass("ui-state-hover", 0);
	        },
	        function() {
	            $(this).removeClass("ui-state-hover", 0);
	        }
	    );
    	
	    $("#confirm-button").click(onConfirmButtonClick);
        
        // hide checkmarks initially
        $(".remind-button span:last-child").hide();
        
        // TODO exchange previous hovers with live
        $(".button").hover(
            function() {
                $(this).addClass("ui-state-hover", 0);
            },
            function() {
                $(this).removeClass("ui-state-hover", 0);
            }
        );
        
        $("#sms-remind").toggle(
            function() 
            {
                smsReminder = !smsReminder;
                $("span:last", this).show();
                $(this).addClass("ui-state-active", 0);
                $(this).addClass("ui-icon-check", 0);
            },
            function()
            {
                smsReminder = !smsReminder;
                $("span:last", this).hide();
                $(this).removeClass("ui-state-active", 0);
                $(this).removeClass("ui-icon-check", 0);
            }
        );
        
        $("#email-remind").toggle(
            function() 
            {
                emailReminder = !emailReminder;
                $("span:last", this).show();
                $(this).addClass("ui-state-active", 0);
            },
            function()
            {
                emailReminder = !emailReminder;
                $("span:last", this).hide();
                $(this).removeClass("ui-state-active", 0);
            }
        );
    }
}

function onConfirmButtonClick()
{
    displayLoader();
    
    $.post("AJAXHandler.aspx", { type: "confirmation", sms: smsReminder.toString(), email: emailReminder.toString() }, confirmationHandler);
}

function confirmationHandler(data)
{
    if(data.substr(0,5) == "error")
    {
        if(numOfPersonsChosen > 1)
        {
            reportError("Reservering af tider ikke mulig.<br /> Vælg venligst en ny.");
        }
        else
        {
            reportError("Reservering af tid ikke mulig.<br /> Vælg venligst en ny.");
        }
        $("#navlink1").click();
        return;
    }
    else
    {
      bookingId = parseInt(data);
        hideLoader();
        
        $("#dialog p:first").html(formtext4);
        
        $("#dialog").dialog(
        {
            modal: true,
            draggable: false,
            resizable: false,
            closeOnEscape: true,
            title: "Tak for din reservation",
            close: function(event, ui) { endOfBooking(); }
        });
    
        $("#dialog p a").button();
        $("#dialog p a").click( function() { $("#dialog").dialog("close") } );
        
        // go to the start again
        $("#confirm-button").click(endOfBooking);
        $("#navlink1").click(endOfBooking);
        $("#navlink2").click(endOfBooking);
        $("#navlink3").click(endOfBooking);
        $("#navlink4").click(endOfBooking);
    }
}

function endOfBooking()
{
    $(".navlink").hide();
    $(".button").hide();
    $("#remind-cell").html("");
    $("#confirmation-title").html("Din booking er gennemført!");
    $("#confirm-button-cell div").html('<a id="print_button" href="#">Print</a>');
    $("#print_button").button();
    $("#print_button").click(onPrintButtonClick);
    
}

function onPrintButtonClick()
{
//  var url_string = 'http://localhost:53108/PrintPage.aspx?cal=' + guid + '&bid=' + bookingId;
  var url_string = 'http://fasttrack.pasport.dk/PrintPage.aspx?cal=' + guid + '&bid=' + bookingId;
  var thePopup = window.open( url_string, "_blank", 'directories=0, width=500, height=600, location=0, menubar=0, rezisable=0, status=0, titlebar=0');
}

function navlink1Click()
{
    $("#explanatory-text-box").html(formtext1);
}

function navlink2Click()
{
    if(dateSelected)
    {
        $("#explanatory-text-box").html(formtext2);
    }
}

function navlink3Click()
{
    if(timeSelected)
    {
        $("#explanatory-text-box").html(formtext3);
    }
}

function navlink4Click()
{
    if(infoGiven)
    {
        $("#explanatory-text-box").html(formtext4);
    }
}

function checkDateSelect() {
    if(!dateSelected)
    { 
        reportError("Vælg venligst først en dato."); $("#navlink1").click();
    }
}

function checkTimeSelect() {
    if(!timeSelected)
    { 
        reportError("Vælg venligst først tid(er)."); $("#navlink2").click();
    }
}

function checkInfoGiven() {
    if(!infoGiven)
    {
        reportError("Angiv venligst først oplysninger."); $("#navlink3").click();
    }
}

function hideAll()
{
    $(".disabled-nav").hide();
    $("#datepicker-loadtext").hide();
    $("#datepicker").hide();
    $("#timepicker-loadtext").hide();
    $("#timepicker").hide();
    $("info-form").hide();
    $("info-form-loadtext").hide();
    $("#confirmation-box-loadtext").hide();
    $("#confirmation-box").hide();
    $(".scrollButtons").hide();
    $("#dialog").hide();
}

function reportError(msg)
{
    $("#error-panel").html(msg);
    hideLoader();
}

function displayLoader()
{
    $("#loader-panel").show();
    $("#error-panel").html("");
    $("#error-panel").hide();
}

function hideLoader()
{
    $("#loader-panel").hide();
    $("#error-panel").show();
}

function showLoadMessage(id, msg)
{
    $(id).html(msg);
    $(id).show();
    displayLoader();
}

function hideLoadMessage(id)
{
    $(id.substr(0, id.length - 9)).show();
    $(id).hide();
    hideLoader();
}

function debug(msg)
{
    $("#debug").html(msg);
}