$(document).ready(function(){
  $('#cycle_scroll').data('sh', 0).data('ms', 15).data('left', parseInt($('#cycle_scroll').css('left'))).data('width',0).data('prefix',0).data('postfix',0).data('mode', 0).data('scroll',
    function () {
      var e = $('#cycle_scroll');
      if (e.data('sh')) {
        e.data('left', e.data('left') + e.data('sh'));
        if (!e.data('mode')) {
          if (e.data('left') > 0) {
            e.data('left', - e.data('width') + e.data('left'));
          } else if (e.data('left') < - e.data('prefix') - e.data('width')) {
            e.data('left', e.data('width') + e.data('left'));
          }
        } else {
          if (e.data('sh') > 0) {
            if (e.data('left') > e.data('destleft')) {
              e.data('left', e.data('destleft'));
              e.data('sh', 0);
              e.data('shift_in')();
            }
          } else {
            if (e.data('left') < e.data('destleft')) {
              e.data('left', e.data('destleft'));
              e.data('sh', 0);
              e.data('shift_in')();
            }
          }
        }
        $('#cycle_scroll').css('left', e.data('left') + 'px');
      }
      if (e.data('sh')) {
        setTimeout("$('#cycle_scroll').data('scroll')()", e.data('ms'));
      }
    }
  ).data('shift_in',
    function () {
      var width = $('#cycle_scroll').data('destel').next().children().attr('width');
      $('#cycle_scroll').data('destel').next().animate({width: width + 'px'}, 800, 'easeOutExpo', function () {$('#cycle_scroll').data('mode', 2)});
    }
  ).data('shift_out',
    function () {
      var e = $('#cycle_scroll');
      if (e.data('mode') == 2) {
        e.data('mode', 3);
        $('#cycle_scroll .symbolimg').each(function(i) {
          $(this).attr('src', $(this).attr('src').replace(/light/, 'dark'));
        });
        e.data('destel').next().animate({width: '0px'}, 200, 'linear', function () {
          e.data('mode', 0);
          e.data('sh', -1); 
          e.data('scroll')();
        });
      }
    }
  );

  $('#cycle_scroll .symbolimg').each(function(i){
      if ($(this).hasClass('prefix')) {
        $('#cycle_scroll').data('prefix', $('#cycle_scroll').data('prefix') + $(this).attr('width'));
      } else if ($(this).hasClass('postfix')) {
        $('#cycle_scroll').data('postfix', $('#cycle_scroll').data('postfix') + $(this).attr('width'));
      } else {
        $('#cycle_scroll').data('width', $('#cycle_scroll').data('width') + $(this).attr('width'));
      }
      $(this).click(
        function () {
          var e = $('#cycle_scroll');
          if (!$('#cycle_scroll').data('mode')) {
            var click_el = this;
            var match = false;
            var left = 0;
            var sh =  e.data('sh');
            $('#cycle_scroll .symbolimg').each(function(i) {
              if (click_el == this) {
                match = true;
              } else {
                if (!match) {
                  left -= $(this).attr('width');
                }
                var src = $(this).attr('src');
                $(this).attr('src', src.replace(/dark/, 'light'));
              }
            });
            left += 100;
            if (left > e.data('left')) {
              e.data('sh', 30);
            } else {
              e.data('sh', -30);
            }
            e.data('mode', 1);
            e.data('destleft', left);
            e.data('destel', $(this));
            if (!sh) {
              e.data('scroll')();
            } 
          } else if (e.data('mode') == 2) {
            e.data('shift_out')();
          }
        }
      );  
    }
  );

  $('#cycle_scroll .symbolimgtext').each( function (i) {
      $(this).click(
        function () { $('#cycle_scroll').data('shift_out')(); }
      );
    }
  );

  $('#c1').mouseleave( function () {
      if ($('#cycle_scroll').data('mode')) return;
      $('#cycle_scroll').data('sh', 0);
    }
  ).data('startscroll',
    function (sh) {
      if ($('#cycle_scroll').data('mode')) return;
      var old_sh = $('#cycle_scroll').data('sh');
      $('#cycle_scroll').data('sh', sh);
      if (!old_sh) {
        $('#cycle_scroll').data('scroll')();
      } 
    }
  );

  $('#a10').mouseenter(function () {$('#c1').data('startscroll')(-6) }).click(function () { $('#cycle_scroll').data('shift_out')() });
  $('#a11').mouseenter(function () {$('#c1').data('startscroll')(-3) }).click(function () { $('#cycle_scroll').data('shift_out')() });
  $('#a12').mouseenter(function () {$('#c1').data('startscroll')(-1) }).click(function () { $('#cycle_scroll').data('shift_out')() });
  $('#a13').mouseenter(function () {$('#c1').data('startscroll')(0) }).click(function () { $('#cycle_scroll').data('shift_out')() });
  $('#a14').mouseenter(function () {$('#c1').data('startscroll')(1) }).click(function () { $('#cycle_scroll').data('shift_out')() });
  $('#a15').mouseenter(function () {$('#c1').data('startscroll')(3) }).click(function () { $('#cycle_scroll').data('shift_out')() });
  $('#a16').mouseenter(function () {$('#c1').data('startscroll')(6) }).click(function () { $('#cycle_scroll').data('shift_out')() });
});

$(window).load(function () {
  $('#cycle_scroll').data('sh', 1);
  $('#cycle_scroll').data('scroll')();
});