$(function () {
    $("select[name$='ddl1']").change(function () {
        var ddl1 = $("select[name$='ddl1']");
        var ddl2 = $("select[name$='ddl2']");
        var ddl3 = $("select[name$='ddl3']");
        var selectedValue = ddl1.val();
        selectedValue = selectedValue == '0' ? '' : selectedValue;

        if (selectedValue != '') {
            ddl2.load("/GetCarTree.aspx", { id: selectedValue });
            ddl3.empty();
            ShowLoadingPanel($("#MatrixParent"));
            CallSubtypeMatrixCallback('matrix#1#' + selectedValue);
        }
        else {
            ShowLoadingPanel($("#MatrixParent"));
            CallSubtypeMatrixCallback('matrix#0#0');
            ddl2.empty();
            ddl3.empty();
        }
    });

    $("select[name$='ddl2']").change(function () {
        var ddl1 = $("select[name$='ddl1']");
        var ddl2 = $("select[name$='ddl2']");
        var ddl3 = $("select[name$='ddl3']");
        var selectedValue = ddl2.val();
        selectedValue = selectedValue == '0' ? '' : selectedValue;

        if (selectedValue != '') {
            ddl3.load("/GetCarTree.aspx", { id: selectedValue });
            ShowLoadingPanel($("#MatrixParent"));
            CallSubtypeMatrixCallback('matrix#2#' + selectedValue);
        }
        else {
            ddl3.empty();
            ShowLoadingPanel($("#MatrixParent"));
            CallSubtypeMatrixCallback('matrix#1#' + ddl1.val());
        }
    });

    $("select[name$='ddl3']").change(function () {
        var ddl1 = $("select[name$='ddl1']");
        var ddl2 = $("select[name$='ddl2']");
        var ddl3 = $("select[name$='ddl3']");
        var selectedValue = ddl3.val();
        selectedValue = selectedValue == '0' ? '' : selectedValue;

        if (selectedValue != '') {
            window.location = '/Subtypes.aspx?tree=1&ser=' + selectedValue;
        }
        else {
            ShowLoadingPanel($("#MatrixParent"));
            CallSubtypeMatrixCallback('matrix#2#' + ddl2.val());
        }
    });
});