$(function () {
    $("tbody > tr:odd").addClass("odd");
    $("input:submit, .ui-button").button();
    $("input#Date").datepicker({ maxDate: '+0d' });
    $(".display-field-container")
        .filter(".source,.userHostAddress,.userAgent")
        .children(".display-label")
        .css('text-decoration', 'underline')
        .click(function () {
            $(this).parent().children('.display-field').toggle();
        })
        .end()
        .children('.display-field').hide();
    $("input#CityName").autocomplete({
        source: "/City/Autocomplete",
        minLength: 2
    });
    $("input#EmployeeName, input#Assigned").autocomplete({
        source: "/Employee/Autocomplete",
        minLength: 2
    });
    $("form select#Year").change(function () {
        $.getJSON('/Log/GetValidLogMonths', { year: $(this).val() }, function (months) {
            var options = '<option>Select Month</option>';
            for (var i = 0; i < months.length; i++) {
                options += '<option>' + months[i] + '</option>';
            }
            $("form select#Month").html(options);
        });
    });
    $("input#ModelYear,input#Price,input#VehicleId,input#EndOdometer,input#GasPurchased").numeric();
    $(".report-miles").each(function () {
        var content = $(this).next('.report-calculation');
        $(this).qtip({
            content: content,
            hide: { fixed: true, delay: 1000 },
            style: {
                name: 'light',
                width: 400
            }
        });
    });

    $(".miles-unknown").addClass('ui-state-error').append('<span class="ui-icon ui-icon-triangle-1-n"/>')
        .each(function () {
            $(this).qtip({
                content: "No previous log for this vehicle",
                style: {
                    name: 'red'
                }
            });
        });

    $("a.qtip-modal").each(function () { bindQtipModal($(this)); });

    $("input#EmployeeName").after('<span id="icon-employee-history" class="ui-icon ui-icon-search transparent"/>');

    function employeeHistoryKeydownHandler(data) {
        employeeHistoryIconUpdate($(data.target), $("#icon-employee-history"));
    }

    function employeeHistoryIconUpdate($input, $icon) {
        if (!$input.hasClass("input-validation-error") // not invalid
                && $input.attr("value").length > 0) // has text
            $icon.removeClass("transparent");
        else
            $icon.addClass("transparent");
    }

    $("input#EmployeeName").change(employeeHistoryKeydownHandler).keydown(employeeHistoryKeydownHandler);

    employeeHistoryIconUpdate($("input#EmployeeName"), $("#icon-employee-history"));

    $("#icon-employee-history").qtip({
        content: '<p class="loading">Recent Logs...</p>',
        api: {
            beforeShow: function () {
                var qt = this;
                $.ajax(
                    {
                        url: "CreateLog/RecentLogs",
                        data: { employeeName: $("input#EmployeeName").val() },
                        success: function (data) {
                            qt.updateContent(data, true);
                        }
                    });
            }
        },
        style: {
            width: 320,
            border: {
                color: '#81B3B3'
            }
        },
        hide: {
            fixed: true,
            delay: 500
        }
    });

    if ($('input#VehicleId').length > 0) {
        //        var settings = $('form').validate().settings;

        //        settings.onkeyup = false;
        //        settings.onfocusout = function (element) { $(element).valid(); };

        //        var oldSuccessFunction = settings.success;

        //        settings.success = function (label) {
        //            alert("success");

        //            oldSuccessFunction(label);
        //        };
    }
});

function bindQtipModal(element) {
    var corner = {
        target: 'topLeft',
        tooltip: 'bottomCenter'
    };
    var tip = 'bottomLeft';
    if (element.hasClass("below")) {
        corner = {
            target: 'bottomMiddle',
            tooltip: 'topRight'
        };
        tip = 'topRight';
    }

    element.click(function () { return false; });

    element.append('<span class="ui-icon ui-icon-triangle-1-n"/>');

    element.qtip({
        content: {
            url: element.attr('href')
        },
        hide: {
            fixed: true,
            delay: 500
        },
        position: {
            corner: corner
        },
        style: {
            name: 'light',
            tip: tip,
            width: 300
        }
    });
}