$(window).load(function() {
		var slider_links_on_page;
		var controlNavLength;
		var next = null;
		
		$('#featured-groups').css('height', 326+'px'); // increase the height to make space for the slider's nav bar. Don't want non-javascript users to see a gap where it belongs, so have set the height to 263px in the CSS
		
		$('#slider').nivoSlider(
			{
				effect: 'fade',
				animSpeed:0,
				pauseTime:3000, /* 5000 is about right */
				slices:1, // no point having loads of slices when the effect is identical over the whole area (e.g. a fade, and especially when it's a zero-time fade')
				directionNav: true,
				directionNavHide: false,
				captionOpacity: 0.5,
				beforeChange: function(){
					
					initSuperJamesSlider();
		
					//Get access to the current slider object
					//var slider = $(this);									
					//var vars = slider.data('nivo:vars');
					
					//console.log('rel is: '+$('.nivo-controlNav .nivo-control.active').attr('rel'));
					if(next!=null)
						var current_rel = next;
					else
						var current_rel = parseInt($('.nivo-controlNav .nivo-control.active').attr('rel')) + 1;
					
					//As we get the rel before it changes (to make the effect look better) we need to add one to get the true current value
					//console.log('current_rel before addition: '+current_rel);
					
					//if we're here as a result of a click on one of the direct links we can assume the element is already visible and not do anything.
						
					if(current_rel<0)
						current_rel=controlNavLength-1;

					//console.log('current_rel after addition: '+current_rel);
					
					if(current_rel>=(first_link_on_page+slider_links_on_page) && current_rel!=controlNavLength)
					{
						//console.log('1');
						//I like cake
						var left = $('.nivo-controlNav').css('left');
						
						//Strip px from end
						left = parseInt(left);
						
						//Remove the width of the current control item from the left 
						var new_left = parseInt(left) - ($('.nivo-controlNav .nivo-control[rel='+current_rel+']').width() + parseInt($('.nivo-controlNav .nivo-control[rel='+current_rel+']').css('padding-left')) + parseInt($('.nivo-controlNav .nivo-control[rel='+current_rel+']').css('padding-right')));
						
						//Check the new left value is not auto
						if(new_left == 'auto')
							new_left = 0;
						
						$('.nivo-controlNav').css('left', new_left);
					}
					else if(current_rel<first_link_on_page)
					{
						//console.log('2');
						//I like cake
						var left = $('.nivo-controlNav').css('left');
						
						//Strip px from end
						left = parseInt(left);
						
						//Remove the width of the current control item from the left 
						var new_left = parseInt(left) + ($('.nivo-controlNav .nivo-control[rel='+current_rel+']').width() + parseInt($('.nivo-controlNav .nivo-control[rel='+current_rel+']').css('padding-left')) + parseInt($('.nivo-controlNav .nivo-control[rel='+current_rel+']').css('padding-right')));
						
						//Check the new left value is not auto
						if(new_left == 'auto')
							new_left = 0;
						
						$('.nivo-controlNav').css('left', new_left);
					}
					else if(current_rel==controlNavLength)
					{
						//console.log('3');
						$('.nivo-controlNav').css('left', 0);
					}
					//else console.log('4');

					
					// Use this to get href of element $('#element_ID').attr('href');
					//console.log('current_rel just before ajax: '+current_rel);
					$.ajax({
						url: 'ajax.details_content.php?ID='+id_mappings[current_rel],
						success: function(data){
							$('#featured-products').html(data);
						}	
					});
					
					next = null;
				}
			}
			);
			
			$('a.nivo-prevNav', $('#slider')).bind('click', function(){
				next = parseInt($('.nivo-controlNav .nivo-control.active').attr('rel')) - 1;
			});
			
			$('a.nivo-nextNav', $('#slider')).bind('click', function(){
				next = parseInt($('.nivo-controlNav .nivo-control.active').attr('rel')) + 1;
			});
			
			$('a.nivo-control', $('#slider')).bind('click', function(){
				next = parseInt($(this).attr('rel'));
			});
			
			function initSuperJamesSlider(){
				//Width of amount of items * width of item
				
				// width of each - including paddings. This is reliant on them all being the same width, I think
				var controlNavWidth = $('.nivo-controlNav .nivo-control').width() + parseInt($('.nivo-controlNav .nivo-control').css('padding-left')) + parseInt($('.nivo-controlNav .nivo-control').css('padding-right'));
				//console.log('controlNavWidth: '+controlNavWidth);
				// 177
				
				// number of items in the nav (i.e. equal to number of slides to be shown)
				controlNavLength = $('.nivo-controlNav .nivo-control').length;
				//console.log('controlNavLength: '+controlNavLength);
				// 4
				
				// combined width of all nav items
				csswidth=parseInt(controlNavWidth*controlNavLength);
				//console.log('csswidth:'+csswidth);
				// 708
				
				// set the nav holder's width to the total of the things in it
				$('.nivo-controlNav').css('width', csswidth+'px');
				
				//Max number of nav items that will be visible
				visibleSpace=$('.nivo-controlContainer').width();
				//console.log('visibleSpace:'+visibleSpace);
				// 532
				
				var left = $('.nivo-controlNav').css('left');
				
				slider_links_on_page = Math.floor(parseInt(visibleSpace) / controlNavWidth);
				first_link_on_page = Math.floor(0-parseInt(left) / controlNavWidth);
				//console.log('slider_links_on_page:'+slider_links_on_page);
				//console.log('first_link_on_page:'+first_link_on_page);
				// 4
				
				//alert(slider_links_on_page);
			}
			
			initSuperJamesSlider();
	});