document.addEventListener('DOMContentLoaded',run);

function run(){
  
  const container = document.getElementById('body');
  const images = [
    "https://source.unsplash.com/random/700x500",
    "https://source.unsplash.com/random/800x600",
  ];
  const dimensions = {width: 1000, height: 600};
  
  new ComparisonSlider(container, images, dimensions);
}

//the container will be built with absolute pixel dimensions

class ComparisonSlider{
  constructor(node,images,dims){
    //node = DOM parent node
    //images = array of image src paths
    //dims = object with width and height props
    this._node = node;
    this._width = validate(dims.width);
    this._height = validate(dims.height);
    this._container = null;
    this._div1 = null;
    this._div2 = null;
    this._img1 = null;
    this._img2 = null;
    this._small = null;
    this._slider = null;
    this._images = images;
    this.build(this.node);
    //helper
    function validate(prop){
      if (Number(prop)){
        return Number(prop);
      } else {
        return 500;
      }
    }
  }
  get node(){
    return this._node;
  }
  get images(){
    return this._images;
  }
  get container(){
    return this._container;
  }
  get width(){
    return this._width;
  }
  get height(){
    return this._height;
  }
  get div1(){
    return this._div1;
  }
  get div2(){
    return this._div2;
  }
  get img1(){
    return this._img1;
  }
  get img2(){
    return this._img2;
  }
  get small(){
    return this._small;
  }
  get slider(){
    return this._slider;
  }

  setSmall(node){
    this._small = node;
    this._width = node.offsetWidth;
  }

  build(node){
    let container = document.createElement('div');
    let div1 = document.createElement('div');
    let div2 = document.createElement('div');
    let img1 = document.createElement('img');
    let img2 = document.createElement('img');
    //container setup
    container.className = "ComparisonSlider";
    container.style.width = this.width + 'px';
    container.style.height = this.height + 'px';
    //hide everything until async load complete
    container.style.opacity = 0;
    //append
    div1.append(img1);
    div2.append(img2);
    container.append(div1);
    container.append(div2);
    node.append(container);
    //attach to object props
    this._container = container;
    this._div1 = div1;
    this._div2 = div1;
    this._img1 = img1;
    this._img2 = img2;
    //get image paths
    let path1 = this.images[0];
    let path2 = this.images[1];
    let setSmall = this.setSmall.bind(this);
    //counter to track when both images sized
    let loadCounter = 2;
    //when setDims are complete, run buildReady
    const buildReady = ()=>{
      //show when ready
      this.container.style.opacity = 1;
      //next script
      this.insertSlider();
    };
    //determine image widths via async
    setDims(img1,path1);
    setDims(img2,path2);
    //helper get and set dims of image elements
    function setDims(elem,url){
      var img = new Image();
      img.onload = function(){
        elem.width = this.naturalWidth;
        elem.height = this.naturalHeight;
        elem.src = url;
        loadCounter--;
        //after both images dims load -- resize container to smaller width
        if (loadCounter < 1){
          let w1 = img1.offsetWidth;
          let w2 = img2.offsetWidth;
          if(w1<w2){
            resize(w1,w2,img1,img2);
          } else {
            resize(w2,w1,img2,img1);
          }
          buildReady();
          //helper resize
          function resize(small,big,smallNode,bigNode){
            container.style.width = small + 'px';
            let dif = big - small;
            let offset = dif / 2;
            bigNode.style.left = (-1 * offset) + 'px';
            setSmall(smallNode);
          }
        }
      }
      img.src = url;
    }
  }

  insertSlider(){
    //split and format images
    let smallDiv = this.small.parentNode;
    smallDiv.style.zIndex = 2;
    let w = this.small.offsetWidth;
    smallDiv.style.width = (w / 2) + 'px';
    smallDiv.style.borderRight = "1px solid rgba(0,0,0,0.5)";
    //insert slider element
    let slider = document.createElement('span');
    this.container.append(slider);
    this._slider = slider;
    this.initializeSlider();
  }

  initializeSlider(){
    let slider = this.slider;
    let small = this.small.parentNode;
    let fullWidth = this.width;
    slider.onmousedown = (e)=>{
      e = e || window.event;
      e.stopPropagation();
      e.preventDefault();
      //get cursor x position
      var cursor = e.clientX;
      //set window mouse events
      window.onmousemove = drag;
      window.onmouseup = close;
      function drag(e){
        e = e || window.event;
        e.stopPropagation();
        e.preventDefault();
        let offset = e.clientX - cursor;
        cursor = e.clientX;
        //deltas -- displacement
        let sliderD = slider.offsetLeft + offset;
        let smallD = small.offsetWidth + offset;
        //new positions after limit check
        let sliderPos = limit(sliderD,-30) //-30 offset for UI
        let smallPos = limit(smallD,0);
        //change styles for new position
        slider.style.left = sliderPos + 'px';
        small.style.width = smallPos + 'px';
        //helper to keep position within bounds
        function limit(val,off){
          if (val < off){
            return off;
          } else if (val > fullWidth + off){
            return fullWidth + off;
          } else {
            return val;
          }
        }
      }
      function close(){
        window.onmousemove = null;
        window.onmouseup = null;
      }
    };

  }
}