
addLoadEvent(function() {
  if (!$('cinematiccover')) return;
  
  var pagination_onclick = function(id) {
    return function(evt) {
      CinematicCover.transitionTo(id);
      return cancelEvent(evt);
    }
  }
  
  for (var j=0; j<3; j++) {
    var pagination_a = jQuery('#cinematiccover'+j+' .leftLinks a');
	if (pagination_a.length > 0) pagination_a[0].onclick = pagination_onclick((j+2) % 3);
	if (pagination_a.length > 1) pagination_a[1].onclick = pagination_onclick((j+1) % 3);
  }
  
  $('cinematiccover').onmouseover = function(evt) { CinematicCover.interest(); }
  $('cinematiccover').onmouseout = function(evt) { CinematicCover.ignore(); }
  
  CinematicCover.initialize();
});

CinematicCover = {
  _timer: null,
  _wait: 5000,
  
  _target: 0,
  _current: 0,
  _anim: null,
  _state: 1,
  _interested: false,
  
  _scroll_pos: 0,
  _scroll_black: 878,
  _scroll_clear: 1756,
  
  _next_timeout: function() {
    this.transitionTo((this._current + 1) % this.count());
  },
  
  _fade_cover: function(start, end, callback) {
    if (this._anim) this._anim.stop();
    
    var _this = this;
    var cover = $('cc-shader');
    var amin_amount = Math.abs(start - end) / (this._scroll_clear - this._scroll_black);
    var frames = Animator.interpolate.linear(start, end, amin_amount * 60);
    this._anim = new Animator(frames, amin_amount * 750);
    this._anim.onupdate = function(value) {
      _this._scroll_pos = value;
      cover.scrollLeft = value;
      
      return true;
    }
    this._anim.oncomplete = function() {
      _this._anim = null;
      if (_this._scroll_pos >= _this._scroll_clear) {
        _this._scroll_pos = 0;
        cover.scrollLeft = 0;
      }
      callback();
    }
    
    cover.style.display = 'block';
    this._anim.run();
  },
  
  _change_state: function(state) {
    if (this._state == state) return;
    
    switch(state) {
      case 0: // Cover displayed
        $('cc-shader').style.display = 'none';
        if (!this._interested)
          this._timer = window.setTimeout(this._next_timeout.bind(this), this._wait);
        break;
      case 1: // Hiding cover
        this._fade_cover(this._scroll_pos, this._scroll_black, this._change_state.bind(this, 2));
        break;
      case 2: // Showing cover
        this.setDisplay(this._current, false);
        this.setDisplay(this._target, true);
        this._current = this._target;
        this._fade_cover(this._scroll_black, this._scroll_clear, this._change_state.bind(this, 0));
        break;
    }
    
    this._state = state;
  },
  
  initialize: function() {
    var count = this.count();
    for (var i=0; i<count; i++) {
      this.setDisplay(i, false);
    }
    this.setDisplay(this._current, true);
    this._change_state(0);
  },
  
  setPagination: function(id) {
    var count = this.count();
    for (var i=0; i<count; i++) {
      if (page = this.getPaginationById(i))
        Element[(i == id) ? 'addClassName' : 'removeClassName'](page, 'active');
    }
  },
  
  setDisplay: function(id, state) {
/*
    if (cvr = this.getCoverById(id)) {
      cvr.style.position = state ? 'static' : 'absolute';
      cvr.style.left = state ? '0' : '-10000px';
    }
*/
	var cvr;
	if (cvr = this.getCoverById(id)) {
//		jQuery(cvr).css('display',(state ? 'block' : 'none'));
//		jQuery(cvr).css('position',(state ? 'static' : 'absolute'));
		jQuery(cvr).css('left',(state ? '0' : '-10000px'));
	}
  },
  
  transitionTo: function(id) {
    if (this._target == id || this._current == id) return;
    
    this._target = id;
    this._change_state(1);
  },
  
  count: function() {
    var id_expr = /cover([0-9]+)/;
    var collection = $('cinematiccover').childNodes;
    
    for (var i=collection.length-1; i>=0; i--) {
      if (collection[i].nodeType != 1) continue;
      if (match = collection[i].id.match(id_expr)) return parseInt(match[1]) + 1;
    }
    
    return 0;
  },
  
  getCoverById: function(id) {
    //return $('cinematiccover' + id) || false;
	return jQuery('#cinematiccover'+id);
  },
  
  getPaginationById: function(id) {
    return $('cinematicpagination' + id) || false;
  },
  
  interest: function() {
    window.clearTimeout(this._timer);
    this._timer = null;
    this._interested = true;
  },
  
  ignore: function() {
    this._interested = false;
    if (this._timer == null && this._state == 0) {
      this._state = -1;
      this._change_state(0);
    }
  }
}

