function pageClick(zeroBasedSlideIndex, slideElement){
		/* kill any current states of the slide elements when one is clilcked */
		$('#progress').find('li').children("span").css('display','none').stop();
	}
	
	function pageAnchorBuilder(zeroBasedSlideIndex, slideElement){
		// calculate if the label needs a trailing "0" or not...
		if(zeroBasedSlideIndex<10){
			slideNumAsString = "0"+(zeroBasedSlideIndex+1);
		}else{
			slideNumAsString = zeroBasedSlideIndex+1;
		}
		//return the page control icon
		return "<li><a>"+slideNumAsString+"<span class='name'>"+$(slideElement).children("a").attr("title")+"</span></a><span class='progress'></span></li>";
	}
	
	$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
		/* stop any current animations that are trapped*/
		$('#progress').find('li').children("span").css('display','none').css('width','0').stop();
	
		/*remove any classes on the current slide then add activeSlide to it*/
		$(pager).find('li').removeClass('activeSlide').removeClass('nextSlide').filter('li:eq('+currSlideIndex+')').addClass('activeSlide'); 
		/*find the index of the next slide*/
		nextSlideIndex = currSlideIndex+1;
		if(nextSlideIndex>=$(pager).children().length){
			nextSlideIndex = 0;
		}
		
		//find the next slide
		var nextSlidePageIcon = $(pager).find('li').filter('li:eq('+nextSlideIndex+')');
		
		//animate the progress bar
		nextSlidePageIcon.addClass('nextSlide').children("span").animate({width: '30px'},transitionTime);
	}; 
	
	var transitionTime = 6000;
	
    $(document).ready(function() {
		$('#slider').cycle({
            fx: 'scrollLeft', // what transition we want to use
			timeout: transitionTime, //milliseconds between transitions
			speed: 1500, //speed of each transition
			easing: 'easeInSine', 
			pause: 1, //turn on pause when someone mouseovers the banner
			pager:  '#progress', // where the page controls sit
			pagerClick: pageClick, //called when user clilcks a page symbol in bottom right
			pagerAnchorBuilder: pageAnchorBuilder // a function to build our page controls
        });
		
		$('ul.our-work li a').each(function(i) {
			$(this).prepend('<span class="img-hover black-bg">View case study</span>');
			$(this)
				.bind("mouseenter focus", function() {
					$(this).parent().addClass('hovered');
					
					$(this).find("span.img-hover")
					.stop()
					.animate({ 'width' : 142 }, 400, 'easeOutBack');
					
					/*$('ul.our-work li:not(.hovered)')
						.stop()
						.animate({ 'opacity' : 0.75 }, 400, 'easeOutQuad'); */
					$(this).find("img")
					.stop()
					.animate({ 'opacity' : 0.65 }, 200, 'easeOutQuad');
				})
				.bind("mouseleave blur", function() {
					$(this).find("span.img-hover")
					.stop()
					.animate({ 'width' : 0 }, 400, 'easeOutBack');
												  
					/*$('ul.our-work li:not(.hovered)')
						.stop()
						.animate({ 'opacity' : 1 }, 400, 'easeOutQuad');*/
					$(this).find("img")
					.stop()
					.animate({ 'opacity' : 1 }, 200, 'easeOutQuad');
					$(this).parent().removeClass('hovered');
				})
		});
		
    });