/// <reference path="jquery-1.3.2.min.js" />

$(document).ready(function() {

    // change holiday submit input css style on focus/blur
    $("#contact-area input").focus(function() {

        HolidayInputFocus(this);
    });

    $("#contact-area input").blur(function() {

        HolidayInputBlur(this);

        RemoveInvalidStar(this);
    });

    $("#contact-area input").change(function() {

        RemoveInvalidStar(this);
    });

    // force tag suggest to enable 
    $("#holiday-submit-link").click(function() {

        EnableTagSuggest();
        EnableDatepicker();
    });

    // validate holiday submit input
    $('#HolidaySubmit').click(function() {

        var valid = false;

        valid = ValidateHolidayInput("Holiday", valid);
        valid = ValidateHolidayInput("HolidayDate", valid);
        valid = ValidateHolidayInput("Tags", valid);

        if (valid) {

            var HolidayJSON = {
                Date: $("#HolidayDate").val(),
                Holiday: $("#Holiday").val(),
                Tags: $("#Tags").val(),
                URL: $("#URL").val()
            };

            $.ajax({
                type: "POST",
                async: false,
                url: "/Home/SaveHoliday",
                data: HolidayJSON,
                dataType: "json",
                success: function(result) {
                    if (result.Success) {

                        $("#contact-area").fadeOut(1200, function() {
                            $("#contact-area").html("<h2><img src=\"../Content/Images/check.png\" />Thank you for your submission!</h2>").fadeIn(2000);
                        });
                    }
                    else {
                        alert("Error!");
                    }
                }
            });
        }

        return false;
    });

    // display holiday submit modal window
    $('#holiday-submit-link').click(function(e) {

        e.preventDefault();

        $('#holiday-submit').modal({

            onOpen: function(dialog) {

                dialog.data.fadeIn(500);
                dialog.container.fadeIn(500);
                dialog.overlay.fadeIn(500);
            },

            onClose: function(dialog) {

                dialog.data.fadeOut(500);
                dialog.container.fadeOut(500);
                dialog.overlay.fadeOut(500, function() {

                    $.modal.close();
                });
            }
        });
    });
});

function RemoveInvalidStar(element) {

    element = $(element);
    var inputValid = element.val();
    if (inputValid.length > 0) {

        var id = element.attr("Id");
        $("#" + id + "Validate").remove();
    }
}

function ValidateHolidayInput(input, valid) {

    // define global variables
    var holidayInput = $("#" + input);
    var inputId = holidayInput.attr("Id");
    var invalidStar = $("<span id=\"" + inputId + "Validate\" class=\"invalid-star\">*</span>");
    var error = { "border": "2px solid #d8000c", "background-color": "#ffbaba" };
    var clear = { "border": "2px solid #cccccc", "background-color": "#ffffff" };

    if (holidayInput.val() == 0) {

        holidayInput.css(error);
        // only show invalid star once
        var inputStartExist = "#contact-area #" + inputId + "Validate";
        if ($(inputStartExist).length == 0) {
            holidayInput.after(invalidStar);
        }

        valid = false;
    }
    else {

        holidayInput.css(clear);
        valid = true;
    }

    return valid;
}

function EnableTagSuggest() {

    // apply tag suggest
    $('#Tags').tagSuggest({

        url: '/Home/TagSuggest',
        delay: 250
    });
}

function EnableDatepicker() {

    $("#HolidayDate").removeClass("hasDatepicker");

    // enable date picker
    $("#HolidayDate").datepicker();
}

function HolidayInputFocus(input) {

    input = $(input);

    input.css("color", "#333333");
    input.css("background-color", "#fff0b2");
    input.css("border", "2px solid #ffe26b");
}

function HolidayInputBlur(input) {

    input = $(input);

    input.css("color", "#333333");
    input.css("background-color", "#ffffff");
    input.css("border", "2px solid #999999");
}