$(document).ready(function(){ 


$('#share-toggle-top').toggle(function() {
  $('.share-paneltop-expanded').fadeIn();
}, function() {
  $('.share-paneltop-expanded').fadeOut();
});

$('#share-toggle-under').toggle(function() {
  $('.share-panelunder-expanded').fadeIn();
}, function() {
  $('.share-panelunder-expanded').fadeOut();
});


//Homepage Promo Panel

//1. Add the copy panel and forward backward arrows if javascript enabled 
    
    $('#banner-panel').append('<div id="banner-nav-left-wrapper"><a id="prev" href=""><img src="images/nav-back.png"/></a></div><div class="banner-copy"><div class="copy"></div></div><div id="banner-nav-right-wrapper"><a id="next" href=""><img src="images/nav-forward.png"/></a></div>');

    
//2. Cycle the elements in #s2 with the jQuery Cycle plugin - http://jquery.malsup.com/cycle/    
	
	$('#s2').cycle({
    fx:     'scrollHorz',
    speed:  'slow',
    timeout: 8000,
	pause: 1,
    next:   '#next',
    prev:   '#prev',
    before:	 onBefore,
    after:   onAfter
	});


//3. Add the alt and title data from each elements image to the copy panel
	
	function onBefore() { 
	$('.copy').hide();
    }

	function onAfter() { 
	var alt = $('img', this).attr('alt');
	var title = $('img', this).attr('title');
	
    $('.copy').hide().html('<div class="title"><h1>' + title + '</h1></div><div class="para"><p>' + alt + '</p></div>').fadeIn('slow');
	}
	
	});