(function($) {
  
  var app = $.sammy('#sections', function() {
    
    this.use(ProjectHelpers);
    this.use('Title');
    this.use('GoogleAnalytics', (window._gat ? window._gat._getTracker() : null));
    
    this.setTitle('Fabrice Hermans', ' . ', function(s) {
      return s ? s.toString().toLowerCase() : null;
    });
    
    this.bind('run', function() {
      var app = this.app;
      app.sections = {}
      app.section  = null;
      
      var homeClick     = function(e) { if (e.preventDefault) e.preventDefault(); app.trigger('home');    }
      var prevClick     = function(e) { if (e.preventDefault) e.preventDefault(); app.trigger('prev');    }
      var nextClick     = function(e) { if (e.preventDefault) e.preventDefault(); app.trigger('next');    }
      var toggleClick   = function(e) { if (e.preventDefault) e.preventDefault(); app.trigger('toggle');  } 
      var hoverOverFade = function(e) { if (e.preventDefault) e.preventDefault(); app.trigger('fadeIn');  } 
      var hoverOutFade  = function(e) { if (e.preventDefault) e.preventDefault(); app.trigger('fadeOut'); }
      
      var classes = ['styleA', 'styleB', 'styleC'];
      classes = $.shuffle(classes);
      
      app.sections['main'] = {
        title: ['Autonomous Work . Graphic Design'],
        prefix: 'Fabrice Hermans',
        delay: 1200,
        info: false,
        className: classes[0],
        pager: $('#main').scrollable({ circular: true, speed: 600,
          onBeforeSeek: function() { app.trigger('beforeSeek'); },
          onSeek: function() { app.trigger('seek'); }
        }).scrollable(),
        toggleUI: true,
        nav: {
          top:       function(e) { if (e.preventDefault) e.preventDefault(); app.setLocation('#/autonomous'); },
          bottom:    function(e) { if (e.preventDefault) e.preventDefault(); app.setLocation('#/graphic');  },
          hoverOver: hoverOverFade,
          hoverOut:  hoverOutFade
        },
        subnav:[
          { href: '#/main/info', label: 'info', klass: 'nav-info' }
        ]
      };
      
      app.sections['autonomous'] = {
        title: 'Autonomous Work',
        prefix: 'Autonomous',
        delay: 1200,
        info: true,
        className: classes[1],
        pager: $('#autonomous').scrollable({ circular: true, speed: 600,
          onBeforeSeek: function() { app.trigger('beforeSeek'); },
          onSeek: function() { app.trigger('seek'); }
        }).scrollable(),
        toggleUI: true,
        nav: {
          top:       nextClick,
          bottom:    prevClick,
          hoverOver: hoverOverFade,
          hoverOut:  hoverOutFade
        },
        subnav:[]
      };
      
      app.sections['graphic'] = {
        title: 'Graphic Design',
        prefix: 'Graphic',
        delay: 1200,
        info: true,
        className: classes[2],
        pager: $('#graphic').scrollable({ circular: true, speed: 600,
          onBeforeSeek: function() { app.trigger('beforeSeek'); },
          onSeek: function() { app.trigger('seek'); }
        }).scrollable(),
        toggleUI: true,
        nav: {
          top:       nextClick,
          bottom:    prevClick,
          hoverOver: hoverOverFade,
          hoverOut:  hoverOutFade
        },
        subnav:[]
      };
            
      // append some html
      $("#sections").append('<div class="switch"><div class="center"><div class="top" /><div class="bottom" /></div></div>');  
      $("#sections .section").append('<div class="overlay" /><div class="info fade" />');
      $("#sections .section").append('<div class="cnw"></div><div class="cne"></div><div class="csw"></div><div class="cse"></div>');
      
      // bind header click for home-functionality
      $('h1#header a').addClass('nav-index').click(homeClick).hover(hoverOverFade, hoverOutFade);
      
      // remove visible text
      $('h1#header a span').html('Home');
    
      // setup main navigation in the center
      $('#sections .switch .top').click(function(e)    { e.preventDefault(); app.trigger('navigate', 'top'); });
      $('#sections .switch .bottom').click(function(e) { e.preventDefault(); app.trigger('navigate', 'bottom'); });
      $('#sections .switch .center').click(function(e) { e.preventDefault(); app.trigger('navigate', 'center'); });
    
      $('#sections .switch').hover(
        function() { app.trigger('navigate', 'hoverOver'); },
        function() { app.trigger('navigate', 'hoverOut'); });
        
      // setup sections
      $.each(app.sections, function(id, section) {
        app.sections[id].id = id;
        app.sections[id].element = $('#' + id);
        app.sections[id].element.addClass(section.className || '');
        
        // setup subnavigation at top of the page
        if (section.subnav && $.isArray(section.subnav)) {
          var subnav = $('<ul class="subnav"></ul>');
          $.each(section.subnav, function(idx, nav) {
            var link = $('<li class="' + (nav['klass'] || 'nav') +'"></li>');
            link.append('<a href="' + (nav['href'] || '#') + '"><span>' + (nav['label'] || '') + '</span></a>');
            if ($.isFunction(nav['click'])) link.click(nav['click']);
            subnav.append(link);
          });
          $('#' + id + ' .items').before(subnav);
        };
      });
    });

    this.get('', function(context) {
      this.title('Autonomous Work', 'Graphic Design');
      this.noTrack();
      this.redirect('#/main/index');
    });
    
    this.get('#/:section', function(context) {
      this.withSection(this.params['section'], function(section) {
        var items = $.makeArray(this.app.pager.getItems());
        var idx = this.app.pager.getIndex();
        this.noTrack();
        
        if (section && items[idx] && $(items[idx]).attr('id')) {
          this.redirect('#/' + section.id + '/' + $(items[idx]).attr('id'));      
        } else {
          this.redirect('#/main/index');
        }   
      });
    });
    
    this.get('#/:section/:id', function(context) {
      this.withSection(this.params['section'], function(section) {
        var logic = function() {
          var item = context.seekToId(context.params['id']);
          if (!item) {
            this.noTrack();
            return context.redirect('#/' + section.id);
          }
          var itemTitle = item.attr('title');          
          this.title(context.app.section.title, itemTitle ? itemTitle : null);
          this.info(context.app.section.prefix, itemTitle);
          this.trigger('seek');
          $("body#section-main #index div.fill").delay(400).fadeOut(1600, function() { $(this).hide(); });
        }       
        this.trigger('overlay', { show: true, callback: logic });
      });      
    });
    
  });

  $(function() {
    $('html').addClass('jquery'); // better safe than sorry...
    $('#container').addClass('page-main-index');
    
    $(window).resize(function(e){
      var height = $(this).height();
      if (height > 600) height = 600;
      $('div#sections, div#sections .section, div#sections .section .items > div').css('height', height + 'px');
      $('div#container').css('height', height + 'px').css('margin-top', Math.round(($(this).height() - height) / 2));
    });
    $(window).resize();
    
    app.run();
  });
  
})(jQuery);