(function(){  
  
  //Quick gross centering hacky thinger. :(
  $('#nav br').each(function(){
    $(this).parent().css({paddingTop:'3px', paddingBottom:'7px'});
  });

  $('#nav > ol > li').each(function(i){
    $(this).addClass('item-'+i);    
  });
  
  //Add some first/last classes.
  $('#nav, #footer')
    .find('li:last-child').addClass('last-child').end()
    .find('li:first-child').addClass('first-child');
  
  //Over states for navigation items.  
  $('#nav ol li').hover(
    function(){$(this).addClass('over');},
    function(){$(this).removeClass('over');}        
  );
  
  //Dirty way of managing active states when mousing on other items
  var active = $('#nav .active').eq(0);  
  $('#nav').hover(
    function(){active.length && active.removeClass('active')},
    function(){active.length && active.addClass('active')}        
  );
  
  
})(jQuery);





(function(){

  var classes = {invisible:'ui-invisible', hidden:'ui-hidden' };

  // Narrator class is responsible for managing which story should be displayed.
  function narrator(element){

    this.index = -1;
    this.element = element;
    this.stories = [];
    this.hotspots = [];
    this.fx = $({});
    this.storyVisible = false
  };

  narrator.prototype = {

    init:function(){    
      var that = this, selection = $('.story', this.element);
      if (!selection.length) return;
      selection && selection.each(function(){
        that.stories.push(new story($(this), that));
      }); 
      
      //Stupid, but I'm getting tired. ;(
      selection = $('.hotspot', this.element);
      selection && selection.each(function(i){
        that.hotspots.push(new hotspot($(this), that, i));
      }); 
      
      //this.narrate();
    },
    
    narrate:function(){
      var that = this;
      this.interval = setInterval(function(){
        that.nextStory() }, 5000);
    },
        
    nextStory:function(){
      var i = this.index, next = i+1, s = this.stories, that = this;
      next < s.length || (next = 0);
      this.showStory(this.index, next);
    },
    
    showStoryAt:function(index){
      if (this.index===index || !this.stories[index]) return;
      this.showStory(this.index, index);    
    },
    
    showStory:function(current, next){
      var s = this.stories, that = this;      
      this.fx.queue(function(n){ s[current] && s[current].hide(); n(); })
             .queue(function(n){ s[that.index = next].show(); n(); })
    }
    
  };

// Story class is the UI representation of the story.
function story(element, host){

  this.element = element;  
  this.host = host;
  this.nodes = {}; 
  this.direction = element.hasClass('story-flipped') ? 'right':'left';
  this.configure();
  
};

  story.prototype = {
    
    configure:function(){
      var that = this;
      this._lookup('photo', '.photo');
      this._lookup('module', '.story-module');
      this._lookup('heading', 'h1');
      this._lookup('text', 'p');
      this._lookup('link', '.btn');
      
      this.width = $('.story-content', this.element).outerWidth(true);
      $('.close', this.element).click(function(){that.hide(); return false;});
      this.reset();
    },
    
    reset:function(){
      this.element.css('opacity',1);
      for(var node in this.nodes) this.nodes[node].css('opacity',0);    
      this.element.removeClass(classes.invisible).addClass(classes.hidden); //Should maybe switch to off?  
      this.nodes.module.css('width',0);
      this.nodes.photo.css(this.direction, -70);
    },
    
    show:function(){
      var fx = this.host.fx, el = this.nodes, w = this.width+'px', that = this;          
      this.element.removeClass(classes.hidden);
      fx.queue(function(n){var data={opacity:1}; data[that.direction] = 0; el.photo.animate(data, 500, n);})
        .queue(function(n){el.module.animate({opacity:1, width:w},500, n);})
        .queue(function(n){el.heading.animate({opacity:1, top:0}, 250, n);})
        .queue(function(n){el.text.animate({opacity:1, top:0}, 250, n);})
        .queue(function(n){el.link.animate({opacity:1, top:0}, 500, n)});
    },
    
    hide:function(){
      var fx = this.host.fx, el = this.element, that = this;
      fx.queue(function(n){el.animate({opacity:0}, 500, n);})
        .queue(function(n){that.reset(); n(); });
    },
    
    _lookup:function(name, selector){
      this.nodes[name] = 
        $(selector, this.element);  
    }

  };

function hotspot(element, host, index){

  this.element = element;
  this.host = host;
  this.index = index;
  
  this.configure();
  
};

hotspot.prototype = {

  configure:function(){
    var that = this;
    this.element.bind('mouseover', {that:this},
      that.handleMouseOver);

    this.element.bind('mouseout', {that:this},
      that.handleMouseOut);
          
    this.element.bind('click', {that:this}, 
      this.handleClick);      
  },
  
  handleMouseOver:function(e){
    var host = e.data.that.host, hs = host.hotspots, len = hs.length;
    for(var i=0; i<len; i++){
      hs[i].element.stop();
      i != e.data.that.index && hs[i].element.animate({opacity:.2}, 500) 
        || hs[i].element.animate({opacity:1}); /*&& host.showStoryAt(i)*/
    }
    return false;
  },
  
  handleMouseOut:function(e){
    $(this).stop().animate({opacity:.2}, 500);  
    return false;
  },
   
  handleClick:function(e){
    var host = e.data.that.host, hs = host.hotspots, len = hs.length;
    for(var i=0; i<len; i++) 
      i === e.data.that.index && host.showStoryAt(i);  
    return false;
  }

};
  
var n = new narrator(document);
n.init();

})();