/* ------------------------------------------------------------------------
  Bind the nav functions, init variables
------------------------------------------------------------------------- */
  var pageWidth = 0;
  var animationDuration = 1000;
  var hashHistory = new Array(); // Mostly used for the swipe motion
  var urlHistory = new Array(); // Mostly used for the swipe motion
  var hashPrefix = '#_' // To prevent page scroll

  $(document).ready(function(){
    $('a[rel*=home]').click(function(){
      changePage('previous',$(this).attr('href'),$(this).attr('id'));
      return false;
    });

    $('a[rel*=footer]:first').click(function(){
      changePage('previous',$(this).attr('href'),$(this).attr('id'));
      return false;
    });

    $('a[rel*=footer]:last').click(function(){
      changePage('next',$(this).attr('href'),$(this).attr('id'));
      return false;
    });

    bindFunctions();
    updateOrientation();

    setInterval(checkHistory, 1000);
  });

  function bindFunctions(){
    $('.in-viewport a[rel*=next]').click(function(){
      changePage('next',$(this).attr('href'),$(this).attr('id'));
      return false;
    });

    $('.in-viewport a[rel*=previous]').click(function(){
      changePage('previous',$(this).attr('href'),$(this).attr('id'));
      return false;
    });

    $('.in-viewport a[rel*=tabs]').click(function(){
      changePage('tabs',$(this).attr('href'),$(this).attr('id'));
      return false;
    });

    $('.in-viewport a[rel*=expand]').click(function(){
      $(this).toggleClass('selected');

      if($(this).parent().height() < 50) {
        $(this).parent().animate({height:$(this).parent().height() + 25 + $(this).parent().find('ul:first').height()},function(){
          fixHeight();
        });
      }else{
        $(this).parent().animate({height:38},function(){
          fixHeight();
        });
      }
      return false;
    });

    $('.out-of-viewport a[rel*=swipe]').click(function(){ return false; });

    // Bind the swipe gestures
    swipe();
  }


/* ------------------------------------------------------------------------
  Orientation functions
------------------------------------------------------------------------- */

  updateOrientation = function() {
    var orientation = window.orientation;
    switch(orientation) {
      case 0:
        pageWidth = 320;
        $('body').removeClass('landscape').addClass('portrait');
          break;
      case 90:
        pageWidth = 480;
        $('body').removeClass('portrait').addClass('landscape');
      break;
      case -90:
        pageWidth = 480;
        $('body').removeClass('portrait').addClass('landscape');
          break;
      default:
        pageWidth = 320;
        $('body').removeClass('landscape').addClass('portrait');
      break;
    }
    $('.out-of-viewport').css('left',pageWidth);
    fixHeight();
  };


/* ------------------------------------------------------------------------
  Change page functions
------------------------------------------------------------------------- */

  changePage = function(direction,page,hash,callback){
    $('.loader').show();

    $('.out-of-viewport').load(
      page,
      function(){
        window.scrollTo(0, 1);

        window.location.hash = hashPrefix + hash;
        hashHistory[hashHistory.length] = hash;
        urlHistory[urlHistory.length] = page;

        $('.loader').hide();

        // Slide depending on the direction
        if(direction == 'next'){
          $('.in-viewport').addClass('slideOutLeft').css('left',-pageWidth);
          $('.out-of-viewport').addClass('slideInLeft').css('left',0);

          // Once it's done, reclass the divs properly
          setTimeout(function(){
            $('.slideOutLeft').addClass('out-of-viewport').removeClass('slideOutLeft').removeClass('in-viewport');
            $('.slideInLeft').addClass('in-viewport').removeClass('slideInLeft').removeClass('out-of-viewport');

            // Rebind the function
            bindFunctions();

            if(callback) callback();
          },animationDuration);
        }else if(direction == 'previous'){
          $('.in-viewport').addClass('slideOutRight').css('left',pageWidth);
          $('.out-of-viewport').addClass('slideInRight').css('left',0);

          // Once it's done, reclass the divs properly
          setTimeout(function(){
            $('.slideOutRight').removeClass('slideOutRight').addClass('out-of-viewport').removeClass('in-viewport');
            $('.slideInRight').removeClass('slideInRight').addClass('in-viewport').removeClass('out-of-viewport');

            // Rebind the function
            bindFunctions();

            if(callback) callback();
          },animationDuration);
        }else{
          $('.in-viewport').addClass('out-of-viewport').removeClass('in-viewport').css('left',pageWidth);
          $(this).addClass('in-viewport').removeClass('out-of-viewport').css('left',0);

          // Rebind the function
          bindFunctions();
        }

        fixHeight(direction);
      }
    );
  }



/* ------------------------------------------------------------------------
  Swipe Nav
------------------------------------------------------------------------- */

  swipe = function(){
    if($('.in-viewport a[rel*=swipe]').size() == 0) return; // Make sure we can swipe

    var startingX = 0; // The swipe init pos
    var dx = 0; // The swipe differente (back/next)

    $('.in-viewport a[rel*=swipe] img')[0].ontouchstart = function(evt){
      evt.preventDefault(); // prevent window scrolling!
      touch = evt.touches[0];
      startingX = touch.pageX;
    }

    $('.in-viewport a[rel*=swipe] img')[0].ontouchmove = function(evt){
      evt.preventDefault(); // prevent window scrolling!
      touch = evt.touches[0];
      dx = startingX - touch.pageX;
    }
    $('.in-viewport a[rel*=swipe] img')[0].ontouchend = function(evt){
      if(dx > 0) { // Next motion
        if($('.in-viewport a[rel*=last]').size() != 0) return; // Make sure we can swipe next
        changePage('next',$(this).parent().attr('href'),$(this).parent().attr('id'))
      }else{ // Previous motion
        if($('.in-viewport a[rel*=first]').size() != 0) return; // Make sure we can swipe next
        history.back();
      }
    }
  }


/* ------------------------------------------------------------------------
  fix the page height
------------------------------------------------------------------------- */

  function fixHeight(direction){
    $('.loader,#container').height('auto');
    if(direction == 'next' || direction == 'previous'){
      ($('.out-of-viewport').height() + $('.header').height() > $(document).height()) ? pageHeight = $('.out-of-viewport').height() + $('.header').height() + 40 : pageHeight = $(document).height();
    }else{
      ($('.in-viewport').height() + $('.header').height() > $(document).height()) ? pageHeight = $('.in-viewport').height() + $('.header').height() + 40 : pageHeight = $(document).height();
    }
    $('.loader,#container').height(pageHeight);
  }


/* ------------------------------------------------------------------------
  To see if the user changes page
------------------------------------------------------------------------- */

  function checkHistory(){
    if(window.location.hash != hashPrefix + hashHistory[hashHistory.length-1] && hashHistory.length != 0){
      for (var i = hashHistory.length - 1; i >= 0; i--){
        if(hashPrefix + hashHistory[i] == window.location.hash){
          if(!$('.loader').is(':visible'))
            changePage('previous',urlHistory[i],hashHistory[i]);
        }
      };
    }
  }