Event.observe(window, 'load', function () {
        shotThruTheHeart()
});



function shotThruTheHeart() {
    var flipper = $$('a.screen');
    var showing = $$('img.screenshot');
    var goForward = $$('a.next');
    var goBack = $$('a.back');
    
    goForward[0].onclick = function () {
        if(flipper[0].hasClassName('selected')) {
            flipper[0].removeClassName('selected');
            flipper[1].addClassName('selected');
            for (var i=0; i<showing.length; i++) {
                showing[i].removeClassName('selected');
            }
            showing[1].addClassName('selected');
        }
        else if(flipper[1].hasClassName('selected')) {
            flipper[1].removeClassName('selected');
            flipper[2].addClassName('selected');
            for (var i=0; i<showing.length; i++) {
                showing[i].removeClassName('selected');
            }
            showing[2].addClassName('selected');
        }
        else if(flipper[2].hasClassName('selected')) {
            flipper[2].removeClassName('selected');
            flipper[3].addClassName('selected');
            for (var i=0; i<showing.length; i++) {
                showing[i].removeClassName('selected');
            }
            showing[3].addClassName('selected');
        }
        else if(flipper[3].hasClassName('selected')) {
            flipper[3].removeClassName('selected');
            flipper[4].addClassName('selected');
            for (var i=0; i<showing.length; i++) {
                showing[i].removeClassName('selected');
            }
            showing[4].addClassName('selected');
        }
        else if(flipper[4].hasClassName('selected')) {
            flipper[4].removeClassName('selected');
            flipper[0].addClassName('selected');
            for (var i=0; i<showing.length; i++) {
                showing[i].removeClassName('selected');
            }
            showing[0].addClassName('selected');
        }
    }
    
    goBack[0].onclick = function () {
        if(flipper[0].hasClassName('selected')) {
            flipper[0].removeClassName('selected');
            flipper[4].addClassName('selected');
            for (var i=0; i<showing.length; i++) {
                showing[i].removeClassName('selected');
            }
            showing[4].addClassName('selected');
        }
        else if(flipper[4].hasClassName('selected')) {
            flipper[4].removeClassName('selected');
            flipper[3].addClassName('selected');
            for (var i=0; i<showing.length; i++) {
                showing[i].removeClassName('selected');
            }
            showing[3].addClassName('selected');
        }
        else if(flipper[3].hasClassName('selected')) {
            flipper[3].removeClassName('selected');
            flipper[2].addClassName('selected');
            for (var i=0; i<showing.length; i++) {
                showing[i].removeClassName('selected');
            }
            showing[2].addClassName('selected');
        }
        else if(flipper[2].hasClassName('selected')) {
            flipper[2].removeClassName('selected');
            flipper[1].addClassName('selected');
            for (var i=0; i<showing.length; i++) {
                showing[i].removeClassName('selected');
            }
            showing[1].addClassName('selected');
        }
        else if(flipper[1].hasClassName('selected')) {
            flipper[1].removeClassName('selected');
            flipper[0].addClassName('selected');
            for (var i=0; i<showing.length; i++) {
                showing[i].removeClassName('selected');
            }
            showing[0].addClassName('selected');
        }
    }
    
    for (var i=0; i<flipper.length; i++) {

        flipper[0].onclick = function () {
            
            for (var i=0; i<flipper.length; i++) {
                flipper[i].removeClassName('selected');
            }
            this.addClassName('selected');
            
            for (var i=0; i<showing.length; i++) {
                showing[i].removeClassName('selected');
            }
            showing[0].addClassName('selected');
        }
        
        flipper[1].onclick = function () {
            
            for (var i=0; i<flipper.length; i++) {
                flipper[i].removeClassName('selected');
            }
            this.addClassName('selected');
            
            for (var i=0; i<showing.length; i++) {
                showing[i].removeClassName('selected');
            }
            showing[1].addClassName('selected');
        }
        
        flipper[2].onclick = function () {
            
            for (var i=0; i<flipper.length; i++) {
                flipper[i].removeClassName('selected');
            }
            this.addClassName('selected');
            
            for (var i=0; i<showing.length; i++) {
                showing[i].removeClassName('selected');
            }
            showing[2].addClassName('selected');
        }
        
        flipper[3].onclick = function () {
            
            for (var i=0; i<flipper.length; i++) {
                flipper[i].removeClassName('selected');
            }
            this.addClassName('selected');
            
            for (var i=0; i<showing.length; i++) {
                showing[i].removeClassName('selected');
            }
            showing[3].addClassName('selected');
        }
        
        flipper[4].onclick = function () {
            
            for (var i=0; i<flipper.length; i++) {
                flipper[i].removeClassName('selected');
            }
            this.addClassName('selected');
            
            for (var i=0; i<showing.length; i++) {
                showing[i].removeClassName('selected');
            }
            showing[4].addClassName('selected');
        }
        
    }
}