var interval;
var imageArray = ["img_01.jpg",
                    "img_02.jpg",
                    "img03.png",
                    "img04.png",
                    "apple1.gif",
                    "ume.gif",
                    "candybars.tiff",
                    "apple2.tiff"];
var imageCount ;
var current ;
var next;

var elm0;
var elm1;

function init() {
    interval = 5;
    imgCount = imageArray.length;
    current = 0;
    next = 1;
    elm0  = document.getElementById("front");
    elm1  = document.getElementById("back");

    elm0.src = "./images/" + imageArray[current];
    elm0.className = "stay";
    elm1.src = "./images/" + imageArray[next];
    elm1.className = "stay";

    wait();
}

function wait() {
    setTimeout(flip, interval * 1000);
}

function flip() {
    elm0.className = "flip";
    elm1.className = "flip";
    elm1.addEventListener(
        'webkitTransitionEnd',
        flip_end,
        false
    );
}
function flip_end() {
    elm1.removeEventListener(
        'webkitTransitionEnd',
        flip_end,
        false
    );
    current = next;
    elm0.src = "./images/" + imageArray[current];
    elm0.className = "stay";
    next=(current + 1) % imgCount;
    elm1.src = "./images/" + imageArray[next];
    elm1.className = "stay";
    wait();
}