var globalTimeout = null;
$(document).ready(function() {
  $('#filterBox').focus();

  console.log("hash: " + window.location.hash);
  if(window.location.hash.match(/^#[0-9]{2}$/)) {
    setNewImage(window.location.hash.substring(1));
  }

  $(window).on('hashchange', function() {
    setNewImage(window.location.hash.substring(1));
  });

  $('#filterBox').on('keyup', function() {
    if(globalTimeout != null)
      clearTimeout(globalTimeout);
    var $box = $(this);
    globalTimeout = setTimeout(function() {
      globalTimeout = null;
      var input = $box.val().toLowerCase();
      console.log("input: " + input);
      if(input.length >= 3) {
        var i = 0;
        $('.showRow').each(function() {
          var found = false;
          var bands = $(this).find('a');
          $.each(bands, function(i, val) {
            console.log("text: ", $(val).text().toLowerCase());
            if($(val).text().toLowerCase().indexOf(input) > -1)
              found = true;
          });

          console.log("found: ", found);
          if(found) {
            $(this).removeClass('hide');
            $(this).addClass(i % 2 == 0 ? 'odd' : 'even');
            i++;
          } else {
            $(this).addClass('hide');
            $(this).removeClass('odd');
            $(this).removeClass('even');
          }
        });
      } else {
        $('.showRow').removeClass('hide');
      }
    }, 500);
  });


  $('.navigationIcon').on('click', function() {
    var num = $(this).data('num');
    var $img = $('.showImage img');
    var src = $img.attr('src');

    window.location.hash = num;
  });

  $('.showImage img').on('click', function() {
    var num = $(this).data('num');
    num++;
    if(num < 10)
      num = "0" + num;

    if(num > $('.numberedNavigationIcon').length) {
      window.location = $('.navigationIconRight').attr('href');
    } else
      window.location.hash = num;
  });
});

function activateNavigation(num) {
  $('.navigationIcon').each(function() {
    if($(this).data('num') == num) {
      $(this).addClass('active');
    } else {
      $(this).removeClass('active');
    }
  });
}

function setNewImage(num) {
  if(num == '')
    num = '01';
  var newsrc = false;
  var pattern = /^(.*)_[0-9]{2}.jpg$/;
  if($('.showImage img').attr('src').match(pattern)) {
    newsrc = RegExp.$1 + '_' + num + '.jpg';
  }
  $('.showImage img').attr('src', newsrc);
  $('.showImage img').data('num', num);
  activateNavigation(num);
}