//todo: turn these functions into a generic method

function addNewBoat() {
    var ports = $("#PortId");
    var boats = $("#BoatId");
    $.get(
            "/JSON/AddBoat",
            { portId: ports.val() },
            function (data, status, xhr) {
                $("<div></div>").attr("id", "add-new-boat-dialog").html(data.view).dialog({ title: "Add a New Boat", height: 400, width: 550 });
                $("#add-new-boat-dialog form input[class='submit']").live("click", function (e) {
                    var form = $(this).closest("form");
                    var url = form.attr("action");
                    var method = form.attr("method");
                    $.ajax({
                        url: url,
                        type: method,
                        data: form.serialize(),
                        dataType: 'json',
                        success: function (data, status, xhr) {
                            $("#add-new-boat-dialog").html(data.view);
                            if (data.status == "success") {
                                boats.prepend($("<option>", { value: data.data.listingId, text: data.data.name }));
                                boats.val(data.data.listingId);
                            }
                        },
                        error: function (xhr, status, error) {
                            $("<div></div>").html(xhr.responseText).dialog();
                        }
                    });
                });
            }
        );
}

function addNewPort() {
    var ports = $("#PortId");
    $.get(
        "/JSON/AddPort",
        function (data, status, xhr) {
            $("<div></div>").attr("id", "add-new-port-dialog").html(data.view).dialog({ title: "Add a New Port", height: 250, width: 400 });
            $("#add-new-port-dialog form input[class='submit']").live("click", function (e) {
                var form = $(this).closest("form");
                var url = form.attr("action");
                var method = form.attr("method");
                $.ajax({
                    url: url,
                    type: method,
                    data: form.serialize(),
                    dataType: 'json',
                    success: function (data, status, xhr) {
                        $("#add-new-port-dialog").html(data.view);
                        if (data.status == "success") {
                            ports.prepend($("<option>", { value: data.data.portId, text: data.data.name }));
                            ports.val(data.data.portId);
                        }
                    },
                    error: function (xhr, status, error) {
                        $("<div></div>").html(xhr.responseText).dialog();
                    }
                });
            });
        }
    );
}

function addNewBodyOfWater() {
    var bodiesOfWater = $(".BodyOfWaterId");
    $.get(
        "/JSON/AddBodyOfWater",
        function (data, status, xhr) {
            $("<div></div>").attr("id", "add-new-bodyOfWater-dialog").html(data.view).dialog({ title: "Add a New Body of Water", height: 125, width: 400 });
            $("#add-new-bodyOfWater-dialog form input[class='submit']").live("click", function (e) {
                var form = $(this).closest("form");
                var url = form.attr("action");
                var method = form.attr("method");
                $.ajax({
                    url: url,
                    type: method,
                    data: form.serialize(),
                    dataType: 'json',
                    success: function (data, status, xhr) {
                        $("#add-new-bodyOfWater-dialog").html(data.view);
                        if (data.status == "success") {
                            bodiesOfWater.prepend($("<option>", { value: data.data.bodyOfWaterId, text: data.data.name }));
                            bodiesOfWater.val(data.data.bodyOfWaterId);
                        }
                    },
                    error: function (xhr, status, error) {
                        $("<div></div>").html(xhr.responseText).dialog();
                    }
                });
            });
        }
    );
}

function addNewMarina() {
    var marinas = $("#MarinaId");
    $.get(
        "/JSON/AddMarina",
        { portId: ports.val() },
        function (data, status, xhr) {
            $("<div></div>").attr("id", "add-new-marina-dialog").html(data.view).dialog({ title: "Add a New Marina", height: 400, width: 550 });
            $("#add-new-marina-dialog form input[class='submit']").live("click", function (e) {
                var form = $(this).closest("form");
                var url = form.attr("action");
                var method = form.attr("method");
                $.ajax({
                    url: url,
                    type: method,
                    data: form.serialize(),
                    dataType: 'json',
                    success: function (data, status, xhr) {
                        $("#add-new-marina-dialog").html(data.view);
                        if (data.status == "success") {
                            marinas.prepend($("<option>", { value: data.data.marinaId, text: data.data.name }));
                            marinas.val(data.data.marinaId);
                        }
                    },
                    error: function (xhr, status, error) {
                        $("<div></div>").html(xhr.responseText).dialog();
                    }
                });
            });
        }
    );
}
$(document).ready(function () {

    $(".datepicker").datepicker();

    // input masking
    $(".date").mask("99/99/9999");
    $(".phone").mask("(999) 999-9999");

    $("#PortId").live("change", function () {
        var boats = $("#ListingId");
        var ports = $("#PortId");
        boats.html("");
        boats.removeAttr("disabled");
        $.getJSON(
            "/JSON/GetBoatsByPort",
            { portId: ports.val() },
            function (data, status, xhr) {
                boats.append($("<option>", { text: "", value: "" }));
                $.each(data, function (key, value) {
                    boats.append($("<option>", { text: value.value, value: value.key }));
                });
                boats.append($("<option>", { text: "<add a new boat>", value: "-1" }));
            }
        );
    });

    $(".listing-paid").hover(function () {
        $(this).css({ cursor: 'pointer', backgroundColor: '#709fac' });
        $(this).find("td").css({ color: '#900' });
    },
    function () {
        $(this).css({ cursor: '', backgroundColor: '' });
        $(this).find("td").css({ color: '' });
    }).click(function () {
        window.location = $(this).data("url");
    });
});