$(document).ready(function() {

    var sector = $("#SectorID");

    if (sector) {

        //ClearSpecialisations();

        var sectorValue = sector.val();
        LoadSpecialisationsBySectorId(sectorValue);

        sector.change(function() {
            var sectorId = $(this).val();
            LoadSpecialisationsBySectorId(sectorId);
        });

    }

});

function ClearSpecialisations() {
    var specialisationList = $("#SpecialisationIDs, #SpecialisationID");

    var itemsToRemove = $(specialisationList).find('option[value]');

    itemsToRemove = $.grep(itemsToRemove, function(value) {
        return $(value).val().length > 0;
    });

    $(itemsToRemove).remove();

}



function GetSelectedSpecialisationsIDs() {
 
    var specialisationList = $("#SpecialisationIDs, #SpecialisationID");

    var selectedItems = $(specialisationList).find('option[selected]');
 
    var specialisationIDs = [selectedItems.length];

    $.each(selectedItems, function(index, value) {
        specialisationIDs[index] = $(value).val();      
    });

    return specialisationIDs;
}


function GetSelectedSpecialisationsIDs() {

    var specialisationList = $("#SpecialisationIDs, #SpecialisationID");

    var selectedItems = $(specialisationList).find('option[selected]');

    var specialisationIDs = [selectedItems.length];

    $.each(selectedItems, function(index, value) {
        specialisationIDs[index] = $(value).val();
    });

    return specialisationIDs;
}


function LoadSpecialisationsBySectorId(sectorId) {

    var specialisations = $("#SpecialisationIDs, #SpecialisationID");
    var specialisationWrapper = $("#FieldWrapper_SpecialisationID");
    if (sectorId.length == 0) {
        ClearSpecialisations();

    } else {

    var selectedSpecialisations = GetSelectedSpecialisationsIDs();

        ClearSpecialisations();

        $.getJSON("/sectors/sectors/getspecialisationsforajax/?SectorID=" + sectorId, function(data) {
            $.each(data.Specialisations, function(index, value) {
               var optionHtml = $("<option value='" + value.ID + "'>" + value.Name + "</option>");

              if ($.inArray(String(value.ID), selectedSpecialisations) != -1) {
                    optionHtml.attr("selected", "selected");
                }

                specialisations.append(optionHtml);

            });

            specialisationWrapper.show();

        });

    }

}