(function () {
  "use strict";

  var items = document.querySelectorAll(".timeline li");

  function isElementInViewport(el) {
	var rect = el.getBoundingClientRect();
	return (
	  rect.top >= 0 &&
	  rect.left >= 0 &&
	  rect.bottom <=
		(window.innerHeight || document.documentElement.clientHeight) &&
	  rect.right <= (window.innerWidth || document.documentElement.clientWidth)
	);
  }

  function callbackFunc() {
	for (var i = 0; i < items.length; i++) {
	  if (isElementInViewport(items[i])) {
		items[i].classList.add("in-view");
	  }
	}
  }

  window.addEventListener("load", callbackFunc);
  window.addEventListener("resize", callbackFunc);
  window.addEventListener("scroll", callbackFunc);
})();


 function appear(elm, i, step, speed){
    var t_o;
    //initial opacity
    i = i || 0;
    //opacity increment
    step = step || 5;
    //time waited between two opacity increments in msec
    speed = speed || 50; 

    t_o = setInterval(function(){
        //get opacity in decimals
        var opacity = i / 100;
        //set the next opacity step
        i = i + step; 
        if(opacity > 1 || opacity < 0){
            clearInterval(t_o);
            //if 1-opaque or 0-transparent, stop
            return; 
        }
        //modern browsers
        elm.style.opacity = opacity;
        //older IE
        elm.style.filter = 'alpha(opacity=' + opacity*100 + ')';
    }, speed);
}

var timeline = document.getElementById('timeline');
var connectButton = document.getElementById('connectButton');
var connectButtonNav = document.getElementById('connectButtonNav');
var timelineScrollBox = document.getElementById('timelineScrollBox');
var timelineScroller = document.getElementById('timelineScroller');
var timelineScrollerDot = document.getElementById('timelineScrollerDot');
var mainImage = document.getElementById('mainImage');
var onceOrNah = false;
var originalTimeline = timelineScroller.style;
console.log('==============');
console.log(originalTimeline);
console.log('==============');

function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

var previousY = 0;
function roadmapCheck() {
/* 		if (isInViewport(connectButton) && onceOrNah) {
			//connectButtonNav.style = "visibility: hidden;";
			onceOrNah = false;
			appear(connectButtonNav, 100, -5, 40);
		} else if (!isInViewport(connectButton) && !onceOrNah) {
			onceOrNah = true;
			appear(connectButtonNav, 0, 5, 40);
		} */
	
	if (
		timeline.getBoundingClientRect().top <= ((window.innerHeight/2)) 
	) {
		if (previousY == 0) {
			previousY = window.scrollY;
			console.log('11111111',previousY);
		} else if (previousY < window.scrollY) {
			console.log('22222222',previousY);
			if (timeline.getBoundingClientRect().height > (timelineScroller.getBoundingClientRect().height+75) + (window.scrollY - previousY)) {
				console.log('22222222.....11111',timelineScroller.getBoundingClientRect().height, window.scrollY , previousY, timelineScroller.getBoundingClientRect().height + (window.scrollY - previousY));
				console.log('timelineScroller height::',timelineScroller.getBoundingClientRect().height);
				console.log('window.scrollY::',window.scrollY);
				console.log('previousY::',previousY);
				console.log('oper::',timelineScroller.getBoundingClientRect().height + (window.scrollY - previousY));
				timelineScroller.style.height = timelineScroller.getBoundingClientRect().height + (window.scrollY - previousY);
				previousY = window.scrollY;
				console.log('22222222.....22222',previousY), window.scrollY;
			}
		} else if (previousY > window.scrollY) {
			console.log('333333333',previousY);
			if (timeline.getBoundingClientRect().height > timelineScroller.getBoundingClientRect().height - (previousY - window.scrollY)) {
				console.log('3333333.....1111',timelineScroller.getBoundingClientRect().height, window.scrollY , previousY, timelineScroller.getBoundingClientRect().height - (previousY - window.scrollY));
				console.log('timelineScroller height::',timelineScroller.getBoundingClientRect().height);
				console.log('window.scrollY::',window.scrollY);
				console.log('previousY::',previousY);
				console.log('oper::',timelineScroller.getBoundingClientRect().height + (window.scrollY - previousY));
				previousY = window.scrollY;
				console.log('3333333.....22222',previousY), window.scrollY;
			}
		}
	}
}
	
/* 	if (window.innerWidth < 1600) {
		mainImage.style.width = "150px;";
	} */
	


if (window.innerWidth < 600) {
	console.log('44444444',window.innerWidth);
	timelineScroller.style.margin = "";
	timelineScrollBox.style.padding = "50px 0";
	timelineScrollBox.style.marginLeft = "20px";
	timelineScrollerDot.style.margin = "";
	timelineScrollerDot.style.marginLeft = "-7px";
} else {
	console.log('55555555',window.innerWidth);
	timelineScroller.style = "width: 6px; height: 100px; background-color: #ffffff; margin: 0 auto;margin-top: 30px; box-shadow: #558113 5px 10px 25px;";
	timelineScrollBox.style = "width: 100%; position: absolute; z-index: 5000;";
	timelineScrollerDot.style = "width: 20px; height: 20px; background-color: #ffffff; margin: 0 auto; margin-bottom: 0px; border-radius: 50%; box-shadow: #558113 7px 10px 25px;";
}