var wdf = {
  'hotspots': [
    {
      'y':      0,
      'x':      -220,
      'z':      0,
      'start':  34,
      'end':    58
    },
    {
      'y':      -80,
      'x':      -100,
      'z':      100,
      'start':  16,
      'end':    45
    },
    {
      'y':      80,
      'x':      200,
      'z':      51,
      'start':  16,
      'end':    44
    },
    {
      'y':      30,
      'x':      100,
      'z':      -100,
      'start':  46,
      'end':    14
    }
  ]
}

var $input = document.querySelector('[data-js-input]');
var $susan = document.querySelector('[data-js-susan]');
var $dimsum = document.querySelector('[data-js-dimsum]');
var $spotsContainer = document.querySelector('[data-js-spots]');
var $$swivels = null;
var $readout1 = document.querySelector('[data-js-readout-1]');
var $readout2 = document.querySelector('[data-js-readout-2]');
var steps = 0;
var angle = 0;
var frame = 0;

var init = function() {
  cutTheMustard();
  steps = ( parseInt($input.getAttribute('max')) - parseInt($input.getAttribute('min')) ) / parseInt($input.getAttribute('step'));
  angle = $input.value;
  frame = getFrame(angle);
  hotspotsInit(); 
  registerEvents();
  document.querySelector('[data-js-input]').value = 60;
  spin();
};

var cutTheMustard = function (){
  var element = document.createElement('p'),
      html = document.getElementsByTagName('HTML')[0],
      body = document.getElementsByTagName('BODY')[0],
      propertys = {
        'webkitTransformStyle':'-webkit-transform-style',
        'MozTransformStyle':'-moz-transform-style',
        'msTransformStyle':'-ms-transform-style',
        'transformStyle':'transform-style'
      };

    body.insertBefore(element, null);

    for (var i in propertys) {
        if (element.style[i] !== undefined) {
            element.style[i] = "preserve-3d";
        }
    }

    var st = window.getComputedStyle(element, null),
        transform = st.getPropertyValue("-webkit-transform-style") ||
                    st.getPropertyValue("-moz-transform-style") ||
                    st.getPropertyValue("-ms-transform-style") ||
                    st.getPropertyValue("transform-style");

    if(transform!=='preserve-3d'){
      html.className += 'no-preserve-3d';
    } else {
      html.className += 'preserve-3d';
    }
    document.body.removeChild(element);
};

var getFrame = function(angle) {
  return Math.round( ( ( parseInt(angle) + 180 )/360 ) * steps )
}

var spin = function(ev) {
  angle = $input.value;
  frame = getFrame(angle);
  spinObject(angle,frame);
  hotspotsCheck(angle,frame);
}

var spinObject = function() {
  $dimsum.style.transform = 'rotateY(' + angle + 'deg)';
  $readout1.innerText = angle + '˚';
  $readout2.innerText = 'frame ' + frame;
}

var hotspotsInit = function() {
  var hotspots = wdf.hotspots;
  var $hotspotEl = null;
  var $hotspotElInner = null;
  for(var i=0; i<hotspots.length; i++ ) {
    hotspotBuild(i);
  }
  $$swivels = document.querySelectorAll('[data-js-swivel]');
  hotspotsCheck();
};

var hotspotBuild = function(index) {
  
    $hotspotEl = document.createElement('span');
    $hotspotEl.classList.add('spot');
    $hotspotEl.id = 'spot' + index;
    $hotspotEl.style.transform = hotspotPlot(index);
    $hotspotEl.style.webkitTransform = hotspotPlot(index);
    
    $hotspotElInner = document.createElement('span');
    $hotspotElInner.classList.add('spot__inner');
    $hotspotElInner.setAttribute('data-js-swivel','');
    $hotspotElInner.innerText = index;
    
    $hotspotEl.appendChild($hotspotElInner);
    $spotsContainer.appendChild($hotspotEl);
  
}

var hotspotsCheck = function() {
  var hotspots = wdf.hotspots;
  var i = 0;
  var spot = null;
  hotspotsRotate();
  hotspotOn(i);
  for( i=0; i<hotspots.length; i++ ) {
    spot = hotspots[i];
    if ( 
      ( spot.end > spot.start && frame >= spot.start && frame <= spot.end )
      ||
      ( spot.end < spot.start && ( frame >= spot.start || frame <= spot.end ) )
    ) {
      hotspotOn(i);
    } else {
      hotspotOff(i);
    }
  }
}

var hotspotOn = function(index) {
  if (wdf.hotspots[index].visible !== true) {
    document.querySelector('#spot' + index).classList.add('spot--visible');
    wdf.hotspots[index].visible = true;
  }
}

var hotspotOff = function(index) {
  if (wdf.hotspots[index].visible === true) {
    document.querySelector('#spot' + index).classList.remove('spot--visible');
    wdf.hotspots[index].visible = false;
  }
}

var hotspotPlot = function(index) {
  var hotspotPlotX = wdf.hotspots[index].x + 'px';
  var hotspotPlotY = wdf.hotspots[index].y + 'px';
  var hotspotPlotZ = wdf.hotspots[index].z + 'px';
  return 'translate3d(' + hotspotPlotX + ', ' + hotspotPlotY + ', ' + hotspotPlotZ + ')';
}

var hotspotsRotate = function() {
  for(var i=0; i<$$swivels.length; i++) {
    $$swivels[i].style.transform = 'rotateY(' + (angle < 0 ? 360 - angle : '-' + angle) + 'deg)';
  }
}

var registerEvents = function() {
  $input.addEventListener('input',spin);
  $input.addEventListener('change',spin);
};

init();