$(document).ready(function(){
  const urlParams = new URLSearchParams(window.location.search);
  var nav = '<span class="arrow prev">&larr;</span>' +
            '<span class="dot">&middot;</span>' +
            '<span class="dot">&middot;</span>' +
            '<span class="dot">&middot;</span>' +
            '<span class="dot">&middot;</span>' +
            '<span class="dot">&middot;</span>' +
            '<span class="dot">&middot;</span>' +
            '<span class="arrow next">&rarr;</span>'
  $('.nav').not('.last').append(nav);

  var navLast = '<span class="arrow prev">&larr;</span>' +
                '<span class="dot">&middot;</span>' +
                '<span class="dot">&middot;</span>' +
                '<span class="dot">&middot;</span>' +
                '<span class="dot">&middot;</span>' +
                '<span class="dot">&middot;</span>' +
                '<span class="dot">&middot;</span>' +
                '<span id="last-arrow" class="arrow done">' +
                urlParams.get('last-arrow') + '</span>'
  $('.nav.last').append(navLast);

  $('.carousel').slick({
  	arrows: false,
  	dots: false,
    fade: true
  });

  $('.next').click(function() {
  	$('.carousel').slick('slickNext');
	changeTitleToSendEvent();
  });

  $('.prev').click(function() {
  	$('.carousel').slick('slickPrev');
	changeTitleToSendEvent();
  });

  $('.done').click(function() {
          document.title = 'CLOSE'
  });

  $('.start').click(function() {
          document.title = 'CLOSE'
  });

  $('.dot').click(function() {
    var index = $(this).index() - 1;
    $('.carousel').slick('slickGoTo', index);
	changeTitleToSendEvent();
  });

  $('.carousel').on('afterChange', function(event, slick) {
    refreshCurrentDot();
  });

function changeTitleToSendEvent(){

	var index =$('.carousel').slick('slickCurrentSlide');

	if (index == 1){
		document.title = 'EDIT'
	 }
	if (index == 2){
		document.title = 'WHITEOUT'
	 }
	if (index == 3){
		document.title = 'INSERT'
	 }
	if (index == 4){
		document.title = 'NOTES'
	  }
	if (index == 5){
		document.title = 'TOOLS'
	 }
  }

  function refreshCurrentDot() {
    $('.dot').each(function() {
      var index = $(this).index() - 1;
      if (index == $('.carousel').slick('slickCurrentSlide')) {
        $(this).addClass('current');
      } else {
        $(this).removeClass('current');
      };
    });
  };

  $('#next').click(function() {
    document.title = 'NEXT'
  });

});
