%h1#player Player One

#cube
    .inner
        %section.top
            -(0..8).each do |i|
                %div{"class" => "box-#{i}"}
                    -(0..5).each do |j|
                        %div.checkbox
                            %input{"id" => "top-#{i}-#{j}", "type" => "checkbox"}
                            %label{"for" => "top-#{i}-#{j}"}
    
        %section.middle
            -(0..8).each do |i|
                %div{"class" => "box-#{i}"}
                    -(0..5).each do |j|
                        %div.checkbox
                            %input{"id" => "middle-#{i}-#{j}", "type" => "checkbox"}
                            %label{"for" => "middle-#{i}-#{j}"}
        %section.bottom
            -(0..8).each do |i|
                %div{"class" => "box-#{i}"}
                    -(0..5).each do |j|
                        %div.checkbox
                            %input{"id" => "bottom-#{i}-#{j}", "type" => "checkbox"}
                            %label{"for" => "bottom-#{i}-#{j}"}

#controls
    .t.material-icons 
    .r.material-icons 
    .b.material-icons 
    .l.material-icons   

body { 
    position: absolute;
    width: 100%;
    height: 100%; 
    margin: 0;
    
    transition: background .1s ease-in-out;
    
    &.p1 { background: #9db6c2; }
    &.p0 { background: #9fbfa0; }
}

h1 {
    display: block;
    position: absolute;
    top: 15%;
    width: 100%;
    font: 2em/1em 'Press Start 2P', sans-serif;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
    text-align: center;
}

#cube {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 6em;
    height: 6em;
    font-size: 3em;
    perspective: 1000px;
    
    .inner {
        width: 6em;
        height: 6em;
        transform-style: preserve-3d;

        /*
        &:before {
            content: 'y';
            display: block;
            position: absolute;
            bottom: 50%;
            left: 50%;
            width: 1px;
            height: 20em;
            font: .25em/.25em sans-serif;
            color: rgba(0, 255, 0, 1);
            text-indent: 5px;
            background: rgba(0, 255, 0, 1);
            transform-origin: bottom center;
        }

        &:after {
            content: 'x';
            display: block;
            position: absolute;
            bottom: 50%;
            right: 50%;
            width: 20em;
            height: 1px;
            font: .25em/.25em sans-serif;
            color: rgba(255, 0, 0, 1);
            text-indent: -10px;
            background: rgba(255, 0, 0, 1);
            transform-origin: bottom center;
        }
        */
    }
}

section {
    position: absolute;
    width: 6em;
    height: 6em;
    transform-style: preserve-3d;
    
    &.top { transform: translateZ(2em); }
    &.bottom { transform: translateZ(-2em); }
}

[class|='box'] {
    position: relative;
    float: left;
    width: 1em;
    height: 1em;
    padding: .5em;
    transform-style: preserve-3d;
    
    .checkbox {
        position: absolute;
        width: 1em;
        height: 1em;
        
        &:nth-child(1) { transform: translateZ(.5em); }
        &:nth-child(2) { transform: translateZ(-.5em); }
        &:nth-child(3) { transform: translateX(.5em) rotateY(90deg); }
        &:nth-child(4) { transform: translateX(-.5em) rotateY(-90deg); }
        &:nth-child(5) { transform: translateY(.5em) rotateX(90deg); }
        &:nth-child(6) { transform: translateY(-.5em) rotateX(-90deg); }
        
        label {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 1px dashed rgba(0, 0, 0, 0.25);
            background: rgba(255, 255, 255, .02);
            
            transition: background .33s ease;
            
            &:hover {
                background: rgba(255,255,255,.5);
                
                transition: background .15s ease;
            }
        }
        
        input { 
            visibility: hidden; 
            
            &.p0:checked + label { background: #03A9F4; }
            &.p1:checked + label { background: #4CAF50; }
        }
    }
}
    
.t, .b, .r, .l {
    position: absolute;
    color: white;
    text-align: center;
    background: #000;
    cursor: pointer;
}
    
.t, .b {
    left: 50%;
    width: 60px;
    height: 30px;
    line-height: 30px;
    transform: translateX(-50%);
}

.t { top: 0; }
.b { bottom: 0; }

.l, .r {
    top: 50%;
    width: 30px;
    height: 60px;
    line-height: 60px;
    transform: translateY(-50%);
}

.l { left: 0; }
.r { right: 0; }

@mixin helper($letter) {
    &:before {
        content: $letter;
        display: block;
        width: 2em;
        color: rgba(0,0,0,.25);
        font-size: .5em;
        line-height: 2em; 
        font-family: sans-serif;
        text-align: center;
    }
}

/* Helper classes
[for="middle-1-5"] { @include helper('T'); }
[for="middle-7-4"] { @include helper('B'); }
[for="top-4-0"] { @include helper('F'); }
[for="middle-5-2"] { @include helper('L'); }
[for="middle-3-3"] { @include helper('R'); }
[for="bottom-4-1"] { @include helper('B'); }
*/

TicTacToe = (function() {
    
    var cube,
        controls,
        turn,
        player = 1,
        xAngle = 0,
        yAngle = 0,
        zAngle = 0;
    
    function changeIt(e) {
        
        e.preventDefault();
        
        if (/p1|p2/.test(e.target.previousElementSibling.className)) {
            return false;
        }
         
        var target = e.target,
            p = player ? 0 : 1,
            whose;
        
        if (p) {
            whose = 'Player One';
        } else {
            whose = 'Player Two';
        }
        
        turn.innerHTML = whose;
        
        if (target.nodeName === 'LABEL') {
            
            target.previousElementSibling.checked = true;
            
            if (p) {
                target.previousElementSibling.className += 'p1';                
            } else { 
                target.previousElementSibling.className += 'p0';
            }
        }
        
        document.body.removeAttribute('class');
        
        document.body.className = "p" + (parseInt(p));
        
        player = p;
        
        checkIt();
    }
    
    function checkIt() {
        var inputs = [];
            
        inputs = Array.prototype.slice.call(cube.querySelectorAll('input'));
        
        for (i in inputs) {
            console.log(inputs[i].checked);
        }
    }
    
    function rotateIt(e) {
        var target = e.target,
            targetClass = target.className.split(' ')[0],
            angle = 90; 
        
        if (targetClass === 't') {
            xAngle += angle;
        } else if (targetClass === 'b') { 
            xAngle -= angle;
        } else if (targetClass === 'r') {
            yAngle += angle;
        } else if (targetClass === 'l') {
            yAngle -= angle;
        }
        
        TweenLite.to(cube, 1, {rotationX: xAngle, rotationY: yAngle, rotationZ: zAngle, ease: Power2.easeInOut});
        
    }
    
    function init() {
        cube = document.getElementById('cube').querySelector('.inner');
        controls = document.getElementById('controls');
        turn = document.getElementById('player');

        document.body.className = 'p1'; 
        
        cube.addEventListener('click', changeIt);
        controls.addEventListener('click', rotateIt);
    }
    
    document.addEventListener("DOMContentLoaded", init);
    
})();