var buttons = Array();

buttons[1] = Array();
buttons[1]['id'] = 'button1';
buttons[1]['class'] = 'orange';
buttons[1]['title'] = 'Human Resources';

buttons[2] = Array();
buttons[2]['id'] = 'button2';
buttons[2]['class'] = 'yellow';
buttons[2]['title'] = 'Benefits';

buttons[3] = Array();
buttons[3]['id'] = 'button3';
buttons[3]['class'] = 'green';
buttons[3]['title'] = 'Payroll';

buttons[4] = Array();
buttons[4]['id'] = 'button4';
buttons[4]['class'] = 'violet';
buttons[4]['title'] = 'Risk Management';

buttons[5] = Array();
buttons[5]['id'] = 'button5';
buttons[5]['class'] = 'blue';
buttons[5]['title'] = 'Administration';


$(document).ready(function(){ 
      
   	var currentSlide = -1;	
   	var clickedSlide = -999;
	$('div#slideshow ul.images').cycle({ 
		fx: 'fade',
		timeout: 5000,
		pause: true,     
    	pauseOnPagerHover: true,
    	speed: 1500,
		before: autoSwapContent,
		pager:  'div.image-buttons ul',
		pagerAnchorBuilder: buttonBuilder,
		pagerClick: numberClick
		
	});
	
	function numberClick(SlideIndex)
	{
	
		clickedSlide = SlideIndex;
 
	}

	function buttonBuilder(idx, slide) 
	{ 
	
		var theclass = '';
	
		var number = idx + 1;

		if(number == 1)
		{
			theclass = 'class="active"';
		} 
		else
		{
			theclass = '';
		}
		
		button = '<li ' + theclass + 'id="button' +  number + '"><a href="#" class="' + buttons[number]['class'] + '">' + buttons[number]['title'] + '<span class="arrow"></span></a></li>';
		
		return button;
	
	}	
 
	// callback function for automatic slide changes, determines the new slide index and calls swapContent
	function autoSwapContent(currSlideElement, nextSlideElement, options, forwardFlag)
	{
			if(clickedSlide != -999)
			{
				currentSlide = clickedSlide;
				clickedSlide = -999;
			}	
			else
			{
			currentSlide++;
			
			if(currentSlide > 4)
				currentSlide = 0;
				
			}	
				
			currentId = currentSlide + 1;	
		
			// remove active from all buttons
			$('div.image-buttons ul li').removeClass('active');
			$('#button' + currentId ).addClass('active');
			
			// hide current text
			$('ul#text li').css('display', 'none');
			$('#text' + currentId ).css('display', 'block');
	}

});