Cacher is the code snippet organizer for pro developers

/* Start timeline scripts ----------------------------------------------------*/
/* Start timeline scripts ----------------------------------------------------*/
/* Start timeline scripts ----------------------------------------------------*/

/* Kinetic Drag */

var $id = function (id) { return document.getElementById(id); };
var $click = function (elem, fn) {
  return elem.addEventListener('click', function (e) {
    fn.apply(elem, [e]);
  }, false);
};

/* Kinetic Drag init*/
new VanillaKinetic(document.getElementById('timeline-container'), {
  filterTarget: function (target, e) {
    if (!/down|start/.test(e.type)) {
      return !(/area|a|input/i.test(target.tagName));
    }
  }
});

$click($id('timeline-arrow-right'), function () {
  $id('timeline-container')._VanillaKinetic.start({ velocity: 4 });
});

$click($id('timeline-arrow-left'), function () {
  $id('timeline-container')._VanillaKinetic.start({ velocity: -4 });
});


// Have fourth year-data column active
var activeData = $('.year-column.have-data').eq(3);
activeData.children('a').addClass('active');

var dataDesc = activeData.children('a').data('description');
var dataYear = activeData.children('a').data('year');

var yearDescription = '<div class="desc-container"><span class="year">' + activeData.children('a').data('year') + '</span><span class="sep">&nbsp;-&nbsp;</span><span class="desc">' + activeData.children('a').data('description') + '</span></div>';

var bottomDesc = $('.year-description');
var bottomDescInner = $('.year-description .description-inner');

// shape duplicate to bottom
var shape = activeData.children('a').find('.shape').clone();
//class copied and removed
var shapeClassed = shape.attr('class', activeData.children('a').attr('class')).addClass('shape').removeClass('column-data');
//small fade animation
bottomDesc.fadeOut(200, function () {
  bottomDescInner.empty();
  bottomDesc.fadeIn(300);
  $(shapeClassed).prependTo(bottomDescInner);
  $(yearDescription).appendTo(bottomDescInner);
});

// clone timelineyears left and right 
var yearColumn = $(".timeline-years .year-column").not('.left-clone', '.right-clone');
var ycl = yearColumn.length;
function cloneTimelinesleft() {
  var copyTimeline = yearColumn.clone().addClass('left-clone');
  copyTimeline.prependTo(".timeline-years");
}
function cloneTimelinesright() {
  var copyTimeline2 = yearColumn.clone().addClass('right-clone');
  copyTimeline2.appendTo(".timeline-years");
}
// cloneTimelinesleft();
// cloneTimelinesright();



// have-data top and bottom classes
function timeLineBottom(){
  var classes = ['top', 'middle-year', 'bottom-year'];
  $(function () {
    var target = $(".timeline-years .have-data");
    target.each(function (index) {
      $(this).addClass(classes[index % 3]);
    });
  });
}

// Hide until functions done
function showAfterLoad(){
  var yearData = document.querySelectorAll(".timeline-years .have-data .column-data");
  $(yearData).each(function () {
    timeLineBottom();
    $(this).addClass('disTable');
    $(this).show();
  });
}
showAfterLoad();

//random top - left timeline positions
function timeLinePositions() {
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }
  var yearColumns = document.querySelectorAll(".timeline-years .column-data");
  $(yearColumns).each(function () {
    // var topPosition = $(this).css('top');
    // parsedTop = parseInt(topPosition);
    // console.log(topPosition);
    if ($(window).width() >= 480) {
      $(this).css({ 'margin-left': getRandomInt(0, 30), 'margin-top': getRandomInt(0, 15) });
    }
    $(this).css({ 'margin-left': getRandomInt(0, 13), 'margin-top': getRandomInt(0, 5) });
  });
}
timeLinePositions();


// Set scroll position right end
var outerContent = $('.timeline-container');
var innerContent = $('.timeline-container .timeline-years .year-column');
var columnWidth = innerContent.outerWidth() + 1; //plus border
//console.log(columnWidth);
var columns = innerContent.length * columnWidth; // multiply by column width

//var scrollPos = (columns - outerContent.width()) / 2;
outerContent.scrollLeft(outerContent.width()); 

// arrow hiding
function timelineArrowHidden() {
  //console.log(outerContent.scrollLeft());
  if (outerContent.scrollLeft() < 50) {
    $('.timeline-arrow.left').addClass('hidden');
  } else {
    $('.timeline-arrow.left').removeClass('hidden');
  }

  if ( (outerContent.scrollLeft() + outerContent.outerWidth()) > (columns - 50) ) {
    $('.timeline-arrow.right').addClass('hidden');
  } else {
    $('.timeline-arrow.right').removeClass('hidden');
  }
}
timelineArrowHidden();

$('.timeline-container').on('scroll', function () {
  timelineArrowHidden();
});


// Display year description when clicked
$('body').on('click', 'a.column-data', function (e) {
  if ($(this).hasClass('active')){
    return false;
  }
  $('a.column-data').removeClass('active');
  $(this).addClass('active');

  // Add active to same repeat columns
  // get title string
  var titleString = $(this).data('title');
  //console.log(titleString);
  $('.timeline-years .have-data').each( function(e) {
    //console.log(e);
    var haveDatas = $(this).children('a').data('title');
    //console.log(haveDatas);
    if ( haveDatas === titleString ) {
      $(this).children('a').addClass('active');
      // console.log($(this));
      // console.log(true);
    }
  });

  var dataDesc = $(this).data('description');
  var dataYear = $(this).data('year');

  var yearDescription = '<div class="desc-container"><span class="year">' + $(this).data('year') + '</span><span class="sep">&nbsp;-&nbsp;</span><span class="desc">' + $(this).data('description') + '</span></div>';

  var bottomDesc = $('.year-description');
  var bottomDescInner = $('.year-description .description-inner');

  // shape duplicate to bottom
  var shape = $(this).find('.shape').clone();
  //class copied and removed
  var shapeClassed = shape.attr('class', $(this).attr('class')).addClass('shape').removeClass('column-data');
  //console.log(shape);
  //var shapetest = $(this).find('.shape').attr('class', $('a.column-data').attr('class'));
  //console.log(shapeClassed);

  //small fade animation
  bottomDesc.fadeOut(200, function () {
    bottomDescInner.empty();
    bottomDesc.fadeIn(300);
    $(shapeClassed).prependTo(bottomDescInner);
    $(yearDescription).appendTo(bottomDescInner);
  });

  // console.log(bottomDesc);
  // console.log(dataDesc);
  e.preventDefault();
});