Untitled

<!DOCTYPE html>
<html><head><title>Seat Random - SCiUS#11 M.4/2</title><meta charset="utf-" />
<script type="text/javascript">

// ===================
//  EDIT SETTING HERE
// ===================

// !!! CAUTION !!!
// Please carefully edit this file, strictly follow the code syntax/grammar.
// Any mistakes may result in unopenable file.

// If you don't to show the name, change this to false
var showName = true;

/*
 * This set the pattern of the seat
 *
 * 'x' means the seat
 * '-' means the small seperator
 * '_' means the large seperator (has the same size as the seat)
 */
var seatPattern = [
    "xxx-xxx",
    "xxx-xxx",
    "xxx-xxx",
    "xxx-xxx",
    "xxx-xxx"
];

/*
 * This set the showing name
 */
var nameList = [
    "บอล",
    "น้องวิลลี่",
    "พาย",
    "แบงค์",
    "เติ้ล",
    "สปาย",
    "แช๊ป",
    "เอิร์ท",
    "ภพ",
    "แฟรงค์",
    "น้ำมนต์",
    "ข้าวปั้น",
    "ไท",
    "ทาม",
    "กันต์",
    "อาร์ม",
    "เอเธนส์",
    "ณัฐฐ์",
    "น้ำ",
    "มะตูม",
    "แพรพลอย",
    "ออย",
    "ขิม",
    "มุก",
    "ป่าน",
    "ปูน",
    "ฝ้าย",
    "จิง",
    "เจียเจีย",
    "เอมมี่"
];

// ================
//  END OF SETTING
// ================


var smallSeperatorSizeRatio = 0.4;

var rowCount, seatCount;

function createShuffledArray(size) {
    var arr = [];
    var i, j;

    // Initialize Array
    for (i = 0; i < size; i++) {
        arr[i] = -1;
    }

    // Shuffle Operation
    for (i = 0; i < size; i++) {
        var num = Math.floor(Math.random() * (size - i));
        // Just in case, when the floating point precision goes wrong. ??
        num = Math.min(num, size - i - 1);
        var pos = -1;
        for (j = 0; j <= num; j++) {
            do {
                pos++;
            } while (arr[pos] !== -1);
        }
        arr[pos] = i;
    }

    return arr;
}

function setSeatDetail(rowNum, colNum, seatVal) {
    // var seatDiv = document.getElementById("seat_" + rowNum + "_" + colNum);
    var mainTextDiv = document.getElementById("maintext_" + rowNum + "_" + colNum);
    var subTextDiv = document.getElementById("subtext_" + rowNum + "_" + colNum);
    mainTextDiv.innerHTML = seatVal + 1;
    if (nameList[seatVal] !== undefined) {
        subTextDiv.innerHTML = nameList[seatVal];
    } else {
        subTextDiv.innerHTML = "";
    }
}

function randomSeat() {
    var i, j;
    var seatVal = createShuffledArray(seatCount);
    var curPos = 0;

    for (i = 0; i < rowCount; i++) {
        var colCount = seatPattern[i].length;
        for (j = 0; j < colCount; j++) {
            if (seatPattern[i].substr(j, 1) === "x") {
                setSeatDetail(i, j, seatVal[curPos]);
                curPos++;
            }
        }
    }
}

function createSeatDiv(rowNum, colNum, seatType) {
    var seatDiv = document.createElement("div");

    switch (seatType) {
        case "x":
            var centererDiv = document.createElement("div");
            centererDiv.className = "center";

            var centererDiv2 = document.createElement("div");
            centererDiv2.className = "center2";

            seatDiv.className = "seat";
            seatDiv.id = "seat_" + rowNum + "_" + colNum;

            var mainTextDiv = document.createElement("div");
            mainTextDiv.className = "mainText";
            mainTextDiv.id = "maintext_" + rowNum + "_" + colNum;

            var subTextDiv = document.createElement("div");
            subTextDiv.className = "subText";
            subTextDiv.id = "subtext_" + rowNum + "_" + colNum;

            centererDiv2.appendChild(mainTextDiv);
            centererDiv2.appendChild(subTextDiv);

            centererDiv.appendChild(centererDiv2);
            seatDiv.appendChild(centererDiv);

            break;
    }

    return seatDiv;
}

function createSeatRowDiv(rowNum) {
    var colCount = seatPattern[rowNum].length;

    var rowDiv = document.createElement("div");
    rowDiv.className = "seatRow";
    rowDiv.style.height = (100 / rowCount) + "%";

    // Calculating the width
    var seatCount = 0;
    var smallSeperatorCount = 0;
    var largeSeperatorCount = 0;
    for (i = 0; i < colCount; i++) {
        var seatType = seatPattern[rowNum].substr(i, 1);
        switch (seatType) {
            case "x":
                seatCount++;
                break;
            case "-":
                smallSeperatorCount++;
                break;
            case "_":
                largeSeperatorCount++;
                break;
        }
    }
    var totalSize = seatCount + largeSeperatorCount + smallSeperatorCount * smallSeperatorSizeRatio;
    var seatSize = 100.0 / totalSize;
    var smallSeperatorSize = smallSeperatorSizeRatio * 100.0 / totalSize;

    // Creating divs
    for (i = 0; i < colCount; i++) {
        var colDiv = document.createElement("div");
        colDiv.className = "seatCol";
        var seatType = seatPattern[rowNum].substr(i, 1);
        switch (seatType) {
            case "x":
                colDiv.style.width = seatSize + "%";
                colDiv.appendChild(createSeatDiv(rowNum, i, seatType));
                break;
            case "-":
                colDiv.style.width = smallSeperatorSize + "%";
                break;
            case "_":
                colDiv.style.width = seatSize + "%";
                break;
        }

        rowDiv.appendChild(colDiv);
    }

    return rowDiv;
}

function initializeSeatTable() {
    "use strict";

    var tableDiv = document.getElementById("main-seat-grid");

    var i;
    for (i = 0; i < rowCount; i++) {
        tableDiv.appendChild(createSeatRowDiv(i));
    }
}

function processSeatPattern() {
    var i, j;
    rowCount = seatPattern.length;
    seatCount = 0;
    for (i = 0; i < rowCount; i++) {
        seatPattern[i] = seatPattern[i].toLowerCase();
        var colCount = seatPattern[i].length;
        for (j = 0; j < colCount; j++) {
            if (seatPattern[i].substr(j, 1) == "x") {
                seatCount++;
            }
        }
    }
}

var isSettingPopupShowing = false;
function toggleSettingPopup() {
    if (isSettingPopupShowing === false) {
        isSettingPopupShowing = true;
        document.getElementById("setting_popup").style.display = "block";
    } else {
        isSettingPopupShowing = false;
        document.getElementById("setting_popup").style.display = "none";
    }
}

window.onload = function() {
    processSeatPattern();
    initializeSeatTable();
    randomSeat();
    document.getElementById("random_btn").onclick = randomSeat;
    document.getElementById("setting_btn").onclick = toggleSettingPopup;
    document.getElementById("setting_close_btn").onclick = toggleSettingPopup;
};

</script>
<style>

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

body, html {
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    background-color: #F3F3F3;
    color: #444;
    height: 100%;
}
.header-row {
    background: #FFF;
    color: #666;
    height: 1em;
    padding: 1em 1.5em;
    box-shadow: 0em 0em 0.5em rgba(0, 0, 0, 0.2);
    position: fixed;
    left: 0;
    right: 0;
    z-index: 2;
}
.left {
    float: left;
}
.right {
    float: right;
}

.random-btn {
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    border: 1px solid #ef8f2f;
    background: white;
    color: #ef8f2f;
    padding: 0.2em 1em;
    margin-top: -0.4em;
    border-radius: 0.2em;
    font-size: 1.0em;
}
.random-btn:hover {
    background: #f6f6f6;
}
.random-btn:active {
    background: #ef8f2f;
    color: #FFF;
}
.random-btn:focus {
    outline: 0;
}

.setting-btn, .close-button {
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    border: 1px solid #CCC;
    background: white;
    color: #CCC;
    padding: 0.2em 1em;
    margin-top: -0.4em;
    margin-right: 0.5em;
    border-radius: 0.2em;
    font-size: 1.0em;
}
.setting-btn:hover, .close-button:hover {
    border: 1px solid #999;
    color: #999;
}
.setting-btn:active, .close-button:active {
    border: 1px solid #999;
    background: #f6f6f6;
    color: #999;
}
.setting-btn:focus, .close-button:focus {
    outline: 0;
}

.main-section {
    position: absolute;
    top: 3.5em;
    bottom: 0.5em;
    left: 0;
    right: 0;
}
.container {
    position: relative;
    height: 100%;
}
.seatRow {
    padding: 0 1.5em;
    min-height: 4.4em;
}
.seatCol {
    box-sizing: border-box;
    display: block;
    float:left;
    height: 100%;
    padding: 0.1em 0.2em;
    white-space:nowrap;
}
.seat {
    background-color: #FFF;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #EEE;
    border-radius: 0.1em;
    overflow: hidden;
}
.seat .center {
    height: 100%;
    display: inline-table;
}
.seat .center2 {
    display: table-cell;
    vertical-align: middle;
}
.seat .mainText {
    font-size: 1.8em;
    white-space: nowrap;
}
.seat .subText {
    font-size: 1.2em;
    margin-top: 0.3em;
    margin-bottom: 0.2em;
    color: #888;
    text-overflow: clip;
    white-space: nowrap;
}

.setting-popup {
    position: fixed;
    right: 7.6em;
    top: 2.8em;
    background: #FFF;
    box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.4);
    padding: 2em;
    z-index: 1;
    border-radius: 0.3em;
    width: 30em;
    line-height: 1.5em;
    max-height: 20em;
    overflow:auto;
}

.setting-popup h1 {
    font-size: 1.5em;
    margin-bottom: 1.1em;
}
.setting-popup p {
    margin-top: 0.8em;
}
em {
    font-style: italic;
}
strong {
    font-weight: bold;
}

</style>
</head>
<body>
    <div id="setting_popup" class="setting-popup" style="display: none;">
        <div>
            <div class="left">
                <h1>How to Adjust Settings</h1>
            </div>
            <div class="right">
                <button class="close-button" id="setting_close_btn">Close</button>
            </div>
        </div>
        <div style="clear: both;">
            <p>
                The settings that you are able to adjust are follow: 1) Seat Pattern 2) Names List 3) Show/Hide Names
            </p>
            <p>
                <strong>NOTE: Please be careful editing settings. Strictly follow the grammar and do a backup of this file (simply by cloning/copying the file) before editing so you'll be safe.</strong>
            </p>
            <p>
                Notice that after an array of "..." must have comma (,) afterward except the last line (see the settings for example).
            </p>
            <p>
                To adjust the settings, please open this file with the text editor program like Notepad (not the web browsers like Chrome).</p>
            <p>

            </p>
            <p>
                You can open <em>Notepad</em> by several methods: 1) Searching for the program names <em>Notepad</em> in the Start Menu. 2) Press Windows + R keys combination. The <em>Run</em> window will appear. Type <em>notepad</em>, then click OK. The Notepad will appear. 3) Right-click at a file > Open With > Notepad (if exists).
            </p>
            <p>
                If you need any assistance, feel free to contact Kasidit Iamthong. ??
            </p>
        </div>
    </div>
    <div class="container">
        <div class="header-row">
            <div class="left">Seat Randomer</div>
            <div class="right">
                <button class="setting-btn" id="setting_btn">Settings</button>
                <button class="random-btn" id="random_btn">Random</button>
            </div>
        </div>
        <div class="main-section" id="main-seat-grid">
        </div>
    </div>
</body>
</html>
var rowCount, seatCount;

function createShuffledArray(size) {
    var arr = [];
    var i, j;

    // Initialize Array
    for (i = 0; i < size; i++) {
        arr[i] = -1;
    }

    // Shuffle Operation
    for (i = 0; i < size; i++) {
        var num = Math.floor(Math.random() * (size - i));
        // Just in case, when the floating point precision goes wrong. ??
        num = Math.min(num, size - i - 1);
        var pos = -1;
        for (j = 0; j <= num; j++) {
            do {
                pos++;
            } while (arr[pos] !== -1);
        }
        arr[pos] = i;
    }

    return arr;
}

function setSeatDetail(rowNum, colNum, seatVal) {
    // var seatDiv = document.getElementById("seat_" + rowNum + "_" + colNum);
    var mainTextDiv = document.getElementById("maintext_" + rowNum + "_" + colNum);
    var subTextDiv = document.getElementById("subtext_" + rowNum + "_" + colNum);
    mainTextDiv.innerHTML = seatVal + 1;
    if (nameList[seatVal] !== undefined) {
        subTextDiv.innerHTML = nameList[seatVal];
    } else {
        subTextDiv.innerHTML = "";
    }
}

function randomSeat() {
    var i, j;
    var seatVal = createShuffledArray(seatCount);
    var curPos = 0;

    for (i = 0; i < rowCount; i++) {
        var colCount = seatPattern[i].length;
        for (j = 0; j < colCount; j++) {
            if (seatPattern[i].substr(j, 1) === "x") {
                setSeatDetail(i, j, seatVal[curPos]);
                curPos++;
            }
        }
    }
}

function createSeatDiv(rowNum, colNum, seatType) {
    var seatDiv = document.createElement("div");

    switch (seatType) {
        case "x":
            var centererDiv = document.createElement("div");
            centererDiv.className = "center";

            var centererDiv2 = document.createElement("div");
            centererDiv2.className = "center2";

            seatDiv.className = "seat";
            seatDiv.id = "seat_" + rowNum + "_" + colNum;

            var mainTextDiv = document.createElement("div");
            mainTextDiv.className = "mainText";
            mainTextDiv.id = "maintext_" + rowNum + "_" + colNum;

            var subTextDiv = document.createElement("div");
            subTextDiv.className = "subText";
            subTextDiv.id = "subtext_" + rowNum + "_" + colNum;

            centererDiv2.appendChild(mainTextDiv);
            centererDiv2.appendChild(subTextDiv);

            centererDiv.appendChild(centererDiv2);
            seatDiv.appendChild(centererDiv);

            break;
    }

    return seatDiv;
}

function createSeatRowDiv(rowNum) {
    var colCount = seatPattern[rowNum].length;

    var rowDiv = document.createElement("div");
    rowDiv.className = "seatRow";
    rowDiv.style.height = (100 / rowCount) + "%";

    // Calculating the width
    var seatCount = 0;
    var smallSeperatorCount = 0;
    var largeSeperatorCount = 0;
    for (i = 0; i < colCount; i++) {
        var seatType = seatPattern[rowNum].substr(i, 1);
        switch (seatType) {
            case "x":
                seatCount++;
                break;
            case "-":
                smallSeperatorCount++;
                break;
            case "_":
                largeSeperatorCount++;
                break;
        }
    }
    var totalSize = seatCount + largeSeperatorCount + smallSeperatorCount * smallSeperatorSizeRatio;
    var seatSize = 100.0 / totalSize;
    var smallSeperatorSize = smallSeperatorSizeRatio * 100.0 / totalSize;

    // Creating divs
    for (i = 0; i < colCount; i++) {
        var colDiv = document.createElement("div");
        colDiv.className = "seatCol";
        var seatType = seatPattern[rowNum].substr(i, 1);
        switch (seatType) {
            case "x":
                colDiv.style.width = seatSize + "%";
    }
        }

            }

</script>
</head>
</html>