var category_count;
var headline_count;
var headline_interval;
var old_headline = 0;
var current_headline = 0;
var count = 0;
var leftSide = 0;

function showTab() {
  $('#ticker').css({display: 'block'});
  beginScroll();
  pauseNews();
  getSpecific();
  previousNews();
  nextNews();
}

function beginScroll() {
  category_count = $('ul#tickerCategories > li > a').size();
  //add a class of category plus the number the category is in the array
	$('ul#tickerCategories > li > a').each(function (i) {
	  $(this).attr('id','category' + i);
  });
  //get the count of all news headlines
  headline_count = $('ul#tickerCategories li ul li').size();
  //if there is only one headline. Duplocate that headline in order for it to cycle through correctly.
  if (headline_count == 1) {
	  $('ul#tickerCategories li ul li:first').clone().insertAfter('ul#tickerCategories li ul li:first');
    headline_count = $('ul#tickerCategories li ul li').size();
  }
  //add an id of headline plus the number the headline is in the array
	$('ul#tickerCategories li ul li').each(function (i) {
	  $(this).attr('id','headline' + i);
  });
  //move the first headline to the window
  $('ul#tickerCategories li ul li:eq('+current_headline+')').css('left', '0px');
  //make the parent ul of the li in the viewing window have a higher z-index than the other ul's
  $('ul#tickerCategories li ul li:eq(' + old_headline + ')').parent().css({zIndex: '9'});
  //add a class of selected to the ul of the li in the viewing window
	$('ul#tickerCategories > li a:first').addClass('selected');
	//start the ticker
  headline_interval = setInterval(headline_rotate,4000);
}

function headline_rotate() {
  //Line 2 sets a new value for current_headline by first adding 1 to old_headline and then using the modulus operator (%) to get the remainder of old_headline + 1 (our new headline) divided by headline_count (total number of headlines).
  //The remainder will always equal old_headline + 1 until it reaches headline_count, at which point the remainder becomes zero.
  //Count is then added to the number in case we are looping through the specific section
  current_headline = old_headline + 1;
  if (current_headline > (headline_count + (count - 1))) {
    current_headline = count;
  }
  //get the width of the current scrolling headline
  var currentWidth = $('ul#tickerCategories li ul li:eq(' + old_headline + ')').width();
  //animate the old headline out of the window and place it back to the left
  $('ul#tickerCategories li ul li:eq(' + old_headline + ')').animate({left: '-' + (currentWidth+100) + 'px'},2000, function() {
	  $(this).css({left: '2000px',zIndex: '-9'});
	});
	//animate the current headline into the window and increase its z-index.
	//remove the class selected from any element that has it and add it the parent of the current headline. This will switch with each section
  $('ul#tickerCategories li ul li:eq(' + current_headline + ')').animate({left: 0},2000, function() {
	  $(this).css({zIndex: '9999'});
	  $('ul#tickerCategories > li a').removeClass('selected');
	  $(this).parent().parent().find('a:first').addClass('selected');
	});
  $('ul#tickerCategories li ul').css({zIndex: '0'});
  $('ul#tickerCategories li ul li:eq(' + old_headline + ')').parent().css({zIndex: '9'});
  old_headline = current_headline;
  newTopics();
}

function getSpecific() {
	$('ul#tickerCategories > li a').click(function() {
    //remove the class selected from any element that has it
    $('ul#tickerCategories > li a').removeClass('selected');
  	//add class selected to the element that was clicked
  	$(this).addClass('selected');
  	//set the z-index of all headline ul's to 0
    $('ul#tickerCategories li ul').css({zIndex: '0'});
    //move all headlines to the left 2000px
    $('ul#tickerCategories li ul li').css({left: '2000px'});
    //set the z-index of the child ul of the category we want to 9
    $(this).parent().find('ul:first').css({zIndex: '9'});
    //move the first headline of the category we want to the left most spot
    $(this).parent().find('li:first').css('left', '0px');
    //get the new headline_count equal to the number of li's in the section specific ul
  	headline_count = $(this).parent().find('li').size();
        //if there is only one headline. Duplocate that headline in order for it to cycle through correctly.
        if (headline_count == 1) {
          li = $(this).parent().find('li:first');
      	  li.clone().insertAfter(li);
          headline_count = $(this).parent().find('li').size();
          //add an id of headline plus the number the headline is in the array
        	$('ul#tickerCategories li ul li').each(function (i) {
        	  $(this).attr('id','headline' + i);
          });
        }
  	//set count to the number of the first li of the specfic section in relation to where is is among all headline ul's. We get this from the last number that has been added to the class 'headline'
  	count = $(this).parent().find('li:first').attr('id').substr(8,2) - 0;
  	//set old_headline to the new count number
    old_headline = count;
    //set current_headline to the new count number
    current_headline = count;    
  	//if ticker is already paused
    if ($('#ticker-pause').hasClass('play')) {
      //do nothing
    //if it is not already paused
    } else {
      //simulate a click of the pause button and cycle through that function
      $('#ticker-pause').trigger('click');
    }
    newTopics();
  });
}

function headline_stop() {
  //stop all animation
  $('ul#tickerCategories li ul li').stop();
  $('ul#tickerCategories li ul li').stop();
}

function pauseNews() {
  $('#ticker-pause').toggle(function() {
    clearInterval(headline_interval);
    headline_stop();
    //switch the play and pause button image
    $(this).toggleClass('play');
  }, function() {
    var headlineLeft = parseInt($('ul#tickerCategories li ul li:eq(' + old_headline + ')').css('left'));
    //check to see a headline is stopped at the left side 0
    if (headlineLeft > 0) {
      //it a headline is stopped midway through set it to the previous one in order to move the current stopped on out of the way
      //if the old headline = 0 then set it to the last item
      if (old_headline == 0) {
        old_headline = headline_count - 1;
      //otherwise subject by 1
      } else {
        old_headline = old_headline - 1;
      }
    }
    headline_interval = setInterval(headline_rotate,4000);
    headline_rotate();
    //switch the play and pause button image
    $(this).toggleClass('play');
  });
}

function previousNews() {
  $('#ticker-previous').click(function() {
    //remove the class selected from any element that has it
    $('ul#tickerCategories > li a').removeClass('selected');
  	//if ticker is already paused
    if ($('#ticker-pause').hasClass('play')) {
      //do nothing
    //if it is not already paused
    } else {
      //simulate a click of the pause button and cycle through that function
      $('#ticker-pause').trigger('click');
    }
    //if the headline is the first one overall
    if (old_headline == 0) {
      //Go the to the last one
      old_headline = (headline_count + count) - 1;
    //if the headline is the first one in the category if specific category was clicked
    } else if (old_headline == 0 + count) {
      //Go to the last one in that category
      old_headline = (headline_count + count) - 1;
    //if we are not at the first one in any category  
    } else {
      //Go back one headline
      old_headline = old_headline - 1;
    }
    newTopics();
    //set all the headlines 2000px to the left
    $('ul#tickerCategories li ul li').css({left: '2000px'});
    //set the headline we want to see at the 0 mark on the left
    $('ul#tickerCategories li ul li:eq(' + old_headline + ')').css({left: '0px'});
  });
}

function nextNews() {
  $('#ticker-next').click(function() {
    //remove the class selected from any element that has it
    $('ul#tickerCategories > li a').removeClass('selected');
  	//if ticker is already paused
    if ($('#ticker-pause').hasClass('play')) {
      //if the headline is the last one overall or the last in the category if the specific category button has been clicked
      if (old_headline == ((headline_count - 1)+count)) {
        //set the headline to the first one overall or the first one in the category
        old_headline = 0 + count;
      //if we are not at the last one overall or in a category
      } else {
        //Go to the next headline
        old_headline = old_headline + 1;
      }
    //if it is not already paused
    } else {
      //if the headline is the last one overall or the last in the category if the specific category button has been clicked
      if(old_headline == ((headline_count - 1)+count)) {
        //set the headline to the first one overall or the first one in the category
        old_headline = 0 + count;
      //if we are not at the last one overall or in a category
      } else {
        //Go to the next headline
        old_headline = old_headline + 1;
      }
      //simulate a click of the pause button and cycle through that function
      $('#ticker-pause').trigger('click');
    }
    newTopics();
    //set all the headlines 2000px to the left
    $('ul#tickerCategories li ul li').css({left: '2000px'});
    //set the headline we want to see at the 0 mark on the left
    $('ul#tickerCategories li ul li:eq(' + old_headline + ')').css({left: '0px'});
  });
}

function setTopics() {
  var sectionCount = $('ul#tickerCategories > li > a').size();
	$('ul#tickerCategories > li > a').each(function (i) {
	  $(this).css({left: leftSide});
	  leftSide += ($(this).width() + 20);
  });
  $('#ticker-next-sport').click(function() {
    //remove the class selected from any element that has it
    $('ul#tickerCategories > li a').removeClass('selected');
  	//if ticker is already paused
    if ($('#ticker-pause').hasClass('play')) {
    //if it is not already paused
    } else {
      //simulate a click of the pause button and cycle through that function
      $('#ticker-pause').trigger('click');
    }
  	//set the z-index of all headline ul's to 0
    $('ul#tickerCategories li ul').css({zIndex: '0'});
    //move all headlines to the left 2000px
    $('ul#tickerCategories li ul li').css({left: '2000px'});
    
    //get the category of the current headline
  	var category = $('ul#tickerCategories li ul li:eq(' + old_headline + ')').parent().parent().find('a:first');
  	//the number contained in the id of the category will tell us where it is in the list. Add one to it to go to the next cateogry
    var categoryPosition = (category.attr('id').substr(8,2) - 0) + 1;
    //if we are past the last category available
    if (categoryPosition > (category_count - 1)) {
      //use the first category
      var frontCategory = $('ul#tickerCategories > li > a:eq(0)');
    } else {
      //otherwise use the next category
      frontCategory = $('ul#tickerCategories > li > a:eq(' + categoryPosition + ')');
    }
    //if the category is not past the end
    if (categoryPosition <= (category_count - 1)) {
      //add class selected to the category that is now at the front
      frontCategory.addClass('selected');
      //get the first headline of the new front category
      var frontHeadline = frontCategory.parent().find('li:first').attr('id').substr(8,2) - 0;
      //set old_headline to the new front headline
      old_headline = frontHeadline;
    } else {
      //if were are past the number of categories available, use the first overall headline
      old_headline = 0
    }
    //move what is the new headline to the front
    $('ul#tickerCategories li ul li:eq(' + old_headline + ')').css({left: '0px'});
    //get the left value of the new front category
    newLeft = parseInt(frontCategory.css('left'));
    //if it is not at the front already move it there
    if (newLeft != 0) {
      //animate all headlines to the left in order for the new front cateogry to be at the 0 position
      $('ul#tickerCategories > li > a').each(function (i) {
        $(this).animate({left: '-='+(newLeft)+''},0);
      });
    }
    
  });
}

function newTopics() {
	var a = $('ul#tickerCategories li ul li:eq(' + old_headline + ')').parent().parent().find('a:first');
  //add class selected to the element that was clicked
  a.addClass('selected');
  //newLeft = parseInt(a.css('left'));
  //if (newLeft != 0) {
  //  $('ul#tickerCategories > li > a').each(function (i) {
  //    $(this).animate({left: '-='+(newLeft)+''},0);
  //  });
  //}
}

$(document).ready(function() {
  showTab();
  setTopics();
});