Template:HFUT-china/fullPageJS

/**

* fullPage Pure Javascript v.0.0.8 (Alpha) - Not support given until Beta version.
* https://github.com/alvarotrigo/fullPage.js
* MIT licensed
*
* Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
*/

(function( root, window, document, factory, undefined ) {

   if( typeof define === 'function' && define.amd ) {
       // AMD. Register as an anonymous module.
       define( function() {
           root.fullpage = factory(window, document);
           return root.fullpage;
       } );
   } else if( typeof exports === 'object' ) {
       // Node. Does not work with strict CommonJS.
       module.exports = factory(window, document);
   } else {
       // Browser globals.
       root.fullpage = factory(window, document);
   }

}(this, window, document, function(window, document, undefined){

   'use strict';

   var fullpage;

   //CONSTANTS

   // keeping central set of classnames and selectors
   var WRAPPER =               'fullpage-wrapper';
   var WRAPPER_SEL =           '.' + WRAPPER;

   // util
   var RESPONSIVE =            'fp-responsive';
   var NO_TRANSITION =         'fp-notransition';
   var DESTROYED =             'fp-destroyed';
   var ENABLED =               'fp-enabled';
   var VIEWING_PREFIX =        'fp-viewing';
   var ACTIVE =                'active';
   var ACTIVE_SEL =            '.' + ACTIVE;

   // section
   var SECTION_DEFAULT_SEL =   '.section';
   var SECTION =               'fp-section';
   var SECTION_SEL =           '.' + SECTION;
   var SECTION_ACTIVE_SEL =    SECTION_SEL + ACTIVE_SEL;

   // section nav
   var SECTION_NAV =           'fp-nav';
   var SECTION_NAV_SEL =       '#' + SECTION_NAV;
   var SECTION_NAV_TOOLTIP =   'fp-tooltip';
   var SHOW_ACTIVE_TOOLTIP =   'fp-show-active';

   // slide
   var SLIDE_DEFAULT_SEL =     '.slide';
   var SLIDE =                 'fp-slide';
   var SLIDE_SEL =             '.' + SLIDE;
   var SLIDE_ACTIVE_SEL =      SLIDE_SEL + ACTIVE_SEL;
   var SLIDES_WRAPPER =        'fp-slides';
   var SLIDES_WRAPPER_SEL =    '.' + SLIDES_WRAPPER;
   var SLIDES_CONTAINER =      'fp-slidesContainer';
   var SLIDES_CONTAINER_SEL =  '.' + SLIDES_CONTAINER;
   var TABLE =                 'fp-table';

   // slide nav
   var SLIDES_NAV =            'fp-slidesNav';
   var SLIDES_NAV_SEL =        '.' + SLIDES_NAV;
   var SLIDES_NAV_LINK_SEL =   SLIDES_NAV_SEL + ' a';
   var SLIDES_ARROW =          'fp-controlArrow';
   var SLIDES_ARROW_SEL =      '.' + SLIDES_ARROW;
   var SLIDES_PREV =           'fp-prev';
   var SLIDES_PREV_SEL =       '.' + SLIDES_PREV;
   var SLIDES_ARROW_PREV =     SLIDES_ARROW + ' ' + SLIDES_PREV;
   var SLIDES_ARROW_PREV_SEL = SLIDES_ARROW_SEL + SLIDES_PREV_SEL;
   var SLIDES_NEXT =           'fp-next';
   var SLIDES_NEXT_SEL =       '.' + SLIDES_NEXT;
   var SLIDES_ARROW_NEXT =     SLIDES_ARROW + ' ' + SLIDES_NEXT;
   var SLIDES_ARROW_NEXT_SEL = SLIDES_ARROW_SEL + SLIDES_NEXT_SEL;

   //globals
   var options;
   var slideMoving = false;
   var isTouchDevice = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|playbook|silk|BlackBerry|BB10|Windows Phone|Tizen|Bada|webOS|IEMobile|Opera Mini)/);
   var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0) || (navigator.maxTouchPoints));
   var windowsHeight = getWindowHeight();
   var isResizing = false;
   var lastScrolledDestiny;
   var lastScrolledSlide;
   var canScroll = true;
   var scrollings = [];
   var nav;
   var activeAnimation;
   var originals;
   var container;

   //easeInOutCubic animation included in the plugin
   Math.easeInOutCubic = function (t, b, c, d) {
       if ((t/=d/2) < 1) return c/2*t*t*t + b;return c/2*((t-=2)*t*t + 2) + b;
   };

   function initialize(element, customOptions){

       // Create some defaults, extending them with any options that were provided
       var defaults = {
           //navigation
           menu: false,
           anchors:[],
           navigation: false,
           navigationPosition: 'right',
           navigationColor: '#000',
           navigationTooltips: [],
           showActiveTooltip: false,
           slidesNavigation: false,
           slidesNavPosition: 'bottom',
           scrollBar: false,

           //scrolling
           css3: true,
           scrollingSpeed: 700,
           autoScrolling: true,
           fitToSection: true,
           fitToSectionDelay: 1000,
           easingcss3: 'ease',
           loopHorizontal: true,
           touchSensitivity: 5,

           //Accessibility
           keyboardScrolling: true,
           recordHistory: true,

           //design
           controlArrows: true,

           //Custom selectors
           sectionSelector: SECTION_DEFAULT_SEL,
           slideSelector: SLIDE_DEFAULT_SEL,

           //events
           afterLoad: null,
           onLeave: null,
           afterRender: null,
           afterResize: null,
           afterReBuild: null,
           afterSlideLoad: null,
           onSlideLeave: null
       };

       options = extend(defaults, customOptions);

       originals = clone(options); //deep copy
       container = $(element);

       init(afterDomReady);
   }

   function init(callback){
       removeClass(container, DESTROYED); //in case it was destroyed before initilizing it again
       displayWarnings();

       //if css3 is not supported, it will use jQuery animations
       if(options.css3){
           options.css3 = support3d();
       }

       if(container !== null){
           css(container, {
               'height': '100%',
               'position': 'relative'
           });

           //adding a class to recognize the container internally in the code
           addClass(container, WRAPPER);
           addClass($('html'), ENABLED);
       }
       //trying to use fullpage without a selector?
       else{
           showError('error', 'Error! Fullpage.js needs to be initialized with a selector. For example: fullpage(\'#fullpage\');');
       }

       setMouseWheelScrolling(true);
       addTouchHandler();
       addResizeHandler();
       addScrollHandler();

       //adding internal class names to void problem with common ones
       var originalSections = $$(options.sectionSelector);
       for (i = 0; i < originalSections.length; ++i) {
           addClass(originalSections[i], SECTION);
       }

       var originalSlides = $$(options.slideSelector);
       for (i = 0; i < originalSlides.length; ++i) {
           addClass(originalSlides[i], SLIDE);
       }

       //creating the navigation dots
       if (options.navigation) {
           addVerticalNavigation();
       }

       var sections = $$(SECTION_SEL);
       for(var i = 0; i<sections.length; i++){
           var index = i;
           var section = sections[i];
           var that = section;
           var slides = $$(SLIDE_SEL, section);
           var numSlides = slides.length;

           //if no active section is defined, the 1st one will be the default one
           if(!index && $(SECTION_ACTIVE_SEL) === null) {
               addClass(section, ACTIVE);
           }

           if (typeof options.anchors[index] !== 'undefined') {
               section.setAttribute('data-anchor', options.anchors[index]);

               //activating the menu / nav element on load
               if(hasClass(section, ACTIVE)){
                   activateMenuAndNav(options.anchors[index], index);
               }
           }

           // if there's any slide
           if (numSlides > 0) {
               var sliderWidth = numSlides * 100;
               var slideWidth = 100 / numSlides;

               var slidesHTML = section.innerHTML;

var newHTML = '

' + slidesHTML + '

';

               section.innerHTML = newHTML;

               //getting again the NEW dom elements after innerHTML
               slides = $$(SLIDE_SEL, section);

               setCss($(SLIDES_CONTAINER_SEL, section), 'width',  sliderWidth + '%');

               if(options.controlArrows && numSlides > 1){
                   createSlideArrows(section);
               }

               if(options.slidesNavigation){
                   addSlidesNavigation(section, numSlides);
               }

               for(var a = 0; a<slides.length; a++){
                   var currentSlide = slides[a];
                   setCss(currentSlide, 'width', slideWidth + '%');
               }

               var startingSlide = $(SLIDE_ACTIVE_SEL, section);

               //if the slide won#t be an starting point, the default will be the first one
               if(typeof startingSlide !== null){
                   addClass(slides[0], ACTIVE);

               }

               //is there a starting point for a non-starting section?
               else{
                   silentLandscapeScroll(startingSlide);
               }

           }
       }

       callback();
   }

   function afterDomReady(){
       //adding event for horizontal slides arrows navigation
       var slidesArrows = $$(SLIDES_ARROW_SEL);
       for(var i=0; i<slidesArrows.length; i++){
           addListenerMulti( slidesArrows[i], 'click onclick touchstart', arrowsHandler);
       }

       setAutoScrolling(options.autoScrolling, 'internal');

       //the starting point is a slide?
       var activeSection = $(SECTION_ACTIVE_SEL);

       var activeSlide = $(SLIDE_ACTIVE_SEL, activeSection);
       var activeSectionIndex = getNodeIndex($(SECTION_ACTIVE_SEL));

       //the active section isn't the first one? Is not the first slide of the first section? Then we load that section/slide by default.
       if( activeSlide &&  (activeSectionIndex !==0 || (activeSectionIndex === 0 &&  getNodeIndex(activeSlide) !== 0))){
           silentLandscapeScroll(activeSlide);
       }

       //vertical centered of the navigation + first bullet active
       if(options.navigation){
           setCss(nav, 'margin-top', '-' + (nav.offsetHeight/2) + 'px');
           var activeLi = $$('li', nav)[getNodeIndex($(SECTION_ACTIVE_SEL))];
           addClass( $('a', activeLi), ACTIVE);
       }

       afterRenderActions();

       //getting the anchor link in the URL and deleting the `#`
       var value =  window.location.hash.replace('#', ).split('/');
       var destiny = value[0];

       if(destiny.length){
           var section = $('[data-anchor="'+destiny+'"]');

           if(!options.animateAnchor && section.length){

               if(options.autoScrolling){
                   silentScroll(section.offsetTop);
               }
               else{
                   silentScroll(0);
                   setBodyClass(destiny);

                   //scrolling the page to the section with no animation
                   var scrollSettings = getScrollSettings(section.offsetTop);
                   scrollTo(scrollSettings.element, scrollSettings.options, 0);
               }

               activateMenuAndNav(destiny, null);

               isFunction( options.afterLoad ) && options.afterLoad.call( section, destiny, (getNodeIndex(section) + 1));

               //updating the active class
               removeClass(activeSection, ACTIVE);
               addClass(section, ACTIVE);
           }
       }

       //setting the class for the body element
       setBodyClass();

       //support for IE > 8
       addHandler(document, scrollToAnchor, 'DOMContentLoaded', 'DOMContentLoaded', 'DOMContentLoaded');
   }

   /* --------------- Javascript helpers  ---------------*/

   /**
   * Replacement of jQuery extend method.
   */
   function extend(defaultOptions, options){
       //creating the object if it doesnt exist
       if(typeof(options) !== 'object'){
           options = {};
       }

       for(var key in options){
           if(defaultOptions.hasOwnProperty(key)){
               defaultOptions[key] = options[key];
           }
       }

       return defaultOptions;
   }

   function getById(element){
       return document.getElementById(element);
   }

   function getByTag(element){
       return document.getElementsByTagName(element)[0];
   }

   function css( el, props ) {
       var key;
       for ( key in props ) {
           if ( props.hasOwnProperty(key) ) {
               if ( key !== null ) {
                   el.style[key] = props[key];
               }
           }
       }
       return el;
   }

   function setCss(element, style, value){
       element.style[style] = value;
   }

   function $(selector, context){
       context = context || document;
       return context.querySelector(selector);
   }

   function $$(selector, context){
       context = context || document;
       return context.querySelectorAll(selector);
   }

   function getNodeIndex(node) {
       var index = 0;
       while ( (node = node.previousSibling) ) {
           if (node.nodeType != 3 || !/^\s*$/.test(node.data)) {
               index++;
           }
       }
       return index;
   }

   function toggle(element, display) {
       if(typeof display!== 'undefined'){
           if(display){
               element.style.display = 'block';
           }else{
               element.style.display = 'none';
           }
       }
       else{
           if( element.style.display == 'block' ) {
               element.style.display = 'none';
           } else {
               element.style.display = 'block';
           }
       }

       return element;
   }

   //http://jaketrent.com/post/addremove-classes-raw-javascript/
   function hasClass(ele,cls) {
       return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
   }

   function removeClass(element, className) {
       if (element && hasClass(element,className)) {
           var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
           element.className=element.className.replace(reg,);
       }
   }

   function addClass(element, className) {
       if (element && !hasClass(element,className)) {
           element.className += ' '+className;
       }
   }

   //http://stackoverflow.com/questions/22100853/dom-pure-javascript-solution-to-jquery-closest-implementation
   function closest(el, fn) {
       return el && (
           fn(el) ? el : closest(el.parentNode, fn)
       );
   }

   function getWindowWidth(){
       return  'innerWidth' in window ? window.innerWidth : document.documentElement.offsetWidth;
   }

   function getWindowHeight(){
       return  'innerHeight' in window ? window.innerHeight : document.documentElement.offsetHeight;
   }

   function clone(obj) {
       if (null === obj || 'object' !== typeof obj){
           return obj;
       }
       var copy = obj.constructor();

       for (var attr in obj) {
           if (obj.hasOwnProperty(attr)){
               copy[attr] = obj[attr];
           }
       }
       return copy;
   }

   function preventDefault(event){
       event.preventDefault ? event.preventDefault() : event.returnValue = false;
   }

   function isFunction(functionToCheck) {
       var getType = {};
       return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
   }

   function addListenerMulti(el, s, fn) {
       var evts = s.split(' ');
       for (var i=0, iLen=evts.length; i<iLen; i++) {
           if (document.addEventListener) {
               el.addEventListener(evts[i], fn, false);
           }else{
               el.attachEvent(evts[i], fn, false); //IE 6/7/8
           }
       }
   }

   /**
   * Simulates the animated scrollTop of jQuery. Used when css3:false or scrollBar:true or autoScrolling:false
   * http://stackoverflow.com/a/16136789/1081396
   */
   function scrollTo(element, to, duration, callback) {
       var start = getScrolledPosition(element);
       var change = to - start;
       var currentTime = 0;
       var increment = 20;
       activeAnimation = true;

       var animateScroll = function(){
           if(activeAnimation){ //in order to stope it from other function whenever we want
               var val = to;

               currentTime += increment;
               val = Math.easeInOutCubic(currentTime, start, change, duration);

               setScrolling(element, val);

               if(currentTime < duration) {
                   setTimeout(animateScroll, increment);
               }else if(typeof callback !== 'undefined'){
                   callback();
               }
           }else if (currentTime < duration){
               callback();
           }
       };

       animateScroll();
   }

   //http://stackoverflow.com/questions/3464876/javascript-get-window-x-y-position-for-scroll
   function getScrollTop(){
       var doc = document.documentElement;
       return (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
   }

   //http://stackoverflow.com/questions/842336/is-there-a-way-to-select-sibling-nodes
   function getChildren(n, skipMe){
       var r = [];
       for ( ; n; n = n.nextSibling )
          if ( n.nodeType == 1 && n != skipMe)
             r.push( n );
       return r;
   };

   //Gets siblings
   function getAllSiblings(n) {
       return getChildren(n.parentNode.firstChild, n);
   }

   function next(element){
       var nextSibling = element.nextSibling;

       while(nextSibling && nextSibling.nodeType != 1) {
           nextSibling = nextSibling.nextSibling;
       }

       return nextSibling;
   }

   function prev(element){
       var prevSibling = element.previousSibling;

       while(prevSibling && prevSibling.nodeType != 1) {
           prevSibling = prevSibling.previousSibling;
       }

       return prevSibling;
   }

   /* --------------- END Javascript helpers  ---------------*/

   /**
   * Getting the position of the element to scroll when using jQuery animations
   */
   function getScrolledPosition(element){
       var position;

       //is not the window element and is a slide?
       if(element.self != window && hasClass(element, SLIDES_WRAPPER)){
           position = element.scrollLeft;
       }
       else if(!options.autoScrolling  || options.scrollBar){
           position = getScrollTop();
       }
       else{
           position = element.offsetTop;
       }

       //gets the top property of the wrapper
       return position;
   }

   function setScrolling(element, val){
       if(!options.autoScrolling || options.scrollBar || (element.self != window && hasClass(element, SLIDES_WRAPPER))){

           //scrolling horizontally through the slides?
           if(element.self != window  && hasClass(element, SLIDES_WRAPPER)){
               element.scrollLeft = val;
           }
           //vertical scroll
           else{
               element.scrollTo(0, val);
           }
       }else{
            element.style.top = val + 'px';
       }
   }

   function setAutoScrolling(value, type){
       setVariableState('autoScrolling', value, type);

       var element = $(SECTION_ACTIVE_SEL);

       if(options.autoScrolling && !options.scrollBar){

           css(document.body, {
               'overflow': 'hidden',
               'height': '100%'
           });

           css(getByTag('html'),{
               'overflow': 'hidden',
               'height': '100%'
           });

           setRecordHistory(options.recordHistory, 'internal');

           //for IE touch devices
           css(container, {
               '-ms-touch-action': 'none',
               'touch-action': 'none'
           });

           if(element){
               //moving the container up
               silentScroll(element.offsetTop);
           }

       }else{
           css(document.body, {
               'overflow': 'visible',
               'height': '100%'
           });

           css(getByTag('html'),{
               'overflow': 'visible',
               'height': '100%'
           });

           setRecordHistory(false, 'internal');

           //for IE touch devices
           css(container, {
               '-ms-touch-action': ,
               'touch-action': 
           });

           silentScroll(0);

           //scrolling the page to the section with no animation
           var scrollSettings = getScrollSettings(element.offsetTop);
           scrollSettings.element.scrollTo(0, scrollSettings.options);
       }

   }

   /**
   * Defines wheter to record the history for each hash change in the URL.
   */
   function setRecordHistory(value, type){
       setVariableState('recordHistory', value, type);
   }

   /**
   * Defines the scrolling speed
   */
   function setScrollingSpeed(value, type){
       setVariableState('scrollingSpeed', value, type);
   }

   /**
   * Sets fitToSection
   */
   function setFitToSection(value, type){
       setVariableState('fitToSection', value, type);
   }

   /**
   * Adds or removes the possiblity of scrolling through sections by using the mouse wheel or the trackpad.
   */
   function setMouseWheelScrolling(value){
       if(value){
           addMouseWheelHandler();
       }else{
           removeMouseWheelHandler();
       }
   }

   /**
   * Adds or removes the possiblity of scrolling through sections by using the keyboard arrow keys
   */
   function setKeyboardScrolling(value){
       options.keyboardScrolling = value;
   }

   /**
   * Moves the page up one section.
   */
   function moveSectionUp(){
       var section = prev($(SECTION_ACTIVE_SEL));

       if (section) {
           scrollPage(section, null, true);
       }
   }

   /**
   * Moves the page down one section.
   */
   function moveSectionDown(){
       var section = next($(SECTION_ACTIVE_SEL));

       if(section){
           scrollPage(section, null, false);
       }
   }

   /**
   * Moves the page to the given section and slide with no animation.
   * Anchors or index positions can be used as params.
   */
   function silentMoveTo(sectionAnchor, slideAnchor){
       setScrollingSpeed (0, 'internal');
       moveTo(sectionAnchor, slideAnchor)
       setScrollingSpeed (originals.scrollingSpeed, 'internal');
   };

   /**
   * Moves the page to the given section and slide.
   * Anchors or index positions can be used as params.
   */
   function moveTo(sectionAnchor, slideAnchor){
       var destiny = getSectionByAnchor(sectionAnchor);

       if (typeof slideAnchor !== 'undefined'){
           scrollPageAndSlide(sectionAnchor, slideAnchor);
       }else if(destiny){
           scrollPage(destiny);
       }
   }

   /**
   * Slides right the slider of the active section.
   */
   function moveSlideRight(){
       moveSlide('next');
   }

   /**
   * Slides left the slider of the active section.
   */
   function moveSlideLeft(){
       moveSlide('prev');
   }

   /**
    * When resizing is finished, we adjust the slides sizes and positions
    */
   function reBuild(resizing){
       if(hasClass(container, DESTROYED)){ return; }

       isResizing = true;

       windowsHeight = getWindowHeight();

       var sections = $$(SECTION_SEL);
       for (var i = 0; i < sections.length; ++i) {
           var section = sections[i];
           var slidesWrap = $(SLIDES_WRAPPER_SEL, section);
           var slides = $$(SLIDE_SEL, section);

           //adjusting the position fo the FULL WIDTH slides...
           if (slidesWrap && slides.length > 1) {
               landscapeScroll(slidesWrap, $(SLIDE_ACTIVE_SEL, slidesWrap));
           }
       }

       var activeSection = $(SECTION_ACTIVE_SEL);

       //isn't it the first section?
       if(getNodeIndex(activeSection)){
           //adjusting the position for the current section
           silentScroll(activeSection.offsetTop);
       }

       isResizing = false;
       isFunction( options.afterResize ) && resizing && options.afterResize.call(container);
       isFunction( options.afterReBuild ) && !resizing && options.afterReBuild.call(container);
   }

   /**
   * Creates the control arrows for the given section
   */
   function createSlideArrows(section){
       var prev = document.createElement('div');
       prev.className = SLIDES_ARROW_PREV;

       var next = document.createElement('div');
       next.className = SLIDES_ARROW_NEXT;

       var slides = $(SLIDES_WRAPPER_SEL, section);

       if(options.controlArrowColor != '#fff'){
           //setCss(next, 'border-color', 'transparent transparent transparent '+options.controlArrowColor);
           //setCss(prev, 'border-color', 'transparent '+ options.controlArrowColor + ' transparent transparent');
       }

       slides.parentNode.appendChild(prev);
       slides.parentNode.appendChild(next);

       if(!options.loopHorizontal){
           $(SLIDES_ARROW_PREV_SEL, section).style.display = 'none';
       }
   }

   /**
   * Creates a vertical navigation bar.
   */
   function addVerticalNavigation(){
       var div = document.createElement('div');
       div.setAttribute('id', SECTION_NAV);

       var divUl = document.createElement('ul');
       div.appendChild(divUl);

       document.body.appendChild(div);

       nav = $(SECTION_NAV_SEL);

       setCss(nav, 'color', options.navigationColor);
       addClass(nav, options.navigationPosition);

       if(options.showActiveTooltip){
           addClass(nav, SHOW_ACTIVE_TOOLTIP);
       }

       var li = ;

       for (var i = 0; i < $$(SECTION_SEL).length; i++) {
           var link = ;
           if (options.anchors.length) {
               link = options.anchors[i];
           }

li = li + '

<a href="#' + link + '"></a>'; // Only add tooltip if needed (defined by user) var tooltip = options.navigationTooltips[i]; if (typeof tooltip !== undefined && tooltip !== ) { li += '

' + tooltip + '

';

           }

li += '

';

       }

       var ul = $('ul', nav);
       ul.innerHTML = ul.innerHTML + li;

       //creating the event listener
       var links = $$(SLIDES_NAV_LINK_SEL);
       for(var l = 0; l<links.length; l++){
           addListenerMulti(links[l], 'click onclick touchstart', function(e){
               e = window.event || e || e.originalEvent;
               preventDefault(e);
               var index = getNodeIndex(this.parentNode);

               scrollPage($$(SECTION_SEL)[index], null, false);
           });
       }

   }

   /**
   * Actions and callbacks to fire afterRender
   */
   function afterRenderActions(){
       var section = $(SECTION_ACTIVE_SEL);

       isFunction( options.afterLoad ) && options.afterLoad.call(section, section.getAttribute('data-anchor'), (getNodeIndex(section) + 1));
       isFunction( options.afterRender ) && options.afterRender.call(container);
   }

   var scrollId;
   var scrollId2;
   var isScrolling = false;

   //when scrolling
   function scrollHandler(){
       var currentSection;

       if(!options.autoScrolling || options.scrollBar){
           var currentScroll = getScrollTop();
           var visibleSectionIndex = 0;
           var initial = Math.abs(currentScroll - $$(SECTION_SEL)[0].offsetTop);

           //taking the section which is showing more content in the viewport
           var sections = $$(SECTION_SEL);
           for (var i = 0; i < sections.length; ++i) {
               var section = sections[i];

               var current = Math.abs(currentScroll - section.offsetTop);

               if(current < initial){
                   visibleSectionIndex = i;
                   initial = current;
               }
           }

           //geting the last one, the current one on the screen
           currentSection = $$(SECTION_SEL)[visibleSectionIndex];

       }

       if(!options.autoScrolling || options.scrollBar){
           //executing it only once the first time we reach the section
           if(!hasClass(currentSection, ACTIVE)){

               isScrolling = true;
               var leavingSection = $(SECTION_ACTIVE_SEL);
               var leavingSectionIndex = getNodeIndex(leavingSection) + 1;
               var yMovement = getYmovement(currentSection);
               var anchorLink  = currentSection.getAttribute('data-anchor');
               var sectionIndex = getNodeIndex(currentSection) + 1;
               var activeSlide = $(SLIDE_ACTIVE_SEL, currentSection);

               if(activeSlide){
                   var slideAnchorLink = activeSlide.getAttribute('data-anchor');
                   var slideIndex = getNodeIndex(activeSlide);
               }

               if(canScroll){
                   //removing siblings active class
                   removeClass(leavingSection, ACTIVE);

                   //adding the active class to the current active section
                   addClass(currentSection, ACTIVE);

                   isFunction( options.onLeave ) && options.onLeave.call( leavingSection, leavingSectionIndex, sectionIndex, yMovement);
                   isFunction( options.afterLoad ) && options.afterLoad.call( currentSection, anchorLink, sectionIndex);

                   activateMenuAndNav(anchorLink, 0);

                   if(options.anchors.length){
                       //needed to enter in hashChange event when using the menu with anchor links
                       lastScrolledDestiny = anchorLink;

                       setState(slideIndex, slideAnchorLink, anchorLink, sectionIndex);
                   }
               }

               //small timeout in order to avoid entering in hashChange event when scrolling is not finished yet
               clearTimeout(scrollId);
               scrollId = setTimeout(function(){
                   isScrolling = false;
               }, 100);
           }

           if(options.fitToSection){
               //for the auto adjust of the viewport to fit a whole section
               clearTimeout(scrollId2);

               scrollId2 = setTimeout(function(){
                   if(canScroll && !options.autoScrolling || options.scrollBar){
                       //allows to scroll to an active section and
                       //if the section is already active, we prevent firing callbacks
                       if(getNodeIndex($(SECTION_ACTIVE_SEL)) == getNodeIndex(currentSection) ){
                           isResizing = true;
                       }

                       scrollPage(currentSection);
                       isResizing = false;
                   }
               }, options.fitToSectionDelay);
           }
       }
   }

   /**
   * Determines the way of scrolling up or down:
   * by 'automatically' scrolling a section or by using the default and normal scrolling.
   */
   function scrolling(type){
       if(type == 'down'){
           moveSectionDown();
       }else{
           moveSectionUp();
       }
   }

   var touchStartY = 0;
   var touchStartX = 0;
   var touchEndY = 0;
   var touchEndX = 0;

   /* Detecting touch events

   * As we are changing the top property of the page on scrolling, we can not use the traditional way to detect it.
   * This way, the touchstart and the touch moves shows an small difference between them which is the
   * used one to determine the direction.
   */
   function touchMoveHandler(event){

       var e = window.event || e || e.originalEvent;

       if(isReallyTouch(e)){
           if(options.autoScrolling){
               //preventing the easing on iOS devices
               preventDefault(event);
           }

           var activeSection = $(SECTION_ACTIVE_SEL);
           var slides = $$(SLIDES_WRAPPER_SEL, activeSection);

           if (canScroll && !slideMoving) { //if theres any #
               var touchEvents = getEventsPage(e);

               touchEndY = touchEvents.y;
               touchEndX = touchEvents.x;

               //if movement in the X axys is greater than in the Y and the currect section has slides...
               if ( slides && Math.abs(touchStartX - touchEndX) > (Math.abs(touchStartY - touchEndY))) {

                   //is the movement greater than the minimum resistance to scroll?
                   if (Math.abs(touchStartX - touchEndX) > (getWindowWidth() / 100 * options.touchSensitivity)) {
                       if (touchStartX > touchEndX) {
                           moveSlideRight(); //next
                       } else {
                           moveSlideLeft(); //prev
                       }
                   }
               }

               //vertical scrolling (only when autoScrolling is enabled)
               else if(options.autoScrolling){

                   //is the movement greater than the minimum resistance to scroll?
                   if (Math.abs(touchStartY - touchEndY) > (getWindowHeight()/ 100 * options.touchSensitivity)) {
                       if (touchStartY > touchEndY) {
                           scrolling('down');
                       } else if (touchEndY > touchStartY) {
                           scrolling('up');
                       }
                   }
               }
           }
       }
   }

   /**
   * As IE >= 10 fires both touch and mouse events when using a mouse in a touchscreen
   * this way we make sure that is really a touch event what IE is detecting.
   */
   function isReallyTouch(e){
       //if is not IE   ||  IE is detecting `touch` or `pen`
       return typeof e.pointerType === 'undefined' || e.pointerType != 'mouse';
   }

   /**
   * Handler for the touch start event.
   */
   function touchStartHandler(event){
       var e = window.event || e || e.originalEvent;

       //stopping the auto scroll to adjust to a section
       if(options.fitToSection){
           activeAnimation = false;
       }

       if(isReallyTouch(e)){
           var touchEvents = getEventsPage(e);
           touchStartY = touchEvents.y;
           touchStartX = touchEvents.x;
       }
   }

   /**
   * Gets the average of the last `number` elements of the given array.
   */
   function getAverage(elements, number){
       var sum = 0;

       //taking `number` elements from the end to make the average, if there are not enought, 1
       var lastElements = elements.slice(Math.max(elements.length - number, 1));

       for(var i = 0; i < lastElements.length; i++){
           sum = sum + lastElements[i];
       }
       return Math.ceil(sum/number);
   }

   /**
    * Detecting mousewheel scrolling
    *
    * http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html
    * http://www.sitepoint.com/html5-javascript-mouse-wheel/
    */
   var prevTime = new Date().getTime();

   function MouseWheelHandler(e) {
       var curTime = new Date().getTime();

       if(options.autoScrolling){
           // cross-browser wheel delta
           e = window.event || e || e.originalEvent;

           var value = e.wheelDelta || -e.deltaY || -e.detail;
           var delta = Math.max(-1, Math.min(1, value));

           //Limiting the array to 150 (lets not waist memory!)
           if(scrollings.length > 149){
               scrollings.shift();
           }

           //keeping record of the previous scrollings
           scrollings.push(Math.abs(value));

           //preventing to scroll the site on mouse wheel when scrollbar is present
           if(options.scrollBar){
               preventDefault(e);
           }

           var timeDiff = curTime-prevTime;
           prevTime = curTime;

           //haven't they scrolled in a while?
           //(enough to be consider a different scrolling action to scroll another section)
           if(timeDiff > 200){
               //emptying the array, we dont care about old scrollings for our averages
               scrollings = [];
           }

           if(canScroll){//if theres any #

               var averageEnd = getAverage(scrollings, 10);
               var averageMiddle = getAverage(scrollings, 70);
               var isAccelerating = averageEnd >= averageMiddle;

               if(isAccelerating){
                   //scrolling down?
                   if (delta < 0) {
                       scrolling('down');

                   //scrolling up?
                   }else {
                       scrolling('up');
                   }
               }
           }

           return false;
       }

       if(options.fitToSection){
           //stopping the auto scroll to adjust to a section
           activeAnimation = false;
       }
   }

   /**
   * Slides a slider to the given direction.
   */
   function moveSlide(direction){
       var activeSection = $(SECTION_ACTIVE_SEL);
       var slides = $(SLIDES_WRAPPER_SEL, activeSection);

       // more than one slide needed and nothing should be sliding
       if (!slides|| slideMoving) {
           return;
       }

       var currentSlide = $(SLIDE_ACTIVE_SEL, slides);
       var destiny = null;
       if(direction === 'prev'){
           destiny = prev(currentSlide);
       }else{
           destiny = next(currentSlide);
       }

       //isn't there a next slide in the secuence?
       if(!destiny){
           //respect loopHorizontal settin
           if (!options.loopHorizontal) return;

           var siblings = getAllSiblings(currentSlide);
           if(direction === 'prev'){
               destiny = siblings[siblings.length - 1]; //last
           }else{
               destiny = siblings[0]; //first
           }
       }

       slideMoving = true;

       landscapeScroll(slides, destiny);
   }

   /**
   * Maintains the active slides in the viewport
   * (Because he `scroll` animation might get lost with some actions)
   */
   function keepSlidesPosition(){
       var activeSlides = $$(SLIDE_ACTIVE_SEL);
       for( var i =0; i<activeSlides.length; i++){
           silentLandscapeScroll(activeSlides[i], 'internal');
       }
   }

   /**
   * Scrolls the site to the given element and scrolls to the slide if a callback is given.
   */
   function scrollPage(element, callback, isMovementUp){
       if(element === null){ return; } //there's no element to scroll, leaving the function
       //local variables
       var v = {
           element: element,
           callback: callback,
           isMovementUp: isMovementUp,
           dtop: element.offsetTop,
           yMovement: getYmovement(element),
           anchorLink: element.getAttribute('data-anchor'),
           sectionIndex: getNodeIndex(element),
           activeSlide: $(SLIDE_ACTIVE_SEL, element),
           activeSection: $(SECTION_ACTIVE_SEL),
           leavingSection: getNodeIndex($(SECTION_ACTIVE_SEL)) + 1,

           //caching the value of isResizing at the momment the function is called
           //because it will be checked later inside a setTimeout and the value might change
           localIsResizing: isResizing
       };

       //quiting when destination scroll is the same as the current one
       if(( getNodeIndex(v.activeSection) == v.sectionIndex && !isResizing) || (options.scrollBar && getScrollTop() === v.dtop)){ return; }

       if(v.activeSlide){
           var slideAnchorLink = v.activeSlide.getAttribute('data-anchor');
           var slideIndex = getNodeIndex(v.activeSlide);
       }

       var siblings = $$(SECTION_SEL);
       for(var s=0; s<siblings.length; s++){
           removeClass(siblings[s], ACTIVE);
       }

       addClass(element, ACTIVE);

       //preventing from activating the MouseWheelHandler event
       //more than once if the page is scrolling
       canScroll = false;

       setState(slideIndex, slideAnchorLink, v.anchorLink, v.sectionIndex);

       //callback (onLeave) if the site is not just resizing and readjusting the slides
       isFunction(options.onLeave) && !v.localIsResizing && options.onLeave.call(v.activeSection, v.leavingSection, (v.sectionIndex + 1), v.yMovement);

       performMovement(v);

       //flag to avoid callingn `scrollPage()` twice in case of using anchor links
       lastScrolledDestiny = v.anchorLink;

       activateMenuAndNav(v.anchorLink, v.sectionIndex);
   }

   /**
   * Performs the movement (by CSS3 or by jQuery)
   */
   function performMovement(v){
       // using CSS3 translate functionality
       if (options.css3 && options.autoScrolling && !options.scrollBar) {
           var translate3d = 'translate3d(0px, -' + v.dtop + 'px, 0px)';
           transformContainer(translate3d, true);

           //even when the scrollingSpeed is 0 there's a little delay, which might cause the
           //scrollingSpeed to change in case of using silentMoveTo();
           if(options.scrollingSpeed){
               setTimeout(function () {
                   afterSectionLoads(v);
               }, options.scrollingSpeed);
           }else{
               afterSectionLoads(v);
           }
       }

       // using jQuery animate
       else{
           var scrollSettings = getScrollSettings(v.dtop);
           scrollTo(scrollSettings.element, scrollSettings.options, options.scrollingSpeed, function(){
               afterSectionLoads(v);
           });
       }
   }

   /**
   * Gets the scrolling settings depending on the plugin autoScrolling option
   */
   function getScrollSettings(top){
       var scroll = {};

       //top property animation
       if(options.autoScrolling && !options.scrollBar){
           scroll.options = -top;
           scroll.element = $('.'+WRAPPER);
       }

       //window real scrolling
       else{
           scroll.options = top;
           scroll.element = window;
       }

       return scroll;
   }

   /**
   * Actions to do once the section is loaded
   */
   function afterSectionLoads (v){
       //callback (afterLoad) if the site is not just resizing and readjusting the slides
       isFunction(options.afterLoad) && !v.localIsResizing && options.afterLoad.call(v.element, v.anchorLink, (v.sectionIndex + 1));
       canScroll = true;

       isFunction(v.callback) && v.callback.call(this);
   }

   /**
   * Scrolls to the anchor in the URL when loading the site
   */
   function scrollToAnchor(){
       //getting the anchor link in the URL and deleting the `#`
       var value =  window.location.hash.replace('#', ).split('/');
       var section = value[0];
       var slide = value[1];

       if(section){  //if theres any #
           scrollPageAndSlide(section, slide);
       }
   }

   //detecting any change on the URL to scroll to the given anchor link
   //(a way to detect back history button as we play with the hashes on the URL)
   if (document.addEventListener) {
       window.addEventListener('hashchange', hashChangeHandler, false); //IE9, Chrome, Safari, Oper
   } else {
       window.attachEvent('onhashchange', hashChangeHandler); //IE 6/7/8
   }

   function arrowsHandler(event){
       var element = this;

       //IE 8 (using attach event...)
       //http://stackoverflow.com/a/4590231/1081396
       if(element.self == window ){
           element = event.target || event.srcElement;
       }

       if (hasClass(element, SLIDES_PREV)) {
           moveSlideLeft();
       } else {
           moveSlideRight();
       }
   }

   function hashChangeHandler(){
       if(!isScrolling){
           var value =  window.location.hash.replace('#', ).split('/');
           var section = value[0];
           var slide = value[1];

           if(section.length){
               //when moving to a slide in the first section for the first time (first time to add an anchor to the URL)
               var isFirstSlideMove =  (typeof lastScrolledDestiny === 'undefined');
               var isFirstScrollMove = (typeof lastScrolledDestiny === 'undefined' && typeof slide === 'undefined' && !slideMoving);

               /*in order to call scrollpage() only once for each destination at a time
               It is called twice for each scroll otherwise, as in case of using anchorlinks `hashChange`
               event is fired on every scroll too.*/
               if ((section && section !== lastScrolledDestiny) && !isFirstSlideMove || isFirstScrollMove || (!slideMoving && lastScrolledSlide != slide ))  {
                   scrollPageAndSlide(section, slide);
               }
           }
       }
   }

   /**
    * Sliding with arrow keys, both, vertical and horizontal
    */
   var keydownId;
   document.onkeydown = function(e) {
       clearTimeout(keydownId);

       var activeElement = document.activeElement;
       var tagName = activeElement.tagName;

       if(tagName !== 'SELECT' && tagName !== 'INPUT' && options.keyboardScrolling && options.autoScrolling){

           e = window.event || e || e.originalEvent;
           var charCode = e.charCode || e.keyCode;

           //preventing the scroll with arrow keys & spacebar & Page Up & Down keys
           var keyControls = [40, 38, 32, 33, 34];
           for(var i=0; i<keyControls.length; i++){
               if(keyControls[i] == charCode){
                   preventDefault(e);
               }
           }

           var shiftPressed = e.shiftKey;
           keydownId = setTimeout(function(){
               onkeydown(shiftPressed, charCode);
           },150);
       }
   };

   function onkeydown(shiftPressed, charCode){
       switch (charCode) {
           //up
           case 38:
           case 33:
               moveSectionUp();
               break;

           //down
           case 32: //spacebar
               if(shiftPressed){
                   moveSectionUp();
                   break;
               }
           case 40:
           case 34:
               moveSectionDown();
               break;

           //Home
           case 36:
               moveTo(1);
               break;

           //End
           case 35:
               moveTo( $$(SECTION_SEL).length );
               break;

           //left
           case 37:
               moveSlideLeft();
               break;

           //right
           case 39:
               moveSlideRight();
               break;

           default:
               return; // exit this handler for other keys
       }
   }

   /**
   * Scrolls the slider to the given slide destination for the given section
   */
   var slidesNav = $(SLIDES_NAV_LINK_SEL);
   if(slidesNav !== null){
       addListenerMulti($(SLIDES_NAV_LINK_SEL), 'click onclick touchstart', function(e){
           preventDefault(e);

           //equivalent to:   var slides = $(this).closest(SECTION_SEL).find(SLIDES_WRAPPER_SEL);
           var section = closest(this, function (el) {
               return hasClass(e1, SECTION);
           });
           var slides = $(SLIDES_WRAPPER_SEL, section);

           var li = closest(this, function (el) {
               return el.tagName === 'li';
           });
           var liIndex = getNodeIndex(li);
           var destiny = $$(SLIDE_SEL, slides)[liIndex];

           landscapeScroll(slides, destiny);
       });
   }

   /**
    * Scrolling horizontally when clicking on the slider controls.
    */
   // $(SECTION_SEL).on('click touchstart', SLIDES_ARROW_SEL, function() {
   //  if ($(this).hasClass(SLIDES_PREV)) {
   //      moveSlideLeft();
   //  } else {
   //      moveSlideRight();
   //  }
   // });

   /**
   * Scrolls horizontal sliders.
   */
   function landscapeScroll(slides, destiny){
       var slideIndex = getNodeIndex(destiny);

       //equivalent to slides.closest(SECTION_SEL)
       var section = closest(slides, function(e1){
           return hasClass(e1, SECTION);
       });

       var sectionIndex = getNodeIndex(section);
       var anchorLink = section.getAttribute('data-anchor');
       var slidesNav = $(SLIDES_NAV_SEL, section);
       var slideAnchor = getSlideAnchor(destiny);

       //caching the value of isResizing at the momment the function is called
       //because it will be checked later inside a setTimeout and the value might change
       var localIsResizing = isResizing;

       if(options.onSlideLeave){
           var prevSlide = $(SLIDE_ACTIVE_SEL, section);
           var prevSlideIndex = getNodeIndex(prevSlide);
           var xMovement = getXmovement(prevSlideIndex, slideIndex);

           //if the site is not just resizing and readjusting the slides
           if(!localIsResizing && xMovement!=='none'){
               isFunction( options.onSlideLeave ) && options.onSlideLeave.call( prevSlide, anchorLink, (sectionIndex + 1), prevSlideIndex, xMovement);
           }
       }

       var siblings = $$(SLIDE_SEL, section);

       for(var s=0; s<siblings.length; s++){
           removeClass(siblings[s], ACTIVE);
       }

       addClass(destiny, ACTIVE);

       if(!options.loopHorizontal && options.controlArrows){
           //hidding it for the fist slide, showing for the rest
           toggle($(SLIDES_ARROW_PREV_SEL, section), slideIndex!==0);

           //hidding it for the last slide, showing for the rest
           toggle($(SLIDES_ARROW_NEXT_SEL, section), !destiny.is(':last-child'));
       }

       //only changing the URL if the slides are in the current section (not for resize re-adjusting)
       if(hasClass(section, ACTIVE)){
           setState(slideIndex, slideAnchor, anchorLink, sectionIndex);
       }

       var afterSlideLoads = function(){
           //if the site is not just resizing and readjusting the slides
           if(!localIsResizing){
               isFunction( options.afterSlideLoad ) && options.afterSlideLoad.call( destiny, anchorLink, (sectionIndex + 1), slideAnchor, slideIndex);
           }
           //letting them slide again
           slideMoving = false;
       };

       if(options.css3){
           var translate3d = 'translate3d(-' + Math.round(destiny.offsetLeft) + 'px, 0px, 0px)';
           var slidesContainer = $(SLIDES_CONTAINER_SEL, slides);

           addAnimation(slidesContainer, options.scrollingSpeed>0);
           setTransforms(slidesContainer, translate3d);

           setTimeout(function(){
               afterSlideLoads();
           }, options.scrollingSpeed, options.easing);
       }else{
           scrollTo(slides, Math.round(destiny.offsetLeft), options.scrollingSpeed, function(){
               afterSlideLoads();
           });
       }

       if(options.slidesNavigation){
           removeClass($(ACTIVE_SEL, slidesNav), ACTIVE);
           var activeNavLi = $$('li', slidesNav)[slideIndex];
           var activeLink = $('a', activeNavLi);
           addClass(activeLink, ACTIVE);
       }
   }

   //when resizing the site, we adjust the heights of the sections
   var previousHeight = windowsHeight;
   var resizeId;
   function resizeHandler(){
       // rebuild immediately on touch devices
       if (isTouchDevice) {

           //if the keyboard is visible
           if (document.activeElement.getAttribute('type') !== 'text') {
               var currentHeight = getWindowHeight();

               //making sure the change in the viewport size is enough to force a rebuild. (20 % of the window to avoid problems when hidding scroll bars)
               if( Math.abs(currentHeight - previousHeight) > (20 * Math.max(previousHeight, currentHeight) / 100) ){
                   reBuild(true);
                   previousHeight = currentHeight;
               }
           }
       }else{
           //in order to call the functions only when the resize is finished
           //http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
           clearTimeout(resizeId);

           resizeId = setTimeout(function(){
               reBuild(true);
           }, 350);
       }
   }

   /**
   * Adds transition animations for the given element
   */
   function addAnimation(element){
       var transition = 'all ' + options.scrollingSpeed + 'ms ' + options.easingcss3;

       removeClass(element, NO_TRANSITION);

       css(element,{
           '-webkit-transition': transition,
           'transition': transition
       });

       return element;
   }

   /**
   * Remove transition animations for the given element
   */
   function removeAnimation(element){
       return addClass(element, NO_TRANSITION);
   }

   /**
    * Activating the website navigation dots according to the given slide name.
    */
   function activateNavDots(name, sectionIndex){
       if(options.navigation){
           removeClass( $(ACTIVE_SEL, nav), ACTIVE);

           if(name){
               addClass( $('a[href="#' + name + '"]', nav) , ACTIVE);
           }else{
               var currentLi = $$('li', nav)[sectionIndex];
               addClass( $('a', currentLi), ACTIVE);
           }
       }
   }

   /**
    * Activating the website main menu elements according to the given slide name.
    */
   function activateMenuElement(name){
       if(options.menu){
           var menu = $(options.menu);
           if(menu){
               removeClass($(ACTIVE_SEL, menu), ACTIVE);
               addClass($('[data-menuanchor="'+name+'"]', menu), ACTIVE);
           }
       }
   }

   function activateMenuAndNav(anchor, index){
       activateMenuElement(anchor);
       activateNavDots(anchor, index);
   }

   /**
   * Retuns `up` or `down` depending on the scrolling movement to reach its destination
   * from the current section.
   */
   function getYmovement(destiny){
       var fromIndex = getNodeIndex($(SECTION_ACTIVE_SEL));
       var toIndex = getNodeIndex(destiny);
       if( fromIndex == toIndex){
           return 'none';
       }
       if(fromIndex > toIndex){
           return 'up';
       }
       return 'down';
   }

   /**
   * Retuns `right` or `left` depending on the scrolling movement to reach its destination
   * from the current slide.
   */
   function getXmovement(fromIndex, toIndex){
       if( fromIndex == toIndex){
           return 'none';
       }
       if(fromIndex > toIndex){
           return 'left';
       }
       return 'right';
   }

   /**
   * Adds a css3 transform property to the container class with or without animation depending on the animated param.
   */
   function transformContainer(translate3d, animated){
       if(animated){
           addAnimation(container);
       }else{
           removeAnimation(container);
       }

       setTransforms(container, translate3d);

       //syncronously removing the class after the animation has been applied.
       setTimeout(function(){
           removeClass(container, NO_TRANSITION);
       },10);
   }

   /**
   * Gets a section by its anchor / index
   */
   function getSectionByAnchor(sectionAnchor){
       //section
       var section = $(SECTION_SEL + '[data-anchor="'+sectionAnchor+'"]');
       if(!section){
           section = $$(SECTION_SEL)[(sectionAnchor -1)];
       }

       return section;
   }

   /**
   * Gets a slide inside a given section by its anchor / index
   */
   function getSlideByAnchor(slideAnchor, section){
       var slides = $(SLIDES_WRAPPER_SEL, section);
       var slide =  $(SLIDE_SEL + '[data-anchor="'+slideAnchor+'"]', slides);

       if(slides && !slide){
           slide = $$(SLIDE_SEL, slides)[slideAnchor];
       }

       return slide;
   }

   /**
   * Scrolls to the given section and slide
   */
   function scrollPageAndSlide(destiny, slide){
       var section = getSectionByAnchor(destiny);

       if (typeof slide === 'undefined') {
           slide = 0;
       }

       //we need to scroll to the section and then to the slide
       if (destiny !== lastScrolledDestiny && !hasClass(section, ACTIVE)){
           scrollPage(section, function(){
               scrollSlider(section, slide);
           });
       }
       //if we were already in the section
       else{
           scrollSlider(section, slide);
       }
   }

   /**
   * Scrolls the slider to the given slide destination for the given section
   */
   function scrollSlider(section, slideAnchor){
       if(typeof slideAnchor !== 'undefined'){
           var slides = $(SLIDES_WRAPPER_SEL, section);
           var destiny =  getSlideByAnchor(slideAnchor, section);

           if(destiny){
               landscapeScroll(slides, destiny);
           }
       }
   }

   /**
   * Creates a landscape navigation bar with dots for horizontal sliders.
   */
   function addSlidesNavigation(section, numSlides){
       var div = document.createElement('div');
       div.className = SLIDES_NAV;

       var divUl = document.createElement('ul');
       div.appendChild(divUl);

       section.appendChild(div);

       var nav = $(SLIDES_NAV_SEL, section);
       var ul =  $('ul', nav);

       //top or bottom
       addClass(nav, options.slidesNavPosition);

       var list = ;
       for(var i=0; i< numSlides; i++){

list = list + '

<a href="#"></a>

';

       }

       ul.innerHTML = ul.innerHTML + list;

       //centering it
       setCss(nav, 'margin-left', '-' + (nav.offsetWidth/2) + 'px');

       var firstLi = $$('li', nav)[0];
       addClass( $('a', firstLi), ACTIVE);
   }

   /**
   * Sets the state of the website depending on the active section/slide.
   * It changes the URL hash when needed and updates the body class.
   */
   function setState(slideIndex, slideAnchor, anchorLink, sectionIndex){
       var sectionHash = ;

       if(options.anchors.length){

           //isn't it the first slide?
           if(slideIndex){
               if(typeof anchorLink !== 'undefined'){
                   sectionHash = anchorLink;
               }

               //slide without anchor link? We take the index instead.
               if(typeof slideAnchor === 'undefined'){
                   slideAnchor = slideIndex;
               }

               lastScrolledSlide = slideAnchor;
               setUrlHash(sectionHash + '/' + slideAnchor);

           //first slide won't have slide anchor, just the section one
           }else if(typeof slideIndex !== 'undefined'){
               lastScrolledSlide = slideAnchor;
               setUrlHash(anchorLink);
           }

           //section without slides
           else{
               setUrlHash(anchorLink);
           }

       }
       setBodyClass();
   }

   /**
   * Sets the URL hash.
   */
   function setUrlHash(url){
       if(options.recordHistory){
           location.hash = url;
       }else{
           //Mobile Chrome doesn't work the normal way, so... lets use HTML5 for phones :)
           if(isTouchDevice || isTouch){
               history.replaceState(undefined, undefined, '#' + url);
           }else{
               var baseUrl = window.location.href.split('#')[0];
               window.location.replace( baseUrl + '#' + url );
           }
       }
   }

   /**
   * Gets the anchor for the given slide. Its index will be used if there's none.
   */
   function getSlideAnchor(slide){
       var slideAnchor = slide.getAttribute('data-anchor');
       var slideIndex = getNodeIndex(slide);

       //Slide without anchor link? We take the index instead.
       if(!slideAnchor){
           slideAnchor = slideIndex;
       }

       return slideAnchor;
   }

   /**
   * Sets a class for the body of the page depending on the active section / slide
   */
   function setBodyClass(text){
       var section = $(SECTION_ACTIVE_SEL);
       var slide = $(SLIDE_ACTIVE_SEL, section);

       var sectionAnchor = section.getAttribute('data-anchor');
       var sectionIndex = getNodeIndex(section);

       var text = String(sectionIndex);

       if(options.anchors.length){
           text = sectionAnchor;
       }

       if(slide){
           var slideAnchor = getSlideAnchor(slide);
           text = text + '-' + slideAnchor;
       }

       //changing slash for dash to make it a valid CSS style
       text = text.replace('/', '-').replace('#',);

       //removing previous anchor classes
       var classRe = new RegExp('\\b\\s?' + VIEWING_PREFIX + '-[^\\s]+\\b', "g");
       document.body.className = document.body.className.replace(classRe, );

       //adding the current anchor
       addClass(document.body, VIEWING_PREFIX + '-' + text);
   }

   /**
   * Checks for translate3d support
   * @return boolean
   * http://stackoverflow.com/questions/5661671/detecting-transform-translate3d-support
   */
   function support3d() {
       var el = document.createElement('p'),
           has3d,
           transforms = {
               'webkitTransform':'-webkit-transform',
               'OTransform':'-o-transform',
               'msTransform':'-ms-transform',
               'MozTransform':'-moz-transform',
               'transform':'transform'
           };

       // Add it to the body to get the computed style.
       document.body.insertBefore(el, null);

       for (var t in transforms) {
           if (el.style[t] !== undefined) {
               el.style[t] = 'translate3d(1px,1px,1px)';
               has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
           }
       }

       document.body.removeChild(el);

       return (has3d !== undefined && has3d.length > 0 && has3d !== 'none');
   }

   /**
   * Removes the auto scrolling action fired by the mouse wheel and trackpad.
   * After this function is called, the mousewheel and trackpad movements won't scroll through sections.
   */
   function removeMouseWheelHandler(){
       var wrapper = $(WRAPPER_SEL);

       if (document.addEventListener) {
           wrapper.removeEventListener('mousewheel', MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
           wrapper.removeEventListener('wheel', MouseWheelHandler, false); //Firefox
       } else {
           wrapper.detachEvent('onmousewheel', MouseWheelHandler); //IE 6/7/8
       }
   }

   /**
   * Adds the auto scrolling action for the mouse wheel and trackpad.
   * After this function is called, the mousewheel and trackpad movements will scroll through sections
   */
   function addMouseWheelHandler(){
       addHandler($(WRAPPER_SEL), MouseWheelHandler, 'mousewheel', 'onmousewheel', 'wheel');
   }

   function addResizeHandler(){
       addHandler(window, resizeHandler, 'resize', 'onresize');
   }

   function addScrollHandler(){
       addHandler(window, scrollHandler, 'scroll', 'onscroll', 'onscroll');
   }

   function addHandler(element, method, normal, oldIE, firefox){
       if(element.addEventListener){
           element.addEventListener(normal, method, false); //IE9, Chrome, Safari, Oper

           if(typeof firefox !== 'undefined'){
               element.addEventListener(firefox, method, false); //Firefox
           }
       }else{
           element.attachEvent(oldIE, method);  //IE 6/7/8
       }
   }

   /**
   * Adds the possibility to auto scroll through sections on touch devices.
   */
   function addTouchHandler(){
       if(isTouchDevice || isTouch){
           var wrapper = $(WRAPPER_SEL);
           if (document.addEventListener) {
               //Microsoft pointers
               var MSPointer = getMSPointer();

               wrapper.removeEventListener('touchstart', touchStartHandler);
               wrapper.removeEventListener(MSPointer.down, touchStartHandler);

               wrapper.removeEventListener('touchmove', touchMoveHandler);
               wrapper.removeEventListener(MSPointer.move, touchMoveHandler);

               addListenerMulti(wrapper, 'touchstart ' + MSPointer.down, touchStartHandler);
               addListenerMulti(wrapper, 'touchmove ' + MSPointer.move, touchMoveHandler);
           }
       }
   }

   /**
   * Removes the auto scrolling for touch devices.
   */
   function removeTouchHandler(){
       if(isTouchDevice || isTouch){
           var wrapper = $(WRAPPER_SEL);

           if (wrapper.addEventListener) {
               //Microsoft pointers
               var MSPointer = getMSPointer();

               wrapper.removeEventListener('touchstart', touchStartHandler);
               wrapper.removeEventListener(MSPointer.down, touchStartHandler);

               wrapper.removeEventListener('touchmove', touchMoveHandler);
               wrapper.removeEventListener(MSPointer.move, touchMoveHandler);
           }
       }
   }

   /*
   * Returns and object with Microsoft pointers (for IE<11 and for IE >= 11)
   * http://msdn.microsoft.com/en-us/library/ie/dn304886(v=vs.85).aspx
   */
   function getMSPointer(){
       var pointer;

       //IE >= 11 & rest of browsers
       if(window.PointerEvent){
           pointer = { down: 'pointerdown', move: 'pointermove'};
       }

       //IE < 11
       else{
           pointer = { down: 'MSPointerDown', move: 'MSPointerMove'};
       }

       return pointer;
   }
   /**
   * Gets the pageX and pageY properties depending on the browser.
   * https://github.com/alvarotrigo/fullPage.js/issues/194#issuecomment-34069854
   */
   function getEventsPage(e){
       var events = [];

       events.y = (typeof e.pageY !== 'undefined' && (e.pageY || e.pageX) ? e.pageY : e.touches[0].pageY);
       events.x = (typeof e.pageX !== 'undefined' && (e.pageY || e.pageX) ? e.pageX : e.touches[0].pageX);

       //in touch devices with scrollBar:true, e.pageY is detected, but we have to deal with touch events. #1008
       if(isTouch && isReallyTouch(e)){
           events.y = e.touches[0].pageY;
           events.x = e.touches[0].pageX;
       }

       return events;
   }

   function silentLandscapeScroll(activeSlide, noCallbacks){
       setScrollingSpeed (0, 'internal');

       if(typeof noCallbacks !== 'undefined'){
           //preventing firing callbacks afterSlideLoad etc.
           isResizing = true;
       }

       //equivalent to:   activeSlide.closest(SLIDES_WRAPPER_SEL)
       var slides = closest(activeSlide, function (el) {
           return hasClass(el, SLIDES_WRAPPER);
       });

       landscapeScroll(slides, activeSlide);

       if(typeof noCallbacks !== 'undefined'){
           isResizing = false;
       }

       setScrollingSpeed(originals.scrollingSpeed, 'internal');
   }

   function silentScroll(top){
       if(options.scrollBar){
           var scrollSettings = getScrollSettings(top);
           setScrolling(scrollSettings.element, scrollSettings.options, 0);
       }
       else if (options.css3) {
           var translate3d = 'translate3d(0px, -' + top + 'px, 0px)';
           transformContainer(translate3d, false);
       }
       else {
           setCss(container, 'top', -top + 'px');

       }
   }

   function setTransforms(element, translate3d){
       css(element, {
           '-webkit-transform': translate3d,
           '-moz-transform': translate3d,
           '-ms-transform': translate3d,
           'transform': translate3d
       });
   }

   /*
   * Sets the state for a variable with multiple states (original, and temporal)
   * Some variables such as `autoScrolling` or `recordHistory` might change automatically its state when using `responsive` or `autoScrolling:false`.
   * This function is used to keep track of both states, the original and the temporal one.
   * If type is not 'internal', then we assume the user is globally changing the variable.
   */
   function setVariableState(variable, value, type){
       options[variable] = value;
       if(type !== 'internal'){
           originals[variable] = value;
       }
   }

   /**
   * Displays warnings
   */
   function displayWarnings(){
       //anchors can not have the same value as any element ID or NAME
       for(var i =0; i<options.anchors.length; i++){
           var name = options.anchors[i];
           var existId = getById('#' + name);
           if( existId || $$('[name="'+name+'"]').length){
               showError('error', 'data-anchor tags can not have the same value as any `id` element on the site (or `name` element for IE).');
           }
       }
   }

   /**
   * Shows a message in the console of the given type.
   */
   function showError(type, text){
       console && console[type] && console[type]('fullPage: ' + text);
   }

   //API
   fullpage = {
       initialize: initialize,
       moveSectionUp: moveSectionUp,
       moveSectionDown: moveSectionDown,
       moveTo: moveTo,
       silentMoveTo: silentMoveTo,
       moveSlideRight: moveSlideRight,
       moveSlideLeft: moveSlideLeft,
       setAutoScrolling: setAutoScrolling,
       setFitToSection: setFitToSection,
       setKeyboardScrolling: setKeyboardScrolling,
       setRecordHistory: setRecordHistory,
       setScrollingSpeed: setScrollingSpeed
   };

   return fullpage;

}));