$.fn.loopingAnimation = function(command, dur) {
  if(this.data('loop') == true) {
    var selectedid = $('#sidenav .active').attr("id").split("menuitem_")[1];
    $('#submenu ul').animate({
      'scrollTop': command,
      }, 
      {
        step: function(now, fx) {
          updateSelector(0);
          //$('#submenuselector').css({top: $('#menuitem_' + selectedid).position().top - 10});
        },
        duration: dur,
        complete: function() {
          updateSelector(0);
          if($(this).data('loop') == true)
            $(this).loopingAnimation(command, dur);
        }
    });
  }
  return this;
}

function updateSelector(dur) {
  var selectedid = $('#sidenav .active').attr("id").split("menuitem_")[1];
  var selected = ('#menuitem_' + selectedid);
  if(isVisible(selected)) {
    $("#submenuselector").animate({
      top: $("#menuitem_" + selectedid).offset().top - 187 + 30
      }, dur).show();
  } else {
    $('#submenuselector').hide();
  }
}

function isVisible(elem) {
  var ulTop = 0;
  var ulBot = $('#submenu ul').height();

  var elemTop = $(elem).position().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom > 0) && (elemTop < $('#submenu ul').height()));
}

$(document).ready(function () {
  if($("#submenu").length < 1) return; //Page does not contain a submenu
  if($("#sidenav .active").length < 1) {
    //No default item set
    $("#sidenav li").first().addClass("active");
  }
  var firstid = $("#sidenav .active").attr("id").split("menuitem_")[1];
  var itemHeight = $('#sidenav .active').height();
  var maxScroll = $('#sidenav ul li').size() > 5 ? ($('#sidenav ul li').size() - 5) * itemHeight : false;

  $("#imagenav").cycle({
    fx:'fade',
    before: function(curr) {
      var selectedid = $(this).attr("id").split("imageitem_")[1];
      $('#sidenav .active').removeClass('active');
      $('#menuitem_' + selectedid).addClass('active');
      $(".submenucontentitem").hide();
      updateSelector(200);
      $("#contentitem_" + selectedid).show().css({'opacity':0}).animate({'opacity':1}, 500);
    },
    pager: "#sidenav",
    pagerAnchorBuilder: function(idx, slide) {
      return "#menuitem_" + idx;
    },
    timeout: 0,
    startingSlide: firstid
  });
  $('#uparrow').hover(function() {
    if(maxScroll && $('#sidenav ul').scrollTop() == 0)
      return;
    $('#sidenav ul').data('loop', true).stop().loopingAnimation('-=' + itemHeight +'px', 200);
  }, function() {
    $('#sidenav ul').data('loop', false);
  });
  $('#downarrow').hover(function(){
    if(maxScroll && $('#sidenav ul').scrollTop() == maxScroll)
      return;
    $('#sidenav ul').data('loop', true).stop().loopingAnimation('+=' + itemHeight + 'px', 200);
  }, function() {
    $('#sidenav ul').data('loop', false);
  });
});