jQuery(document).ready(function($) {

  showMarkup = '<span class="question-toggle show"><span>[+]</span></span>';
  hideMarkup = '<span class="question-toggle show"><span>[&ndash;]</span></span>';
  
  explanationMarkup = '<div class="faq-explanation" style="margin-top:-15px;">' + 
    '<p class="faq-explanation-info">Click on a video title to view.</p>' +
    '<span class="faq-show-all">Show All</span> &ndash; ' +
    '<span class="faq-hide-all">Hide All</span>' +
    '</div>';

  questions = $('.faq-question');
  $(questions).eq(0).before(explanationMarkup);

  answers = $(questions).next('.faq-answer');
  $(answers).hide();  

  $(questions).prepend(showMarkup);
  $(questions).click(toggleAnswers);
  
  showAllButton = $('.faq-show-all');
  hideAllButton = $('.faq-hide-all');
  
  $(showAllButton).click(showAllAnswers);
  $(hideAllButton).click(hideAllAnswers);
});

function toggleAnswers()
{
  var question = $(this);
  var answer   = $(question).next('.faq-answer');
  var toggle   = $(question).find('.question-toggle')
  
  if( $(answer).is(':hidden') )
  {
    $(answer).slideDown('fast');
    $(toggle).replaceWith(hideMarkup);
  } else {
    $(answer).slideUp('fast');
    $(toggle).replaceWith(showMarkup);
  }
  
  $(showAllButton).removeClass('faq-show-all-active');
  $(hideAllButton).removeClass('faq-hide-all-active');
}

function hideAllAnswers()
{
  $(hideAllButton).addClass('faq-hide-all-active');
  $(showAllButton).removeClass('faq-show-all-active');
  
  $(answers).slideUp('fast');
  $.each($('.question-toggle'), function() {
    $(this).replaceWith(showMarkup);
  });

}

function showAllAnswers()
{
  $(showAllButton).addClass('faq-show-all-active');
  $(hideAllButton).removeClass('faq-hide-all-active');
  
  $(answers).slideDown('fast');
  //$('.question-toggle').replaceWith(hideMarkup);
  $.each($('.question-toggle'), function() {
    $(this).replaceWith(hideMarkup);
  });

  }