function process_step_1() {
    "use strict";

    document.getElementById('step-1').style.display = 'none';
    document.getElementById('step-2').style.display = 'block';
}

function process_step_2() {
    "use strict";

    var logo = [];

    var logos = document.getElementsByName('logo');
    var logos_length = logos.length;

    for (var i = 0; i < logos_length; i++) {
        if (logos[i].type === 'radio' && logos[i].checked === true) {
            logo.push(logos[i].value);
        }
    }

    if (logo.length <= 0) {
        alert('Nepasirinktas marškinėlių paveikslėlis.');
    } else {
        document.getElementById('step-2').style.display = 'none';
        document.getElementById('step-3').style.display = 'block';

        document.getElementById('display-logo').innerHTML = '<img src="' + logo + '" alt="Marškinėlio objektas" id="t-shirt-logo">';
    }
}

function step_back_2() {
    "use strict";

    document.getElementById('step-1').style.display = 'block';
    document.getElementById('step-2').style.display = 'none';
}

function t_shirt_color(color) {
    "use strict";

    var result;

     /*
     if (color == '#FFFFFF') {

        result = '1';
    } else if (color == '#999999') {
        result = '2';
    } else if (color == '#77D3F2') {
        result = '3';
    } else if (color == '#000000') {
        result = '4';
    } else {
        result = '1';
    }

    */

    switch (color) {
        case '#FFFFFF':
            result = '1';
            console.log(result);
            break;
        case '#999999':
            result = '2';
            console.log(result);
            break;
        case '#77D3F2':
            result = '3';
            console.log(result);
            break;
        case '#000000':
            result = '4';
            console.log(result);
            break;
        default:
            result = '1';
            console.log(result);
            break;
    }


    return parseInt(result);
}

function t_shirt_gender(gender) {
    "use strict";

    var result;

    switch (gender) {
        case 'Moteris':
            result = 'female';
            break;
        case 'Vyras':
            result = 'male';
            break;
        default:
            result = 'male';
            break;
    }

    return result;
}

function process_step_3() {
    "use strict";

    var color = [];

    var colors = document.getElementsByName('color');
    var colors_length = colors.length;

    for (var i = 0; i < colors_length; i++) {  //neprotinga kurtis kintamaji ir saugoti jame masyvo ilgi. Kadangi JS viskas yra objektas, galima iskarto naudoti metoda. Siuo atvej colors.length
        if (colors[i].type === 'radio' && colors[i].checked === true) {
            color.push(colors[i].value);
        }
    }

    var gender = document.getElementById('gender');
    var size = document.getElementById('size');

    if (color.length <= 0) {
        alert('Nepasirinkta marškinėlių spalva.');
    } else if (gender.value === 'false') {
        alert('Nepasirinkta marškinėlių lytis.');
    } else if (size.value === 'false') {
        alert('Nepasirinktas marškinėlių dydis.');
    } else {
        console.log(color);
        document.getElementById('step-3').style.display = 'none';
        document.getElementById('step-4').style.display = 'block';

        document.getElementById('display-t-shirt').innerHTML = '<img src="images/clothes/' + t_shirt_gender(gender.value) + '/' + t_shirt_color(color[0]) + '.png" alt="Marškinėlis">'; //tavo switch klaida cia. Paaiskinsiu per pamoka
        document.getElementById('display-color').innerHTML = '<div id="style-5" style="background: ' + color + ';">';
        document.getElementById('display-gender').innerHTML = gender.value;
        document.getElementById('display-size').innerHTML = size.value;
    }
}

function step_back_3() {
    "use strict";

    document.getElementById('step-2').style.display = 'block';
    document.getElementById('step-3').style.display = 'none';
}

function step_back_4() {
    "use strict";

    document.getElementById('step-3').style.display = 'block';
    document.getElementById('step-4').style.display = 'none';
}

window.onload = function() {
    let resize_logo = document.getElementById('resize-logo');

    resize_logo.oninput = function() {
        var logo = document.getElementById('t-shirt-logo');

        var logo_current_width = logo.naturalWidth;
        var logo_current_height = logo.naturalHeight;

        var logo_resize_percentage = document.getElementById('resize-logo').value;

        if (logo_resize_percentage < 20) {
            logo_resize_percentage = 20;
        }

        var logo_width = (logo_current_width * logo_resize_percentage) / 100;
        var logo_height = (logo_current_height * logo_resize_percentage) / 100;

        logo.style.width = logo_width + 'px';
        logo.style.height = logo_height + 'px';
    }

    let move_logo_to_top = document.getElementById('logo-top-position');

    move_logo_to_top.oninput = function() {
        var logo_top_position = document.getElementById('logo-top-position').value;

        document.getElementById('t-shirt-logo').style.marginBottom = logo_top_position + 'px';
    }

    let move_logo_to_left = document.getElementById('logo-left-position');

    move_logo_to_left.oninput = function() {
        var logo_left_position = document.getElementById('logo-left-position').value;

        document.getElementById('t-shirt-logo').style.marginRight = logo_left_position + 'px';
    }

    let move_logo_to_right = document.getElementById('logo-right-position');

    move_logo_to_right.oninput = function() {
        var logo_right_position = document.getElementById('logo-right-position').value;

        document.getElementById('t-shirt-logo').style.marginLeft = logo_right_position + 'px';
    }

    let move_logo_to_bottom = document.getElementById('logo-bottom-position');

    move_logo_to_bottom.oninput = function() {
        var move_logo_to_bottom = document.getElementById('logo-bottom-position').value;

        document.getElementById('t-shirt-logo').style.marginTop = move_logo_to_bottom + 'px';
    }
}

function submit_form() {
    document.getElementById('multiphase').method = 'POST';
    document.getElementById('multiphase').action = '';
    document.getElementById('multiphase').submit();
}