-
-
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