Untitled

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>New rest</title>
    <style>

body, div, span, h1, h2, h3, h4, h5, h6, a {
    border: 0px;
    text-decoration: none;
    color: black;
    margin: 0;
    padding: 0;
}

    body * {
        box-sizing: border-box;
    }

body {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#main-container {
    width: 1030px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

    #main-container div {
        display: inline-block;
    }

#main-menu {
    width: 1000px;
    height: 75px;
    float: left;
}

#room {
    z-index: -2;
    width: 1000px;
    height: 599px;
    margin: 20px 0px;
    position: relative;
    float: left;
    background: transparent;
    border:2px solid #9A9A9A;
}

.room-background {
    z-index: -3;
    width: 1000px;
    height: 599px;
    margin: 20px 0px;
    position: absolute;
    left: 0px;
    top: 75px;
    float: left;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7d5d3b), color-stop(1, #634b30));
}

#room.grid-background {
    background-image: -webkit-linear-gradient(#927459 1px, transparent 1px), -webkit-linear-gradient(0, #927459 1px, transparent 1px);
    background-size: 25px 25px;
}

#secondary-menu {
    float: right;
    margin-top: 66px;
    width: 584px;
}

    #secondary-menu > div {
        float: left;
    }

#rooms-list-box {
    margin-top: 29px;
}

    #rooms-list-box div {
        float: left;
    }

        #rooms-list-box div:nth-child(3) {
            border-left: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-right: 15px solid #54381e;
            border-top: 15px solid #54381e;
            border-bottom-right-radius: 4px;
        }

        #rooms-list-box div:nth-child(4) {
            border-right: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-left: 15px solid #54381e;
            border-top: 15px solid #54381e;
            float: right;
            border-bottom-left-radius: 4px;
        }


        #rooms-list-box div:nth-child(1) {
            border-left: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-right: 15px solid white;
            border-top: 15px solid white;
            margin-right: -29px;
        }

        #rooms-list-box div:nth-child(2) {
            border-right: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-left: 15px solid white;
            border-top: 15px solid white;
            float: right;
            margin-left: -29px;
        }

#rooms-list {
    width: 120px;
    height: 30px;
    padding: 0;
    padding-left: 1px;
    margin: 0px -1px;
    border-radius: 0;
    border-bottom: 1px solid white;
}

    #rooms-list:focus, button:focus {
        outline: none;
    }

.table {
    position: absolute;
    left: 500px;
    top: 200px;
    width: 100px;
    height: 100px;
    border: 1px solid #AC800C;
    background: -webkit-radial-gradient(center, ellipse cover, rgba(117,73,45,1) 0%,rgba(66,31,19,1) 100%); /* Chrome10+,Safari5.1+ */
}

.resize-table-diagonal, .rotate-table {
    width: 12px;
    height: 12px;
    position: absolute;
    display: none;
}

.rotate-table {
    top: 0;
    left: 0;
    cursor: alias;
}

.resize-table-diagonal {
    right: 0;
    bottom: 0;
    cursor: se-resize;
}

.resize-table-right {
    position: absolute;
    width: 8px;
    right: 0;
    top: 0;
    bottom: 10px;
    cursor: e-resize;
}

.resize-table-down {
    position: absolute;
    height: 8px;
    right: 12px;
    left: 0;
    bottom: 0;
    cursor: s-resize;
}

.round {
    width: 70%;
    position: absolute;
    display: none;
    top: 43%;
    left: 15%;
}


#main-menu button, select, #open-restaurant {
    -moz-box-shadow: inset 0px 1px 0px 0px #a6827e;
    -webkit-box-shadow: inset 0px 1px 0px 0px #a6827e;
    box-shadow: inset 0px 1px 0px 0px #a6827e;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7d5d3b), color-stop(1, #634b30));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d5d3b', endColorstr='#634b30',GradientType=0);
    background-color: #7d5d3b;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #54381e;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: arial;
    font-size: 13px;
    padding: 6px 24px;
    text-align: center;
    text-decoration: none;
    width: 110px;
    height: 45px;
    text-shadow: 0px 1px 0px #4d3534;
}

    #main-menu button:hover, .open-project-box:hover #open-project, .open-rest-box:hover #open-restaurant {
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #634b30), color-stop(1, #7d5d3b));
        background: linear-gradient(to bottom, #634b30 5%, #7d5d3b 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#634b30', endColorstr='#7d5d3b',GradientType=0);
        background-color: #634b30;
    }

    #main-menu button:active, .open-project-box:active #open-project, .open-rest-box:active #open-restaurant {
        position: relative;
        top: 1px;
    }

#main-menu #secondary-menu button {
    height: 29px;
    width: 108px;
    float: left;
}

.open-project-box {
    float: left;
    position: relative;
    margin-right: 5px;
}

    .open-project-box button, .open-project-box input {
        display: inline-block;
        width: 100%;
        text-align: center;
        height: 41px;
    }

.open-rest-box {
    float: left;
    position: relative;
    margin-right: 5px;
}

    .open-rest-box input {
        position: absolute;
        width: 110px;
        height: 45px;
        top: 0;
        left: 0;
        opacity: 0;
    }

#open-restaurant {
}

#load-restaurant {
    margin-top: 2px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.load-rest-active {
    background-color: green;
}

#create-restaurant, .open-restaurant {
    float: left;
    margin-right: 5px;
}

#main-menu #save-restaurant {
    line-height: 27px;
    height: 29px;
    text-align: center;
    width: 80px;
}

#save-restaurant {
    -moz-box-shadow: inset 0px 1px 0px 0px #a4e271;
    -webkit-box-shadow: inset 0px 1px 0px 0px #a4e271;
    box-shadow: inset 0px 1px 0px 0px #a4e271;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809));
    background: linear-gradient(to bottom, #89c403 5%, #77a809 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809',GradientType=0);
    background-color: #89c403;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 3px;
    border: 1px solid #74b807;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: arial;
    font-size: 15px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #528009;
}

    #save-restaurant:hover {
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77a809), color-stop(1, #89c403));
        background: linear-gradient(to bottom, #77a809 5%, #89c403 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403',GradientType=0);
        background-color: #77a809;
    }

    #save-restaurant:active {
        position: relative;
        top: 1px;
    }


.grid-box {
    width: 78px;
    height: 23px;
    border: 1px solid #999999;
    border-radius: 1px;
}

    .grid-box span {
        display: inline-block;
        width: 36px;
        margin-top: 3px;
        margin-left: 12px;
    }


#delete-room {
    border-radius: 50%;
    width: 35px;
    height: 35px;
    margin-top: 598px;
    margin-left: -22px;
    float: left;
    text-align: center;
    line-height: 35px;
    font-weight: bold;
    color: white;
    font-family: cursive;
    cursor: pointer;
    background: -webkit-radial-gradient(center, ellipse cover, rgba(109,76,42,1) 0%,rgba(51,32,14,1) 100%); /* Chrome10+,Safari5.1+ */
}

.delete-table {
    border-radius: 50%;
    text-align: center;
    width: 20px;
    height: 20px;
    line-height: 14px;
    text-align: center;
    position: absolute;
    right: -5px;
    top: -5px;
    font-weight: bold;
    color: white;
    font-family: cursive;
    cursor: pointer;
    border: 1px solid rgb(160, 145, 96);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(109,76,42,1) 0%,rgba(51,32,14,1) 100%); /* Chrome10+,Safari5.1+ */
}

#main-container .table-id {
    display: none;
}

.reserve-name {
    margin-top: 10px;
}

.reserve-name, .reserve-ppl, .reserve-clock {
    width: 100%;
    font-size: 16px;
    color: #e1d59c;
    text-align: center;
}

.sec-menu-box {
    width: 404px;
}

.table > div:first-child {
    width: 100%;
    margin: 6px;
}

#user-options-box {
    width: 160px;
    border: 1px solid black;
    padding: 3px;
    position: absolute;
    text-align: left;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7d5d3b), color-stop(1, #634b30));
}

    #user-options-box button {
        border-radius: 3px;
    }

    #user-options-box div {
        width: 100%;
        height: 30px;
        color: #e1d59c;
    }

    #user-options-box input {
        width: 105px;
        float: right;
    }

#clear-user-options {
    float: right;
}

    </style>
</head>
<body>
    <div id="main-container">
        <div id="main-menu">
            <div id="start-menu">
                <div class="open-rest-box">
                    <button id="open-restaurant">Open restaurant</button>
                    <input type="file" id="file" name="name" value=" " />
                </div>
                <div class="open-project-box">
                    <button id="open-project">Open project</button>
                    <input type="file" id="load-restaurant" value="" />
                </div>
                <button id="create-restaurant">Create restaurant</button>
            </div>
            <div id="secondary-menu">
                <div id="rooms-list-box" style="display:none;">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <select id="rooms-list"></select>
                </div>
                <div class="sec-menu-box" style="display:none;">
                    <button id="grid">Hide grid</button>
                    <button id="add-room">Add room</button>
                    <button id="add-table" disabled>Add table</button>
                    <a href="#" id="save-restaurant">Save</a>
                </div>
            </div>
        </div>
        <div class="room-background" style="display:none;"></div>
        <div id="room" class="grid-background" style="display:none;">
        </div>
        <div id="delete-room" style="display:none;">X</div>
    </div>
    <div id="user-options-box" style="display:none;">
        <div class="res-name">
            <label for="res-input-name">име:&nbsp;</label>
            <input type="text" id="res-input-name" value="" />
        </div>
        <div class="res-ppl">
            <label for="res-input-name">места:&nbsp;</label>
            <input type="number" id="res-input-ppl" value="" />
        </div>
        <div class="res-clock">
            <label for="res-input-name">час:&nbsp;</label>
            <input type="time" id="res-input-date" value="" />
        </div>
        <button id="save-user-options">Запази</button>
        <button id="clear-user-options">Изчисти</button>
    </div>

    <script>
        //Variable that holds the entire restaurant information in JSON
        var restaurantObj;
        function restaurant() {
            var room = document.getElementById('room'),
                addTableBtn = document.getElementById('add-table'),
                roomsList = document.getElementById('rooms-list'),
                loadAdminRestBtn = document.getElementById('load-restaurant'),
                loadUserRestBtn = document.getElementById('file'),
                tableCounter = 0,
                roomCounter = 0,
                currentRoomName,
                showGrid = true,
                userOptionsBox = document.getElementById('user-options-box'),
                tableDiv = document.createElement('div');
            tableDiv.className = 'table';

            restaurantObj = {};

            document.getElementById('add-room').addEventListener('click', createRoom);

            addTableBtn.addEventListener('click', createAdminTables);

            //Get room name on select focus and save it on select change
            roomsList.addEventListener('focus', function () {
                currentRoomName = this.options[this.selectedIndex].innerText;
            });

            //Add room to the JSON and clear current room field
            function createRoom(loadedFile) {
                var newRoomName = '';
                addTableBtn.disabled = false;
                if (!loadedFile.target) {
                    room.innerHTML = '';
                    roomsList.innerHTML = '';
                    for (var prop in loadedFile) {
                        roomsList.innerHTML += '<option value="' + prop + '">' + prop + '</option>'
                    }
                    showHideEls(true);
                    createAdminTables(loadedFile[roomsList.options[roomsList.selectedIndex].innerText], 0);
                }
                else {
                    if (room.style.display == 'inline-block') {
                        saveCurrentRoom(currentRoomName);
                    }
                    newRoomName = prompt('Ednter room name: ');
                    if (newRoomName == null) {
                        return;
                    }
                    roomCounter++;
                    room.innerHTML = '';
                    showHideEls(true);
                    currentRoomName = (newRoomName == '') ? 'Room ' + roomCounter : newRoomName.trim();
                    roomsList.innerHTML += '<option value="' + currentRoomName + '">' + currentRoomName + '</option>';
                    changeSelectedOption(roomsList.options, currentRoomName);
                    restaurantObj[currentRoomName] = [];
                }
            };

            //Save room (on change between rooms and save restaurant
            function saveCurrentRoom(name, resName, ppl, clock) {
                var tablesInRoom = room.getElementsByClassName('table');
                restaurantObj[name] = [];

                for (var i = 0; i < tablesInRoom.length; i++) {
                    restaurantObj[name].push({
                        width: tablesInRoom[i].offsetWidth,
                        height: tablesInRoom[i].offsetHeight,
                        left: tablesInRoom[i].offsetLeft,
                        top: tablesInRoom[i].offsetTop,
                        borderRadius: tablesInRoom[i].style.borderRadius,
                        transform: tablesInRoom[i].style.transform,
                        id: tablesInRoom[i].getElementsByClassName('table-id')[0].innerText,
                        name: tablesInRoom[i].getElementsByClassName('reserve-name')[0].innerText,
                        ppl: tablesInRoom[i].getElementsByClassName('reserve-ppl')[0].innerText,
                        clock: tablesInRoom[i].getElementsByClassName('reserve-clock')[0].innerText
                    });
                }
            }

            //Add table to current room/ JSON array
            function createAdminTables(existingTables, num) {
                var table = tableDiv.cloneNode(true);
                table.innerHTML += '<div><div class="reserve-name"></div><div class="reserve-ppl"></div><div class="reserve-clock"></div><div>';

                //Check if JSON is loaded and extract table styles from it. If new table is created, generate new table ID
                if (Array.isArray(existingTables)) {
                    setTableStyles(table, existingTables[num]);
                }
                else {
                    addTableId(table);
                }

                addTableFunctionality(table);
                room.appendChild(table);
                num += 1;
                if (num && num < existingTables.length) {
                    return createAdminTables(existingTables, num);
                }
                return;
            }

            //Set table styles from the loaded JSON(if such exists) and attach invisible div, that holds the table id
            function setTableStyles(table, styles) {
                table.style.width = styles.width + 'px';
                table.style.height = styles.height + 'px';
                table.style.left = styles.left + 'px';
                table.style.top = styles.top + 'px';
                table.style.borderRadius = styles.borderRadius;
                table.style.transform = styles.transform;
                addTableId(table, styles.id);
                return table;
            }

            function addTableId(el, id) {
                var tableId = document.createElement('div');
                tableId.style.display = 'none';
                tableId.className = 'table-id';
                if (Number(id) >= 0) {
                    tableId.innerText = id;
                    el.appendChild(tableId);
                    return;
                }
                tableId.innerText = tableCounter;
                el.appendChild(tableId);
                tableCounter++;
                return;
            }

            document.getElementById('delete-room').addEventListener('click', function () {
                var decision = confirm('Are you sure you want to delete the entire room?');
                if (decision) {
                    delete restaurantObj[currentRoomName];
                    roomsList.removeChild(roomsList.options[roomsList.selectedIndex]);
                    if (roomsList.children.length == 0) {
                        showHideEls(false);
                        return;
                    }
                    currentRoomName = roomsList.options[roomsList.selectedIndex].innerText;
                    createRoom(restaurantObj);
                }
            });

            document.getElementById('create-restaurant').addEventListener('click', function () {
                document.getElementsByClassName('sec-menu-box')[0].style.display = 'inline-block';

                roomsList.onchange = function () {
                    saveCurrentRoom(currentRoomName);
                    currentRoomName = this.options[this.selectedIndex].innerText;
                    room.innerHTML = '';
                    var tablesToLoad = restaurantObj[currentRoomName];
                    createAdminTables(tablesToLoad, 0);
                };
            });

            document.getElementById('save-restaurant').addEventListener('click', function () {
                saveCurrentRoom(currentRoomName);
                var file = JSON.stringify(restaurantObj),
                    blob = new Blob([file], { type: "text/text" }),
                    url = URL.createObjectURL(blob);

                // update link to new 'url'
                this.download = 'Untitled' + ".json";
                this.href = url;
            });

            loadAdminRestBtn.addEventListener('change', function (ev) {
                var selectedFile = ev.target.files[0],
                    reader = new FileReader();
                reader.readAsText(selectedFile);
                reader.onload = function () {
                    restaurantObj = JSON.parse(reader.result);
                    createRoom(restaurantObj);
                    currentRoomName = roomsList.options[roomsList.selectedIndex].innerText;
                    document.getElementsByClassName('sec-menu-box')[0].style.display = 'inline-block';
                    showHideEls(true);
                    roomCounter = Object.keys(restaurantObj).length;
                    for (var prop in restaurantObj) {
                        for (var i = 0; i < restaurantObj[prop].length; i++) {
                            tableCounter++;
                        }
                    }
                }

                //Load tables with resizing nad moving events on room change
                roomsList.onchange = function () {
                    saveCurrentRoom(currentRoomName);
                    currentRoomName = this.options[this.selectedIndex].innerText;
                    room.innerHTML = '';
                    var tablesToLoad = restaurantObj[currentRoomName];

                    createAdminTables(tablesToLoad, 0);
                };
            });

            loadAdminRestBtn.addEventListener('mousedown', function () {
                this.previousSibling.previousSibling.className = 'load-rest-active';
            });

            document.getElementById('grid').addEventListener('click', function () {
                showGrid = !showGrid;
                if (showGrid) {
                    room.className = 'grid-background';
                    this.innerText = 'Hide grid';
                }
                else {
                    room.className = '';
                    this.innerText = 'Show grid';
                }
            });

            //Table functionality (rotate, resize, border-radius, drag-to-move, delete table)
            function addTableFunctionality(parentEl) {

                (function resizeRight() {
                    var resizingDiv = document.createElement('div');
                    resizingDiv.classList.add('resize-table-right');
                    resizingDiv.onmousedown = function (ev) {
                        var startX = ev.pageX,
                            tableWidth = parentEl.offsetWidth;
                        document.onmousemove = function (ev) {
                            parentEl.style.width = (ev.pageX - startX) + tableWidth + 'px';
                        }
                        clearMouseMoveEvent();
                        return;
                    }
                    parentEl.appendChild(resizingDiv);
                }());

                (function resizeDown() {
                    var resizingDiv = document.createElement('div');
                    resizingDiv.classList.add('resize-table-down');
                    resizingDiv.onmousedown = function (ev) {
                        var startY = ev.pageY,
                            tableHeight = parentEl.offsetHeight;
                        document.onmousemove = function (ev) {
                            parentEl.style.height = (ev.pageY - startY) + tableHeight + 'px';
                        }
                        clearMouseMoveEvent();
                        return;
                    }
                    parentEl.appendChild(resizingDiv);
                }());

                (function resizeDiagonal() {
                    var resizingDiv = document.createElement('div');
                    resizingDiv.classList.add('resize-table-diagonal');
                    resizingDiv.onmousedown = function (ev) {
                        var startX = ev.pageX,
                                startY = ev.pageY,
                                tableWidth = parentEl.offsetWidth,
                                tableHeight = parentEl.offsetHeight,
                                currentDegree = getCurrentRotation(parentEl);
                        if (currentDegree >= 25 && currentDegree <= 65) {
                            document.onmousemove = function (ev) {
                                parentEl.style.width = (ev.pageY - startY) + tableWidth + 'px';
                                parentEl.style.height = (ev.pageY - startY) + tableHeight + 'px';
                            }
                            return;
                        }
                        else if (currentDegree < -24 && currentDegree > -66) {

                            document.onmousemove = function (ev) {
                                parentEl.style.width = (ev.pageX - startX) + tableWidth + 'px';
                                parentEl.style.height = (ev.pageX - startX) + tableHeight + 'px';
                            }
                            return;
                        }

                        document.onmousemove = function (ev) {
                            parentEl.style.width = (ev.pageX - startX) + tableWidth + 'px';
                            parentEl.style.height = (ev.pageY - startY) + tableHeight + 'px';
                        }
                        clearMouseMoveEvent();
                        return;
                    }
                    parentEl.appendChild(resizingDiv);
                }());

                (function roundTable() {
                    var roundTable = document.createElement('input');
                    roundTable.type = 'range';
                    roundTable.classList.add('round');
                    roundTable.min = '0';
                    roundTable.max = '10';
                    roundTable.step = '1';
                    roundTable.value = '0';
                    roundTable.oninput = function () {
                        var step = this.value * 5,
                            diagonalArrow = this.previousSibling,
                            rotateArrow = this.nextSibling,
                            delBtn = rotateArrow.nextSibling;
                        parentEl.style.borderRadius = step + '%';
                        diagonalArrow.style.bottom = (this.value * 1.5) + '%';
                        diagonalArrow.style.right = (this.value * 1.5) + '%';
                        rotateArrow.style.top = (this.value * 1.5) + '%';
                        rotateArrow.style.left = (this.value * 1.5) + '%';
                        delBtn.style.top = (this.value * 1.5) + '%';
                        delBtn.style.right = (this.value * 1.5) + '%';
                    }
                    parentEl.appendChild(roundTable);
                }());

                (function rotateTable() {
                    var rotateDiv = document.createElement('div');
                    rotateDiv.classList.add('rotate-table');
                    rotateDiv.draggable = false;
                    rotateDiv.onmousedown = function (ev) {
                        var startX = ev.pageX,
                                startY = ev.pageY,
                                currentDegree = getCurrentRotation(parentEl),
                                degree;
                        document.onmousemove = function (ev) {
                            degree = ((ev.pageX - startX) / 2) + currentDegree;
                            if (degree > 95 || degree < -95) {
                                return;
                            }
                            parentEl.style.webkitTransform = 'rotate(' + degree + 'deg)';
                            parentEl.style.mozTransform = 'rotate(' + degree + 'deg)';
                            parentEl.style.msTransform = 'rotate(' + degree + 'deg)';
                            parentEl.style.oTransform = 'rotate(' + degree + 'deg)';
                            parentEl.style.transform = 'rotate(' + degree + 'deg)';
                        }
                        clearMouseMoveEvent();

                    }
                    parentEl.appendChild(rotateDiv);
                }());

                (function deleteTable() {
                    var deleteTableBtn = document.createElement('div');
                    deleteTableBtn.classList.add('delete-table');
                    deleteTableBtn.draggable = false;
                    deleteTableBtn.style.display = 'none';
                    deleteTableBtn.innerText = 'x';
                    deleteTableBtn.addEventListener('click', function () {
                        parentEl.parentNode.removeChild(parentEl);
                    });
                    parentEl.appendChild(deleteTableBtn);
                }());

                parentEl.onmouseover = function () {
                    var currentTable = this,
                        tableOptions = this.children;
                    for (var i = 2; i < tableOptions.length; i++) {
                        tableOptions[i].style.display = 'inline-block';
                    }
                };
                parentEl.onmouseout = function () {
                    var currentTable = this,
                        tableOptions = this.children;
                    for (var i = 0; i < tableOptions.length; i++) {
                        tableOptions[i].style.display = 'none';
                    }
                };
                parentEl.onmousedown = function (ev) {
                    if (ev.target.className != this.className) {
                        return;
                    }
                    var currentEl = this,
                        elParentX = this.parentNode.offsetLeft,
                        elParentY = this.parentNode.offsetTop,
                        startX = ev.pageX - (currentEl.offsetLeft + elParentX),
                        startY = ev.pageY - (currentEl.offsetTop + elParentY);

                    document.onmousemove = function (ev) {
                        currentEl.style.left = (ev.pageX - elParentX) - startX + 'px';
                        currentEl.style.top = (ev.pageY - elParentY) - startY + 'px';
                    };
                    clearMouseMoveEvent();
                };

                return parentEl;
            };

            //Load user restaurant
            loadUserRestBtn.addEventListener('change', function (ev) {
                var selectedFile = ev.target.files[0],
                    reader = new FileReader(),
                    secMenuBox = document.getElementsByClassName('sec-menu-box')[0];
                reader.readAsText(selectedFile);
                reader.onload = function () {
                    restaurantObj = JSON.parse(reader.result);
                    createUserRoom(restaurantObj);
                    room.style.display = '';
                    room.className = '';
                    secMenuBox.style.display = '';
                    for (var i = 0; i < 4; i++) {
                        secMenuBox.children[i].style.display = 'none';
                        if (i == 3) {
                            secMenuBox.children[i].style.display = '';
                            secMenuBox.children[i].style.float = 'right';
                        }
                    }
                    document.getElementById('rooms-list-box').style.display = '';
                    document.getElementsByClassName('room-background')[0].style.display = '';
                }

                roomsList.onchange = function () {
                    saveCurrentRoom(currentRoomName);
                    currentRoomName = this.options[this.selectedIndex].innerText;
                    userOptionsBox.style.display = 'none';
                    room.innerHTML = '';
                    for (var i = 0; i < restaurantObj[currentRoomName].length; i++) {
                        addUserTables(restaurantObj[currentRoomName][i]);
                    }
                };
            });

            //Generate rooms list from JSON and load current room tables
            function createUserRoom(loadedFile) {
                room.innerHTML = '';
                roomsList.innerHTML = '';
                for (var prop in loadedFile) {
                    roomsList.innerHTML += '<option value="' + prop + '">' + prop + '</option>'
                }
                currentRoomName = roomsList.options[roomsList.selectedIndex].innerText;

                for (var i = 0; i < loadedFile[currentRoomName].length; i++) {
                    addUserTables(loadedFile[currentRoomName][i]);
                }
            };

            //Load tables with styles, reservation information and fix the css transform rotate for the reservation fields
            function addUserTables(loadedTable) {
                var table = tableDiv.cloneNode(true);
                setTableStyles(table, loadedTable);
                var setZeroDeg = table.style.transform != '' ? table.style.transform : 0;
                setZeroDeg = setZeroDeg != 0 ? setZeroDeg.slice(setZeroDeg.lastIndexOf('(') + 1, setZeroDeg.lastIndexOf('deg)')) : 0;
                setZeroDeg = (setZeroDeg >= 0) ? setZeroDeg - (setZeroDeg * 2) : setZeroDeg + (setZeroDeg * 2);
                table.innerHTML = '<div><div class="reserve-name">' + loadedTable.name + '</div><div class="reserve-ppl">' + loadedTable.ppl +
                                  '</div><div class="reserve-clock">' + loadedTable.clock + '</div>' + '<div class="table-id">' + loadedTable.id + '</div></div>';
                table.children[0].style.transform = 'rotate(' + setZeroDeg + 'deg)';
                table.children[0].style.height = loadedTable.height + 'px';
                table.addEventListener('click', openTableOptions);
                room.appendChild(table);
            };

            //Show user-options-box on mouse-click location
            function openTableOptions(ev) {
                userOptionsBox.style.left = ev.pageX + 'px';
                userOptionsBox.style.top = ev.pageY + 'px';
                userOptionsBox.style.display = '';
                var currentTable = (this.className = 'table') ? this : this.parentNode;
                currentTable = (currentTable.className = 'table') ? currentTable : currentTable.parentNode;

                userOptionsBox.children[3].onclick = function () {
                    currentTable.children[0].children[0].innerText = userOptionsBox.children[0].children[1].value;
                    currentTable.children[0].children[1].innerText = userOptionsBox.children[1].children[1].value;
                    currentTable.children[0].children[2].innerText = userOptionsBox.children[2].children[1].value;
                    userOptionsBox.style.display = 'none';
                };
                userOptionsBox.children[4].onclick = function () {
                    currentTable.children[0].children[0].innerText = '';
                    currentTable.children[0].children[1].innerText = '';
                    currentTable.children[0].children[2].innerText = '';
                    userOptionsBox.style.display = 'none';
                };
            }

            //Change selected option when switching rooms or open restaurant file
            function changeSelectedOption(opts, val) {
                for (var i = 0; i < opts.length; i++) {
                    if (opts[i].value == val) {
                        opts[i].selected = 'selected';
                    }
                }
            }

            //Disable dragging or other events that use document.onmousemove
            function clearMouseMoveEvent() {
                document.onmouseup = function () {
                    document.onmousemove = null;
                }
            }

            function showHideEls(show) {
                var displayStyle;
                if (show) {
                    displayStyle = 'inline-block';
                }
                else {
                    displayStyle = 'none';
                }
                document.getElementById('room').style.display = displayStyle;
                document.getElementsByClassName('room-background')[0].style.display = displayStyle;
                document.getElementById('delete-room').style.display = displayStyle;
                document.getElementById('rooms-list-box').style.display = displayStyle;
            }

            //Function for calculating the current element css rotation degree
            function getCurrentRotation(elid) {
                var st = window.getComputedStyle(elid, null);
                var tr = st.getPropertyValue("-webkit-transform") ||
                     st.getPropertyValue("-moz-transform") ||
                     st.getPropertyValue("-ms-transform") ||
                     st.getPropertyValue("-o-transform") ||
                     st.getPropertyValue("transform") ||
                     "fail...";

                if (tr !== "none") {
                    var values = tr.split('(')[1];
                    values = values.split(')')[0];
                    values = values.split(',');
                    var a = values[0];
                    var b = values[1];
                    var c = values[2];
                    var d = values[3];

                    var scale = Math.sqrt(a * a + b * b);

                    // arc sin, convert from radians to degrees, round
                    /** /
                    var sin = b/scale;
                    var angle = Math.round(Math.asin(sin) * (180/Math.PI));
                    /*/
                    var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
                    /**/

                } else {
                    var angle = 0;
                }
                return angle;
            }

        };
        restaurant();

    </script>
</body>
</html>