var skFx, roFx, sFx, s1Fx, s2Fx, s3Fx, tFx;
window.addEvent('domready', function()
{
    $('aniplaceholder').grab( new Element('img', {
                                    'id' : 'anibg',
                                    'alt' : 'i-box background',
                                    'src' : '/images/ani/background.png'}) );
    $('aniplaceholder').grab( new Element('div', {'id' : 'iboxholder'}) );
    $('iboxholder').grab( new Element('img', {
                                    'id' : 'ibox',
                                    'alt' : 'i-box V2',
                                    'src' : '/images/ani/ibox_base.png'}) );
    $('iboxholder').grab( new Element('div', {'id' : 'iboxlcd'}) );
    $('iboxlcd').grab( new Element('img', {
                                    'id' : 'ibox_menu',
                                    'alt' : 'i-box Menu',
                                    'src' : '/images/ani/ibox_menu.png'}
                                ) );
    $('iboxlcd').grab( new Element('img', {
                                    'id' : 'ibox_seek',
                                    'alt' : 'i-box photo',
                                    'src' : '/images/ani/ibox_seek.png'}
                                ).setStyle( 'opacity', 0 ) );
    $('iboxlcd').grab( new Element('img', {
                                    'id' : 'ibox_regok',
                                    'alt' : 'i-box regok',
                                    'src' : '/images/ani/ibox_regok.png'}
                                ).setStyle( 'opacity', 0 ) );
    $('iboxlcd').grab( new Element('div', {'id' : 'ibox_shut' }).setStyle( 'opacity', 0 ) );
    $('aniplaceholder').grab( new Element('div', {'id' : 'screens' }).setStyle( 'opacity', 0 ) );
    $('screens').grab( new Element('img', {
                                    'id' : 'screen1',
                                    'alt' : 'Website preventiecheck',
                                    'src' : '/images/ani/screen_prevcheck.png'}
                                ) );
    $('screens').grab( new Element('img', {
                                    'id' : 'screen2',
                                    'alt' : 'Website logboek',
                                    'src' : '/images/ani/screen_logboek.png'}
                                ).setStyle( 'opacity', 0 ) );
    $('screens').grab( new Element('img', {
                                    'id' : 'screen3',
                                    'alt' : 'Website fotoboek',
                                    'src' : '/images/ani/screen_fotoboek.png'}
                                ).setStyle( 'opacity', 0 ) );
    $('aniplaceholder').grab( new Element('div', { 'id' : 'tagline' }) );

    skFx = new Fx.Morph('ibox_seek', { duration: 'normal', link: 'chain' });
    roFx = new Fx.Morph('ibox_regok', { duration: 'short', link: 'chain' });
    sFx  = new Fx.Morph('screens', { duration: 'long', link: 'chain' });
    s1Fx = new Fx.Morph('screen1', { duration: 'long', link: 'chain' });
    s2Fx = new Fx.Morph('screen2', { duration: 'long', link: 'chain' });
    s3Fx = new Fx.Morph('screen3', { duration: 'long', link: 'chain' });
    tFx  = new Fx.Morph('tagline', { duration: 'long', link: 'chain' });

    loop.periodical(25000);
    loop();
});
function loop()
{
    var t0  = 1000;

    var Animate = new Class({
        Implements: [Chain],
        initialize: function() {
            this.chain.apply(this, arguments);
        }
    });

    var seq = new Array([
        function() {
            //Step 1: open photo
            skFx.start({ 'opacity': 1 });
        }.delay(t0),
        function() {
            //Step 2A: move photo
            skFx.start({
                'left': [0, -21],
                'top': [0, -17]
           });
            //Step 2B: move photo
            skFx.start({
                'left': -32,
                'top': -12
           });
            //Step 2C: move photo
            skFx.start({
                'left': -17,
                'top': -12
           });
            //Step 2D: move photo
            skFx.start({
                'left': -21,
                'top': -17,
                'width': 100,
                'height': 133
           });
            //Step 2E: move photo
            skFx.start({
                'left': 0,
                'top': 0,
                'width': 82,
                'height': 109
           });
        }.delay(t0+500),
        function() {
            //Step 3A: 'shutter'
            $('ibox_shut').setStyle('opacity', 1);
        }.delay(t0+3850),
        function() {
            //Step 3B: 'shutter'
            $('ibox_shut').setStyle('opacity', 0);
        }.delay(t0+3900),
        function() {
            //Step 3C: 'shutter'
            $('ibox_shut').setStyle('opacity', 1);
        }.delay(t0+3950),
        function() {
            //Step 3D: 'shutter'
            $('ibox_shut').setStyle('opacity', 0);
        }.delay(t0+4000),
        function() {
            //Step 4: registration ok
            roFx.start({ 'opacity': 1 });
        }.delay(t0+5000),
        function() {
            //Step 5: show website
            sFx.start({
                'top': 90,
                'left': 180,
                'width': 400,
                'height': 150,
                'opacity': 1
            });
        }.delay(t0+6000),
        function() {
            //Step 6: show website #2
            s2Fx.start({ 'opacity': 1 });
        }.delay(t0+9000),
        function() {
            //Step 7: show website #3
            s3Fx.start({ 'opacity': 1 });
        }.delay(t0+12000),
        function() {
            //Step 8: show tagline
            tFx.start({
                'width': [0, 200]
            });
        }.delay(t0+13000),
        function() {
            //Step 9: fade screens
            $('ibox_seek').setStyle( 'opacity', 0 );
            $('tagline').setStyle( 'width', 0 );
            sFx.start({
                'top': 50,
                'left': 600,
                'width': 10,
                'height': 180
            });
            skFx.start({
                'width': 123,
                'height': 143
            });
            s2Fx.start({ 'opacity': 0 });
            s3Fx.start({ 'opacity': 0 });
            roFx.start({ 'opacity': 0 });
        }.delay(t0+19000)
    ]);

    new Animate ( seq );
}