$(document).ready(function() {

    ddlItem = $('select.ddlitem');
    ddlSize = $('select.ddlsize');
    ddlFit = $('select.ddlfit');
    ddlColour = $('select.ddlcolour');
        
    ddlItem.change(changesize);
    ddlSize.change(changefit);
    ddlFit.change(changecolour);
    
    if (ddlItem.val() == '')
    {
        $('.sizes').addClass('disabled');
        $('.sizes select').attr('disabled', 'disabled');
    }

    if (ddlSize.val() == '')
    {
        $('.fits').addClass('disabled');
        $('.fits select').attr('disabled', 'disabled');
    }

    if (ddlFit.val() == '')
    {                
        if (ddlColour.children().length > 1 && ddlSize.val() == '')
        {
            $('.colours').addClass('disabled');
            $('.colours select').attr('disabled', 'disabled');
        }
        else
        {
            $('.fits').addClass('disabled');
            $('.fits select').attr('disabled', 'disabled');
        }
    }
    
});

function changesize()
{ 

    removeSizes();
    removeFits();
    removeColours();

    $('.fits, .colours').addClass('disabled');
    $('.fits select, .colours select').attr('disabled', 'disabled');

    if (ddlItem.val() != '')
    {
        $.ajax({
            type: "POST",
            url: webService + "EvedenServices.asmx/GetSizes",
            data: "{\"Key\":\"" + key + "\", \"Item\":'" + ddlItem.val() + "', \"ColourId\":null, \"FitId\":null,\"CategoryId\":null}",
            contentType: "application/json; char=utf-8",
            dataType: "json",
            success: function(sizes) {
            
                var oSizes = JSON.parse(sizes);                    
                removeSizes();

                if (oSizes != null)
                {
                    for(var i = 0; i < oSizes.length; i++)
                    {
                        ddlSize.append('<option value="' + oSizes[i].Id + '">' + oSizes[i].Name + '</option>');
                    }
                    
                    $('.sizes').removeClass('disabled');
                    $('.sizes select').removeAttr('disabled');
                }
                else
                {
                    $('.sizes').addClass('disabled');
                    $('.sizes select').attr('disabled', 'disabled');
                }
                
            }
        });
    }
    else
    {
        $('.sizes').addClass('disabled');
        $('.sizes select').attr('disabled', 'disabled');
    }
}

function changefit()
{

    removeFits();
    removeColours();

    $('.colours').addClass('disabled');
    $('.colours select').attr('disabled', 'disabled');

    if (ddlSize.val() != '')
    {
        $.ajax({
            type: "POST",
            url: webService + "EvedenServices.asmx/GetFits",
            data: "{\"Key\":\"" + key + "\", \"Item\":'" + ddlItem.val() + "', \"ColourId\":null, \"SizeId\":" + ddlSize.val() + ",\"CategoryId\":null}",
            contentType: "application/json; char=utf-8",
            dataType: "json",
            success: function(sizes) {                  

                removeFits();

                if (sizes != null)
                {
                    var oFits = JSON.parse(sizes);                         
                                    
                    for(var i = 0; i < oFits.length; i++)
                    {
                        ddlFit.append('<option value="' + oFits[i].Id + '">' + oFits[i].Name + '</option>');
                    }
                    $('.fits').removeClass('disabled');
                    $('.fits select').removeAttr('disabled');
                }
                else
                {
                    $.ajax({
                        type: "POST",
                        url: webService + "EvedenServices.asmx/GetColours",
                        data: "{\"Key\":\"" + key + "\", \"Item\":'" + ddlItem.val() + "', \"FitId\":null, \"SizeId\":" + ddlSize.val() + ",\"CategoryId\":null}",
                        contentType: "application/json; char=utf-8",
                        dataType: "json",
                        success: function(sizes) {
                        
                            var oColours = JSON.parse(sizes);
                            removeColours();

                            if (oColours != null)
                            {                                                                
                                for(var i = 0; i < oColours.length; i++)
                                {
                                    ddlColour.append('<option value="' + oColours[i].Id + '">' + oColours[i].Name + '</option>');
                                }
                                
                                $('.colours').removeClass('disabled');
                                $('.colours select').removeAttr('disabled');
                            }
                            else
                            {
                                $('.colours').addClass('disabled');
                                $('.colours select').attr('disabled', 'disabled');
                            }
                            
                        }
                    });
                }
            }
        });
    }
    else
    {
        $('.fits').addClass('disabled');
        $('.fits select').attr('disabled', 'disabled');
    }
}

function changecolour()
{
    removeColours();

    if (ddlFit.val() != 0)
    {
    $('.colours').removeClass('disabled');
    $('.colours select').removeAttr('disabled');
   
        $.ajax({
            type: "POST",
            url: webService + "EvedenServices.asmx/GetColours",
            data: "{\"Key\":\"" + key + "\", \"Item\":'" + ddlItem.val() + "', \"FitId\":" + ddlFit.val() + ", \"SizeId\":" + ddlSize.val() + ",\"CategoryId\":null}",            
            contentType: "application/json; char=utf-8",
            dataType: "json",
            success: function(sizes) {
                
                var oColours = JSON.parse(sizes);
                removeColours();
                   
                if (oColours != null)
                {                       
                    for(var i = 0; i < oColours.length; i++)
                    {
                        ddlColour.append('<option value="' + oColours[i].Id + '">' + oColours[i].Name + '</option>');
                    }
                    
                    $('.colours').removeClass('disabled');
                    $('.colours select').removeAttr('disabled');
                }
                else
                {
                    $('.colours').addClass('disabled');
                    $('.colours select').attr('disabled', 'disabled');
                }
            }
        });
    }    
    else
    {
        $('.colours').addClass('disabled');
        $('.colours select').attr('disabled', 'disabled');
    }

}

function removeSizes()
{
    if (ddlSize.length > 0)
    {
        ddlSize.find('option:gt(0)').remove();
    }
}
function removeFits()
{
    if (ddlFit.length > 0)
    {                        
        ddlFit.find('option:gt(0)').remove();
    }
} 
function removeColours()   
{
    if (ddlColour.length > 0)
    {                        
        ddlColour.find('option:gt(0)').remove();
    }
}