%PDF-
%PDF-
Mini Shell
Mini Shell
var smallView = false;
var htmlStyle;
var bodyStyle;
var firstLoad = true;
var isSafari;
var isChrome;
var videoPlayer = [];
var playerInfoList = [];
jQuery('.video--container iframe').each(function() {
playerInfoList.push(jQuery(this).attr('id'));
});
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
console.log("trying to create YouTube Players...");
function onYouTubePlayerAPIReady() {
for (var i = 0; i < playerInfoList.length; i++) {
videoPlayer[i] = new YT.Player(playerInfoList[i]);
};
};
jQuery(document).ready(function() {
// if (jQuery.browser.msie == true) {
jQuery('.video--iframe-container').width('80%').height('80%');
// }
});
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
var isChrome = true;
} else {
var isSafari = true;
console.log('safari');
}
}
var slideAnimations = {
"_large_hero_image_with_white_text_box_below": function() {
var $bottom_text = jQuery('.module-20--text');
TweenMax.set($bottom_text, {
position: 'absolute',
bottom:'-10%',
autoAlpha: 0
});
TweenMax.to($bottom_text, 1.5, {
bottom:'0%',
force3D: true,
// delay: 0.25,
easing: Quad.easeOut
});
TweenMax.to($bottom_text, 1, {
autoAlpha: 1,
delay: 0.75,
easing: Quad.easeOut
});
},
// "_6_images_block": function() {
// var $topRowOverlay = jQuery('.module-16--top-row .animated-overlay');
// var $bottomRowOverlay = jQuery('.module-16--bottom-row .animated-overlay');
// var $topRow = jQuery('.module-16--top-row');
// var $bottomRow = jQuery('.module-16--bottom-row');
// var $oneSixth = jQuery('.active .module-16--container .one-sixth');
// // console.log('6 img block');
// TweenMax.set($topRowOverlay, {
// position: 'relative',
// height: '100%',
// width: '100%',
// backgroundColor: 'white',
// yPercent: '0%'
// });
// TweenMax.set($oneSixth, {
// overflow:'hidden'
// });
// TweenMax.set($bottomRowOverlay, {
// position: 'relative',
// height: '100%',
// width: '100%',
// backgroundColor: 'white',
// yPercent: '0%'
// });
// TweenMax.set([$topRow, $bottomRow], {
// overflow: 'hidden',
// yPercent: '10%'
// });
// if (isSafari) {
// TweenMax.set([$topRowOverlay, $bottomRowOverlay], {force3D:false});
// }
// TweenMax.to($topRowOverlay, 0.75, {
// yPercent: '-100%',
// delay: 1.25,
// ease: Quad.easeOut
// });
// TweenMax.to($topRow, 0.75, {
// yPercent: '0%',
// delay: 1.25,
// ease: Quad.easeOut
// });
// TweenMax.to($bottomRow, 0.75, {
// yPercent: '0%',
// delay: 0.5,
// ease: Quad.easeOut
// });
// TweenMax.to($bottomRowOverlay, 0.75, {
// yPercent: '-100%',
// delay: 0.5,
// ease: Quad.easeOut
// });
// },
// // Start Two Column Content w/ Image on right col animation
"_2_column_content_with_image_on_right_column": function() {
var $ele = jQuery('.module-4.right-column.full-photo');
var $eleBgPosition = $ele.height() * -0.15;
var $ele2 = jQuery('.module-4.left-column .text-content');
var $para = jQuery('.module-4.left-column .text-content *');
var $ele3 = jQuery('.intro--container');
var $para = jQuery('.module-4.left-column .text-content p');
var $overlay = jQuery('.module-4 .animated-overlay');
var $heading = jQuery('.module-4.left-column .text-content h1');
TweenMax.set($ele2, {
autoAlpha: 0,
height: "0%",
top: "55%",
force3D: true
});
// TweenMax.set($ele, {backgroundPosition:"0px " + $eleBgPosition + "px"});
TweenMax.set($overlay, {
height: "100%",
backgroundColor: "white",
position: "relative",
top: "0",
force3D:true
});
TweenMax.set($ele, {
autoAlpha: 1,
yPercent: -10,
// backgroundPosition: "0% 35%",
backgroundColor: "white",
force3D: true
});
TweenMax.to($ele2, 1, {
height: "100%",
top: "50%",
ease: Quad.easeOut,
force3D: true,
delay: 0.75
});
TweenMax.to($ele2, 1, {
height: "100%",
top: "50%",
ease: Quad.easeOut,
force3D: true,
delay: 0.75
});
TweenMax.to($ele2, 1, {
autoAlpha: 1,
delay: 0.75
});
TweenMax.to($ele, 1, {
yPercent: 0,
force3D: true,
delay: 0.5
});
TweenMax.to($overlay, 1, {
ease: Quad.easeOut,
delay: 0.5,
top: "100%",
force3D:true
});
},
// "_2_column_content_with_2_images": function() {
// var $overlayRight = jQuery('.active .module-11--right-column .animated-overlay'),
// $overlayLeft = jQuery('.active .module-11--left-column .animated-overlay'),
// $text = jQuery('.active .module-11--text-content'),
// $leftImage = jQuery('.active .module-11--left-column'),
// $rightImage = jQuery('.active .module-11--right-column');
// // TweenMax.set($ele, {backgroundPosition:"0px " + $eleBgPosition + "px"});
// TweenMax.set($overlayRight, {
// height: "100%",
// backgroundColor: "white",
// position: "relative",
// top: "0"
// });
// if (!isSafari) {TweenMax.set($overlayRight, {force3D:true})};
// TweenMax.set($overlayLeft, {
// height: "102%",
// yPercent: -1,
// top:0,
// z: "1000px",
// backgroundColor: "white",
// });
// if (!isSafari) {TweenMax.set($overlayLeft, {force3D:true})};
// TweenMax.set($rightImage, {yPercent:-10});
// TweenMax.set($text, {
// autoAlpha:0,
// top: "76.5%"
// });
// jQuery('<style>.module-11--left-column::before{width:100%}</style>').appendTo('head');
// TweenMax.set($leftImage, {
// yPercent: 10
// });
// if (isSafari) {
// TweenMax.set([$overlayRight, $overlayLeft], {force3D:false});
// }
// TweenMax.to($overlayRight, 1, {
// ease: Quad.easeOut,
// delay: 0.5,
// top: "100%"
// });
// TweenMax.to($text, 1, {
// delay: 1.5,
// top: "75%",
// ease: Quad.easeOut
// });
// TweenMax.to($text, 1, {
// autoAlpha:1,
// delay: 1.5,
// ease: Quad.easeOut
// });
// TweenMax.to($overlayLeft, 1, {
// height: "0%",
// delay: 0.5,
// ease: Quad.easeOut,
// });
// TweenMax.to($leftImage, 1, {
// yPercent: 0,
// ease: Quad.easeOut,
// delay: 0.5
// });
// TweenMax.to($rightImage, 1, {yPercent:0, ease: Quad.easeOut, delay: 0.5});
// },
// // End Two Column Content w/ Image on right col animation
// // Start _content_with_1_image_in_bottom animation
// "_content_with_1_image_in_bottom": function() {
// var $topText = jQuery('.active .module-3 .text-content');
// var $para = jQuery('.active .module-3 .text-content');
// var $bottom = jQuery('.active .module-3 .animated-overlay');
// var $bg = jQuery('.active .module-3 .module-14--single-image');
// var $bgTimesThirtyFivePercent = jQuery('.active .module-14--single-image').height() * 0.15;
// TweenMax.set($topText, {
// yPercent: -10,
// force3D: true,
// });
// TweenMax.set($para, {
// autoAlpha: 0
// });
// TweenMax.set($bg, {
// yPercent: 10
// });
// requestAnimationFrame(function() {
// TweenMax.to($topText, 1, {
// yPercent: 0,
// force3D: true,
// ease: Quad.easeOut,
// delay: 0.75
// });
// TweenMax.set($bottom, {
// position: "relative",
// backgroundColor: "white",
// height: "100%",
// top: "-0.5%",
// force3D: true
// });
// TweenMax.to($para, 1, {
// autoAlpha: 1,
// delay: 1
// });
// TweenMax.to($bottom, 1.0, {
// height: "0%",
// force3D: true,
// ease: Quad.easeOut,
// delay: 0.75
// });
// TweenMax.to($bg, 1.0, {
// yPercent: 0,
// ease: Quad.easeOut,
// delay: 0.75
// });
// });
// },
"_content_with_2_images_in_bottom": function() {
var $topText = jQuery('.module-3 .text-content');
var $topRow = jQuery('.active module-5--top-row');
var $para = jQuery('.module-3 .text-content');
var $bottomRightOverlay = jQuery('.active .module-3 .animated-overlay').eq(1);
var $bottomLeftOverlay = jQuery('.active .module-3 .animated-overlay').eq(0);
var $bottomRightImage = jQuery('.module-3--right-image');
var $bottomLeftImage = jQuery('.module-3--left-image');
var $bottom = [$bottomLeftOverlay, $bottomRightOverlay];
var $bg = jQuery('.active .module-3 .module-14--single-image');
TweenMax.set($topText, {
yPercent: -50,
force3D: true,
});
TweenMax.set($para, {
autoAlpha: 0
});
TweenMax.set($bg, {
yPercent: 10
});
TweenMax.to($topText, 1, {
yPercent: 0,
force3D: true,
ease: Quad.easeOut,
delay: 0.75
});
TweenMax.set($bottom, {
position: "relative",
backgroundColor: "white",
height: "100%",
top: "-0.5%",
force3D: true
});
TweenMax.set([$bottomLeftImage,
$bottomRightImage], {
yPercent: 10
});
TweenMax.to($para, 1, {
autoAlpha: 1,
delay: 1
});
TweenMax.staggerTo($bottom, 0.9, {
height: "0%",
force3D: true,
ease: Quad.easeOut,
delay: 0.5
}, 0.2);
TweenMax.staggerTo([$bottomLeftImage,
$bottomRightImage], 0.9, {
yPercent: 0,
ease: Quad.easeOut,
delay: 0.5
}, 0.2);
TweenMax.to($bg, 1.0, {
yPercent: 0,
ease: Quad.easeOut,
delay: 0.5
});
},
// "_content_with_3_images_in_bottom": function() {
// var $topText = jQuery('.module-12 .text-content');
// var $topRow = jQuery('.active .module-12--top-row');
// var $para = jQuery('.module-12 .text-content');
// var $bottomRightOverlay = jQuery('.active .module-12--right-image .animated-overlay');
// var $bottomLeftOverlay = jQuery('.active .module-12--left-image .animated-overlay');
// var $bottomCenterOverlay = jQuery('.active .module-12--center-image .animated-overlay');
// var $bottomRightImage = jQuery('.active .module-12--right-image');
// var $bottomLeftImage = jQuery('.active .module-12--left-image');
// var $bottomCenterImage = jQuery('.active .module-12--center-image')
// var $bottom = [$bottomLeftOverlay, $bottomCenterOverlay, $bottomRightOverlay];
// TweenMax.set($topText, {
// yPercent: -50,
// force3D: true,
// });
// TweenMax.set($para, {
// autoAlpha: 0
// });
// TweenMax.to($topText, 1, {
// yPercent: 0,
// force3D: true,
// ease: Quad.easeOut,
// delay: 0.75
// });
// TweenMax.set($bottom, {
// position: "relative",
// backgroundColor: "white",
// height: "100%",
// top: "-0.5%",
// force3D: true
// });
// TweenMax.set([$bottomLeftImage, $bottomCenterImage,
// $bottomRightImage], {
// yPercent: 10
// });
// TweenMax.to($para, 1, {
// autoAlpha: 1,
// delay: 1
// });
// TweenMax.staggerTo($bottom, 0.9, {
// height: "0%",
// force3D: true,
// ease: Quad.easeOut,
// delay: 0.5
// }, 0.2);
// TweenMax.staggerTo([$bottomLeftImage, $bottomCenterImage,
// $bottomRightImage], 0.9, {
// yPercent: 0,
// ease: Quad.easeOut,
// delay: 0.5
// }, 0.2);
// },
"_2_column_content_with_image_on_left_column": function() {
var $ele = jQuery('.module-2.left-column.full-photo');
var $ele2 = jQuery('.module-2.right-column .text-content');
var $para = jQuery('.module-4.left-column .text-content *');
var $ele3 = jQuery('.intro--container');
var $para = jQuery('.module-4.left-column .text-content p');
var $heading = jQuery('.module-4.left-column .text-content h1');
var $overlay = jQuery('.module-2 .animated-overlay');
// TweenMax.to ($ele3, 1.5, {yPercent: -50, ease: Quad.easeOut});
TweenMax.set($ele, {
autoAlpha: 1,
yPercent: -10,
backgroundPosition: "0% 35%",
backgroundColor: "white",
force3D: true
});
TweenMax.set($overlay, {
height: "100%",
position: "relative",
bottom: "0",
backgroundColor: "white"
});
TweenMax.set($ele2, {
autoAlpha: 0,
height: "0%",
top: "55%",
force3D: true
});
// TweenMax.to($ele, 1, {backgroundPosition:"0% 0%", ease: Quad.easeOut, force3D: true, delay: 0.5});
TweenMax.to($ele, 1, {
yPercent: 0,
force3D: true,
delay: 0.5
});
TweenMax.to($overlay, 1, {
bottom: "-100%",
ease: Quad.easeOut,
force3D: true,
delay: 0.5
});
TweenMax.to($ele2, 1, {
height: "100%",
top: "50%",
ease: Quad.easeOut,
force3D: true,
delay: 0.75
});
TweenMax.to($ele2, 1, {
autoAlpha: 1,
delay: 0.75
});
},
// "_fullscreen_background_image_with_text": function() {
// var $text = jQuery('.module-10 .intro-title');
// TweenMax.set($text, {yPercent: 5, autoAlpha: 0});
// TweenMax.to($text, 0.5, {yPercent: 0, delay:0.75, autoAlpha: 1, ease: Quad.easeOut});
// },
// // End _content_with_1_image_in_bottom animation
// // Start _4_images_block animation
// // Bottom Right - Bottom > Top
// // Bottom Left and Top Right Together - Bottom>Top
// // Top Left - Top > bottom
// // Start at bottom right >
// "_4_images_block":function() {
// var $topLeftOverlay = jQuery('.active .module-5--top-row').children().eq(0).find('.animated-overlay'),
// $topLeft = jQuery('.active .module-5--top-row').children().eq(0),
// $topRightOverlay = jQuery('.active .module-5--top-row').children().eq(1).find('.animated-overlay'),
// $topRight = jQuery('.active .module-5--top-row').children().eq(1),
// $topRow = [$topLeft, $topRight],
// $bottomLeft = jQuery('.active .module-5--bottom-row').children().eq(0),
// $bottomLeftOverlay = jQuery('.active .module-5--bottom-row').children().eq(0).find('.animated-overlay'),
// $bottomRight = jQuery('.active .module-5--bottom-row').children().eq(1),
// $bottomRightOverlay = jQuery('.active .module-5--bottom-row').children().eq(1).find('.animated-overlay'),
// $bottomRow = [$bottomLeft, $bottomRight],
// $allBoxOverlays = [$bottomRightOverlay, $bottomLeftOverlay, $topRightOverlay, $topLeftOverlay],
// $allBoxes = [$bottomRight, $bottomLeft, $topRight, $topLeft],
// $topRow = jQuery('.module-5--top-row');
// // Set initial TweenMax values
// TweenMax.set($topRightOverlay, {yPercent:-2,height:"103%", position:"relative", backgroundColor: "white", overflow:"hidden"});
// TweenMax.set($bottomRightOverlay, {yPercent:-2,height:"103%", position:"relative", backgroundColor: "white"});
// TweenMax.set($bottomLeftOverlay, {yPercent:-2,height:"103%", position:"relative", backgroundColor: "white"});
// TweenMax.set($topLeftOverlay, {yPercent:-2,height:"103%", position:"relative", backgroundColor: "white"});
// TweenMax.set($topLeft,{overflow:"hidden",position:"relative", backgroundRepeat: "no-repeat", yPercent: 10, borderBottom: 0});
// TweenMax.set($topRow,{borderBottomWidth: "5px", borderBottomStyle: "solid", borderBottomColor: "white", overflow: "hidden"});
// TweenMax.set($topRight,{overflow:"hidden",position:"relative", yPercent:10, height:"100%", backgroundRepeat: "no-repeat", borderBottom: 0});
// TweenMax.set($bottomLeft, {position:"relative",overflow:"hidden", backgroundColor:"white", backgroundRepeat:"no-repeat", yPercent: 11});
// TweenMax.set($bottomRight, {position:"relative",overflow:"hidden", backgroundColor:"white", backgroundRepeat:"no-repeat", yPercent: 11});
// if (isSafari) {TweenMax.set([$bottomRightOverlay, $bottomLeftOverlay, $topRightOverlay, $topLeftOverlay], {force3D:false});};
// TweenMax.to([$bottomRightOverlay, $bottomLeftOverlay], 0.75, {yPercent:-100,height:'103%', ease: Quad.easeOut, delay:0.5});
// TweenMax.to([$topRightOverlay, $topLeftOverlay], 0.75, {yPercent:-100,height:'103%', ease: Quad.easeOut, delay:1.25});
// TweenMax.to([$bottomRight, $bottomLeft], 0.75, {delay: 0.5, yPercent: 0, ease: Quad.easeOut});
// TweenMax.to([$topRight, $topLeft], 0.75, {delay: 1.25, yPercent: 0, ease: Quad.easeOut});
// },
"_2_column_content_with_title": function() {
var $textblock = jQuery('.module-15--text-only .centered');
TweenMax.set($textblock,{autoAlpha:0, top:"55%"});
TweenMax.to($textblock, 1,{top:"50%", delay: 0.5, ease: Quad.easeOut});
TweenMax.to($textblock, 1.5, {autoAlpha:1, delay: 0.75, ease: Quad.easeOut});
},
// "_2_column_content_with_2_images_on_right_column":function(){
// var $topRightOverlay = jQuery('.active .module-19--right-column__top-box .animated-overlay'),
// $bottomRightOverlay = jQuery('.active .module-19--right-column__bottom-box .animated-overlay'),
// $topRightImage = jQuery('.active .module-19--right-column__top-box'),
// $bottomRightImage = jQuery('.active .module-19--right-column__bottom-box');
// $text = jQuery('.active .module-4 .text-content');
// if (isSafari) {
// TweenMax.set([$topRightOverlay, $bottomRightOverlay, $bottomRightImage, $topRightImage], {force3D:false});
// };
// TweenMax.set($topRightOverlay, {position:'relative', backgroundColor: "white", height:"102%", top:'0%',force3D:false});
// TweenMax.set($bottomRightOverlay, {position:'relative', backgroundColor: "white", height:"102%", top:'0%',force3D:false});
// TweenMax.set([$topRightImage, $bottomRightImage],{yPercent:'-10%',force3D:false});
// TweenMax.set([$topRightImage, $bottomRightImage], {overflow:'hidden',force3D:false});
// TweenMax.set($text, {autoAlpha:0, position:'relative', padding:'20% 20% 10% 10%'});
// if (isSafari) {
// TweenMax.to([$topRightImage], 1, {yPercent:-1, delay:0.75, force3d:false, easing: Quad.easeOut});
// TweenMax.to([$bottomRightImage], 1, {yPercent:-1, delay:0.75, force3d:false, easing: Quad.easeOut});
// TweenMax.to($text, 1.25, {delay:0.75, padding:'10% 20% 10% 10%', easing: Quad.easeOut});
// TweenMax.to($text, 1.25, {autoAlpha:1, delay:1, easing: Quad.easeOut});
// TweenMax.to([$topRightOverlay], 1, {top:'100%', delay:0.75,force3D:false, easing: Quad.easeOut});
// TweenMax.to([$bottomRightOverlay], 1, {top:'100%', delay:0.75,force3D:false, easing: Quad.easeOut});
// } else {
// TweenMax.to([$topRightImage], 1, {yPercent:'0%', delay:0.75,easing: Quad.easeOut});
// TweenMax.to([$bottomRightImage], 1, {yPercent:'0%', delay:0.75,easing: Quad.easeOut});
// TweenMax.to($text, 1.25, {delay:0.75, padding:'10% 20% 10% 10%', easing: Quad.easeOut});
// TweenMax.to($text, 1.25, {autoAlpha:1, delay:1, easing: Quad.easeOut});
// TweenMax.to([$topRightOverlay], 1, {top:'100%', delay:0.75, easing: Quad.easeOut});
// TweenMax.to([$bottomRightOverlay], 1, {top:'100%', delay:0.75, easing: Quad.easeOut});
// }
// },
// "_4_block_content_top_left":function() {
// var $topLeftOverlay = jQuery('.active .module-7--top-row .module-7--left-column__text .animated-overlay'),
// $topLeft = jQuery('.active .module-7--top-row .module-7--left-column__text'),
// $topRightOverlay = jQuery('.active .module-7--top-row .module-7--right-column__image .animated-overlay'),
// $topRight = jQuery('.active .module-7--top-row .module-7--right-column__image'),
// $topRow = [$topLeft, $topRight],
// $bottomLeft = jQuery('.active .module-7--bottom-row .module-7--left-column__image'),
// $bottomLeftOverlay = jQuery('.active .module-7--bottom-row .module-7--left-column__image .animated-overlay'),
// $bottomRight = jQuery('.active .module-7--bottom-row .module-7--right-column__image'),
// $bottomRightOverlay = jQuery('.active .module-7--bottom-row .module-7--right-column__image .animated-overlay'),
// $bottomRow = [$bottomLeft, $bottomRight],
// $allBoxOverlays = [$bottomRightOverlay, $bottomLeftOverlay, $topRightOverlay, $topLeftOverlay],
// $allBoxes = [$bottomRight, $bottomLeft, $topRight, $topLeft],
// $topRow = jQuery('.module-7--top-row');
// // Set initial TweenMax values
// TweenMax.set($bottomRightOverlay, {yPercent:-1,height:"102%", width:"102%", position:"relative", backgroundColor: "white"});
// TweenMax.set($bottomLeftOverlay, {yPercent:-1,height:"102%", position:"relative", backgroundColor: "white"});
// TweenMax.set($topLeft,{overflow:"hidden",position:"relative", backgroundRepeat: "no-repeat", yPercent: 10, borderBottom: 0, autoAlpha:0});
// TweenMax.set($topRow,{borderBottomWidth: "5px", borderBottomStyle: "solid", borderBottomColor: "white", overflow: "hidden"});
// // TweenMax.set($topLeftOverlay, {yPercent:-1,height:"102%", position:"relative", backgroundColor: "white"});
// TweenMax.set($topRight,{overflow:"hidden",position:"relative", yPercent:10, height:"100%", backgroundRepeat: "no-repeat", borderBottom: 0});
// TweenMax.set($bottomLeft, {position:"relative",overflow:"hidden", backgroundColor:"white", backgroundRepeat:"no-repeat", yPercent: 10});
// TweenMax.set($bottomRight, {position:"relative",overflow:"hidden", backgroundColor:"white", backgroundRepeat:"no-repeat", yPercent: 10});
// TweenMax.set($topRightOverlay, {yPercent:-1,height:"102%", position:"relative", backgroundColor: "white", overflow:"hidden"});
// if (isSafari) {
// TweenMax.set([$bottomRightOverlay, $bottomLeftOverlay, $topRightOverlay], {force3D:false});
// };
// TweenMax.to($topLeft, 1, {autoAlpha:1, delay:1.5, ease: Quad.easeOut});
// TweenMax.to([$bottomRightOverlay, $bottomLeftOverlay], 0.75, {yPercent:"-100%", ease: Quad.easeOut, delay:0.5});
// TweenMax.to([$topRightOverlay], 0.75, {yPercent:"-100%", ease: Quad.easeOut, delay:1.25});
// TweenMax.to([$bottomRight, $bottomLeft], 0.75, {delay: 0.5, yPercent: 0, ease: Quad.easeOut});
// TweenMax.to([$topRight, $topLeft], 0.75, {delay: 1.25, yPercent: 0, ease: Quad.easeOut});
// },
};
//kick the animation type into the slideAnimation and fire that badboy.
var runAnimation = function(arg) {
slideAnimations[arg]();
};
jQuery(document).ready(function() {
// added by JLG
var currentPlayer;
var currentPlayerFrame;
// Added by JLG - adapted from http://jsbin.com/cocatuta/29/edit?js,output
function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('div').animate({ width: progressBarWidth });
}
function activateProgressBar(event) {
var playerTotalTime = currentPlayer.getDuration();
mytimer = setInterval(function() {
var playerCurrentTime = currentPlayer.getCurrentTime();
var playerTimeDifference = (playerCurrentTime / playerTotalTime) * 100;
progress(playerTimeDifference, jQuery('#controls--progress__bar'));
}, 1000);
}
function stopProgressBar(event) {
clearTimeout(mytimer);
}
function resetVideo(event) {
if (event.data == YT.PlayerState.ENDED) {
console.log("Video is over!");
currentPlayer.seekTo(0);
currentPlayer.pauseVideo();
//stopProgressBar();
jQuery('#controls--progress__bar').find('div').animate({ width: 0 });
jQuery(".controls--button").removeClass("controls--pause");
jQuery(".controls--button").addClass("controls--play");
jQuery(".controls--button").text("play");
jQuery(".story__video__controls").addClass("is-visible");
}
}
// Adapted from https://medium.com/@willsentance/building-the-youtube-players-seek-bar-from-scratch-58e8955f8100#.7ji1iqetg
function pxlToSecs(pxl){
var videoWidth = jQuery("#controls--progress__bar").width();
var videoInSecs = currentPlayer.getDuration();
var percentOfVideo = pxl / videoWidth;
return videoInSecs*percentOfVideo;
}
function getClickPosition(e) {
var progressBarOffset = jQuery(this).offset();
var x = e.clientX - progressBarOffset.left;
var y = e.clientY - progressBarOffset.top;
//console.log("x: "+x);
//console.log("y: "+y);
var time = pxlToSecs(x);
stopProgressBar();
currentPlayer.seekTo(time, true);
var playerTotalTime = currentPlayer.getDuration();
var playerTimeDifference = (time / playerTotalTime) * 100;
progress(playerTimeDifference, jQuery('#controls--progress__bar'));
activateProgressBar();
}
if (jQuery(window).width() < 900) {
smallView = true;
}
if (jQuery(window).width() > 900 && (firstLoad === true)) {
console.log("page width is > 900px. Loading fullpage");
var dataAnchor = [];
jQuery('.section').each(function() {
dataAnchor.push(jQuery(this).attr('data-anchor'));
});
console.log(dataAnchor);
jQuery('#pagepiling').fullpage({
anchors: dataAnchor,
navigation: true,
navigationPosition: 'right',
css3: true,
licenseKey: 'A70756CE-E1354CD6-89A2E26C-BA276730',
afterLoad: function(anchorLink, index) {
//$(index.item).find('iframe').playVideo();
// console.log(playerInfoList);
// console.log(videoPlayer[0].playVideo());
if(index.isLast){
$('#footer').addClass('active-footer');
}else{
$('#footer').removeClass('active-footer');
}
for (var l = 0; l < playerInfoList.length; l++) {
if (playerInfoList[l] == "video" + index.index) {
currentPlayer = videoPlayer[l];
currentPlayer.playVideo();
//added by JLG
/*~~*/
if (jQuery(".story__video__controls").length < 1 ) {
var videoControls = "<div class='container--svc'><div class='svc__hover__zone'><div class='story__video__controls'><div class='story__video__controls__container'><div class='container--play-pause'><button class='controls--button controls--pause'>pause</button></div><div class='container--progress'><div class='controls--progress'><div id='controls--progress__bar'><div></div></div></div></div></div></div></div></div>";
jQuery(".video--iframe-container").append(videoControls);
activateProgressBar();
currentPlayer.addEventListener("onStateChange", resetVideo);
//
jQuery(".controls--button").click(function() {
if ( jQuery(this).hasClass("controls--pause") ) {
currentPlayer.pauseVideo();
jQuery(this).removeClass("controls--pause");
jQuery(this).addClass("controls--play");
jQuery(this).text("play");
}
else {
currentPlayer.playVideo();
jQuery(this).removeClass("controls--play");
jQuery(this).addClass("controls--pause");
jQuery(this).text("pause");
jQuery(".story__video__controls").removeClass("is-visible");
}
});
//
jQuery("#controls--progress__bar").click(getClickPosition);
//
jQuery(".svc__hover__zone").hover(function() {
jQuery(".story__video__controls").addClass("is-visible");
},
function() {
jQuery(".story__video__controls").removeClass("is-visible");
});
}
/*~~*/
jQuery(".controls--button").removeClass("controls--play");
jQuery(".controls--button").addClass("controls--pause");
jQuery(".controls--button").text("pause");
}
}
},
onLeave: function(index, nextIndex, direction) {
//get data-animation value of active slide
requestAnimationFrame(function() {
var animationType = jQuery('.active').attr('data-animation');
if (animationType && direction == 'down') {
runAnimation(animationType);
}
});
if (nextIndex == dataAnchor.length && direction == 'down') {
jQuery('.stories--share-icons').fadeOut();
} else {
jQuery('.stories--share-icons').fadeIn();
}
for (var l = 0; l < playerInfoList.length; l++) {
if (playerInfoList[l] == "video" + index) {
videoPlayer[l].pauseVideo();
}
}
}
});
firstLoad = false;
}
jQuery(window).on('resize', function() {
if (jQuery(window).width() < 900 && smallView === false) {
jQuery.fn.fullpage.destroy('all');
htmlStyle = jQuery('html').attr('style');
jQuery('html').removeAttr('style');
bodyStyle = jQuery('body').attr('style');
jQuery('body').removeAttr('style');
smallView = true;
} else if (jQuery(window).width() > 900 && smallView === true) {
smallView = false;
jQuery('#pagepiling').fullpage({
navigation: true,
navigationPosition: 'right',
css3: true,
anchors: dataAnchor,
licenseKey: 'A70756CE-E1354CD6-89A2E26C-BA276730',
afterLoad: function(anchorLink, index) {
for (var l = 0; l < playerInfoList.length; l++) {
if (playerInfoList[l] == "video" + index) {
currentPlayer = videoPlayer[l];
currentPlayer.playVideo();
}
}
},
onLeave: function(index, nextIndex, direction) {
console.log('sdfsdffsdf');
//get data-animation value of active slide
requestAnimationFrame(function() {
var animationType = jQuery('.active').attr('data-animation');
if (animationType && direction == 'down') {
runAnimation(animationType);
}
});
if (nextIndex == dataAnchor.length && direction == 'down') {
jQuery('.stories--share-icons').fadeOut();
} else {
jQuery('.stories--share-icons').fadeIn();
}
for (var l = 0; l < playerInfoList.length; l++) {
if (playerInfoList[l] == "video" + index) {
videoPlayer[l].pauseVideo();
}
}
}
});
}
});
});
Zerion Mini Shell 1.0