$(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() == 0)
    {
        $('.sizes').addClass('disabled');
        $('.sizes select').attr('disabled', 'disabled');
    }

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

    if (ddlFit.val() == 0)
    {
        $('.colours').addClass('disabled');
        $('.colours select').attr('disabled', 'disabled');
    }
    
});

function changesize()
{ 

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

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

    if (ddlItem.val() != 0)
    {
        $.ajax({
            type: "POST",
            url: webService + "/GetAttributeByItemAndType",
            data: "{\"AttributeTypeId\":2, \"Item\":'%" + ddlItem.val() + "%', \"AttributeIdsAsCSV\":\"\"}",
            contentType: "application/json; char=utf-8",
            dataType: "json",
            success: function(sizes) {
                var oSizes = JSON.parse(sizes);                    
                                                                            
                if (ddlSize.length > 0)
                {                        
                    removeSizes()
                    
                    for(var i = 0; i < oSizes.attributes.length; i++)
                    {
                        ddlSize.append('<option value="' + oSizes.attributes[i].id + '">' + oSizes.attributes[i].name + '</option>');
                    }
                    
                    $('.sizes').removeClass('disabled');
                    $('.sizes select').removeAttr('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() != 0)
    {
        $.ajax({
            type: "POST",
            url: webService + "/GetAttributeByItemAndType",
            data: "{\"AttributeTypeId\":3, \"Item\":'%" + ddlItem.val() + "%', \"AttributeIdsAsCSV\":\"" + ddlSize.val() + "\"}",
            contentType: "application/json; char=utf-8",
            dataType: "json",
            success: function(sizes) {                  
                               
                if (sizes != null)      
                {
                    var oFits = JSON.parse(sizes);                         
                    removeFits()
                
                    for(var i = 0; i < oFits.attributes.length; i++)
                    {
                        ddlFit.append('<option value="' + oFits.attributes[i].id + '">' + oFits.attributes[i].name + '</option>');
                    }
                    $('.fits').removeClass('disabled');
                    $('.fits select').removeAttr('disabled');
                }
                else
                {
                    $('.colours').removeClass('disabled');
                    $('.colours select').removeAttr('disabled');
                    
                    $.ajax({
                        type: "POST",
                        url: webService + "/GetAttributeByItemAndType",
                        data: "{\"AttributeTypeId\":1, \"Item\":'%" + ddlItem.val() + "%', \"AttributeIdsAsCSV\":\"" + ddlSize.val() + "\"}",
                        contentType: "application/json; char=utf-8",
                        dataType: "json",
                        success: function(sizes) {
                            var oColours = JSON.parse(sizes);                    
                                                                    
                            if (ddlFit.length > 0)
                            {                       
                                removeColours()
                            
                                for(var i = 0; i < oColours.attributes.length; i++)
                                {
                                    ddlColour.append('<option value="' + oColours.attributes[i].id + '">' + oColours.attributes[i].name + '</option>');
                                }
                            }
                        }
                    });
                }
            }
        });
    }
    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 + "/GetAttributeByItemAndType",
            data: "{\"AttributeTypeId\":1, \"Item\":'%" + ddlItem.val() + "%', \"AttributeIdsAsCSV\":\"" + ddlSize.val() + "," + ddlFit.val() + "\"}",
            contentType: "application/json; char=utf-8",
            dataType: "json",
            success: function(sizes) {
                var oColours = JSON.parse(sizes);                    
                                                        
                if (ddlFit.length > 0)
                {                       
                    removeColours();
                
                    for(var i = 0; i < oColours.attributes.length; i++)
                    {
                        ddlColour.append('<option value="' + oColours.attributes[i].id + '">' + oColours.attributes[i].name + '</option>');
                    }
                }
            }
        });
    }    
    else
    {
        $('.colours').addClass('disabled');
        $('.colours select').attr('disabled', 'disabled');
    }

}

function removeSizes()
{
    if (ddlSize.length > 0)
    {                        
        ddlSize.children().remove();
        ddlSize.append('<option value="0">Any size</option>');
    }
}
function removeFits()
{
    if (ddlFit.length > 0)
    {                        
        ddlFit.children().remove();
        ddlFit.append('<option value="0">Any cup size</option>');
    }
} 
function removeColours()   
{
    if (ddlColour.length > 0)
    {                        
        ddlColour.children().remove();
        ddlColour.append('<option value="0">Any colour</option>');
    }
}