$(window).load(function(){

  var $target = $('#upgrade-examples-img'),
      $thumb = $('#upgrade-examples-right'),
      $number = $('#img-number'),
      nowNum = 0,
      path = '',
      mainPath = '';
	  maxNum =  $thumb.find('a').length;

  var imgChange = function () {
    if(path !== mainPath) {
      $target.parent().fadeTo(0, 0, function(){
        $target.attr('src',path);
        $target.parent().fadeTo(500, 1);
        $number.text(nowNum + 1 + '/' + maxNum);
      });
    }
  }

  $thumb.find('a').on('click', function(){
    path = $(this).find('img').attr('src'),
    mainPath = $target.attr('src');
    nowNum = $(this).parent().index()
    imgChange();

    return false;
  });

  $('#prev').on('click', function(){
    if(nowNum <= 0) {
      nowNum = maxNum - 1;
    } else {
      nowNum--;
    }

    path = $thumb.find('li').eq(nowNum).find('img').attr('src');
    imgChange();


    return false;
  });

  $('#next').on('click', function(){
    if(nowNum >= maxNum - 1) {
      nowNum = 0;
    } else {
      nowNum++;
    }

    path = $thumb.find('li').eq(nowNum).find('img').attr('src');
    imgChange();

    return false;
  });

});