$(document).ready(function() {  
    if (typeof(onMobilePage) != "undefined") {
        moveOn = true;
        iphoneIn();
    }
    
    if (typeof(onSgPage) != "undefined") {
        moveOn = false;
        sgIn();
    }
    
    if (typeof(onOoPage) != "undefined") {
        moveOn = false;
        iphoneIn();
    }
});

var moveOn;

var betweenFrames = 5000;
var fallIn = 500;
var fallOut = 500;
var shadowDelay = 300;
var shadowRise = 200;
var screensIn = 1000;
var screensOut = 500;
var screenDelay = 500;
var bodyFadeIn = 2500;
var bodyFadeOut = 700;
var bodyFadeDelay = 500;
var bgFadeIn = 1200;
var bgFadeOut = 1200;

function iphoneIn() {
    $('#iphone')
        .css("top", -500)
        .animate({top: [32,"easeInQuad"]}, fallIn);
  
    $('#iphoneShadow')
        .css("bottom", -30)
        .delay(shadowDelay)
        .animate({bottom: 14}, shadowRise);
  
    if (isBad) {
        $('#iphoneBody').css("display", "block");
    } else {
        $('#iphoneBody')
            .css("opacity", 0)
            .css("display", "block")
            .delay(bodyFadeDelay)
            .animate({opacity:1}, bodyFadeIn);
    }
  
    $('.iphoneScreen').css("display", "none");
  
    $('#orangeBg').css("display", "block");
  
    setTimeout("iphoneScreensIn()", screenDelay);
    
    /*
    if (moveOn) {
        $('#orangeBg')
            .css("opacity", 0)
            .css("display", "block")
            .animate({opacity:1}, bodyFadeIn);
    } else {
        $('#orangeBg')
            .css("display", "block");
    }

    if (moveOn) {
        setTimeout("iphoneOut()", betweenFrames);
    }
    */
}

function iphoneScreensIn() {
    $('.iphoneScreen')
        .css("display", "block")
        .css("left", 120)
        .css("top", 100);

    $('#iphoneScreen1').animate({left: 0, top: 60}, screensIn);    
    $('#iphoneScreen2').animate({left: 40, top: 100}, screensIn); 
    $('#iphoneScreen3').animate({left: 230, top: 110}, screensIn);
    $('#iphoneScreen4').animate({left: 270, top: 130}, screensIn);
}

function iphoneOut() {
    $('#iphoneScreen1').animate({left: -100, top: -220}, screensOut);    
    $('#iphoneScreen2').animate({left: -100, top: -220}, screensOut); 
    $('#iphoneScreen3').animate({left: 600, top: -220}, screensOut);
    $('#iphoneScreen4').animate({left: 600, top: -220}, screensOut);

    $('#iphone').animate({top:[500,"easeInQuad"]}, fallOut);

    $('#iphoneShadow').css("bottom", -30);

    $('#iphoneBody')
        .animate({opacity:0}, bodyFadeOut, function() {
            $(this).css("display", "none")
        });

    setTimeout("sgIn()", bodyFadeOut / 2);
}

function ipadIn() {
    $('#ipad')
        .css("top", -500)
        .animate({top:[68,"easeInQuad"]}, fallIn)

    $('#ipadShadow')
        .css("bottom", -60)
        .delay(shadowDelay)
        .animate({bottom:-3}, shadowRise);

    $('#ipadBody')
        .css("opacity", 0)
        .css("display", "block")
        .delay(bodyFadeDelay)
        .animate({opacity:1}, bodyFadeIn);

    setTimeout("ipadOut()", betweenFrames);
}

function ipadOut() {
    $('#ipad').animate({top:[600,"easeInQuad"]}, fallOut)
        
    $('#ipadShadow').css("bottom", -60);
        
    $('#ipadBody')
        .animate({opacity:0}, bodyFadeOut, function() {
            $(this).css("display", "none")
        });
      
    if (moveOn){
        setTimeout("sgIn()", bodyFadeOut / 2);
    } else {
        setTimeout("iphoneIn()", bodyFadeOut / 2);
    }
}

function sgIn() {  
    $('#sg')
        .css("top", -500)
        .animate({top: [36,"easeInQuad"]}, fallIn);

    $('#sgShadow')
        .css("bottom", -40)
        .delay(shadowDelay)
        .animate({bottom: 0}, shadowRise);

    if (isBad) {
        $('#sgBody').css("display", "block");
    } else {
        $('#sgBody')
            .css("opacity", 0)
            .css("display", "block")
            .delay(bodyFadeDelay)
            .animate({opacity:1}, bodyFadeIn);
    }

    $('.sgScreen').css("display", "none");

    if (moveOn) {
        $('#purpleBg')
            .css("opacity", 0)
            .css("display", "block")
            .animate({opacity:1}, bodyFadeIn);
    } else {
        $('#purpleBg')
            .css("display", "block");
    }

    setTimeout("sgScreensIn()", screenDelay);

    if (moveOn) {
        setTimeout("sgOut()", betweenFrames);
    }
}

function sgScreensIn() {
    $('.sgScreen')
        .css("display", "block")
        .css("right", 100)
        .css("top", 150);

    $('#sgScreen1').animate({right: 380, top: 60}, screensIn);    
    $('#sgScreen2').animate({right: 220, top: 42}, screensIn); 
    $('#sgScreen3').animate({right: 50, top: 190}, screensIn);
    $('#sgScreen4').animate({right: 10, top: 209}, screensIn);
}

function sgOut() {
    $('#sgScreen1').animate({right: 600, top: -220}, screensOut);    
    $('#sgScreen2').animate({right: 600, top: -220}, screensOut); 
    $('#sgScreen3').animate({right: -200, top: 520}, screensOut);
    $('#sgScreen4').animate({right: -200, top: 520}, screensOut);

    $('#sg').animate({top:[500,"easeInQuad"]}, fallOut);

    $('#sgShadow').css("bottom", -40);

    $('#purpleBg')
        .animate({opacity:0}, bodyFadeOut, function() {
            $(this).css("display", "none")
        });  

    setTimeout("iphoneIn()", bodyFadeOut / 2);
}