//navigation tooltips
$(document).on({
mouseenter: function(){
var tooltip = $(this).data('tooltip');
$('<div class="multiscroll-tooltip ' + options.navigationPosition +'">' + tooltip + '</div>').hide().appendTo($(this)).fadeIn(200);
},
mouseleave: function(){
$(this).find('.multiscroll-tooltip').fadeOut().remove();
}
}, '#multiscroll-nav li');
if(options.normalScrollElements){
$(document).on('mouseover', options.normalScrollElements, function () {
$.fn.multiscroll.setMouseWheelScrolling(false);
});
$(document).on('mouseout', options.normalScrollElements, function(){
$.fn.multiscroll.setMouseWheelScrolling(true);
});
}
//when resizing the site, we adjust the heights of the sections
$(window).resize(function() {
doneResizing();
});
/**
* When resizing is finished, we adjust the slides sizes and positions
*/
function doneResizing() {
windowHeight = $(window).height();
silentScroll();
$.isFunction( options.afterResize ) && options.afterResize.call( this);
}
function silentScroll(){
//moving the right section to the bottom
if(options.css3){
transformContainer($('.ms-left'), 'translate3d(0px, -' + $('.ms-left').find('.ms-section.active').position().top + 'px, 0px)', false);
transformContainer($('.ms-right'), 'translate3d(0px, -' + $('.ms-right').find('.ms-section.active').position().top + 'px, 0px)', false);
}else{
$('.ms-left').css('top', -$('.ms-left').find('.ms-section.active').position().top );
$('.ms-right').css('top', -$('.ms-right').find('.ms-section.active').position().top );
}
}
$.fn.multiscroll.moveSectionUp = function(){
var prev = $('.ms-left .ms-section.active').prev('.ms-section');
if(!prev.length && options.loopTop){
prev = $('.ms-left .ms-section').last();
}
if (prev.length) {
scrollPage(prev);
}
};
$.fn.multiscroll.moveSectionDown = function (){
var next = $('.ms-left .ms-section.active').next('.ms-section');
if(!next.length && options.loopBottom ){
next = $('.ms-left .ms-section').first();
}
if(next.length){
scrollPage(next);
}
};
$.fn.multiscroll.moveTo = function (section){
var destiny = '';
if(isNaN(section)){
destiny = $('.ms-left [data-anchor="'+section+'"]');
}else{
destiny = $('.ms-left .ms-section').eq( (section -1) );
}
scrollPage(destiny);
};
function scrollPage(leftDestination){
var leftDestinationIndex = leftDestination.index();
var rightDestination = $('.ms-right').find('.ms-section').eq( numberSections -1 - leftDestinationIndex);
var rightDestinationIndex = numberSections - 1 - leftDestinationIndex;
var anchorLink = leftDestination.data('anchor');
var activeSection = $('.ms-left .ms-section.active');
var leavingSection = activeSection.index() + 1;
var yMovement = getYmovement(leftDestination);
//preventing from activating the MouseWheelHandler event
//more than once if the page is scrolling
isMoving = true;
setURLHash(anchorLink);
var topPos = {
'left' : leftDestination.position().top,
'right': rightDestination.position().top
};
rightDestination.addClass('active').siblings().removeClass('active');
leftDestination.addClass('active').siblings().removeClass('active');
// Use CSS3 translate functionality or...
if (options.css3){
//callback (onLeave)
$.isFunction(options.onLeave) && options.onLeave.call(this, leavingSection, (leftDestinationIndex + 1), yMovement);
var translate3dLeft = 'translate3d(0px, -' + topPos['left'] + 'px, 0px)';
var translate3dRight = 'translate3d(0px, -' + topPos['right'] + 'px, 0px)';
transformContainer($('.ms-left'), translate3dLeft, true);
transformContainer($('.ms-right'), translate3dRight, true);
setTimeout(function () {
//callback (afterLoad)
$.isFunction(options.afterLoad) && options.afterLoad.call(this, anchorLink, (leftDestinationIndex + 1));
setTimeout(function () {
isMoving = false;
}, scrollDelay);
}, options.scrollingSpeed);
}else{
//callback (onLeave)
$.isFunction(options.onLeave) && options.onLeave.call(this, leavingSection, (leftDestinationIndex + 1), yMovement);
$('.ms-left').animate({
'top': -topPos['left']
}, options.scrollingSpeed, options.easing, function(){
$.isFunction(options.afterLoad) && options.afterLoad.call(this, anchorLink, (leftDestinationIndex + 1));
setTimeout(function () {
isMoving = false;
}, scrollDelay);
});
$('.ms-right').animate({
'top': -topPos['right']
}, options.scrollingSpeed, options.easing);
}
//flag to avoid callingn `scrollPage()` twice in case of using anchor links
lastScrolledDestiny = anchorLink;
activateMenuElement(anchorLink);
activateNavDots(anchorLink, leftDestinationIndex);
}
/**
* Removes the auto scrolling action fired by the mouse wheel and tackpad.
* After this function is called, the mousewheel and trackpad movements won't scroll through sections.
*/
function removeMouseWheelHandler(){
if (document.addEventListener) {
document.removeEventListener('mousewheel', MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
document.removeEventListener('wheel', MouseWheelHandler, false); //Firefox
} else {
document.detachEvent("onmousewheel", MouseWheelHandler); //IE 6/7/8
}
}
/**
* Adds the auto scrolling action for the mouse wheel and tackpad.
* After this function is called, the mousewheel and trackpad movements will scroll through sections
*/
function addMouseWheelHandler(){
if (document.addEventListener) {
document.addEventListener("mousewheel", MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
document.addEventListener("wheel", MouseWheelHandler, false); //Firefox
} else {
document.attachEvent("onmousewheel", MouseWheelHandler); //IE 6/7/8
}
}
/**
* Detecting mousewheel scrolling
*
* http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html
* http://www.sitepoint.com/html5-javascript-mouse-wheel/
*/
function MouseWheelHandler(e) {
// cross-browser wheel delta
e = window.event || e;
var delta = Math.max(-1, Math.min(1,
(e.wheelDelta || -e.deltaY || -e.detail)));
if (!isMoving) { //if theres any #
//scrolling down?
if (delta < 0) {
$.fn.multiscroll.moveSectionDown();
}
//scrolling up?
else {
$.fn.multiscroll.moveSectionUp();
}
}
return false;
}
/**
* Adds a css3 transform property to the container class with or without animation depending on the animated param.
*/
function transformContainer(container, translate3d, animated){
container.toggleClass('ms-easing', animated);
container.css(getTransforms(translate3d));
}