// output css


const burgers = 180;

var index = 0;

function randomBetween(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

class Hamburger {
    constructor() {
        this.count = randomBetween(2, 3); // How many lines does the icon have
        this.height = randomBetween(2, 4);
        this.width = randomBetween(18, 26);
        this.originalWidth = this.width;
        this.borderRadius = randomBetween(0, this.height - 1);
        this.gap = randomBetween(1, 2);
        this.border = randomBetween(1, 2);
        this.opacity = randomBetween(100, 100) / 100;
        this.transitionSpeed = randomBetween(10, 30) / 100 + 's';
        this.rotation = randomBetween(0, 1) * 180;
        this.menuRotation = randomBetween(0, 1) * 180;
        this.scale = (randomBetween(0, 30) / 100) + 1;
        this.left = (-randomBetween(0, 20) + randomBetween(0, 20));
        this.easing = `cubic-bezier(${randomBetween(4, 8) / 10}, ${randomBetween(0, 1) / 10}, ${randomBetween(0, 4) / 10}, ${randomBetween(8, 20) / 10})`;
        this.type = randomBetween(1, 4)

        if(this.rotation > 179) {
            this.transitionSpeed = randomBetween(30, 60) / 100 + 's';
        }

        if(this.count == 3 && this.type == 2) {
            this.height += 2;
            this.width = this.height;
            this.borderRadius = this.height;
            this.gap += 1;
        }

        let partStyles = `
width: ${this.width}px; 
height: ${this.height}px; 
position: absolute;
background: #313d44; 
right: 0;
margin: auto;
left: 0;
border-radius: ${this.borderRadius}px;
transition: all ${this.transitionSpeed} ${this.easing};
`;

        let checkedStyle = '';
        let center = (((this.count * this.height) + ((this.count - 1) * this.gap)) / 2) - (this.height / 2);

        if(this.count == 2) {
            checkedStyle = `
input#menu-${index}:checked + label .menu {
transform:scale(${this.scale}) rotate(${this.menuRotation}deg); 
}

input#menu-${index}:checked + label .menu .menu_part:nth-of-type(1) {
transform: rotate(${45 + this.rotation}deg);
top: calc(50% - (${this.height / 2}px))!important;
width: ${this.originalWidth}px !important;
}

input#menu-${index}:checked + label .menu .menu_part:nth-of-type(2) {
transform: rotate(${-45 - this.rotation}deg);
top: calc(50% - (${this.height / 2}px))!important;
width: ${this.originalWidth}px !important;
}
`
        } else {

            checkedStyle = `
input#menu-${index}:checked + label .menu {
transform:scale(${this.scale}) rotate(${this.menuRotation}deg);
}

input#menu-${index}:checked + label .menu .menu_part:nth-of-type(1) {
transform: rotate(45deg);
width: ${this.originalWidth}px !important;
top: calc(50% - (${this.height / 2}px))!important;
}

input#menu-${index}:checked + label .menu .menu_part:nth-of-type(2) {
left: ${this.left}px !important;
opacity: 0;
}

input#menu-${index}:checked + label .menu .menu_part:nth-of-type(3) {
transform: rotate(-45deg);
width: ${this.originalWidth}px!important;
top: calc(50% - (${this.height / 2}px))!important;
}
`
        }
        if(this.border == 1) {
            checkedStyle += `input#menu-${index}:checked + label .menu {transform:scale(${this.scale}) rotate(${this.menuRotation}deg); border: 2px solid black;}`
        }

        var style = document.createElement('style');
        style.type = 'text/css';
        style.classList.add(`menu-${index}`);
        style.appendChild(document.createTextNode(checkedStyle));
        document.head.appendChild(style);

        let partMarkup = '';
        let partMarkupOutput = '';
        var iteration = 0;

        for(var i = 0; i < this.count; i++) {
            if(this.type == 3) {
                partMarkup += `<div class="menu_part" style="${partStyles}width: ${this.width - (6 * iteration)}px;
top: calc(50% - ((${((this.count * this.height) + ((this.count - 1) * this.gap)) / 2}px)) + ${(this.height * (i)) + this.gap * (i - 1) }px);
"></div>`;

            } else {
                partMarkup += `<div class="menu_part" style="${partStyles}width:${this.originalWidth};top: calc(50% - ((${((this.count * this.height) + ((this.count - 1) * this.gap)) / 2}px)) + ${(this.height * (i)) + this.gap * (i - 1) }px);"></div>`;
            }
            iteration++;
            partMarkupOutput += `\t\t\t<div class="menu_part"></div>\n`;
        }

        this.generatedMarkup = `<input id="menu-${index}" type="checkbox" style="display: none"><label for="menu-${index}"><div class="menu" style="transition: all ${this.transitionSpeed};position: relative;width: ${this.originalWidth + 20}px;height: ${this.originalWidth + 20}px;border-radius: 100%;cursor: pointer;">${partMarkup}</div></label>`;

        this.outputMarkup = `<input id="menu-${index}" type="checkbox">\n<label for="menu-${index}">\n\t<div class="menu">\n${partMarkupOutput}\t</div>\n</label>`



        $('.grid').append(`<div class="grid_item"><span>.0${index + 1}</span><i class="fa fa-code" data-index="${index}"></i><div class="grid_item__inner" style="width:${this.originalWidth + 20}px; height: ${this.width + 20}px; ">${this.generatedMarkup}</div></div>`);

        index++;
    }

    build() {

    }
}

burgerArray = [];

for(var i = 0; i < burgers; i++) {
    hamburger = new Hamburger();
    burgerArray.push(hamburger);
}


$('.panel').click(function(){
    //$('body').toggleClass('open');
})

$('.close').click(function(){
     $('body').toggleClass('open');
})

$('.grid_item i').click(function() {
    $('body').toggleClass('open');


    $('.panel .markup').text(burgerArray[$(this).data('index')].outputMarkup);

    var part = $(this).next().find('.menu').find('.menu_part:nth-of-type(1)');
    var partStyles = part.attr('style').split(';');
    var partStyleFinal = partStyles.join(';')

    console.log(partStyles)

    var partOne = $(this).next().find('.menu').find('.menu_part:nth-of-type(1)');
    
    var test =  partOne.attr('style').split(';')[10];
    console.log(test)
    var partOneStyles = `&:nth-of-type(1) {\n\t${partOne.attr('style').split(';')[10]};\n\twidth: ${partOne.css('width')}\n}\n\n`;

    var partTwo = $(this).next().find('.menu').find('.menu_part:nth-of-type(2)');
    var partTwoStyles = `&:nth-of-type(2) {\n\t${partTwo.attr('style').split(';')[10]};\n\twidth: ${partTwo.css('width')}\n}\n\n`;

    if($(this).next().find('.menu').find('.menu_part').length != 2) {
        var partThree = $(this).next().find('.menu').find('.menu_part:nth-of-type(3)');
        var partThreeStyles = `&:nth-of-type(3) {\n\t${partThree.attr('style').split(';')[10]};\n\twidth: ${partThree.css('width')}\n}\n\n`;

    } else {
        var partThree = '';
        var partThreeStyles = '';
    }


    var menu = $(this).next().find('.menu');
    var menuStyles = menu.attr('style').split(';');
    var menuFinal = `#menu-${$(this).data('index')} {\n\tdisplay: none;\n}\n\n.menu {
${menuStyles.join(';\n')}
\t&_part {
\t\t${partStyleFinal}
\t\t${partOneStyles}
\t\t${partTwoStyles}
\t\t${partThreeStyles}
}\n


}\n${$('style.menu-' + $(this).data('index'))[0].innerHTML}`
    console.log($('style.menu-1')[0])
    $('.panel .css').text(menuFinal);
})



function autoToggle() {
    setInterval(function(){
        $('input').click();  
    },1000)
}

//autoToggle();