/* juxtapose - v1.1.7 - 2015-11-07
 * Copyright (c) 2015 Alex Duner and Northwestern University Knight Lab 
 */
/* juxtapose - v1.1.2 - 2015-07-16
 * Copyright (c) 2015 Alex Duner and Northwestern University Knight Lab
 */

(function (document, window) {

  var juxtapose = {
    sliders: [],
    OPTIMIZATION_ACCEPTED: 1,
    OPTIMIZATION_WAS_CONSTRAINED: 2
  };

  var flickr_key = "d90fc2d1f4acc584e08b8eaea5bf4d6c";
  var FLICKR_SIZE_PREFERENCES = ['Large', 'Medium'];

  function Graphic(properties, slider) {
    var self = this;
    this.image = new Image();

    this.loaded = false;
    this.image.onload = function() {
      self.loaded = true;
      slider._onLoaded();
    };

    this.image.src = properties.src;
    this.label = properties.label || false;
    this.credit = properties.credit || false;
  }

  function FlickrGraphic(properties, slider) {
    var self = this;
    this.image = new Image();

    this.loaded = false;
    this.image.onload = function() {
      self.loaded = true;
      slider._onLoaded();
    };

    this.flickrID = this.getFlickrID(properties.src);
    this.callFlickrAPI(this.flickrID, self);

    this.label = properties.label || false;
    this.credit = properties.credit || false;
  }

  FlickrGraphic.prototype = {
    getFlickrID: function(url) {
      var idx = url.indexOf("flickr.com/photos/");
      var pos = idx + "flickr.com/photos/".length;
      var photo_info = url.substr(pos);
      if (photo_info.indexOf('/') == -1) return null;
      if (photo_info.indexOf('/') === 0) photo_info = photo_info.substr(1);
      id = photo_info.split("/")[1];
      return id;
    },

    callFlickrAPI: function(id, self) {
      var url = 'https://api.flickr.com/services/rest/?method=flickr.photos.getSizes' +
          '&api_key=' + flickr_key +
          '&photo_id=' + id + '&format=json&nojsoncallback=1';

      var request = new XMLHttpRequest();
      request.open('GET', url, true);
      request.onload = function() {
        if (request.status >= 200 && request.status < 400){
          data = JSON.parse(request.responseText);
          var flickr_url = self.bestFlickrUrl(data.sizes.size);
          self.setFlickrImage(flickr_url);
        } else {
          console.error("There was an error getting the picture from Flickr");
        }
      };
      request.onerror = function() {
        console.error("There was an error getting the picture from Flickr");
      };
      request.send();
    },

    setFlickrImage: function(src) {
      this.image.src = src;
    },

    bestFlickrUrl: function(ary) {
      var dict = {};
      for (var i = 0; i < ary.length; i++) {
        dict[ary[i].label] = ary[i].source;
      }
      for (var j = 0; j < FLICKR_SIZE_PREFERENCES.length; j++) {
        if (FLICKR_SIZE_PREFERENCES[j] in dict) {
          return dict[FLICKR_SIZE_PREFERENCES[j]];
        }
      }
      return ary[0].source;
    }
  };

  function getNaturalDimensions(DOMelement) {
    if (DOMelement.naturalWidth && DOMelement.naturalHeight) {
      return {width: DOMelement.naturalWidth, height: DOMelement.naturalHeight};
    }
    // http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/
    var img = new Image();
    img.src = DOMelement.src;
    return {width: img.width, height: img.height};
  }

  function getImageDimensions(img) {
    var dimensions = {
      width: getNaturalDimensions(img).width,
      height: getNaturalDimensions(img).height,
      aspect: function() { return (this.width / this.height); }
    };
    return dimensions;
  }

  function addClass(element, c) {
    if (element.classList) {
      element.classList.add(c);
    } else {
      element.className += " " + c;
    }
  }

  function removeClass(element, c) {
    element.className = element.className.replace(/(\S+)\s*/g, function (w, match) {
      if (match === c) {
        return '';
      }
      return w;
    }).replace(/^\s+/, '');
  }

  function setText(element, text) {
    if (document.body.textContent) {
      element.textContent = text;
    } else {
      element.innerText = text;
    }
  }

  function getComputedWidthAndHeight(element) {
    if (window.getComputedStyle) {
      return {
        width: parseInt(getComputedStyle(element).width, 10),
        height: parseInt(getComputedStyle(element).height, 10)
      };
    } else {
      w = element.getBoundingClientRect().right - element.getBoundingClientRect().left;
      h = element.getBoundingClientRect().bottom - element.getBoundingClientRect().top;
      return {
        width: parseInt(w, 10) || 0,
        height: parseInt(h, 10) || 0
      };
    }
  }

  function viewport() {
    var e = window, a = 'inner';
    if ( !( 'innerWidth' in window ) ) {
      a = 'client';
      e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
  }

  function getPageX(e) {
    var pageX;
    if (e.pageX) {
      pageX = e.pageX;
    } else if (e.touches) {
      pageX = e.touches[0].pageX;
    } else {
      pageX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    }
    return pageX;
  }

  function getPageY(e) {
    var pageY;
    if (e.pageY) {
      pageY = e.pageY;
    } else if (e.touches) {
      pageY = e.touches[0].pageY;
    } else {
      pageY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    return pageY;
  }

  function checkFlickr(url) {
    var idx = url.indexOf("flickr.com/photos/");
    if (idx == -1) {
      return false;
    } else {
      return true;
    }
  }

  function getLeftPercent(slider, input) {
    if (typeof(input) === "string" || typeof(input) === "number") {
      leftPercent = parseInt(input, 10);
    } else {
      var sliderRect = slider.getBoundingClientRect();
      var offset = {
        top: sliderRect.top + document.body.scrollTop,
        left: sliderRect.left + document.body.scrollLeft
      };
      var width = slider.offsetWidth;
      var pageX = getPageX(input);
      var relativeX = pageX - offset.left;
      leftPercent = (relativeX / width) * 100;
    }
    return leftPercent;
  }

  function getTopPercent(slider, input) {
    if (typeof(input) === "string" || typeof(input) === "number") {
      topPercent = parseInt(input, 10);
    } else {
      var sliderRect = slider.getBoundingClientRect();
      var offset = {
        top: sliderRect.top + document.body.scrollTop,
        left: sliderRect.left + document.body.scrollLeft
      };
      var width = slider.offsetHeight;
      var pageY = getPageY(input);
      var relativeY = pageY - offset.top;
      topPercent = (relativeY / width) * 100;

      console.log("sliderRect", sliderRect);
      console.log("pageY", pageY);
      console.log("relativeY", relativeY);
      console.log("topPercent", topPercent);
    }
    return topPercent;
  }

  // values of BOOLEAN_OPTIONS are ignored. just used for 'in' test on keys
  var BOOLEAN_OPTIONS =  {'animate': true, 'showLabels': true, 'showCredits': true, 'makeResponsive': true };
  function interpret_boolean(x) {
    if (typeof(x) != 'string') {
      return Boolean(x);
    }
    return !(x === 'false' || x === '');
  }

  function JXSlider(selector, images, options) {

    this.selector = selector;

    var i;
    this.options = { // new options must have default values set here.
      animate: true,
      showLabels: true,
      showCredits: true,
      makeResponsive: true,
      startingPosition: "50%",
      mode: 'horizontal',
      callback: null // pass a callback function if you like
    };

    for (i in this.options) {
      if(i in options) {
        if (i in BOOLEAN_OPTIONS) {
          this.options[i] = interpret_boolean(options[i]);
        } else {
          this.options[i] = options[i];
        }
      }
    }

    if (images.length == 2) {

      if(checkFlickr(images[0].src)) {
        this.imgBefore = new FlickrGraphic(images[0], this);
      } else {
        this.imgBefore = new Graphic(images[0], this);
      }

      if(checkFlickr(images[1].src)) {
        this.imgAfter = new FlickrGraphic(images[1], this);
      } else {
        this.imgAfter = new Graphic(images[1], this);
      }

    } else {
      console.warn("The images parameter takes two Image objects.");
    }

    if (this.imgBefore.credit || this.imgAfter.credit) {
      this.options.showCredits = true;
    } else {
      this.options.showCredits = false;
    }
  }

  JXSlider.prototype = {

    updateSlider: function(input, animate) {
      var leftPercent, rightPercent;

      if (this.options.mode === "vertical") {
        leftPercent = getTopPercent(this.slider, input);
      } else {
        leftPercent = getLeftPercent(this.slider, input);
      }

      leftPercent = leftPercent.toFixed(2) + "%";
      leftPercentNum = parseFloat(leftPercent);
      rightPercent = (100 - leftPercentNum) + "%";

      if (leftPercentNum > 0 && leftPercentNum < 100) {
        removeClass(this.handle, 'transition');
        removeClass(this.rightImage, 'transition');
        removeClass(this.leftImage, 'transition');

        if (this.options.animate && animate) {
          addClass(this.handle, 'transition');
          addClass(this.leftImage, 'transition');
          addClass(this.rightImage, 'transition');
        }

        if (this.options.mode === "vertical") {
          this.handle.style.top = leftPercent;
          this.leftImage.style.height = leftPercent;
          this.rightImage.style.height = rightPercent;
        } else {
          this.handle.style.left = leftPercent;
          this.leftImage.style.width = leftPercent;
          this.rightImage.style.width = rightPercent;
        }
        this.sliderPosition = leftPercent;
      }
    },

    getPosition: function() {
      return this.sliderPosition;
    },

    displayLabel: function(element, labelText) {
      label = document.createElement("div");
      label.className = 'jx-label';
      label.setAttribute('tabindex', 0); //put the controller in the natural tab order of the document

      setText(label, labelText);
      element.appendChild(label);
    },

    displayCredits: function() {
      credit = document.createElement("div");
      credit.className = "jx-credit";

      text = "<em>Photo Credits:</em>";
      if (this.imgBefore.credit) { text += " <em>Before</em> " + this.imgBefore.credit; }
      if (this.imgAfter.credit) { text += " <em>After</em> " + this.imgAfter.credit; }

      credit.innerHTML = text;

      this.wrapper.appendChild(credit);
    },

    setStartingPosition: function(s) {
      this.options.startingPosition = s;
    },

    checkImages: function() {
      if (getImageDimensions(this.imgBefore.image).aspect() ==
        getImageDimensions(this.imgAfter.image).aspect()) {
        return true;
      } else {
        return false;
      }
    },

    calculateDims: function(width, height){
      var ratio = getImageDimensions(this.imgBefore.image).aspect();
      if (width) {
        height = width / ratio;
      } else if (height) {
        width = height * ratio;
      }
      return {
        width: width,
        height: height,
        ratio: ratio
      };
    },

    responsivizeIframe: function(dims){
      //Check the slider dimensions against the iframe (window) dimensions
      if (dims.height < window.innerHeight){
        //If the aspect ratio is greater than 1, imgs are landscape, so letterbox top and bottom
        if (dims.ratio >= 1){
          this.wrapper.style.paddingTop = parseInt((window.innerHeight - dims.height) / 2) + "px";
        }
      } else if (dims.height > window.innerHeight) {
        /* If the image is too tall for the window, which happens at 100% width on large screens,
         * force dimension recalculation based on height instead of width */
        dims = this.calculateDims(0, window.innerHeight);
        this.wrapper.style.paddingLeft = parseInt((window.innerWidth - dims.width) / 2) + "px";
      }
      if (this.options.showCredits) {
        // accommodate the credits box within the iframe
        dims.height -= 13;
      }
      return dims;
    },

    setWrapperDimensions: function() {
      var wrapperWidth = getComputedWidthAndHeight(this.wrapper).width;
      var wrapperHeight = getComputedWidthAndHeight(this.wrapper).height;
      var dims = this.calculateDims(wrapperWidth, wrapperHeight);
      // if window is in iframe, make sure images don't overflow boundaries
      if (window.location !== window.parent.location && !this.options.makeResponsive) {
        dims = this.responsivizeIframe(dims);
      }

      this.wrapper.style.height = parseInt(dims.height) + "px";
      this.wrapper.style.width = parseInt(dims.width) + "px";
    },

    optimizeWrapper: function(maxWidth){
      var result = juxtapose.OPTIMIZATION_ACCEPTED;
      if ((this.imgBefore.image.naturalWidth >= maxWidth) && (this.imgAfter.image.naturalWidth >= maxWidth)) {
        this.wrapper.style.width = maxWidth + "px";
        result = juxtapose.OPTIMIZATION_WAS_CONSTRAINED;
      } else if (this.imgAfter.image.naturalWidth < maxWidth) {
        this.wrapper.style.width = this.imgAfter.image.naturalWidth + "px";
      } else {
        this.wrapper.style.width = this.imgBefore.image.naturalWidth + "px";
      }
      this.setWrapperDimensions();
      return result;
    },
    _onLoaded: function() {

      if (this.imgBefore && this.imgBefore.loaded === true &&
        this.imgAfter && this.imgAfter.loaded === true) {

        this.wrapper = document.querySelector(this.selector);
        addClass(this.wrapper, 'juxtapose');

        this.wrapper.style.width = getNaturalDimensions(this.imgBefore.image).width;
        this.setWrapperDimensions();

        this.slider = document.createElement("div");
        this.slider.className = 'jx-slider';
        this.wrapper.appendChild(this.slider);

        if (this.options.mode != "horizontal") {
          addClass(this.slider, this.options.mode);
        }

        this.handle = document.createElement("div");
        this.handle.className = 'jx-handle';

        this.rightImage = document.createElement("div");
        this.rightImage.className = 'jx-image jx-right';
        this.rightImage.appendChild(this.imgAfter.image);


        this.leftImage = document.createElement("div");
        this.leftImage.className = 'jx-image jx-left';
        this.leftImage.appendChild(this.imgBefore.image);

        this.labCredit = document.createElement("a");
        this.labCredit.setAttribute('href', 'http://juxtapose.knightlab.com');
        this.labCredit.setAttribute('target', '_blank');
        this.labCredit.className = 'jx-knightlab';
        this.labLogo = document.createElement("div");
        this.labLogo.className = 'knightlab-logo';
        this.labCredit.appendChild(this.labLogo);
        this.projectName = document.createElement("span");
        this.projectName.className = 'juxtapose-name';
        setText(this.projectName, 'JuxtaposeJS');
        this.labCredit.appendChild(this.projectName);

        this.slider.appendChild(this.handle);
        this.slider.appendChild(this.leftImage);
        this.slider.appendChild(this.rightImage);
        this.slider.appendChild(this.labCredit);

        this.leftArrow = document.createElement("div");
        this.rightArrow = document.createElement("div");
        this.control = document.createElement("div");
        this.controller = document.createElement("div");

        this.leftArrow.className = 'jx-arrow jx-left';
        this.rightArrow.className = 'jx-arrow jx-right';
        this.control.className = 'jx-control';
        this.controller.className = 'jx-controller';

        this.controller.setAttribute('tabindex', 0); //put the controller in the natural tab order of the document
        this.controller.setAttribute('role', 'slider');
        this.controller.setAttribute('aria-valuenow', 50);
        this.controller.setAttribute('aria-valuemin', 0);
        this.controller.setAttribute('aria-valuemax', 100);

        this.handle.appendChild(this.leftArrow);
        this.handle.appendChild(this.control);
        this.handle.appendChild(this.rightArrow);
        this.control.appendChild(this.controller);

        this._init();
      }
    },

    _init: function() {

      if (this.checkImages() === false) {
        console.warn(this, "Check that the two images have the same aspect ratio for the slider to work correctly.");
      }

      this.updateSlider(this.options.startingPosition, false);

      if (this.options.showLabels === true) {
        if (this.imgBefore.label) { this.displayLabel(this.leftImage, this.imgBefore.label); }
        if (this.imgAfter.label) { this.displayLabel(this.rightImage, this.imgAfter.label); }
      }

      if (this.options.showCredits === true) {
        this.displayCredits();
      }

      var self = this;
      window.addEventListener("resize", function() {
        self.setWrapperDimensions();
      });


      // Set up Javascript Events
      // On mousedown, call updateSlider then set animate to false
      // (if animate is true, adds css transition when updating).

      this.slider.addEventListener("mousedown", function(e) {
        e = e || window.event;
        e.preventDefault();
        self.updateSlider(e, true);
        animate = true;

        this.addEventListener("mousemove", function(e) {
          e = e || window.event;
          e.preventDefault();
          if (animate) { self.updateSlider(e, false); }
        });

        this.addEventListener('mouseup', function(e) {
          e = e || window.event;
          e.preventDefault();
          e.stopPropagation();
          this.removeEventListener('mouseup', arguments.callee);
          animate = false;
        });
      });

      this.slider.addEventListener("touchstart", function(e) {
        e = e || window.event;
        e.preventDefault();
        e.stopPropagation();
        self.updateSlider(e, true);

        this.addEventListener("touchmove", function(e) {
          e = e || window.event;
          e.preventDefault();
          e.stopPropagation();
          self.updateSlider(event, false);
        });

      });

      /* keyboard accessibility */

      this.handle.addEventListener("keydown", function (e) {
        e = e || window.event;
        var key = e.which || e.keyCode;
        var ariaValue = parseFloat(this.style.left);

          //move jx-controller left
          if (key == 37) {
            ariaValue = ariaValue - 1;
          var leftStart = parseFloat(this.style.left) - 1;
          self.updateSlider(leftStart, false);
          self.controller.setAttribute('aria-valuenow', ariaValue);
          }

          //move jx-controller right
          if (key == 39) {
            ariaValue = ariaValue + 1;
          var rightStart = parseFloat(this.style.left) + 1;
          self.updateSlider(rightStart, false);
          self.controller.setAttribute('aria-valuenow', ariaValue);
          }
      });

      //toggle right-hand image visibility
      this.leftImage.addEventListener("keydown", function (event) {
           var key = event.which || event.keyCode;
            if ((key == 13) || (key ==32)) {
              self.updateSlider("90%", true);
                self.controller.setAttribute('aria-valuenow', 90);
            }
      });

      //toggle left-hand image visibility
      this.rightImage.addEventListener("keydown", function (event) {
           var key = event.which || event.keyCode;
            if ((key == 13) || (key ==32)) {
            self.updateSlider("10%", true);
            self.controller.setAttribute('aria-valuenow', 10);
            }
      });

      juxtapose.sliders.push(this);

      if (this.options.callback && typeof(this.options.callback) == 'function') {
        this.options.callback(this);
      }
    }

  };

  /*
    Given an element that is configured with the proper data elements, make a slider out of it.
    Normally this will just be used by scanPage.
  */
  juxtapose.makeSlider = function (element, idx) {
    if (typeof idx == 'undefined') {
      idx = juxtapose.sliders.length; // not super threadsafe...
    }

    var w = element;

    var images = w.querySelectorAll('img');

    var options = {};
    // don't set empty string into options, that's a false false.
    if (w.getAttribute('data-animate')) {
      options.animate = w.getAttribute('data-animate');
    }
    if (w.getAttribute('data-showlabels')) {
      options.showLabels = w.getAttribute('data-showlabels');
    }
    if (w.getAttribute('data-showcredits')) {
      options.showCredits = w.getAttribute('data-showcredits');
    }
    if (w.getAttribute('data-startingposition')) {
      options.startingPosition = w.getAttribute('data-startingposition');
    }
    if (w.getAttribute('data-mode')) {
      options.mode = w.getAttribute('data-mode');
    }
    if (w.getAttribute('data-makeresponsive')) {
      options.mode = w.getAttribute('data-makeresponsive');
    }

    specificClass = 'juxtapose-' + idx;
    addClass(element, specificClass);

    selector = '.' + specificClass;

    if (w.innerHTML) {
      w.innerHTML = '';
    } else {
      w.innerText = '';
    }

    slider = new juxtapose.JXSlider(
      selector,
      [
        {
          src: images[0].src,
          label: images[0].getAttribute('data-label'),
          credit: images[0].getAttribute('data-credit')
        },
        {
          src: images[1].src,
          label: images[1].getAttribute('data-label'),
          credit: images[1].getAttribute('data-credit')
        }
      ],
      options
    );
  };

  //Enable HTML Implementation
  juxtapose.scanPage = function() {
      var elements = document.querySelectorAll('.juxtapose');
      for (var i = 0; i < elements.length; i++) {
      juxtapose.makeSlider(elements[i], i);
    }
  };

  juxtapose.JXSlider = JXSlider;
  window.juxtapose = juxtapose;

  juxtapose.scanPage();

}(document, window));


// addEventListener polyfill 1.0 / Eirik Backer / MIT Licence
(function(win, doc){
  if(win.addEventListener)return;   //No need to polyfill

  function docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v));};}
  function addEvent(on, fn, self){
    return (self = this).attachEvent('on' + on, function(e) {
      var e = e || win.event;
      e.preventDefault  = e.preventDefault  || function(){e.returnValue = false;};
      e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true;};
      fn.call(self, e);
    });
  }
  function addListen(obj, i){
    if(i = obj.length)while(i--)obj[i].addEventListener = addEvent;
    else obj.addEventListener = addEvent;
    return obj;
  }

  addListen([doc, win]);
  if('Element' in win)win.Element.prototype.addEventListener = addEvent;      //IE8
  else{                                     //IE < 8
    doc.attachEvent('onreadystatechange', function(){addListen(doc.all);});   //Make sure we also init at domReady
    docHijack('getElementsByTagName');
    docHijack('getElementById');
    docHijack('createElement');
    addListen(doc.all);
  }
})(window, document);
