Skip to content

Instantly share code, notes, and snippets.

@meirish

meirish/gist:5096317

Forked from nchristus/gist:5094817
Created March 6, 2013 02:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save meirish/5096317 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save meirish/5096317 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. meirish revised this gist Mar 6, 2013. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    ;(function (){
    var HomeUI = {
    imageLoadCounter:1,
    delayTimer:null,
    @@ -702,4 +703,5 @@ var HomeUI = {
    HomeUI.resizeAction();
    }
    }
    $(window).load(HomeUI.initialize);
    $(window).load(HomeUI.initialize);
    })()
  2. nchristus created this gist Mar 5, 2013.
    705 changes: 705 additions & 0 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,705 @@
    var HomeUI = {
    imageLoadCounter:1,
    delayTimer:null,
    animationTimer:null,
    timerCounter:0,
    currentAnimation:null,
    animating:false,
    popUpTimer:null,
    NUM_IMAGES_TO_LOAD:4,
    POP_UP_DELAY:3000,
    aspectRatio:null,
    origImgW:null,
    origImgH:null,
    origBannerTop:null,
    percentOfWindow:.75,
    imgTopPerc:0,
    pkgSpacing: 65,
    currentPkg:0,
    FADE_TIME_IMG:1000,
    FADE_TIME_TEXT:1200,
    DELAY_TIME:60,
    elementsToResize:["#introAnimation .i_1 img", "#introAnimation .i_2 img", "#introAnimation .i_3 img", "#introAnimation .i_4 img"],
    sizeType:"bigger", //bigger or smaller
    WIDTH_THRESHOLD:1265,

    IS_BROWSER_IE8_ORLESS:Boolean($.browser.msie && parseInt($.browser.version, 10) <= 8),

    ANIMATIONS:[],

    //time-based animation vars
    timeTrack:new Date().getTime(),
    timeCount:0,
    ANIMATION_TICK_TIME:33,

    COOKIE_NAME:'LACOSTA.COM_INTRO',
    cookie_set:false,

    initialize: function() {
    HomeUI.ANIMATIONS = [ {"type":["opacity"], "duration":HomeUI.FADE_TIME_TEXT, "start":[0], "end":[1], "delay":1000, "element":["#introAnimation .t_1"]},
    /* 1 */ {"type":["opacity","opacity"], "duration":HomeUI.FADE_TIME_IMG, "start":[1,1], "end":[0,0], "delay":1000, "element":["#introAnimation .i_1", "#introAnimation .t_1"]},
    /* 2 */{"type":["opacity"], "duration":HomeUI.FADE_TIME_TEXT, "start":[0], "end":[1], "delay":HomeUI.DELAY_TIME, "element":["#introAnimation .t_2"]},
    /* 3 */{"type":["opacity","opacity"], "duration":HomeUI.FADE_TIME_IMG, "start":[1,1], "end":[0,0], "delay":1500, "element":["#introAnimation .i_2", "#introAnimation .t_2"]},
    /* 4 */{"type":["opacity"], "duration":HomeUI.FADE_TIME_TEXT, "start":[0], "end":[1], "delay":HomeUI.DELAY_TIME, "element":["#introAnimation .t_3"]},
    /* 5 */{"type":["opacity","opacity"], "duration":HomeUI.FADE_TIME_IMG, "start":[1,1], "end":[0,0], "delay":1500, "element":["#introAnimation .i_3", "#introAnimation .t_3"]},
    /* 6 */{"type":["opacity"], "duration":500, "start":[0], "end":[1], "delay":HomeUI.DELAY_TIME, "element":["#introAnimation .banner"]},
    /* 7 */{"type":["opacity"], "duration":HomeUI.FADE_TIME_TEXT, "start":[0], "end":[1], "delay":HomeUI.DELAY_TIME, "element":["#introAnimation .banner .t_4"]},
    /* - *///{"type":["opacity"], "duration":HomeUI.FADE_TIME_IMG, "start":[1], "end":[0], "delay":1000, "element":["#introAnimation .t_4"]},
    /* 8 */{"type":["left", "left", "left", "opacity"], "duration":1000, "start":[0,0,0,1], "end":[1,1,1,0], "delay":1500, "element":["#introAnimation .pkgBox", "#introAnimation .pkgBox", "#introAnimation .pkgBox","#introAnimation .t_4"]},
    /* 9 */{"type":["opacity", "opacity"], "duration":500, "start":[0,0], "end":[1,1], "delay":HomeUI.DELAY_TIME, "element":["#introAnimation .arrowR", "#introAnimation .arrowL"]}


    ];
    HomeUI.checkForCookie();
    HomeUI.stageSetup();
    HomeUI.waitForImageLoad();
    HomeUI.startNewTimer();
    HomeUI.initWindowResize();
    },
    /*postAnimationInit:function(){
    $("#introAnimation .nav a").on("mouseenter", HomeUI.onNavOverHand);
    //startPopUpTimer
    HomeUI.popUpTimer = setTimeout(HomeUI.popUpDelayHandler, HomeUI.POP_UP_DELAY);
    },*/
    /*swapOutNavImage:function(){
    var target = $($("#introAnimation .i_5 .pane")[$($("#introAnimation .nav a.active")[0]).index()-1]);
    if(!$(target).hasClass("active")){
    $("#introAnimation .i_5 .pane").removeClass("active");
    $("#introAnimation .i_5 .pane .info").css("display", "none");
    //-1 is for h1
    $(target).addClass("active");
    //restartPopUpTimer
    clearTimeout(HomeUI.popUpTimer)
    HomeUI.popUpTimer = setTimeout(HomeUI.popUpDelayHandler, HomeUI.POP_UP_DELAY);
    }
    },*/

    //COOKIE
    //--------------------------------------------------------------------
    checkForCookie:function(){
    if(HomeUI.readCookie(HomeUI.COOKIE_NAME) == 'true'){
    HomeUI.cookie_set = true;
    HomeUI.timerCounter = 9;
    } else {
    if(!HomeUI.IS_BROWSER_IE8_ORLESS){
    $('.action_skipIntro').show("scale", {direction: 'both', scale: 'both'}, 1500);
    }else{
    $('.action_skipIntro').css('display', 'block');
    $('.action_skipIntro').css('opacity', 0);
    $('.action_skipIntro').stop().animate({'opacity':1}, 1500);
    }
    }
    },

    setIntroCookie:function(){
    HomeUI.createCookie(HomeUI.COOKIE_NAME, true);
    },

    createCookie:function(name, value, days){
    if(days != undefined){
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
    }else{
    expires = "";
    }
    document.cookie = name+"="+value+expires+"; path=/";
    },

    readCookie:function(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' '){
    c = c.substring(1,c.length);
    }
    if (c.indexOf(nameEQ) == 0){
    return c.substring(nameEQ.length,c.length);
    }
    }
    return null;
    },

    //UI
    //--------------------------------------------------------------------
    stageSetup:function(){
    if(!HomeUI.cookie_set){
    $('#introAnimation .i_1').css("display","block");
    $('#introAnimation .i_1').css("opacity","1");

    $("#introAnimation .banner").css("opacity", 0);
    $("#introAnimation .t_1").css("opacity", 0);
    $("#introAnimation .t_2").css("opacity", 0);
    $("#introAnimation .t_3").css("opacity", 0);
    $("#introAnimation .t_4").css("opacity", 0);
    $("#introAnimation .arrowR").css("opacity", 0);

    $("#introAnimation .arrowL").css("opacity", 0);

    $("#introAnimation .pkgBox").css("opacity", 0);

    }else{

    HomeUI.resizeAction();

    $("#introAnimation .i_4").css('display', 'block');
    $("#introAnimation .banner").css('display', 'block');
    $("#introAnimation .t_4").css('display', 'none');

    var y = $("#introAnimation .banner").position().top - 60;
    $("#introAnimation .pkgBox").css("top",y+"px");

    $('#introAnimation .arrowR').css("display", 'block');
    $('#introAnimation .arrowL').css("display", 'block');




























    }


    //listeners
    $("#introAnimation .arrowR").click(function(){
    HomeUI.movePkgBoxes("R");
    });

    $("#introAnimation .arrowL").click(function(){
    HomeUI.movePkgBoxes("L");
    });
    $("#introAnimation .pkgBox").mouseenter(function(){
    $($(this).children(".front")).children("img").fadeOut("fast");
    $($(this).children(".front")).children("p").fadeOut("fast");
    $($(this).children(".back")).fadeIn("fast");
    });
    $("#introAnimation .pkgBox").mouseleave(function(){
    $($(this).children(".front")).children("img").fadeIn("fast");
    $($(this).children(".front")).children("p").fadeIn("fast");
    $($(this).children(".back")).fadeOut("fast");
    });
    },
    //TIMERS
    //--------------------------------------------------------------------
    checkForCue:function(){
    //images loaded and time state are 1 less than their counters
    //this allows us to make sure the image is loaded before animating
    var imagesLoaded = HomeUI.imageLoadCounter - 1;
    var timeState = HomeUI.timerCounter - 1;
    switch(timeState){
    case 0:
    // text 1 comes in from left
    if(imagesLoaded >= 2 && !HomeUI.animating){
    HomeUI.showElements([HomeUI.ANIMATIONS[timeState].element[0]]);
    $(HomeUI.ANIMATIONS[timeState].element[0]).css("top",HomeUI.calculateTextTop(timeState));
    HomeUI.startNewAnimation();
    }
    break;
    case 1:
    // img 1 and text 1 fade up
    if(imagesLoaded >= 3 && !HomeUI.animating){
    HomeUI.showElements(["#introAnimation .i_2"]);
    //$("#introAnimation .i_2").css("display","block");
    //$("#introAnimation .i_2").css("opacity",1);
    HomeUI.resizeAction();
    HomeUI.startNewAnimation();

    //ie fix
    //if($.browser.msie){$("#introAnimation .titleBox_mask").fadeOut();}
    }
    break;
    case 2:
    // text 2 comes in from left
    if(imagesLoaded >= 4 && !HomeUI.animating){
    HomeUI.showElements(["#introAnimation .t_2"]);
    $(HomeUI.ANIMATIONS[timeState].element[0]).css("top",HomeUI.calculateTextTop(timeState));
    HomeUI.startNewAnimation();
    }
    break;
    case 3:
    // img 2 and text 2 fade up
    if(!HomeUI.animating){
    HomeUI.showElements(["#introAnimation .i_3"]);
    $("#introAnimation .i_3").css("opacity",1);
    HomeUI.resizeAction();
    //HomeUI.calculateImgTop(timeState);
    HomeUI.startNewAnimation();
    }
    break;
    case 4:
    // text 3 fades on
    if(!HomeUI.animating){
    HomeUI.showElements([HomeUI.ANIMATIONS[timeState].element[0]]);
    $(HomeUI.ANIMATIONS[timeState].element[0]).css("top",HomeUI.calculateTextTop(timeState));
    HomeUI.startNewAnimation();
    }
    break;

    case 5:
    // img 3 and text 3 fade up
    if(!HomeUI.animating){
    HomeUI.showElements(["#introAnimation .i_4"]);
    $("#introAnimation .i_4").css("opacity",1);
    HomeUI.resizeAction();
    HomeUI.startNewAnimation();
    }
    break;
    case 6:
    // banner fades on
    if(!HomeUI.animating){
    HomeUI.showElements([HomeUI.ANIMATIONS[timeState].element[0]]);
    HomeUI.resizeAction();
    HomeUI.startNewAnimation();
    }
    break;

    case 7:
    //case 8:
    // 7: text 4 fades on

    if(!HomeUI.animating){
    HomeUI.showElements(HomeUI.ANIMATIONS[timeState].element);
    HomeUI.startNewAnimation();
    }
    break;
    case 8:
    // text 4 fades off and package boxes come on

    HomeUI.setIntroCookie();
    $('.action_skipIntro').hide("scale", {direction: 'both', scale: 'both'}, 500);

    if(!HomeUI.animating){
    HomeUI.resizeAction();
    // set opacity and set top based on the banner
    var y = $("#introAnimation .banner").position().top - 60;
    $("#introAnimation .pkgBox").css("top",y+"px");
    // set start and end positions based on window width
    var maxnum = 3;
    if($("#introAnimation .pkgBox").length < 3){
    maxnum = $("#introAnimation .pkgBox").length;
    for(var m=0; m< 3-maxnum; m++){
    HomeUI.ANIMATIONS[timeState].element.shift();
    HomeUI.ANIMATIONS[timeState].start.shift();
    HomeUI.ANIMATIONS[timeState].end.shift();
    HomeUI.ANIMATIONS[timeState].type.shift();
    }
    /*HomeUI.ANIMATIONS[timeState].element = [];
    HomeUI.ANIMATIONS[timeState].start = [];
    HomeUI.ANIMATIONS[timeState].end = [];
    for(var m=0; m< maxnum; m++){
    HomeUI.ANIMATIONS[timeState].element.push(" ");
    HomeUI.ANIMATIONS[timeState].start.push(" ");
    HomeUI.ANIMATIONS[timeState].end.push(" ");
    }
    HomeUI.ANIMATIONS[timeState].element.push("#introAnimation .t_4");
    HomeUI.ANIMATIONS[timeState].start.push(1);
    HomeUI.ANIMATIONS[timeState].end.push(0);*/
    }
    for(var p=0; p<maxnum; p++){
    var startx = $(window).width() + ( $($("#introAnimation .pkgBox")[p]).width() + HomeUI.pkgSpacing ) * p;
    HomeUI.ANIMATIONS[timeState].start[p] = startx;
    HomeUI.ANIMATIONS[timeState].end[p] = $($("#introAnimation .pkgBox")[p]).position().left;
    HomeUI.ANIMATIONS[timeState].element[p] = $("#introAnimation .pkgBox")[p];
    $($("#introAnimation .pkgBox")[p]).css("left", startx);
    $($("#introAnimation .pkgBox")[p]).css("opacity",1);
    }

    HomeUI.startNewAnimation();
    }
    break;
    case 9:
    // 10: arrows fade on
    if(!HomeUI.animating){
    HomeUI.hideInvisibles();
    if($("#introAnimation .pkgBox").length > 3){
    HomeUI.showElements(HomeUI.ANIMATIONS[timeState].element);
    HomeUI.startNewAnimation();
    }else{
    $("#introAnimation .arrowL").css("display","none");
    $("#introAnimation .arrowR").css("display","none");
    }

    }
    break;
    default:
    if(!HomeUI.animating && timeState>10){
    HomeUI.startNewAnimation();
    }
    }
    },
    showElements:function(ar){
    for(var i=0; i<ar.length; i++){
    //for each(var ele in ar){
    $(ar[i]).css("display","block");
    }
    },
    calculateTextTop:function(ind){
    var ind = ind;
    var H = $(window).height() - ( $('#footer-elements .packages-bar').height() + $('#footer-elements #booking-bar').height() + $('.header').height() );
    //var perc1 = 1- ($(HomeUI.ANIMATIONS[ind].element[0]).parent().position().top / H);
    var adjPerc = H/$(window).height();
    var topPerc = $(HomeUI.ANIMATIONS[ind].element[0]).position().top * adjPerc;
    return topPerc;
    },
    hideInvisibles:function(){
    $("#introAnimation .i_1").css("display","none");
    $("#introAnimation .i_2").css("display","none");
    $("#introAnimation .i_3").css("display","none");
    $("#introAnimation .t_1").css("display","none");
    $("#introAnimation .t_2").css("display","none");
    $("#introAnimation .t_3").css("display","none");
    $("#introAnimation .t_4").css("display","none");
    },
    movePkgBoxes:function(dir){
    if(!HomeUI.animating){
    var els = [];
    var starts = [];
    var ends = [];
    var types = [];
    var ind = HomeUI.currentPkg;
    var mcs = $("#introAnimation .pkgBox");
    var pkgW = $(mcs[HomeUI.currentPkg]).width();
    // move the onstage ones off
    for(var i=0;i<3;i++){
    if(i>0) ind++;
    if(ind >= mcs.length){
    if(mcs.length >= 6){
    ind = ind - mcs.length;
    }else{
    break;
    }
    }
    els.push($(mcs[ind]));
    starts.push($(mcs[ind]).position().left);
    if(dir == "R"){
    // go off to the left
    ends.push($(mcs[ind]).position().left - ( $(mcs[HomeUI.currentPkg]).position().left + pkgW + (pkgW + HomeUI.pkgSpacing)*2) );
    }else{
    // go off to the right
    ends.push($(window).width() + ( $(mcs[HomeUI.currentPkg]).position().left + (pkgW + HomeUI.pkgSpacing)*2) );
    }
    types.push("left");
    }
    if(dir == "R"){
    ind++;
    if(ind >= mcs.length) ind = ind - mcs.length;
    }else if(dir == "L"){
    ind = HomeUI.currentPkg-3;
    if(ind < 0) ind = mcs.length + ind;
    }
    if(mcs.length <= 6){
    if(HomeUI.currentPkg == 0){
    ind = 3;
    }else{
    ind = 0;
    }
    }
    // move the offstage ones on
    for(i=0;i<3;i++){
    var maxnum = 3;
    if(mcs.length < 6 && ind >= 3 ) maxnum = mcs.length-3;
    if(i>0) ind++;
    if(ind >= mcs.length){
    if(mcs.length >= 6){
    ind = ind - mcs.length;
    }else{
    break;
    }
    }
    if(i==0) HomeUI.currentPkg = ind;
    els.push($(mcs[ind]));
    if(dir == "R"){
    // come on from the right
    starts.push( $(window).width() + ( $($("#introAnimation .pkgBox")[ind]).width() + HomeUI.pkgSpacing ) * i );
    }else{
    // come on from the left
    starts.push( 0 - ( $($("#introAnimation .pkgBox")[ind]).width() + HomeUI.pkgSpacing ) * (3-i));
    }
    var lr = ($(window).width() - ( pkgW*maxnum + (HomeUI.pkgSpacing)*(maxnum-1)) ) / 2;
    ends.push(lr + (pkgW + HomeUI.pkgSpacing)*i);
    types.push("left");

    $(mcs[ind]).left = starts[starts.length-1];
    $(mcs[ind]).css("opacity",1);
    }
    var animObj = {"type":types, "duration":1000, "start":starts, "end":ends, "delay":0, "element":els};
    HomeUI.startNewAnimation(animObj);
    }
    },
    /*calculateImgTop:function(ind){
    var percToMove = 80;
    var H = $(window).height() - ( $('#footer-elements .packages-bar').height() + $('#footer-elements #booking-bar').height() + $('.header').height() );
    // calculate in percent where the image is. assign that to the animation's start position.
    var imgTopPerc = -100 * $(HomeUI.ANIMATIONS[ind].element[0]).parent().position().top / H;
    HomeUI.ANIMATIONS[ind].start[0] = imgTopPerc;
    HomeUI.ANIMATIONS[ind].end[0] = HomeUI.ANIMATIONS[ind].start[0] - percToMove;
    // calculate in percent how far up the text needs to end up so that it animates at the same rate as the image. assign its animation's end position.
    HomeUI.ANIMATIONS[ind].start[2] = HomeUI.ANIMATIONS[ind-1].end[1];
    HomeUI.ANIMATIONS[ind].end[2] = HomeUI.ANIMATIONS[ind].start[2] - percToMove;
    },*/
    waitForImageLoad:function(){
    if(!HomeUI.cookie_set){
    if($("#introAnimation .i_"+HomeUI.imageLoadCounter+" img").attr("src") != undefined){
    var img = new Image();
    $(img).load(HomeUI.imageLoadedHand);
    img.src = $("#introAnimation .i_"+HomeUI.imageLoadCounter+" img").attr("src");
    }
    }else{
    HomeUI.imageLoadCounter = 99;
    }
    },
    startNewTimer:function(){;
    if(HomeUI.timerCounter < HomeUI.ANIMATIONS.length){
    if(!HomeUI.cookie_set){
    HomeUI.animating = false;
    HomeUI.delayTimer = setTimeout(HomeUI.delayTickHand, HomeUI.ANIMATIONS[HomeUI.timerCounter].delay);
    }else{
    HomeUI.animating = false;
    }
    }else{
    HomeUI.animating = false;
    //HomeUI.postAnimationInit();
    }
    },
    //ANIMATION
    //--------------------------------------------------------------------
    startNewAnimation:function(animObj){
    HomeUI.animating = true;
    HomeUI.resetAnimationTracker();
    if(animObj == undefined){
    HomeUI.currentAnimation = HomeUI.ANIMATIONS[HomeUI.timerCounter - 1];
    }else{
    HomeUI.currentAnimation = animObj;
    }
    HomeUI.animationTimer = setTimeout(HomeUI.animationTickHand, HomeUI.ANIMATION_TICK_TIME);
    },
    updateAnimationState:function(){
    var animationVal;
    var timePosition = HomeUI.getTimePosition(HomeUI.currentAnimation.duration);
    var end;
    if(timePosition < 1){
    var i = HomeUI.currentAnimation.type.length-1;
    while(i>=0){
    if(typeof HomeUI.currentAnimation.end[i] != "object"){
    end = HomeUI.currentAnimation.end[i];
    }else{
    end = HomeUI.currentAnimation.end[i][HomeUI.sizeType];
    }
    animationVal = HomeUI.getAnimationVal(HomeUI.currentAnimation.start[i], end, HomeUI.currentAnimation.duration/*, "outCubic"*/);
    if(HomeUI.currentAnimation.type[i] != "opacity"){
    //animationVal = animationVal+"%";
    animationVal = HomeUI.getAnimationVal(HomeUI.currentAnimation.start[i], end, HomeUI.currentAnimation.duration, "outCubic");
    }
    if(HomeUI.isIESafe(HomeUI.currentAnimation.element[i])){
    $(HomeUI.currentAnimation.element[i]).css(HomeUI.currentAnimation.type[i], animationVal);
    }
    i--;
    }
    HomeUI.animationTimer = setTimeout(HomeUI.animationTickHand, HomeUI.ANIMATION_TICK_TIME);
    }else{
    var j = HomeUI.currentAnimation.type.length-1;
    while(j>=0){
    if(typeof HomeUI.currentAnimation.end[j] != "object"){
    end = HomeUI.currentAnimation.end[j];
    }else{
    end = HomeUI.currentAnimation.end[j][HomeUI.sizeType];
    }
    /*if(HomeUI.currentAnimation.type[j] != "opacity"){
    end = end+"%";
    }*/
    $(HomeUI.currentAnimation.element[j]).css(HomeUI.currentAnimation.type[j], end);
    j--;
    }
    //HomeUI.updateStage();
    HomeUI.startNewTimer();
    }
    },
    isIESafe:function(element){
    if($.browser.msie && element == "#introAnimation .shadow"){
    return false;
    }
    return true;
    },
    //util methods
    resetAnimationTracker:function(){
    HomeUI.timeTrack = new Date();
    HomeUI.timeCount = 0;
    },
    getAnimationVal:function(startVal, endVal, duration, easeingOption){
    var completePercent = HomeUI.getTimePosition(duration);
    var val = ((endVal-startVal) * completePercent);
    if(easeingOption != undefined){
    val = HomeUI["ease_"+easeingOption](HomeUI.timeCount, startVal, (endVal-startVal), duration);
    }else{
    val = val+startVal;
    }
    return (val);
    },
    getTimePosition:function(endTime, invert){
    invert = invert == undefined ? false : invert;

    var elapsed = new Date().getTime() -HomeUI.timeTrack;
    HomeUI.timeTrack = new Date().getTime();
    HomeUI.timeCount += elapsed;
    return !invert ? HomeUI.timeCount/endTime : 1-(HomeUI.timeCount/endTime);
    },
    //t = time, b = startPosition, c = totalChangeInPosition, d = duration
    ease_outCubic:function(t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
    },
    ease_inCubic:function(t, b, c, d) {
    return c*(t/=d)*t*t + b;
    },
    skipIntro: function(){
    // Fade Out skip intro button
    $('.action_skipIntro').fadeOut();

    // Set Slide Counter to last slide
    HomeUI.timerCounter = 9;

    // Hide all the bad stuff
    $("#introAnimation .i_1").css('display', 'none');
    $("#introAnimation .i_2").css('display', 'none');
    $("#introAnimation .i_3").css('display', 'none');
    $("#introAnimation .text").css('display', 'none');

    // Display all the cool stuff
    $("#introAnimation .i_4").css('display', 'block'); // Last slide
    $("#introAnimation .banner").css('display', 'block');
    $("#introAnimation .t_4").css('display', 'none');
    $("#introAnimation .banner").css('opacity', 1);

    var y = $("#introAnimation .banner").position().top - 60;
    $("#introAnimation .pkgBox").css("top",y+"px");

    $('#introAnimation .arrowR').css("display", 'block');
    $('#introAnimation .arrowL').css("display", 'block');

    HomeUI.checkForCue();
    HomeUI.resizeAction();

    // Move package buttons
    setTimeout(function(){
    $('#introAnimation .arrowR').css("display", 'block');
    $('#introAnimation .arrowL').css("display", 'block');
    $("#introAnimation .pkgBox").css("opacity", 1);
    }, 1000);
    },

    //WINDOW RESIZE
    //--------------------------------------------------------------------
    initWindowResize:function(){
    HomeUI.origImgW = 1280;//$('#introAnimation .i_1 img').width();
    HomeUI.origImgH = 671;//$('#introAnimation .i_1 img').height();
    HomeUI.origBannerTop = $("#introAnimation .banner").position().top;
    HomeUI.aspectRatio = 1.907;//HomeUI.origImgW / HomeUI.origImgH;
    $(window).resize(HomeUI.resizeHand);
    HomeUI.resizeAction();
    },
    resizeAction:function(){
    var H = $(window).height() - ( $('#footer-elements .packages-bar').height() + $('#footer-elements #booking-bar').height() + $('.header').height() );
    var W = $(window).width();

    // resize the bg imgs
    if(W/H > HomeUI.aspectRatio){
    for(var i=0; i<HomeUI.elementsToResize.length; i++){
    $(HomeUI.elementsToResize[i]).parent().css("width","100%");
    $(HomeUI.elementsToResize[i]).parent().css("height","100%");
    $(HomeUI.elementsToResize[i]).css("width", W);
    $(HomeUI.elementsToResize[i]).css("height","auto");
    $(HomeUI.elementsToResize[i]).parent().css("top",( "-"+($(HomeUI.elementsToResize[i]).height()-H)/2)+"px" );
    if(i == HomeUI.elementsToResize.length-1) {
    $(HomeUI.elementsToResize[i]).parent().css("top",( "-"+($(HomeUI.elementsToResize[i]).height()-H))+"px" );
    }
    $(HomeUI.elementsToResize[i]).parent().css("left",0);

    }
    }else{
    var newW = H*HomeUI.aspectRatio;
    for(var i=0; i<HomeUI.elementsToResize.length; i++){
    $(HomeUI.elementsToResize[i]).parent().css("height", H);
    $(HomeUI.elementsToResize[i]).parent().css("width", newW);
    $(HomeUI.elementsToResize[i]).css("height", H);
    $(HomeUI.elementsToResize[i]).css("width", newW);
    $(HomeUI.elementsToResize[i]).parent().css("left",( "-"+(newW-W)/2)+"px" );
    $(HomeUI.elementsToResize[i]).parent().css("top",0);
    }
    }

    // reposition the pkgbox divs
    if(HomeUI.timerCounter >= 8){
    var y = $("#introAnimation .banner").position().top - 60;
    $("#introAnimation .pkgBox").css("top",y+"px");

    var mcs = $("#introAnimation .pkgBox");
    var maxnum = 3;
    if( mcs.length < 3) maxnum = mcs.length;
    var lr = ($(window).width() - ($("#introAnimation .pkgBox").width() * maxnum + (HomeUI.pkgSpacing * (maxnum-1)) )) / 2;
    var ind = HomeUI.currentPkg;
    for(i=0; i<mcs.length; i++){
    if(i>0) ind++;
    if(ind >= mcs.length) ind = 0;
    if(i<3){
    var x = lr + ($(mcs[ind]).width() + HomeUI.pkgSpacing) * i;
    $(mcs[ind]).css("left", x+"px");
    }else{
    $(mcs[ind]).css("left", $(window).width());
    }
    }
    }

    /*// reposition the banner and banner text
    var bannerPerc = HomeUI.origBannerTop / $("#introAnimation").height();
    var newBannerPerc = 100 * (bannerPerc * HomeUI.origImgH) / $(window).height();
    $("#introAnimation .banner").css("top",newBannerPerc+"%");
    $("#introAnimation .t_4").css("top",newBannerPerc+"%");*/

    // how big the image has been resize in terms of percent
    //var perc = W / HomeUI.origImgW;
    },


    //HANDLERS
    //--------------------------------------------------------------------
    delayTickHand:function(){
    HomeUI.timerCounter++;
    HomeUI.checkForCue();
    },
    imageLoadedHand:function(){
    HomeUI.imageLoadCounter++;
    HomeUI.checkForCue();
    HomeUI.waitForImageLoad();
    },
    animationTickHand:function(){
    HomeUI.updateAnimationState();
    },
    resizeHand:function(){
    HomeUI.resizeAction();
    }
    }
    $(window).load(HomeUI.initialize);