// taglines slideshow
function slideshow(json, tpl) {
  var j = json[1];
  // append html
  $('#intro .tagline').addClass('one')
    .after('<div class="tagline two" id="tagline_' + j.id + '" style="display: none;"><div class="text"><h2>' + j.caption + '</h2><h3>' + j.byline + '</h3></div><img src="' + tpl + 'taglines/' + j.image + '" alt="" /></div>');
  if (j.cite) {$('#intro .text').after('<blockquote>' + j.cite + '</blockquote>');}

  Cufon.set('fontWeight', 200).refresh('#intro h2')('#intro h3')('#intro blockquote');

  // set timeout
  setTimeout(function() {hideSlide(json, tpl, 'one', 2);}, 10000);
}

// switch slide
function hideSlide(json, tpl, pos, next) {
  var one = $('#intro > div.one');
  var two = $('#intro > div.two');
  
  var holder = two; // load in background
  var tab = one; // fade in
  if (pos == 'one') {holder = one; tab = two;} // switch position
  

  // fade out
  $(holder).fadeOut(600);
  showSlide(json, tpl, pos, next, tab, holder);
  
  //setTimeout(function() {showSlide(json, tpl, pos, next, tab, holder);}, 10000);
}

function showSlide(json, tpl, pos, next, tab, holder) {
  j = json[next];
  next = json[next + 1] ? next + 1 : 0; // increment cursor or move to the first if the end in reached

  // fade in
  $(tab).fadeIn(600, function() {
    // fill with content
    $(holder).attr('id', 'tagline_' + j.id);
    $('h1', holder).html(j.caption);
    $('h3', holder).html(j.byline);
    j.cite ? $('blockquote', holder).html(j.cite) : $('blockquote', holder).remove();
    $('img', holder).attr('src', tpl + 'taglines/' + j.image);
    
    Cufon.set('fontWeight', 200).refresh('#intro h2')('#intro h3')('#intro blockquote');
  
    // set timeout
    pos == 'one' ? pos = 'two' : pos = 'one';
    setTimeout(function() {hideSlide(json, tpl, pos, next);}, 20000);
  });
}