// JavaScript Document
// Carousel Plugin for jQuery by Pony Smith

// create the object
jQuery.fn.carousel = function(hideControls, siteRoot) {
	// set page variables
	var c = {
		obj					: 	this,
		id					:	this.attr('id'),
		prevPg				:	null,
		curPg				:	1,
		nextPg				: 	2,
		totalPages			:	this.children('li').length,
		linkStr				:	'',
		hideControls		:	hideControls,	
		interval			:	6000
	};
	
	
	// set a flag if the carousel had a left or right class
	c.hasAlignClass = (c.obj.hasClass('left') || c.obj.hasClass('right')) ? true : false ;
	
					
	// by jquery protocols, we must return a jquery object
	return this.each(function() {
		// wrap the carousel in a container
		$(this).wrap('<div class="carouselContainer"></div>');
		c.container = $(this).parents('.carouselContainer');
		
		// have to build the container on window load (otherwise curPg content might not be loaded to figure width and height in Safari
		$(window).bind('load', function() { setContainerDimensions(); });
		
		// build the pages
		buildPages();
		// build the captions
		buildCaptions();
		
		// build the controls if necessary, if not, set the autoplay
		if(c.hideControls) 	setAutoPlay();
		else				buildControls();
	});
		
		
		
	// =======================================
	// set width and height 
	function setContainerDimensions() {
		// temporarily hide the captions to get an accurate measurement of the width and height
		var capWidth = c.obj.find('.captions').width();
		c.obj.find('.captions').css({ 'width':'0px' });
		// get measurements
		var w = c.obj.find(':nth-child('+c.curPg+')').width();
		var h = c.obj.find(':nth-child('+c.curPg+')').height();
		var p = c.obj.find(':nth-child('+c.curPg+')').css('padding');
		var b = c.obj.find(':nth-child('+c.curPg+')').css('border-width');
		// set the width and height (include the 5px padding and 1px borders for the li
		c.obj.css('width', (w + 10 + 2) + 'px');
		c.obj.css('height', (h + 10 + 2) +'px');
		// reshow the captions
		c.obj.find('.captions').css({ 'width':capWidth });
		// if the original object has a left or right class, remove it and apply it to the container
		if(c.obj.hasClass('left')) {
			c.obj.removeClass('left');
			c.container.addClass('left');
		}
		if(c.obj.hasClass('right')) {
			c.obj.removeClass('right');
			c.container.addClass('right');
		}
	}
		
		
		
	// =======================================
	// build pages
	function buildPages() {
		var inc = 1;
		c.obj.children('li').each(function() {
			// set the css as long as the container doesn't have a left or right class
			if(!c.hasAlignClass) {
				$(this).css({ 'border':'1px solid #aaa' , 'background-color':'#fff' , 'padding':'5px' });
			}
			// create a unique id to link to
			$(this).attr('id', c.id + '-' + inc);
			if(inc != c.curPg) $(this).hide();
			else($(this).addClass('curPg'));
			inc++;
		});
	}
		
		
		
	// =======================================
	// build captions
	function buildCaptions() {
		// fade the captions
		c.obj.find('.captions').css({ opacity:.8 });
	}
		
		
		
	// =======================================
	// build controls
	function buildControls() {		
		// if the controls container doesn't exist
		if(!c.controls) {
			c.container.append('<div class="carouselControls"></div>');
			c.controls = c.container.find('.carouselControls');	
		}
		
		// build the links .. don't forget to (re)set the string
		c.linkStr = '';
		
		// prev link
		if(c.curPg > 1)				c.linkStr	+=	'<a href="#' + c.id + '-' + (c.prevPg) + '" class="carouselButton prevPageLink"><img src="' + siteRoot + '/images/transparent.png" class="prevOn" alt="Previous" /></a>';
		else						c.linkStr	+=	'<span class="carouselButton"><img src="' + siteRoot + '/images/transparent.png" alt="" class="prevOff" /></span>';
		
		// skip links
		for(l=1; l<=c.totalPages; l++) {
			if(l == c.curPg)		c.linkStr 	+=	'<span class="carouselButton"><img src="' + siteRoot + '/images/transparent.png" alt="" class="pageOn" /></span>';
			else					c.linkStr	+=	'<a href="#' + c.id + '-' + l + '" class="carouselButton pageNumLink"><img src="' + siteRoot + '/images/transparent.png" class="pageOff" alt="Carousel Item ' + l + '" /></a>';
		}
		
		// next link
		if(c.curPg < c.totalPages)	c.linkStr	+=	'<a href="#' + c.id + '-' + (c.nextPg) + '" class="carouselButton nextPageLink"><img src="' + siteRoot + '/images/transparent.png" class="nextOn" alt="Next" /></a>';
		else						c.linkStr	+=	'<span class="carouselButton"><img src="' + siteRoot + '/images/transparent.png" alt="" class="nextOff" /></span>';
		
		// (re)draw the controls and reassign the variable
		c.controls.empty().html(c.linkStr);		
		
		// add the navigation behaviors
		// previous
		c.controls.find('.prevPageLink').bind('click', function(p) {
			id = $(this).attr('href').replace('#' + c.id + '-','');
			showPage(id);
			p.preventDefault();
		});
		// next
		c.controls.find('.nextPageLink').bind('click', function(n) {
			id = $(this).attr('href').replace('#' + c.id + '-','');
			showPage(id);
			n.preventDefault();
		});
		// pages
		c.controls.find('.pageNumLink').bind('click', function(l) {
			// get just the id number
			id = $(this).attr('href').replace('#' + c.id + '-','');
			showPage(id);
			l.preventDefault();
		});
	}




	// --------------------------------------------------
	// setAutoPlay()
	function setAutoPlay() {
		setInterval(function() {
			c.nextPg = (c.curPg < c.totalPages) ? c.curPg + 1 : 1 ;	
			showPage(c.nextPg);
		}, c.interval);
	}




	// --------------------------------------------------
	// show / hide content
	function showPage(pgId) {
		// find the current page, fade out, and remove the curPg class
		c.obj.find('.curPg').fadeOut(1000, function() { $(this).removeClass('curPg'); });
		// find the new page, fade in and add curPg class
		c.obj.find('#' + c.id + '-' + pgId).addClass('curPg').fadeIn(1000);
		// reset the current pg variable
		c.curPg = pgId;
		c.prevPg = parseInt(pgId) - 1;
		c.nextPg = parseInt(pgId) + 1;
		// recall the buildnav function to create the link behaviors again
		if(!c.hideControls) buildControls();
	}
	
	
	
};