var window = document.getElementById('window'),

carousel = document.getElementById('carousel');

function slide(wrapper, items) {

var posX1 = 0,
  posX2 = 0,
  posInitial,
  posFinal,
  threshold = 100,
  slides = items.getElementsByClassName('slide'),
  slidesLength = slides.length,
  slideSize = items.getElementsByClassName('slide')[0].offsetWidth;
initOrder();
// Mouse events
items.onmousedown = dragStart;
// Touch events
items.addEventListener('touchstart', dragStart);
items.addEventListener('touchend', dragEnd);
items.addEventListener('touchmove', dragAction);
// Transition events
//items.addEventListener('transitionend', checkIndex);
function dragStart(e) {
  e = e || window.event;
  e.preventDefault();
  posInitial = e.screenX;
  if (e.type == 'touchstart') {
    posX1 = e.touches[0].screenX;
  } else {
    posX1 = e.screenX;
    document.onmousemove = dragAction;
    document.onmouseup = dragEnd;
  }
}
function dragAction(e) {
  e = e || window.event;
  if (e.type == 'touchmove') {
    posX2 = posX1 - e.touches[0].screenX;
    posX1 = e.touches[0].screenX;
  } else {
    posX2 = posX1 - e.screenX;
    posX1 = e.screenX;
  }
  var itemsX = Number(getTranslateX(items));
  posX2 = itemsX - posX2;
  items.style.transform = "translateX(" + posX2 + "px)";
}
function dragEnd(e) {
  if (e.type == 'touchend') {
    posFinal = e.touches[0].screenX;
  }
  else {
    posFinal = e.screenX;
  }
  if (posFinal - posInitial < -threshold) {
    shiftSlide(-1);
  } else if (posFinal - posInitial > threshold) {
    shiftSlide(1);
  } else {
    shiftSlide(0);
  }
  document.onmouseup = null;
  document.onmousemove = null;
}
function shiftSlide(dir) {
  items.classList.add('transition');
  if (items.classList.contains('transition')) {
    items.style.transform = "translateX(" + (dir * slideSize) + "px)";
    if (dir == 1) {
      changeOrder(1);
    } else if (dir == -1) {
      changeOrder(-1);
    }
    else {
    }
    items.classList.remove('transition');
    items.style.transform = "translateX(0px)";
  }
  allowShift = false;
}
function getTranslateX(element) {
  // Suppose the transformed element is called "cover".
  computedStyle = window.getComputedStyle(element, null); // "null" means this is not a pesudo style.
  // You can retrieve the CSS3 matrix string by the following method.
  var matrix = computedStyle.getPropertyValue('transform');
  // Parse this string to obtain different attributes of the matrix.
  // This regexp matches anything looks like this: anything(1, 2, 3, 4, 5, 6);
  // Hence it matches both matrix strings:
  // 2d: matrix(1,2,3,4,5,6)
  // 3d: matrix3d(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16);
  var matrixPattern = /^\w*\((((-?\d+)|(-?\d*\.-?\d+)),\s*)*((-?\d+)|(-?\d*\.-?\d+))\)/i;
  var matrixValue = [];
  if (matrixPattern.test(matrix)) { // When it satisfy the pattern.
    var matrixCopy = matrix.replace(/^\w*\(/, '').replace(')', '');
    matrixValue = matrixCopy.split(/\s*,\s*/);
  }
  return matrixValue[4];
}
function initOrder() {
  var now = window.location.href;
  var i, count = 0;
  for (i = 0; i < slidesLength; i++) {
    slides[i].style.order = i;
  }
  for (i = 0; i < slidesLength; i++) {
    if (now == slides[i].getElementsByTagName('a')[0].getAttribute('href')) {
      break;
    }
    count = count + 1;
  }
  slides[count].getElementsByTagName('a')[0].style.color = 'darkorange';
  changeOrder(-count);
}
function changeOrder(dir) {
  //css order로 바꾸기
  var order = [];
  var i;
  for (i = 0; i < slidesLength; i++) {
    order[i] = Number(slides[i].style.getPropertyValue('order'));
  }
  for (i = 0; i < slidesLength; i++) {
    if (dir > 0) {
      order[i] = order[i] + dir - slidesLength;
    }
    else {
      order[i] = order[i] + dir;
    }
    if (order[i] < 0) {
      order[i] = order[i] + slidesLength;
    }
  }
  console.log(order);
  for (i = 0; i < slidesLength; i++) {
    slides[i].style.order = order[i];
  }
}

} slide(window, carousel);