var ATZ = {};
document.observe('dom:loaded', function(){
  var books = [{title:'cover', isCover:true}, {title:'concept'}, {title:'framework'}, {title:'portfolio'}, {title:'about'}];
  ATZ.shelf = ATZ.Shelf.createShelf(books);
  ATZ.shelf.setupPagesQueued.bind(ATZ.shelf).delay(0.2);
});
ATZ.Shelf = Class.create({
  books:[],
  inEffecting:true,
  effectOptions:{},
  initialize:function(){
    this.effectOptions = { sync:true, transition:ATZ.Shelf.TRANSITIONS, queue:{ position:'end', scope:'book' } };
    $('portfolio_zips').observe('click', function(){
        if(pageTracker){pageTracker._trackPageview('/outgoing/zips');}
    });
    $('portfolio_aday').observe('click', function(){
        if(pageTracker){pageTracker._trackPageview('/outgoing/aday');}
    });
    $('about_aday').observe('click', function(){
        if(pageTracker){pageTracker._trackPageview('/outgoing/aday');}
    });
  },
  onNotifyOpen:function(book){
    if(this.inEffecting){return;}
    if(book.isOnLeft){
      if(this.books.last() === book){return;}
      this.onNotifyMoveRight(this.books[this.books.indexOf(book) + 1]);
    }else{
      this.onNotifyMoveLeft(book);
    }
  },
  onNotifyMoveLeft:function(book){
    if(this.inEffecting){return;}
    if(pageTracker){pageTracker._trackPageview('/page/' + book.title);}
    var endIndex = book.isCover ? 4 :this.books.indexOf(book) + 1;
    var books = this.books.slice(1, endIndex).select(function(item){ return !item.isOnLeft; });
    this.setupActivation(book);
    this.effectOptions.x = ATZ.Shelf.WIDTH * (-1);
    var effects = [];
    books.each(function(item){
      item.isOnLeft = true;
      item.changeOffButton();
      effects.push(new Effect.Move(item.book, this.effectOptions));
    }.bind(this));
    this.move(effects);
  },
  onNotifyMoveRight:function(book){
    if(this.inEffecting){return;}
    if(pageTracker){pageTracker._trackPageview('/page/' + this.books[this.books.indexOf(book) - 1].title);}
    var startIndex = book.isCover ? 4 :this.books.indexOf(book);
    var books = this.books.slice(startIndex).select(function(item){ return item.isOnLeft; });
    this.setupActivation(this.books[this.books.indexOf(book) - 1]);
    this.effectOptions.x = ATZ.Shelf.WIDTH;
    var effects = [];
    books.each(function(item){
      item.isOnLeft = false;
      item.changeOffButton();
      effects.push(new Effect.Move(item.book, this.effectOptions));
    }.bind(this));
    this.move(effects);
  },
  setupActivation:function(book){
    this.books.invoke('deactivateNavi');
    book.activateNavi();
  },
  move:function(effects){
    new Effect.Parallel(effects, {
      duration:ATZ.Shelf.DURATION,
      beforeStart:function(){ this.inEffecting = true; }.bind(this),
      afterFinish:function(){ this.inEffecting = false; }.bind(this)
    });
  },
  setupPagesQueued:function(){
    var books = this.books.reverse(false).slice(0, 4);
    var options = { x:ATZ.Shelf.WIDTH, duration:ATZ.Shelf.DURATION, transition:ATZ.Shelf.TRANSITIONS, queue:{ position:'end', scope:'books' } };
    books.each(function(item){
      if(books.last() === item){ options.afterFinish = function(){ this.inEffecting = false; }.bind(this); }
      new Effect.Move(item.book, options);
    }.bind(this));
  }
});
Object.extend(ATZ.Shelf, {
  DURATION:0.3,
  WIDTH:685,
  TRANSITIONS:Effect.Transitions.linear,
  createShelf:function(books){
    var shelf = new ATZ.Shelf();
    books.each(function(args){
      args.notifyOpen= shelf.onNotifyOpen.bind(shelf);
      args.notifyMoveLeft = shelf.onNotifyMoveLeft.bind(shelf);
      args.notifyMoveRight = shelf.onNotifyMoveRight.bind(shelf);
      shelf.books.push(new ATZ.Book(args));
    });
    return shelf;
  }
});
ATZ.Book = Class.create({
  title:'',
  book:{},
  page:{},
  spine:{},
  navi:{},
  isOnLeft:false,
  isCover:false,
  initialize:function(args){
    this.title = args.title;
    this.isCover = args.isCover || false;
    this.notifyOpen = args.notifyOpen;
    this.notifyMoveLeft = args.notifyMoveLeft;
    this.notifyMoveRight = args.notifyMoveRight;

    this.book = $(this.title);
    this.spine = this.book.down('.spine');
    this.page = this.book.down('.page');
    this.navi = $(this.title + 'Navi');

    if(this.spine){
      this.spine.observe('click', this.toggle.bindAsEventListener(this));
      this.spine.observe('mouseover', this.changeOnButton.bindAsEventListener(this));
      this.spine.observe('mouseout', this.changeOffButton.bindAsEventListener(this));
    }
    if(this.navi){
      this.navi.observe('click', this.open.bindAsEventListener(this));
    }
    if(this.isCover){
      this.isOnLeft = true;
      if($('logo')){$('logo').observe('click', this.open.bindAsEventListener(this));}
    }
  },
  changeOffButton:function(){
    if(this.isCover){return;}
    var position = this.isOnLeft ? '-20px 0px' :'0px 0px';
    this.spine.down().setStyle({backgroundPosition:position});
  },
  changeOnButton:function(){
    if(this.isCover){return;}
    var position = this.isOnLeft ? '-30px 0px' :'-10px 0px';
    this.spine.down().setStyle({backgroundPosition:position});
  },
  activateNavi:function(){
    if(this.isCover){return;}
    this.navi.addClassName('selected');
  },
  deactivateNavi:function(){
    if(this.isCover){return;}
    this.navi.removeClassName('selected');
  },
  open:function(){
    this.notifyOpen(this);
  },
  toggle:function(){
    if(this.isOnLeft){
      this.notifyMoveRight(this);
    }else{
      this.notifyMoveLeft(this);
    }
  }
});