<script>
var main = false;
var boots = true;
var keys = true;
var contact = true;

$(document).ready(function(){
    if (main !== true) {
        main = createMain(10,3);
    }
});
$(document).ready(function(){
    $( "#mainbut" ).click(function() {
        if (main == true) {
            $( "content" ).hide( "drop", { direction: "down" }, "slow" );
            deleteMain();
            main = createMain(4,2);
            $( "content" ).show( "drop", { direction: "up" }, "slow" );
            boots = true;
            keys = true;
            contact = true;
        }
    });


    $( "#szewcbut" ).click(function() {
        if (boots == true) {
            $( "content" ).hide( "drop", { direction: "down" }, "slow" );
            deleteMain();
            boots = createMain(4,2);
            $( "content" ).show( "drop", { direction: "up" }, "slow" );
            main = true;
            keys = true;
            contact = true;
        }
    });


    $( "#keysbut" ).click(function() {
        if (keys == true) {
            $( "content" ).hide( "drop", { direction: "down" }, "slow" );
            deleteMain();
            keys = createMain(4,2);
            $( "content" ).show( "drop", { direction: "up" }, "slow" );
            main = true;
            boots = true;
            contact = true;
        }
    });


    $( "#contactbut" ).click(function() {
        if (contact == true) {
            $( "content" ).hide( "drop", { direction: "down" }, "slow" );
            deleteMain();
            contact = createMain(4,2);
            $( "content" ).show( "drop", { direction: "up" }, "slow" );
            main = true;
            boots = true;
            keys = true;
        }
    });
});




function createMain(howmanyrows,quan){


    var j;
    var where = document.getElementById('main');
    for (var i = 1 ; i <= howmanyrows; i++){
        var row = document.createElement('div');
        row.classList.add('row');
        row.id = 'row'+i;
        where.appendChild(row);
        if(quan == 2){
            for (j = 2 ; j <= 3; j++){
                var column = document.getElementById('row'+i);
                var newcolumn = document.createElement('div');
                newcolumn.classList.add('container50');
                if (j % 2) {
                    newcolumn.id = 'column_right'+i;
                    column.appendChild(newcolumn);
                }
                else{
                    newcolumn.id ='column_left'+i;
                    column.appendChild(newcolumn);
                }
            }
        }
        else if(quan ==3){
            for (j = 1 ; j <= 3; j++){
                var column = document.getElementById('row'+i);
                var newcolumn = document.createElement('div');
                newcolumn.classList.add('container30');
                column.appendChild(newcolumn);


                }
            }
        }



    return false;
}
function deleteMain(){
    var i = 1;
    var rows;
    var howmanyrows = document.getElementsByClassName('row').length;
    if (howmanyrows > 0) {
        while(howmanyrows >= 1){
            rows = document.getElementById('row'+i);
            var rowsParent =  document.getElementById('main');
            rowsParent.removeChild(rows);
            var howmanyrows = document.getElementsByClassName('row').length;
            i++;
        }

    }
}






</script>