var RegionID = 0;
var CountyID = 0;
var TownID = 0;

var RegionComboBoxID = "RegionDropDown";
var CountyComboBoxID = "CountyDropDown";
var TownComboBoxID = "TownDropDown";


$(document).ready(function () {

    RegionID = $('#RegionDropDown option:selected').attr('value');
    CountyID = $('#CountyDropDown option:selected').attr('value');
    TownID = $('#TownDropDown option:selected').attr('value');

    // check that the dropdowns dont already contain values, if so call the ajax functions
    if ($('#RegionDropDown option:selected').text() != "Select Region") {

        // store the RegionID
        if (RegionID == 0) {
            RegionID = $('#RegionDropDown option:selected').attr('value');
        }
        if (RegionID > 0) {

            // remove the disabled attribute
            $('#CountyDropDown').removeAttr("disabled");

            // call the get Counties web service
            getCounties(RegionID, '#CountyDropDown');

            if (CountyID > 0) {

                // remove the disabled attribute
                $('#TownDropDown').removeAttr("disabled");

                // call the get towns web service
                getTowns(CountyID, '#TownDropDown');

            }
        }
    }
    else {
        getRegion('#RegionDropDown');
    }


    // click event for the region dropdown
    $("#RegionDropDown").click(function () {

        // region dropdown
        if (document.getElementById("RegionDropDown").options.length == 2) getRegion('#RegionDropDown');

        if (document.getElementById("CountyDropDown").options.length > 1) {

            // if the text box contains data, clear it and add the default option
            clearComboBox("CountyDropDown");

            // now add the default - "select a county" and make it disabled
            setDefaultAttribute("CountyDropDown", "Select a County");

            // add disabled attributes 
            $('#CountyDropDown').attr('disabled', 'disabled');

        }

        if (document.getElementById("TownDropDown").options.length > 1) {
            // if the town box contains data, clear it and add the default option
            clearComboBox("TownDropDown");

            // now add the default - "select a county" and make it disabled
            setDefaultAttribute("TownDropDown", "Select a Town");

            // add disabled attributes 
            $('#TownDropDown').attr('disabled', 'disabled');
        }
    });


    $("#CountyDropDown").click(function () {
        if (document.getElementById("TownDropDown").options.length > 1) {
            // if the town box contains data, clear it and add the default option
            clearComboBox("TownDropDown");

            // now add the default - "select a county" and make it disabled
            setDefaultAttribute("TownDropDown", "Select a Town");

            // add disabled attributes 
            $('#TownDropDown').attr('disabled', 'disabled');
        }
    });


    // region change function
    $("#RegionDropDown").change(function () {

        // store the RegionID from the dropdown
        RegionID = $('#RegionDropDown option:selected').val()

        // remove the disabled attribute
        var element = document.getElementById("CountyDropDown");
        element.removeAttribute("disabled");

        // call the get countys web service
        getCounties(RegionID, '#CountyDropDown');
    });

    // region change function
    $("#CountyDropDown").change(function () {

        // store the RegionID from the dropdown
        CountyID = $('#CountyDropDown option:selected').val()

        // remove the disabled attribute
        var element = document.getElementById("TownDropDown");
        element.removeAttribute("disabled");

        // call the get countys web service
        getTowns(CountyID, '#TownDropDown');
    });


});



// create the region dropdowns
function getRegion(RegionDropDownID) {
    $.get("/RegionData/GetAllRegions", function (data) {

        var regions = $('Region', data);
        var i = 0;
        regions.each(function () {

            var region = $(this).find("Name").text();
            var RegionID = $(this).find("ID").text();

            // create a new option object
            var newOption = document.createElement('option');
            var ValueAttr = document.createAttribute('value');

            ValueAttr.value = RegionID;

            newOption.setAttributeNode(ValueAttr);
            newOption.innerHTML = region;

            $(RegionDropDownID).append(newOption);

        });
    });
}

function clearDuplicate(ID) {
    document.getElementById(ID).options[1] = null;
}

function getCounties(RegionID, countyDropDownID) {
    $.get("/RegionData/GetCountyByRegionID", "RegionID=" + RegionID, function (data) {

        var counties = $('County', data);
        counties.each(function () {

            // store the name of the counties
            var countyName = $(this).find("Name").text();
            var CountyID = $(this).find("ID").text();

            // create a new option object
            var newOption = document.createElement('option');
            var ValueAttr = document.createAttribute('value');
            ValueAttr.value = CountyID;
            newOption.setAttributeNode(ValueAttr);

            newOption.innerHTML = countyName;

            $(countyDropDownID).append(newOption);

        });
    });
}

function getTowns(CountyID, townDropDownID) {
    $.get("/RegionData/GetTownByCountyID", "CountyID=" + CountyID, function (data) {

        var counties = $('Town', data);
        counties.each(function () {

            // store the name of the counties
            var townName = $(this).find("Name").text();
            var TownID = $(this).find("ID").text();

            // create a new option object
            var newOption = document.createElement('option');
            var ValueAttr = document.createAttribute('value');
            ValueAttr.value = TownID;
            newOption.setAttributeNode(ValueAttr);

            newOption.innerHTML = townName;

            $(townDropDownID).append(newOption);


        });
    });
}

function clearComboBox(BoxToClear) {
    for (var i = document.getElementById(BoxToClear).options.length; i > 0; i--) {
        document.getElementById(BoxToClear).options[i - 1] = null;
    }
}

function setDefaultAttribute(box, stringName) {
    // now add the default - "select a county" and make it disabled
    var newOption = document.createElement('option');
    var ValueAttr = document.createAttribute('value');
    ValueAttr.value = 0;
    newOption.innerHTML = stringName;
    newOption.setAttributeNode(ValueAttr);
    $('#' + box).append(newOption);
}