$(document).ready(function() {

   var timer = null;

   var index = 0;

   $('a').click(function() {

       index = $(this).index();

       wrapper();

       stopAutoPlay();

   });

   $('a').mouseenter(function() {

       index = $(this).index();

       wrapper();

       stopAutoPlay();

   });

   var wrapper = function() {

       $('a').eq(index)

           .css({ 'background': 'yellow' })

           .siblings()

           .css({ 'background': 'white' });

       $('img').eq(index)

           .css({ 'opacity': '1' })

           .siblings()

           .css({ 'opacity': '0' });

   };

   $(document).keydown(function(event) {

       if (event.keyCode == 37) {

           index = index > 0 ? --index : $('a').length - 1;

       } else if (event.keyCode == 39) {

           index = index < $('a').length - 1 ? ++index : 0;

       } else { return false; }

       wrapper();

       stopAutoPlay();

   });

   var autoPlay = function() {

       timer = setInterval(function() {

           if (index > $('a').length - 1) {

               index = 0;

               ++index;

           } else if (index < 0) {

               index = $('a').length - 1;

               --index;

           };

           wrapper();

       }, 1000);

   }

   autoPlay();

   var stopAutoPlay = function() {

       if (timer) {

           clearInterval(timer);

       }

   }

})