Stack Simulator 2014

HTML

<body>
    <div class="header">
         <h1>Stack Simulator 2014</h1>

    </div>
    <div class="content">
        <div class="sectionhead">
            <div class="btn" id="back" onclick="menu(0);">Back</div>
             <h2 id="title">Menu</h2>

        </div>
        <div class="column left">
            <div class="panel" id="menu">
                <div class="btn" onclick="menu(1);">Stack</div>
                <div class="btn" onclick="menu(2);">Infix</div>
            </div>
            <div class="panel" id="normal">
                <div class="btn" onclick="stackPush();">Push</div>
                <input class="textput" type="text" id="pushval normal"></input>
                <div class="btn" onclick="stackPop();">Pop</div>
                <div class="btn" onclick="stackTop();">Top</div>
                <div class="btn" onclick="stackClear();">Clear</div>
            </div>
            <div class="panel" id="infix">
                <div class="btn" onclick="stackPush();">Push</div>
                <input class="textput" type="text" id="pushval infix"></input>
                <div class="btn" onclick="stackPop();">Pop</div>
                <div class="btn" onclick="stackTop();">Top</div>
                <div class="btn" onclick="stackClear();">Clear</div>
            </div>
        </div>
        <div class="column middle" id="stackwrap">
            <a1>Stack</a1>
            <div id="stack"></div>
        </div>
        <div class="column right" id="logwrap">
            <div id="log"></div>
        </div>
    </div>
    <div class="footer">
        <p>Created by TCGM | v1b02</p>
    </div>
</body>

CSS

body {
    background:#fff;
    width:460px;
}
.header {
    background:#000;
    height:50px;
    width:100%;
    margin-bottom:5px;
    border-radius:20px 20px 0px 0px;
    border-bottom:3px solid #3fff00;
    box-shadow:3px 3px 3px 3px #000;
}
h1 {
    color:#3fff00;
    text-align:center;
}
h2 {
    color:#3fff00;
    text-align:center;
}
.sectionhead {
    border-bottom:1px solid #3fff00;
    margin-bottom:10px;
}
.sectionhead h2 {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.btn#back {
    width: 100px;
    float: left;
    position: absolute;
    margin-top: 90px;
    margin-left: 20px;
    visibility:hidden;
    opacity:0;
}
.footer {
    background:#000;
    height:20px;
    width:100%;
    margin-top:5px;
    border-radius:0px 0px 20px 20px;
    border-top:3px solid #3fff00;
    box-shadow:3px 3px 3px 3px #000;
}
.footer p {
    color:#3fff00;
    text-align:center;
    font-size:12px;
    margin-top:0px;
}
.content {
    background:#000;
    min-width:200px;
    height:550px;
    border-radius:5px;
    z-index:-100;
    box-shadow:3px 3px 3px 3px #000;
    overflow:hidden;
}
#normal {
    left:460px;
    top:-100%;
}
#infix {
    left:960px;
    top:-200%;
}
#menu {
    visibility:visible;
    opacity:1;
}
.panel {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    position:relative;
    display:block;
    width:100%;
    height:100%;
    float:left;
}
.btn {
    border-radius:5px;
    border:1px solid #3fff00;
    margin:5px;
    margin-top:10px;
    padding:10px;
    display:block;
    color: #3fff00;
    text-align:center;
}
.btn:hover {
    top:-3px;
    left:-3px;
}
.btn:active {
    top:0px;
    left:0px;
    color:#000;
    background:#3fff00;
    transition:none;
}
.textput {
    width:85px;
   ...

JavaScript

var size = 10;
var stackArray = [];
var logArray = ["Logging System Online."];
var _top = -1;
var menuArray;
var currentMenu;
var backBtn;
var title;
var mainStack;
var logElem;
var mainStackWrapper;
var logWrapper;

function menu(section) {

    currentMenu = section;
    var xpos = 0;
    var ypos = 0;

    for (var i = 0; i < menuArray.length; i++) {
        xpos = (((i - currentMenu) * 100)) + "px";
        ypos = (-100 * i) + "%";
        menuArray[i][0].style.opacity = 0;
        menuArray[i][0].style.visibility = "hidden";
        menuArray[i][0].style.left = xpos;
        menuArray[i][0].style.top = ypos;
    }
    menuArray[currentMenu][0].style.opacity = 1;
    //menuArray[currentMenu].style.display = "block";
    menuArray[currentMenu][0].style.visibility = "visible";
    title.innerHTML = menuArray[currentMenu][1];

    if (currentMenu == 0) {
        backBtn.style.opacity = 0;
        backBtn.style.visibility = "hidden";
        mainStackWrapper.style.opacity = 0;
        mainStackWrapper.style.visibility = "hidden";
        logWrapper.style.opacity = 0;
        logWrapper.style.visibility = "hidden";
    } else {
        backBtn.style.opacity = 1;
        backBtn.style.visibility = "visible";
        mainStackWrapper.style.opacity = 1;
        mainStackWrapper.style.visibility = "visible";
        logWrapper.style.opacity = 1;
        logWrapper.style.visibility = "visible";
    }

}

function menuDelay() {
    setTimeout(menuDelay, 1000);

    for (var i = 0; i < menuArray.length; i++) {
        if (i != currentMenu) {
            menuArray[i].style.display = "none";
            menuArray[i].style.opacity = 0;
            menuArray[i].style.visibility = "hidden";
        }
    }
}

function isEmpty() {
    return _top == -1;
}

function isFull() {
    return _top == size - 1;
}

function stackPush() {
    var text = "";
    var input = document.getElementById("pushval");
    text = input.value;
    if (text !== "") {
        if (isFull() === false)...