FlashCard

by Kaleb Hornsby

HTML

<script src="http://lab.smashup.it/lab/flip/js/jquery.flip.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<div id="deck">
<div id="cards">
    <div>
        <div>uno</div>
        <div>one</div>
    </div>
    <div>
        <div>dos</div>
        <div>two</div>
    </div>
    <div>
        <div>tres</div>
        <div>three</div>
    </div>
</div>
</div>
<div id="controls">
    <button id="prev">Prev</button>
    <button id="flip">Flip</button>
    <button id="next">Next</button>
</div>

CSS

/*#cards { display: none; }*/
#cards > div {
    height: 200px;
    width:200px;
    text-align: center;
    border: 1px solid black;
    background: white;
}
#cards > div > div {
    background: white;
    display: none;
}
#cards > div > div:first-child {
    display: block;
}
#controls {
    width: 200px;
    text-align: center;
}

JavaScript

var $card, $face;
$(document).ready(function() {
    $card = $('#cards').children().first();
    $face = $card.children().first();
    $('#cards').cycle({
        fx: 'shuffle',
        next: '#next',
        prev: '#prev',
        timeout: 0,
        before: function(current, next, options, isNext){
            if(isNext) $card = $(next);
            else $card = $(current).prev();
            $face = $card.children().first();
        }
    });
    $('#cards > div > div').click(function(){console.log(this)});
    $('#flip').click(function() {
        $card.flip({
            content: $face = $face.next().length === 0 ? $card.children().first() : $face.next()
        });
        console.log($face.length);
    });
/*
    $('#next').click(function() {
        console.log($card.next().length);
        $('#card').flip({
            direction: 'lr',
            content: $face = (
                $card = $card.next().length === 0?
                $('#cards').children().first(): $card.next()
            ).children().first()
        });
    });
    $('#prev').click(function() {
        $('#card').flip({
            direction: 'rl',
            content: $face = (
                $card = $card.prev().length === 0?
                $('#cards').children().last(): $card.prev()
            ).children().first()
        });
    });
    */
});