$(document).ready(function () {
    $('#cutId').change(function () {
        var cutId = getSelectedCut();
        var cut = getCutById(cutId);
        $('#cut-image').attr('src', 'content/images/' + cut.ImageFilename);
        $('#design-image').css('width', cut.SelectorImageWidth);
        $('#design-image').css('top', cut.SelectorImageYPosition);
        $('#design-image').css('left', cut.SelectorImageXPosition);
        $('#os0').val(cut.Name);
        loadColors(cutId);
        loadSizes(cutId);
        
        calculatePrice();
    });
    
    $('#colorId').change(function () {
        var cutId = getSelectedCut();
        var colorId = getSelectedColor();
        
        var color = getColorById(cutId, colorId);
        $('#tee-container').css('background-color', '#' + color.RgbColor);
        $('#os1').val(color.Name);
        $('#singleColor').text(color.Name);
        
        calculatePrice();
    });
    
    $('#sizeId').change(function () {
        var cutId = getSelectedCut();
        var sizeId = getSelectedSize();
        
        var size = getSizeById(cutId, sizeId);
        $('#os2').val(size.Name);
        
        calculatePrice();
    });
    
    loadCuts();
});

function getSelectedCut() {
    var cutId = -1;
    $("#cutId option:selected").each(function () {
        cutId = $(this).attr('value');
    });
    return cutId;
}

function getSelectedColor() {
    var colorId = -1;
    $("#colorId option:selected").each(function () {
        colorId = $(this).attr('value');
    });
    return colorId;
}

function getSelectedSize() {
    var sizeId = -1;
    $("#sizeId option:selected").each(function () {
        sizeId = $(this).attr('value');
    });
    return sizeId;
}

function getCutById(cutId) {
    var cuts = $.grep(data.cuts, function (item, index) {
        return item.Id == cutId;
    });
    return cuts[0];
}

function getColorById(cutId, colorId) {
    var colors = $.grep(data.colors, function (item, index) {
        return item.CutId == cutId && item.ColorId == colorId;
    });
    return colors[0];
}

function getSizeById(cutId, sizeId) {
    var sizes = $.grep(data.sizes, function (item, index) {
        return item.CutId == cutId && item.SizeId == sizeId;
    });
    return sizes[0];
}

function calculatePrice() {
    var cutId = getSelectedCut();
    var cut = getCutById(cutId);
    var color = getColorById(cutId, getSelectedColor());
    var size = getSizeById(cutId, getSelectedSize());
    
    if (cut && color && size) {
        var price = cut.Price + color.Price + size.Price;
        $('#price').text(price);
        $('#amount').val(price);
    }
    
}

function loadCuts() {
    $('#cutId').empty();
    $.each(data.cuts, function (index, item) {
        $('#cutId').append('<option value="' + item.Id + '">' + item.Name + '</option>');
    });
    
    $('#cutId').change();
}

function loadColors(cutId) {
    var colors = $.grep(data.colors, function (item, index) {
        return item.CutId == cutId;
    });
    
    $('#colorId').empty();
    $.each(colors, function (index, item) {
        $('#colorId').append('<option value="' + item.ColorId + '">' + item.Name + '</option>');
    });
    
    $('#colorId').change();
}

function loadSizes(cutId) {
    var sizes = $.grep(data.sizes, function (item, index) {
        return item.CutId == cutId;
    });
    
    $('#sizeId').empty();
    $.each(sizes, function (index, item) {
        $('#sizeId').append('<option value="' + item.SizeId + '">' + item.Name + '</option>');
    });
    
    $('#sizeId').change();
}