/* Javascript for the teaser game */

// images
var BACKSIDE = "back.png";
var FRONTOK  = "winner.png";
var FRONTBAD = "bad.png";

var teabox;

function startGame() {
    teabox = document.getElementById("teaser");
    cleanupGame();

    teabox.style.display = 'block';

    setTimeout(function() {
        animText("Find<br/>winner<br/>cards!");
        setTimeout(function() {
            addImages();
        }, 1500);
    }, 10);

    // close handler
    var close = document.getElementById("closegame");
    close.addEventListener('click', function(e) {
        cleanupGame();
        e.preventDefault();
    }, false);
}

// status
var is1winner = false;
var picked1 = undefined;

function addImages() {
    // pick two winning cards
    var i1 = parseInt(Math.random()*9);
    var i2 = i1;
    while (i1 == i2)
        i2 = parseInt(Math.random()*9);

    // add images and associate event handlers
    for(var i = 0; i< 9; i++) {
        // create img
        var img = document.createElement('img');
        img.setAttribute("src", BACKSIDE);
        teabox.appendChild(img);

        // set front card
        if (i == i1 || i == i2) {
            addClass(img, "winner");
            img.setAttribute("src2", FRONTOK);
        } else {
            img.setAttribute("src2", FRONTBAD);
        }

        // transition end handler
        img.addEventListener("webkitTransitionEnd", function(e) {
            var t = e.target;
            if (hasClass(t, "turn2")) {
                // check for winner
                if (picked1 != undefined) {
                    var is2winner = hasClass(t, "winner");
                    if (is1winner && is2winner)
                        endGame();
                    else {
                        animText("Pick<br/>again");
                        turnback(t);
                        turnback(picked1);
                    }
                    picked1 = undefined;
                } else {
                    picked1 = t;
                    is1winner = hasClass(t, "winner");
                }
            } else if (hasClass(t, "back")) {
                removeClass(t, "back");
                addClass(t, "wiggle");
            } else if (hasClass(t, "out")) {
                t.setAttribute("src", BACKSIDE);
                removeClass(t, "out");
                removeClass(t, "turn1");
                addClass(t, "back");
            }
            else if (hasClass(t, "turn1")) {
                t.setAttribute("src", t.getAttribute("src2"));
                removeClass(t, "turn1");
                addClass(t, "turn2");
            }
        }, false);

        // click handler
        img.addEventListener('click', function(e) {
            var t = e.target;
            if (!hasClass(t, "turn2")) {
                removeClass(t, "wiggle");
                setTimeout(function() {
                    addClass(t, "turn1");
                }, 10);
            }
            e.preventDefault();
        }, false);
    }

    // start soon
    setTimeout(function() {
        placeImg();
    }, 500);

    // hide text at the end of anim
    var text = document.getElementById("teasertext");
    text.addEventListener('webkitAnimationEnd', function(event) {
        text.style.display = "none";
    }, false);
}

// turn a card back
function turnback(t) {
    removeClass(t, "turn2");
    setTimeout(function() {
        addClass(t, "turn1");
        addClass(t, "out");
    }, 10);
}

// animate text
function animText(s) {
    var text = document.getElementById("teasertext");
    text.innerHTML = s;
    addClass(text, "fly");
    text.style.display = "block";
}

var tea_index = 0;
function placeImg() {
    var ilist = teabox.getElementsByTagName("img");
    var img = ilist[tea_index];
    img.style.left = (tea_index%3)*30 + 10 + "%";
    img.style.top = parseInt(tea_index/3)*30 + 10 + "%";
    img.style.webkitTransform = "scale(1.2) rotate(30deg)";

    addClass(img, "wiggle");

    // do next image
    tea_index++;
    if (tea_index < ilist.length)
        setTimeout(function() { placeImg(); }, 100);
}

function endGame() {
    animText("You<br/>won!");
    setTimeout(function() { cleanupGame(); }, 2000);
}
function cleanupGame() {
    // remove all images
    while (teabox.lastChild.nodeName == "IMG")
        teabox.removeChild(teabox.lastChild);

    teabox.style.display = 'none';
    tea_index = 0;
    picked1 = undefined;
}