function $(idOrElt) { 
    return (idOrElt instanceof Object) ? 
        idOrElt : document.getElementById (idOrElt);
}

function setOpacity (elt, val) {
    // XXX: IE, CSS3, etc.
    $(elt).style.MozOpacity = val;
}

function show (elt) {
    $(elt).style.display = 'block';  // default
}

function hide (elt) {
    $(elt).style.display = 'none';
}

// These state names match up with images and divs on the main page.
var START = 0, INTRO = 1, DESCR = 2, APPLY = 3, EVAL = 4, END = 5;

var WIDTH = 400, HEIGHT = 300;
var images = { };
images[START] = new Image (); images[START].src = 'images/ea1.png';
images[INTRO] = new Image (); images[INTRO].src = 'images/ea1.png';
images[DESCR] = new Image (); images[DESCR].src = 'images/ea2.png';
images[APPLY] = new Image (); images[APPLY].src = 'images/ea3.png';
images[EVAL]  = new Image (); images[EVAL].src  = 'images/ea4.png';

var state = START;

function nextImage () {
    state = (state + 1) % END;
    $('hands_img').src = images[state].src;

    switch (state) {
    case START:
        setOpacity ('content', 1.0);  hide ('eval');
        break;

    case INTRO:
        setOpacity ('content', .1);   show ('story_intro');
        break;

    case DESCR:
        hide ('story_intro');         show ('eval_apply');
        break;

    case APPLY:
        hide ('eval_apply');          show ('apply');
        break;

    case EVAL:
        hide ('apply');               show ('eval');
        break;
    }
}