/** Represents a single project in the work carousel */
import Parallax3D from '../parallax';

export class CarouselCard {
  constructor(elem, tags) {
    this.elem = elem;
    this.elem.classList.add('carousel-card');
    // Move elem into a wrapper div
    this.wrapper = document.createElement('div');
    this.wrapper.className = 'carousel-card-wrapper';
    this.elem.parentNode.insertBefore(this.wrapper, this.elem);
    this.wrapper.appendChild(this.elem);

    this.tags = tags || elem.dataset.tags.split(',').map(t => t.trim());
    this.titleElem = elem.getElementsByTagName('h1')[0];

    this.parallax = new Parallax3D(this.elem);
  }

  /**
   * Update the card wrapper's CSS in order to reflect changes that were made to its JS
   * representation.
   */
  _applyTransform() {
    this.wrapper.style.transform = [
      'translate(-50%, -50%)',
      `translateX(${this._translate})`,
    ].join(' ');
  }

  // Translation

  get translate() { return this._translate; }
  set translate(val) { this._translate = val; this._applyTransform(); }

  // Transition time

  get transitionTime() { return this._transitionTime; }
  set transitionTime(secs) {
    this._transitionTime = secs;
    this.wrapper.style.transition = `transform ${secs}s`;
    this.titleElem.style.transition = `transform ${secs}s, opacity ${secs}s`;
  }
}

/** Collects and orchestrates multiple CarouselCards */
export class Carousel {
  constructor(cards) {
    this.cards = cards;
    this._position = 0;
  }

  get position() { return this._position; }
  set position(pos) {
    // Move
    this._position = pos;
  }
}

@@ -636,16 +636,662 @@
 .elem);%0A
+%0A%0A    // Title manipulation interface%0A%0A    const _this2 = this;%0A    /**%0A     * Interface for updating styles on the title.%0A     * Examples:%0A     *   this.title.translate = '-10px'%0A     *   this.title.opacity = 0.5%0A     */%0A    this.title = %7B%0A      _apply() %7B%0A        _this2.titleElem.style.transform = %60translateZ(25px) translateX($%7Bthis._translate%7D)%60;%0A        _this2.titleElem.style.opacity = this._opacity;%0A      %7D,%0A      get translate() %7B return this._translate; %7D,%0A      set translate(t) %7B this._translate = t; this._apply(); %7D,%0A      get opacity() %7B return this._opacity; %7D,%0A      set opacity(o) %7B this._opacity = o; this._apply(); %7D,%0A    %7D;%0A
   %7D%0A%0A  /

Add interface for manipulating card title