$(function() {
  var quotes        = document.querySelector('.quotes'),
      firstQuote    = quotes.firstElementChild,
      slideInterval = 3000,
      fadeInterval  = 300,
      intervalId;
  // intervalId는 무엇인가
 
  function showQuote(quote) {
    quote.className = 'quote active fade-in';
  }

//showQuote 라는 var가 없는데 어떻게 저게생기는거며 그뒤에 quote는 class명 quote를 의미하는것인지
//---->  showQuote는 함수이고요 quote 입력받는 값이고요 argument 라고 하지요. 
//===> 위에보시면 함수 정의되어 있고요 아래에 적용 되는 부분이고요. (자바스크립트 함수를 공부하시면됩니다) 
//===>showQuote 에 next 란 값을 넣어서 위에 함수로 전달하네요 
  function fadeInNextOrFirst(active) {
    var next = active.nextElementSibling;
    if (next) {
      showQuote(next);
    } else {
      showQuote(firstQuote);
    }
  }
 
// 마찬가지로 fadeInNextOrFirst 라는 것은 대체 누가만든것이며 if(next) 라고 했을때
//===> fadeInNextOrFirs 는 함수입니다 플러그인 함수라고합니다 
//===> 구글에서 '플러그인 개발' 이라는 것을 검색해 보세요

showquote(next)와 그밖에 showquote(firstquote)는 무슨말인지..
//====> 위에 설명드렸습니다. 
  function fadeOut(quote, callback) {
    quote.className = 'quote active';
    var timeoutId = setTimeout(function() {
      quote.className = 'quote';
      callback();
      clearTimeout(timeoutId);
    }, fadeInterval);
  }
  function rotateQuotes() {
    var active  = quotes.querySelector('.active');
    fadeOut(active, function() {
      fadeInNextOrFirst(active)
    });
  }
  function start() {
    intervalId = setInterval(rotateQuotes, slideInterval);
  }
  function stop() {
    clearInterval(intervalId);
  }
  start();
  return window.Quotator = {
    start: start,
    stop:  stop
  };
})();