var ofx1 = null;
var ofx2 = null;
var ofx3 = null;

/*  Entry Point  */
window.addEvent('domready', function()
{
    //  Perc startup animation
    //  Scenario:
    /*
        Animate Logo -> Display Background -> Display Boxes
    */
    startAnimation();
});

function startAnimation()
{

    startBgLogo();
}  //  startAnimation

function startBgLogo()
{
    if(!$('bg-1')){ return; }
    new Fx.Style('bg-1', 'opacity', {duration: 1100, transition: Fx.Transitions.linear}).start(0,1);
    
    if(!$('logotype')){ return; }
    new Fx.Style('logotype', 'opacity', {duration: 1100, transition: Fx.Transitions.linear}).start(0,1).addEvent('onComplete', function(){
        startFlyer();
    });
}

function startFlyer()
{
	var stPosX = 435;
	var stPosY = 203;

    fx1 = new Fx.Styles('fl-1', {duration: 2200, wait: false, transition: Fx.Transitions.Back.easeOut});
    fx1.start({'top': [stPosY] , 'left': [stPosX]}).addEvent('onComplete', function(){
        $('fl-1').removeEvents();

        fx1 = new Fx.Styles('fl-1', {duration: 500, wait: false, transition: Fx.Transitions.Back.easeInOut});
        fx1.start({'left': [stPosX - 170]}).addEvent('onComplete', function(){
            $('fl-1').removeEvents();
            $('fl-1').addEvent('click', function() {
                eventClick('mission.html');
            });
        });
    });

    fx2 = new Fx.Styles('fl-2', {duration: 2200, wait: false, transition: Fx.Transitions.Back.easeOut});
    fx2.start({'top': [stPosY] , 'left': [stPosX]}).addEvent('onComplete', function(){
        $('fl-2').removeEvents();
        $('fl-2').addEvent('click', function() {
            eventClick('technology-pains.html');
        });
    });

    fx3 = new Fx.Styles('fl-3', {duration: 2200, wait: false, transition: Fx.Transitions.Back.easeOut});
    fx3.start({'top': [stPosY] , 'left': [stPosX]}).addEvent('onComplete', function(){
        $('fl-3').removeEvents();

        fx3 = new Fx.Styles('fl-3', {duration: 500, wait: false, transition: Fx.Transitions.Back.easeInOut});
        fx3.start({'left': [stPosX + 170]}).addEvent('onComplete', function(){
            $('fl-3').removeEvents();
            $('fl-3').addEvent('click', function() {
                eventClick('introduction.html');
            });
        });
    });
}

function eventClick(location)
{
    var stPosY = 377;
    var stPosX1 = 260;
    var stPosX2 = 427;
    var stPosX3 = 594;

    var stPosYL = 405;
    var stPosXL = 16;

    var flx1 = new Fx.Styles($('bg-1'), {duration: 800, wait: false, transition: Fx.Transitions.linear}).start({'opacity': 0});
    var flx1 = new Fx.Styles($('fl-1'), {duration: 800, wait: false, transition: Fx.Transitions.Back.easeOut}).start({'top': [stPosY] , 'left': [stPosX1]});
    var flx2 = new Fx.Styles($('fl-2'), {duration: 1000, wait: false, transition: Fx.Transitions.Back.easeOut}).start({'top': [stPosY] , 'left': [stPosX2]});
    var flx3 = new Fx.Styles($('fl-3'), {duration: 1200, wait: false, transition: Fx.Transitions.Back.easeOut}).start({'top': [stPosY] , 'left': [stPosX3]});
    var fx_logo = new Fx.Styles($('logotype'), {duration: 2000, wait: false, transition: Fx.Transitions.Back.easeOut}).start({'top': [stPosYL] , 'left': [stPosXL]}).addEvent('onComplete', function(){
          window.location = location;
    });
}