<script>
onePageScroll(".main", {});
</script>

function onePageScroll(element, options) {
    _root = this;
    el = document.querySelector(element);
    sections = document.querySelectorAll("section");
    total = sections.length;
    status = "off";
    topPos = 0;
    lastAnimation = 0;
    paginationList = "";
    body = document.querySelector("body");

    this.init = function() {
        /*-------------------------------------------*/
        /*  Prepare Everything                       */
        /*-------------------------------------------*/

        _addClass(el, "onepage-wrapper")
        el.style.position = "relative";

        for( var i = 0; i < sections.length; i++){
            _addClass(sections[i], "ops-section")
            sections[i].dataset.index = i + 1;
            topPos = topPos + 100;
        }

        _swipeEvents(el);
        document.addEventListener("swipeDown",  function(event){
            if (!_hasClass(body, "disabled-onepage-scroll")) event.preventDefault();
            moveUp(el);
        });
        document.addEventListener("swipeUp", function(event){
            if (!_hasClass(body, "disabled-onepage-scroll")) event.preventDefault();
            moveDown(el);
        });

        // Create Pagination and Display Them

        if(window.location.hash != "" && window.location.hash != "#1") {
            var init_index =  window.location.hash.replace("#", ""),
            next = document.querySelector("section" + "[data-index='" + (init_index) + "']"),
            next_index = next.dataset.index;

            _addClass( document.querySelector("section" + "[data-index='" + init_index + "']") ,"active")
            _addClass(body, "viewing-page-"+ init_index)

            if(next) {
                _addClass(next, "active")

                body.className = body.className.replace(/\bviewing-page-\d.*?\b/g, '');
                _addClass(body, "viewing-page-" + next_index)
            }

            var pos = ((init_index - 1) * 100) * -1;
            _transformPage(el, pos, init_index);
        } else {
            _addClass(document.querySelector("section" + "[data-index='1']"), "active");
            _addClass(body, "viewing-page-1");
        }

        _paginationHandler = function() {
            var page_index = this.dataset.index;
            moveTo(el, page_index);
        }

        _mouseWheelHandler = function(event) {
            event.preventDefault();
            var delta = event.wheelDelta || -event.detail;
            if (!_hasClass(body, "disabled-onepage-scroll")) _init_scroll(event, delta);
        }

        document.addEventListener('mousewheel', _mouseWheelHandler);
        document.addEventListener('DOMMouseScroll', _mouseWheelHandler);

        _keydownHandler = function(e) {
            var tag = e.target.tagName.toLowerCase();

            if (!_hasClass(body, "disabled-onepage-scroll")) {
                switch(e.which) {
                    case 38:
                        if (tag != 'input' && tag != 'textarea') moveUp(el)
                        break;
                    case 40:
                        if (tag != 'input' && tag != 'textarea') moveDown(el)
                        break;
                    default:
                        return;
                }
            }

            return false;
        }

        document.onkeydown = _keydownHandler;
        return false;
    }

    /*-------------------------------------------------------*/
    /*  Private Functions                                    */
    /*-------------------------------------------------------*/
    /*------------------------------------------------*/
    /*  Credit: Eike Send for the awesome swipe event */
    /*------------------------------------------------*/
    _swipeEvents = function(el){
        var startX,
        startY;

        document.addEventListener("touchstart", touchstart);

        function touchstart(event) {
            var touches = event.touches;
            if (touches && touches.length) {
                startX = touches[0].pageX;
                startY = touches[0].pageY;
                document.addEventListener("touchmove", touchmove);
            }
        }

        function touchmove(event) {
            var touches = event.touches;
            if (touches && touches.length) {
                event.preventDefault();
                var deltaX = startX - touches[0].pageX;
                var deltaY = startY - touches[0].pageY;

                if (deltaX >= 50) {
                    var event = new Event('swipeLeft');
                    document.dispatchEvent(event);
                }
                if (deltaX <= -50) {
                    var event = new Event('swipeRight');
                    document.dispatchEvent(event);
                }
                if (deltaY >= 50) {
                    var event = new Event('swipeUp');
                    document.dispatchEvent(event);
                }
                if (deltaY <= -50) {
                    var event = new Event('swipeDown');
                    document.dispatchEvent(event);
                }

                if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) {
                    document.removeEventListener('touchmove', touchmove);
                }
            }
        }

    };
    /*-----------------------------------------------------------*/
    /*  Utility to add/remove class easily with javascript       */
    /*-----------------------------------------------------------*/

  _trim = function(str) {
      return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
  }

  _hasClass = function(ele,cls) {
    if (ele.className) {
      return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
    } else {
      return ele.className = cls;
    }
  }

  _addClass = function(ele,cls) {
    if (!_hasClass(ele,cls)) ele.className += " "+cls;
    ele.className = _trim(ele.className)
  }

  _removeClass = function(ele,cls) {
    if (_hasClass(ele,cls)) {
        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        ele.className=ele.className.replace(reg,' ');
    }
    ele.className = _trim(ele.className)
  }

  /*-----------------------------------------------------------*/
    /*  Transtionend Normalizer by Modernizr                     */
    /*-----------------------------------------------------------*/

  _whichTransitionEvent = function(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
  }

  /*-----------------------------------------------------------*/
    /*  Function to perform scroll to top animation              */
    /*-----------------------------------------------------------*/

  _scrollTo = function(element, to, duration) {
    if (duration < 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop == to) return;
        _scrollTo(element, to, duration - 10);
    }, 10);
  }



  /*---------------------------------*/
  /*  Function to transform the page */
  /*---------------------------------*/

  _transformPage = function(el2, pos, index, next_el) {

    var transformCSS = "-webkit-transform: translate3d(0, " + pos + "%, 0); -webkit-transition: -webkit-transform 500ms ease; -moz-transform: translate3d(0, " + pos + "%, 0); -moz-transition: -moz-transform 500ms ease; -ms-transform: translate3d(0, " + pos + "%, 0); -ms-transition: -ms-transform 500ms ease; transform: translate3d(0, " + pos + "%, 0); transition: transform 500ms ease;";

    el2.style.cssText = transformCSS;

    var transitionEnd = _whichTransitionEvent();
     el2.addEventListener(transitionEnd, endAnimation, false);

    function endAnimation() {
      el2.removeEventListener(transitionEnd, endAnimation)
    }
  }

    /*-------------------------------------------*/
  /*  Initialize scroll detection              */
  /*-------------------------------------------*/

  _init_scroll = function(event, delta) {
        var deltaOfInterest = delta,
            timeNow = new Date().getTime();

        // Cancel scroll if currently animating or within quiet period
        if(timeNow - lastAnimation < 0 + 500) {
            event.preventDefault();
            return;
        }

        if (deltaOfInterest < 0) {
            moveDown(el)
        } else {
            moveUp(el)
        }

        lastAnimation = timeNow;
    }


  /*-------------------------------------------------------*/
  /*  Public Functions                                     */
  /*-------------------------------------------------------*/

  /*---------------------------------*/
  /*  Function to move down section  */
  /*---------------------------------*/

   this.moveDown = function(el3) {

    if (typeof el3 == "string") el3 = document.querySelector(el3);

    var index = document.querySelector("section" +".active").dataset.index,
            current = document.querySelector("section" + "[data-index='" + index + "']"),
            next = document.querySelector("section" + "[data-index='" + (parseInt(index) + 1) + "']");


        if(!next) {
                return

        }else {
            pos = (index * 100) * -1;
        }
        var next_index = next.dataset.index;
        _removeClass(current, "active");
        _addClass(next, "active");

        body.className = body.className.replace(/\bviewing-page-\d.*?\b/g, '');
        _addClass(body, "viewing-page-"+ next_index);

        _transformPage(el3, pos, next_index, next);
    }

    /*---------------------------------*/
  /*  Function to move up section    */
  /*---------------------------------*/

    this.moveUp = function(el4) {

      if (typeof el4 == "string") el4 = document.querySelector(el4);

      var index = document.querySelector("section" +".active").dataset.index,
            current = document.querySelector("section" + "[data-index='" + index + "']"),
            next = document.querySelector("section" + "[data-index='" + (parseInt(index) - 1) + "']");

        if(!next) {
                return
        }else {
            pos = ((next.dataset.index - 1) * 100) * -1;
        }
        var next_index = next.dataset.index;
        _removeClass(current, "active")
        _addClass(next, "active")

        body.className = body.className.replace(/\bviewing-page-\d.*?\b/g, '');
        _addClass(body, "viewing-page-"+ next_index);

        _transformPage(el4, pos, next_index, next);
    }

  this.init();
}
/*------------------------------------------------*/
 /*  Ulitilities Method                            */
 /*------------------------------------------------*/

 /*-----------------------------------------------------------*/
 /*  Function by John Resig to replicate extend functionality */
 /*-----------------------------------------------------------*/

 Object.extend = function(orig){
   if ( orig == null )
     return orig;

   for ( var i = 1; i < arguments.length; i++ ) {
     var obj = arguments[i];
     if ( obj != null ) {
       for ( var prop in obj ) {
         var getter = obj.__lookupGetter__( prop ),
             setter = obj.__lookupSetter__( prop );

         if ( getter || setter ) {
           if ( getter )
             orig.__defineGetter__( prop, getter );
           if ( setter )
             orig.__defineSetter__( prop, setter );
         } else {
           orig[ prop ] = obj[ prop ];
         }
       }
     }
   }

   return orig;
 };