jQuery(window).load(function() {
      
    var TIME_FROM_PAGE_LOAD_PLAY = 3000;
    var TIME_ANIMATE_OUT         =  800;
    var TIME_ANIMATE_IN          =  800;
    var MOBILE_ANIMATE_OUT       = 1000;
    var MOBILE_ANIMATE_IN        = 1000;
    var PAGE_LOAD_TIME           = 1500;
    var IMAGE_SIZE               =  620;
    var LOGO_FADE_IN_TIME        = 2000;
    var LOGO_ANIMATE_UP_TIME     = 1000;
    var MENU_FADE_IN_TIME        = 1000;
    
    /* NOTE:
    **  The LOGO will fade in starting at the same time that the first page fades out
    **  Onces the TIME_ANIMATE_OUT completes, the LOGO will animate up.
    **  When the LOGO is at the new position, then the menu will fade in.
    */
  
    var nextPanelNum  = 1;
    var numPanels = $("#panel_wrapper .panel").length;
   
    var theAnimateOutTime = TIME_ANIMATE_OUT;
    var theAnimateInTime  = TIME_ANIMATE_IN;
    var theImageSize      = IMAGE_SIZE;
    
    var bTransitioning = false;
    
    /* Variables used to identify if operating on Mobile or MSIE */
    var bIsMobileClient = false;
    var bIsMSIE = false;
   

    /* Set to True if the browser agent is a mobile device such as iPhone, iPad, etc. */
    bIsMobileClient = navigator.userAgent.toLowerCase().match(/mobile/) == "mobile";
    bIsMSIE         = navigator.userAgent.toLowerCase().match(/msie/) == "msie";
        
    /* Adjust the wrapper to collapsed as the photos are moved into place */
    $('#collection_wrapper').css({"overflow" : "hidden"});   
    
    /* Define fadein/fadeout based upon if mobile device or desktop */
    if (bIsMobileClient) {
        theAnimateInTime  = MOBILE_ANIMATE_IN;
        theAnimateOutTime = MOBILE_ANIMATE_OUT;
    }
    else if ($("body").attr("class") == "IE7") {
        theAnimateInTime  = 10;
        theAnimateOutTime = 100;
        theImageSize += 3;         // fudge factor - must be a margin setting somewhere
    }
    
    
    /* Stack the panels on top of each other */
    $("#panel_wrapper .panel").panel({PANEL_ANIMATE_OUT: theAnimateOutTime,
                                      PANEL_ANIMATE_IN:  theAnimateInTime,
                                      FULL_SIZE_IMAGE_HEIGHT: theImageSize,
                                      CALLBACK : TransitionCompete});
    
    // Attach the timer to the wrapper class
    $(".wrapper").everyTime(TIME_FROM_PAGE_LOAD_PLAY, "InitTime", InitDelayComplete);
    
    // Stop the timer and transition to panel 1 (blank panel) 
    // and during same time animate logo in
    function InitDelayComplete() {
        $(this).stopTime("InitTime");
        $("#panel_wrapper .panel").panel.transition(1);
        
        $("#gns_logo").css({opacity: 0}).show();
        $("#gns_logo").animate (
            {opacity: 1},
            {queue: false,  duration: LOGO_FADE_IN_TIME}
        )
    }

    // Executed after panel 1 transition completes 
    function TransitionCompete() {
        $("#gns_logo").animate (
            {"margin-top": "275px" },
            {queue: false, duration: LOGO_ANIMATE_UP_TIME,
            complete: function()
            {
                $("#menu").css({opacity: 0}).show();
                $("#menu").animate(
                    {"opacity" :  1},
                    {queue: false, duration:  MENU_FADE_IN_TIME});               
                       
            }
        })
    }
    

 
    if (bIsMSIE == true) {
        $('#collection_wrapper').show();
    } else {
        $('#collection_wrapper').css({"opacity" : 0}).stop().show().animate(
            {"opacity" :  1},
            {queue: false, duration: PAGE_LOAD_TIME,
            complete: function() {
                $(this).css({filter: ""});
            }
        });
    }
    
    
});