$(function() {
  $.imgpreload([templateDir + '/images/quote-top-and-bottom-over-above.png',
                templateDir + '/images/quote-top-and-bottom-over-below.png',
                templateDir + '/images/quote-bottom-over.png'], function() {});

  var whichQuote, numQuotes, quotetail, originalbg, quotebg;
  var mutex = false;
  
  function quotetailNum(quotenum) {
    return parseInt(quotenum / 2);
  }

  $('.quote').mouseover(function() {
    if( mutex ) return;
    mutex = true;
    whichQuote = $(this).parent().children('.quote').index($(this));
    numQuotes = $(this).parent().children('.quote').length - 1;
    
    quotetail = $($(this).siblings('.quote-top-and-bottom, .quote-bottom').get(quotetailNum(whichQuote)));
    originalbg = quotetail.css('background-image');
    if( quotetail.hasClass('quote-bottom') ) {
      quotetail.css('background-image', originalbg.replace('quote-bottom', 'quote-bottom-over'));
    } else {
      if( whichQuote % 2 == 0 ) {
        quotetail.css('background-image', originalbg.replace('quote-top-and-bottom', 'quote-top-and-bottom-over-above'));
      } else {
        quotetail.css('background-image', originalbg.replace('quote-top-and-bottom', 'quote-top-and-bottom-over-below'));
      }
    }
    quotebg = $(this).css('background-image');
    $(this).css('background', '#FFFFFF');

  }).mouseout(function() {
    quotetail.css('background-image', originalbg);
    $(this).css('background', quotebg);
    mutex = false;
  });
});