$(function() {

	// THIS JQUERY SCRIPT LOOKS FOR THE FOLLOWING DIV STRUCTURE TO IDENTIFY FEATURED ITEMS AND CONSTRUCT PAGINATION CONTROLS.
	// CLASS NAMES AND IDS ARE REQUIRED AS INDICATED FOR DOM MANIPULATION.  ADDITIONAL CSS MARKUP IS OK.
	//
	// <div class="jqpagination">
	// 	<div class="feature default"> FEATURE CONTENT 1 </div>
	// 	<div class="feature"> FEATURE CONTENT 2 </div>
	// 	<div class="feature"> FEATURE CONTENT 3 </div>
	// </div>
	// <div id="feature_pagination"><ul></ul></div>


	// --- CONFIG VARS ---
	imgpath = 'http://www.wowwee.com/img/jqpagination/';
	rotationspeed = 5000;
	transitionspeed = 500;


	// --- prep jsplash stack ---
	stack = $('div.jqpagination > div');
	$(stack).not('.default').hide();
	count = $(stack).size();
	current = 1; //init

	// --- prep pagination links if stack contains more than one element, and then display first element ---
	if (count > 1) {

		// DOM manipulation to append buttons 
		controls = $('#feature_pagination > ul');
		$(controls).append('<li class="prev"><img src="' + imgpath + 'prev.gif" name="prev" alt=""></li>');
		$(stack).each(function(n){
			pagenum = n + 1;
			$(controls).append('<li class="pagenum page_' + pagenum + '"><img alt="" name="' + pagenum + '" src=""></li>');
		});
		$(controls).append('<li class="next"><img src="' + imgpath + 'next.gif" name="next" alt=""></li>');

		// make handy references to the buttons 
		page_buttons = $(controls).children('li').slice(1,count+1).children('img');
		prev_button  = $(controls).children('li:first').children('img');
		next_button  = $(controls).children('li:last').children('img');
		
		// add listeners to the buttons
		$(prev_button)
		.mouseover(function(){ $(this).attr('src', imgpath + 'prev_o.gif') })
		.mouseout(function(){ $(this).attr('src', imgpath + 'prev.gif') })
		.click(function(){ showprev() });
		
		$(next_button)
		.mouseover(function(){$(this).attr('src', imgpath + 'next_o.gif') })
		.mouseout(function(){$(this).attr('src', imgpath + 'next.gif') })
		.click(function(){ shownext() });
		
		$(page_buttons)
		.each(function(n){
			pagenum = parseInt(n) + 1;
			$(this).attr({ src: imgpath + pagenum + '.gif', alt: pagenum })
			.mouseover(function(){
				name = $(this).attr('name');
				if (!$(this).hasClass('selected')) {
					$(this).attr({ src: imgpath + name + '_o.gif' });
				}
			})
			.mouseout(function(){
				name = $(this).attr('name');
				$(this).attr({ src: imgpath + name + '.gif' });
			})
			.click(function(){
				name = $(this).attr('name');
				$(this).attr({ src: imgpath + name + '.gif' });
				showpage(name);
			});
		});
		
		
		// --- common functions ---
		function showprev() {
			pagenum = (current <= 1) ? count : current - 1;
			showpage(pagenum);
		}
		function shownext() {
			pagenum = (current >= count) ? 1 : parseInt(current) + 1;
			showpage(pagenum);
		}
		function showpage(n) {
			current = parseInt(n);
			$(page_buttons).removeClass('selected');
			$(page_buttons).slice(n-1,n).addClass('selected');
			$(stack).fadeOut(transitionspeed);
			$(stack[n-1]).fadeIn(transitionspeed);
		}
		

		// --- set initial state ---
		$(controls).fadeIn();
		$(page_buttons).slice(0,1).addClass('selected');
		

		// --- setup autorotation and mouseover stop ---
		var autorotate;
		autorotate = setInterval( function() { shownext(); }, rotationspeed );
		$(controls).add(stack)
		.mouseover(function(){ clearInterval(autorotate); })
		.mouseout(function(){ autorotate = setInterval( function() { shownext(); }, rotationspeed ); });
					
	}
			
});