//Define my app
var appShell = appShell || {};
appShell.images_count = 20;
appShell.cache = [];
appShell.history = [];
appShell.backButton = false;

//Every click should be prevented and made magic with it
$('.app').on('click', 'a', function(e) {
  e.preventDefault();

  //If back button is clicked
  if ($(this).hasClass('js-back')) {

    //Set a flag
    appShell.backButton = true;
    window.history.back();
  } else {

    //Navigate away, the router will know what to do
    appShell.navigate(this.hash.substr(1));
  }

});

//All views are the same
appShell.View = Backbone.View.extend({
  tagName: 'div',
  className: 'page',
  placeholder: '#page-placeholder',

  initialize: function() {
    this.render();
  },

  render: function() {
    var source = $("#home-template").html();
    var template = Handlebars.compile(source);
    var name = this.name;
    var data = {
      name: this.name,
      images: []
    };

    var imagesHref = 'home';
    switch (this.name) {
      case "home":
        imagesHref = 'io'
        break;
      case "io":
        imagesHref = 'about'
        break;
      case "about":
        imagesHref = 'blog'
        break;
      case "blog":
        imagesHref = 'contact'
        break;
      default:
        imagesHref = 'home'
    }

    _(40).times(function(n) {
      data.images.push({
        'src': 'https://source.unsplash.com/200x300/?sig=' + appShell.images_count,
        'href': imagesHref
      });
      appShell.images_count += 1
    });

    $(this.el).addClass('page--' + name).attr('id', 'page--' + name);

    var tempHtml = template(data);

    var self = this;

    appShell.backButton = false;

    $(this.el).html(tempHtml);
    $(this.el).appendTo(this.placeholder);
    $(this.el).addClass('pageFade');

    //Simulate a loading for models or data
    setTimeout(function() {
      $('.page').not('.page--' + name);
      //After a few seconds remove the cover
      setTimeout(function() {
        $('.page-cover').removeClass('cover');
      }, 200)
    }, 1000)

  }
});

//Route everything and make everything a view
appShell.router = Backbone.Router.extend({
  routes: {
    '*notFound': "renderPage"
  },

  updateBackButtonUi: function() {
    var hash = window.location.hash.replace(/^#+/i, '');

    $('.js-header-nav a').each(function() {
      if ($(this).attr('href') == '#' + hash) {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    })

    console.log('Back button checker');

    if (appShell.history.length > 0 && hash !== '') {
      $('.js-header-back').removeClass('hidden');
      $('.js-header-nav').removeClass('wide');
    } else {

      $('.js-header-back').addClass('hidden');
      $('.js-header-nav').addClass('wide');
    }
  },

  forward: function() {

    var name = Backbone.history.fragment ? Backbone.history.fragment : 'home';

    appShell.history.push({
      name: name,
      fragment: Backbone.history.fragment
    });

    //Remove view if already here
    if (typeof appShell.cache['view' + name] !== 'undefined') {
      appShell.cache['view' + name].remove();
      delete appShell.cache['view' + name];
    }

    appShell['view' + name] = appShell.View.extend({
      name: name
    });
    appShell.cache['view' + name] = new appShell['view' + name];
  },

  backward: function() {

    var name = Backbone.history.fragment ? Backbone.history.fragment : 'home';

    //Making sure that the page was not removed by mistake, if it was, just load the view again.
    if (typeof appShell.cache['view' + name] == 'undefined') {
      this.forward();
      console.warn('Something weird');
    } else {

      $('.page').last().addClass('moveToRight').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) {
        var name = appShell.history[appShell.history.length - 1].name;
        appShell.backButton = false;
        appShell.cache['view' + name].remove();
        delete appShell.cache['view' + name];
        appShell.history.splice(appShell.history.length - 1);
      });

    }

  },

  renderPage: function() {
    console.log(appShell.backButton);

    this.updateBackButtonUi();

    if (appShell.backButton == true) {
      this.backward();
    } else {
      this.forward();
    }

  },
});

//Init
new appShell.router();
Backbone.history.start({
  pushState: false
});

appShell.navigate = function(location) {
  var hash = window.location.hash.replace(/^#+/i, '');
  console.log('Location: ' + location + ' and hash: ' + hash)
  if (hash !== location) {
    $('.page-cover').addClass('cover').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) {

      appShell.callerAnimateNavigate = true;
      window.location.hash = location;
      appShell.callerAnimateNavigate = false;

    });

  }
}