/****
** banner.js
** by Carlos Villarreal Mora. cvillarrealmora@sdhospice.org
** 
** Used for the left-side banner on the SDHospice.org website
****/

// Declare variables, we need one for each slide
var $slide1, $slide2, $slide3, $slide4, $slide5;
var urls = new Array(
	'http://www.sdhospice.org/melisa-and-kayes-5k-walk-and-fun-run',
	'http://www.gftpln.org/Home.do?orgId=900',
	'http://www.sdhospice.org/volunteer-with-san-diego-hospice',
	'http://www.sdhospice.org/donate-to-san-diego-hospice',
	'http://www.sdhospice.org/gallery-4311-art'
); 

/**
* When the DOM is ready...
**/
$(function () {
	var $banner = $('#leftBanner .thePics');
	//we load each variable with a jQuery object for each div
	$slide1 = $('.slide1').hide();
	$slide2 = $('.slide2').hide();
	$slide3 = $('.slide3').hide();
	$slide4 = $('.slide4').hide();
	$slide5 = $('.slide5').hide();
	
	//setup the links for each slide
	$slide1.click(function () { location.href = urls[0]; });
	$slide2.click(function () { location.href = urls[1]; });
	$slide3.click(function () { location.href = urls[2]; });
	$slide4.click(function () { location.href = urls[3]; });
	$slide5.click(function () { location.href = urls[4]; });
	
	//setup the navigation
	$('#slideNav a').each(function () {
		$(this).click(function () {
			if ($(this).hasClass('playPause')) {
				this.text = this.text === '‖' ? '▶' : '‖'; 
				//if it's the play/pause button
				$banner.cycle('toggle');
			} else {
				//then go to the requested slide
				n = parseInt(this.text, 10) - 1;
				$banner.cycle(n);
			}
		});
	});
		
	//setup for the jQuery.cycle plugin
	$banner.cycle({
	    fx:    'fade',
	    after: onAfter,
	    before: onBefore,
	    timeout: 6000,
	    speed:  750
	 });
});

/**
* slideDown function
* Animates a div by sliding it down 100px, after moving it up while hidden first.
* $el jQuery element to be animated
**/
function slideDown($el) {
	$el.css('top','-100px').show().animate({
		'top':'+=100px'
	},'slow','swing');
}

/**
* slideUp function
* Animates a div by sliding it up 150px, after moving it up while hidden first.
* $el jQuery element to be animated
**/
function slideUp($el) {
	$el.css('top','150px').show().animate({
		'top':'-=150px'
	},'slow','swing');
}

/**
* slideRight function
* Animates a div by sliding it 150px to the right, after moving it left while hidden first.
* $el jQuery element to be animated
**/
function slideRight($el) {
	$el.css('left','-150px').show().animate({
		'left':'+=150px'
	},'slow','swing');
}

/**
* selectNavElement function
* Clears the selected class for all the elements in the nav, and then adds it to the element passed in.
* $n Integer. The index of element to receive the selected class.
**/
function selectNavElement(n) {
	$links = $('#slideNav a');
	
	$links.each(function () {
		$(this).removeClass('selected');
	});
	
	$($links[n]).addClass('selected');
}

/**
* onAfter function
* Callback function for the jQuery Cycle plugin. It's called AFTER the transition is done.
* We use it to transition in our copy div
**/
function onAfter(curr, next, opts) {
	var index = opts.currSlide;
	
	selectNavElement(index);
	
	switch(index + 1) {
		case 1: slideRight($slide1); break;
		case 2: slideDown($slide2); break;
		case 3: slideDown($slide3); break;
		case 4: slideDown($slide4); break;
		case 5: slideRight($slide5); break;
	}
}

/**
* onBefore function
* Callback function for the jQuery Cycle plugin. It's called BEFORE the transition begins.
* We use it to hide the copy that's being shown, so it doesn't bleed onto the next slide.
**/
function onBefore(cure, next, opts) {
	var index = opts.currSlide + 1;
	
	switch(index) {
		case 1: $slide1.hide(); break;
		case 2:	$slide2.hide(); break;
		case 3:	$slide3.hide(); break;
		case 4:	$slide4.hide(); break;
		case 5:	$slide5.hide(); break;
	}
}