Skip to content

Instantly share code, notes, and snippets.

@nchristus

nchristus/gist:5094817

Created March 5, 2013 22:13
Show Gist options
  • Save nchristus/5094817 to your computer and use it in GitHub Desktop.
Save nchristus/5094817 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.js
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