var clickedScrollbar = false;
var clickedSelector = false;
var scrollWidth = 60;
var clickedYearSelector = false;

var startIndex = 0;
var endIndex = 0;

var startYearIndex = 0;
var endYearIndex = 0;

var initialX = 0;
var dragging = false;

var clickedPeriodIndex = 0;
var clickedYearPeriodIndex = 0;

var timeout;
var mouseX;

$('#year-range-selector').on('mousedown', '.year-period-block-container', function(e) {
  clickedYearSelector = true;
  clickedYearPeriodIndex = $(this).index();
});
  
// click detection
$('#range-selector').on('mousedown', '.period-block-container', function(e) {
  clickedSelector = true;
  clickedPeriodIndex = $(this).index();

  // get range selector position
  var rangeSelectorX = $('#range-selector').offset().left;
  var rangeSelectorY = $('#range-selector').offset().top;
  var rangeSelectorWidth = $('#range-selector').width();

  timeout = setInterval(function(event) {

    // select the period at the coordinates
    var draggedElement = document.elementFromPoint(mouseX, rangeSelectorY);

    // convert to jquery and get its index
    var draggedIndex = $(draggedElement).index();

    //change clicked element
    clickedPeriodIndex = draggedIndex;

    // change hovered element
    $('.scrollbar-period').removeClass('hovered');
    $('.scrollbar-period').eq(draggedIndex).addClass('hovered');

    // scroll one period if near the edge every 350ms
    if (mouseX > (rangeSelectorX + (rangeSelectorWidth - 30))) {

      $('#range-selector').animate({
        scrollLeft: $('#range-selector').scrollLeft() + scrollWidth
      }, 0);

      if (draggedIndex + 1 < 60) {
        //clear the scrollbar IDs
        $('.scrollbar-period').attr('id', '');

        // add the IDs back
        $('.scrollbar-period').eq(draggedIndex - 11).attr('id', 'scrollbar-start');
        $('.scrollbar-period').eq(draggedIndex + 1).attr('id', 'scrollbar-end');
      }

    } else if ((mouseX < (rangeSelectorX + 30))) {
      $('#range-selector').animate({
        scrollLeft: $('#range-selector').scrollLeft() - scrollWidth
      }, 0);

      if (draggedIndex - 1 >= 0) {
        //clear the scrollbar IDs
        $('.scrollbar-period').attr('id', '');

        // add the IDs back
        $('.scrollbar-period').eq(draggedIndex - 1).attr('id', 'scrollbar-start');
        $('.scrollbar-period').eq(draggedIndex + 11).attr('id', 'scrollbar-end');
      }
    }

    if ($(draggedElement).hasClass('period-block-container')) {
      //console.log()

      if (draggedIndex < startIndex) {
        startIndex = draggedIndex;
      } else if (draggedIndex > endIndex) {
        endIndex = draggedIndex;
      }

      selectElements();
    }
  }, 250);
  return false;
});

$('#range-selector').on('mouseover', '.period-block-container', function(e) {
  // hover in the scrollbar too
  $('.scrollbar-period').removeClass('hovered');
  var hoverededIndex = $(this).index();
  $('.scrollbar-period').eq(hoverededIndex).addClass('hovered');

  if (clickedSelector == true) {

    var x = e.pageX - $('#range-selector').offset().left;

    // if the user is not already dragging,
    // and they move the mouse more than 4 pixels from the original point they clicked
    if ((!dragging) && (Math.abs(initialX - x) > 5)) {
      console.log('DRAG START');
      dragging = true;
      var draggedIndex = $(this).index();

      //if ((draggedIndex > endIndex) || (draggedIndex < startIndex)) {
      // set this as the starting and ending of the selection
      startIndex = draggedIndex;
      endIndex = draggedIndex;
      //}
    }
  }
});

$('body').mousemove(function(e) {

  // get x position of mouse
  mouseX = e.pageX;

  // get position and width of range selector
  var rangeSelectorY = $('#range-selector').offset().top;
  var rangeSelectorX = $('#range-selector').offset().left;
  var rangeSelectorWidth = $('#range-selector').width();

  // select the period at the coordinates
  var draggedElement = document.elementFromPoint(mouseX, rangeSelectorY)

  // convert to jquery and get its index
  var draggedIndex = $(draggedElement).index();

  var validDraggingElement = false;

  if (clickedScrollbar == true) {
    var scrollbarY = $('#custom-scrollbar').offset().top;

    // select the scrollbar period at the coordinates
    var scrollbarElement = document.elementFromPoint(mouseX, scrollbarY)

    if ($(scrollbarElement).hasClass('scrollbar-period')) {
      // convert to jquery and get its index
      var scrollbarIndex = $(scrollbarElement).index();
      //console.log(scrollbarIndex);
      scrollbarClicked(scrollbarIndex);
    }
  } else if (dragging) {

    if ($(draggedElement).hasClass('period-block-container')) {
      //console.log()

      if (draggedIndex < startIndex) {
        startIndex = draggedIndex;
      } else if (draggedIndex > endIndex) {
        endIndex = draggedIndex;
      }

      validDraggingElement = true;
      selectElements();
    }
  }
});

$('#custom-scrollbar').on('mousedown', '.scrollbar-period', function() {
  clickedScrollbar = true;
  scrollbarClicked($(this).index());
});

$('#custom-scrollbar').on('mousemove', '.scrollbar-period', function() {
  if (clickedScrollbar == true) {
    scrollbarClicked($(this).index());
  }
});

$(document).mouseup(function(e) {

  if (!dragging && !clickedScrollbar && clickedSelector) {

    // if this is the initial selection
    if ($('.period-block-container.selected').length <= 0) {
      startIndex = clickedPeriodIndex;
      endIndex = clickedPeriodIndex;
    }

    // if the user is clicking in the middle of their selection
    if (((clickedPeriodIndex <= endIndex) && (startIndex <= clickedPeriodIndex))) {
      // set the end of the selection to where the user clicked
      endIndex = clickedPeriodIndex;
    }

    // but if the user clicks outside the selection, select those periods too
    else if (clickedPeriodIndex < startIndex) {
      startIndex = clickedPeriodIndex;
    } else if (clickedPeriodIndex > endIndex) {
      endIndex = clickedPeriodIndex;
    }

    initialX = e.pageX - $('#range-selector').offset().left;

    // clear selections


    // scroll one period if clicked near the edges
    if (initialX > 760) {
      $('#range-selector').animate({
        scrollLeft: $('#range-selector').scrollLeft() + scrollWidth
      }, 0);

      // get the index of the scrollbar start
      // add 1 to it and the end
      var scrollbarStartIndex = $('#scrollbar-start').index();
      var scrollbarEndIndex = scrollbarStartIndex + 12;

      if (scrollbarStartIndex + 13 < 60) {
        scrollbarStartIndex++;
        scrollbarEndIndex++;
      }

      //clear the scrollbar IDs
      $('.scrollbar-period').attr('id', '');

      // add the IDs back
      $('.scrollbar-period').eq(scrollbarStartIndex).attr('id', 'scrollbar-start');
      $('.scrollbar-period').eq(scrollbarEndIndex).attr('id', 'scrollbar-end');

    } else if (initialX < 30) {
      $('#range-selector').animate({
        scrollLeft: $('#range-selector').scrollLeft() - scrollWidth
      }, 0);

      // get the index of the scrollbar start
      // add 1 to it and the end
      var scrollbarStartIndex = $('#scrollbar-start').index();
      var scrollbarEndIndex = scrollbarStartIndex + 12;

      if (scrollbarStartIndex - 1 >= 0) {
        scrollbarStartIndex--;
        scrollbarEndIndex--;
      }

      //clear the scrollbar IDs
      $('.scrollbar-period').attr('id', '');

      // add the IDs back
      $('.scrollbar-period').eq(scrollbarStartIndex).attr('id', 'scrollbar-start');
      $('.scrollbar-period').eq(scrollbarEndIndex).attr('id', 'scrollbar-end');
    }
    
    // select all the periods between the indexes
    selectElements();
  }
  else if (clickedYearSelector) {
    // if this is the initial selection
    if ($('.year-period-block-container.selected').length <= 0) {
      startYearIndex = clickedYearPeriodIndex;
      endYearIndex = clickedYearPeriodIndex;
    }

    // if the user is clicking in the middle of their selection
    if (((clickedYearPeriodIndex <= endYearIndex) && (startYearIndex <= clickedYearPeriodIndex))) {
      // set the end of the selection to where the user clicked
      endYearIndex = clickedYearPeriodIndex;
    }

    // but if the user clicks outside the selection, select those periods too
    else if (clickedYearPeriodIndex < startYearIndex) {
      startYearIndex = clickedYearPeriodIndex;
    } else if (clickedYearPeriodIndex > endYearIndex) {
      endYearIndex = clickedYearPeriodIndex;
    }
    
    selectYearElements();
  }
  
  clickedYearSelector = false;
  dragging = false;
  clickedScrollbar = false;
  clickedSelector = false;

  clearInterval(timeout);
  
  console.log(startIndex + ', ' + endIndex);
});

$('#range-selector').mouseleave(function() {
  $('.scrollbar-period').removeClass('hovered');
});

// when clear "x" is pressed
$('#selected-range').on('mousedown', '.fa-times', function(e) {
  // clear the selection or whatever
  startIndex = 0;
  endIndex = 0;
  startYearIndex = 0;
  endYearIndex = 0;
  // clear selections
  $('.period-block-container').removeClass('selected first-selected last-selected');
  $('.scrollbar-period').removeClass('selected first-selected last-selected');

  $('#selected-range').addClass('not-set');
  $('#selected-range').html("Not set <i class=\"fa fa-times\"></i></div>");
  
  // clear year selections
  $('.year-period-block-container').removeClass('selected first-selected last-selected');
  
  $('#multiple-rows-checkbox-label').fadeOut(200);
});

// radio buttons
$('#select-year-radio').click(function(){
  $('#custom-scrollbar').hide();
  $('#range-selector').hide();
  $('#year-range-selector').show();
  
  if (startYearIndex == endYearIndex) {
    $('#multiple-rows-checkbox-label').fadeOut(200);
  } else {
    $('#multiple-rows-checkbox-label').fadeIn(200);
  }
});

$('#select-month-radio').click(function(){
  $('#year-range-selector').hide();
  $('#custom-scrollbar').show();
  $('#range-selector').show();
  
  if (startIndex == endIndex) {
    $('#multiple-rows-checkbox-label').fadeOut(200);
  } else {
    $('#multiple-rows-checkbox-label').fadeIn(200);
  }
});

var scrollbarClicked = function(clickedIndex) {
  var startScrollbarIndex, endScrollbarIndex;
  var set = false;

  if ((clickedIndex - 7) < 0) {
    startScrollbarIndex = 0;
    endScrollbarIndex = 12;
    set = true;
  } else {
    startScrollbarIndex = clickedIndex - 6;
    endScrollbarIndex = clickedIndex + 6;
  }

  if (set == false) {
    if ((clickedIndex + 6) >= 60) {
      startScrollbarIndex = 47;
      endScrollbarIndex = 59;
    } else {
      startScrollbarIndex = clickedIndex - 6;
      endScrollbarIndex = clickedIndex + 6;
    }
  }

  // clear all scrollbar period IDs
  $('.scrollbar-period').attr('id', '');

  $('.scrollbar-period').eq(startScrollbarIndex).attr('id', 'scrollbar-start');
  $('.scrollbar-period').eq(endScrollbarIndex).attr('id', 'scrollbar-end');

  $('#range-selector').animate({
    scrollLeft: startScrollbarIndex * scrollWidth
  }, 0);
}

// variable for selecting all the periods between the start and end indexes
var selectElements = function() {
  $('.period-block-container').removeClass('selected first-selected last-selected');
  $('.scrollbar-period').removeClass('selected');
  
  for (var i = startIndex; i <= endIndex; i++) {
    $('.scrollbar-period').eq(i).addClass('selected');
    $('.period-block-container').eq(i).addClass('selected');
    
    // special styles for first and last selected periods
    if (i == startIndex) {
      $('.period-block-container').eq(i).addClass('first-selected');
    }
    if (i == endIndex) {
      $('.period-block-container').eq(i).addClass('last-selected');
    }
  }

  if (startIndex == endIndex) {
    $('#multiple-rows-checkbox-label').fadeOut(200);
  } else {
    $('#multiple-rows-checkbox-label').fadeIn(200);
  }

  // get selected string......
  var startText = $('.period-block-container').eq(startIndex).children('.month').text();
  var nearestStartYear = '';

  // if the current selected has year text, use that
  if ($('.period-block-container').eq(startIndex).find('.year').length != 0) {
    nearestStartYear = $('.period-block-container').eq(startIndex).children('.year').text();
  }
  // otherwise use the closest previous year text
  else {
    nearestStartYear = $('.period-block-container').eq(startIndex).prevAll(".period-block-container.show-year:first").text();
  }

  // trim the month out with regex
  nearestStartYear = nearestStartYear.replace(/\D+/g, '');
  startText = startText + ' ' + nearestStartYear;
  //console.log(startText);

  var endText = $('.period-block-container').eq(endIndex).children('.month').text();
  var nearestEndYear = '';

  if ($('.period-block-container').eq(endIndex).find('.year').length != 0) {
    nearestEndYear = $('.period-block-container').eq(endIndex).children('.year').text();
  } else {
    nearestEndYear = $('.period-block-container').eq(endIndex).prevAll(".period-block-container.show-year:first").text();
  }

  nearestEndYear = nearestEndYear.replace(/\D+/g, '');
  endText = endText + ' ' + nearestEndYear;
  //console.log(endText);

  $('#selected-range').removeClass('not-set');
  
  // change text accordingly
  if (startText != endText) {
    $('#selected-range').html(startText + ' - ' + endText + "<i class=\"fa fa-times\"></i>");
  } else {
    $('#selected-range').html(startText + "<i class=\"fa fa-times\"></i>");
  }

  // use the year from the text to select on the year range selector
  $('.year-period-block-container').removeClass('selected first-selected last-selected');
  
  startYearIndex = $('.year-period-block-container:contains(\"'+nearestStartYear+'\")').index();
  endYearIndex = $('.year-period-block-container:contains(\"'+nearestEndYear+'\")').index();
  
  for (var i = startYearIndex; i <= endYearIndex; i++) {
    $('.year-period-block-container').eq(i).addClass('selected');
    // special styles for first and last selected periods
    if (i == startYearIndex) {
      $('.year-period-block-container').eq(i).addClass('first-selected');
    }
    if (i == endYearIndex) {
      $('.year-period-block-container').eq(i).addClass('last-selected');
    }
  }
}

var selectYearElements = function(){
  $('.year-period-block-container').removeClass('selected first-selected last-selected');
  $('.period-block-container').removeClass('selected first-selected last-selected');
  $('.scrollbar-period').removeClass('selected');

  for (var i = startYearIndex; i <= endYearIndex; i++) {
    $('.year-period-block-container').eq(i).addClass('selected');
    // special styles for first and last selected periods
    if (i == startYearIndex) {
      $('.year-period-block-container').eq(i).addClass('first-selected');
    }
    if (i == endYearIndex) {
      $('.year-period-block-container').eq(i).addClass('last-selected');
    }
  }

  var startYear = $('.year-period-block-container').eq(startYearIndex).text();
  var endYear = $('.year-period-block-container').eq(endYearIndex).text();
  
  $('#selected-range').removeClass('not-set');
  $('#selected-range').html('Jan ' + startYear + ' - Dec ' + endYear + "<i class=\"fa fa-times\"></i>");
  
  // find element on month selector with matching years
  startIndex = ($('.period-block-container').has('.year:contains("'+startYear+'")').index());
  endIndex = ($('.period-block-container').has('.year:contains("'+endYear+'")').index());
  
  if (endYear == 2015) {
    endIndex = 4; // magic numberz
  }
  else if (endIndex + 11 < 60) {
    endIndex += 11;
  }
  else {
    var numToAdd = (endIndex+13) - 60;
    endIndex += numToAdd;
  }

  for (var i = startIndex; i <= endIndex; i++) {
    $('.scrollbar-period').eq(i).addClass('selected');
    $('.period-block-container').eq(i).addClass('selected');

    // special styles for first and last selected periods
    if (i == startIndex) {
      $('.period-block-container').eq(i).addClass('first-selected');
    }
    if (i == endIndex) {
      $('.period-block-container').eq(i).addClass('last-selected');
    }
  }

  // hide or show checkbox
  if (startYearIndex == endYearIndex) {
    $('#multiple-rows-checkbox-label').fadeOut(200);
  } else {
    $('#multiple-rows-checkbox-label').fadeIn(200);
  }
}