-
-
Save meirish/5096317 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ;(function (){ | |
| 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); | |
| })() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment