$(document).ready(function() {
	// We can use this variable to reference the services container
	var servicesContainer = $('div#services-choices');
	
	$('<div id="div-list"></div>').insertBefore(servicesContainer);
	
	servicesContainer.find('div.service-class').each(function(n){
		$('div#div-list').append('<a class="services-list" href="#'+(n+1)+'">'+ $(this).attr('title') + '</a>'); 
	});
	
	var servicesLocation = location.hash.slice(1);
	if(servicesLocation){
		var servicesNum = servicesLocation;
	} else {
		var servicesNum = '1';
	}
	
	servicesContainer.find('div.service-class').hide();
	servicesContainer.find('div.service-class:nth-child('+servicesNum+')').fadeIn('slow');
	$('div#div-list').find('a.services-list:nth-child('+servicesNum+')').removeClass().addClass('services-list-active');
	
	$('div#div-list').find('a').each(function(n){
		$(this).click(function(){
			servicesContainer.find('div.service-class').hide();
			servicesContainer.find('div.service-class:nth-child('+(n+1)+')').fadeIn('slow');
			$(this).parent().find('a').removeClass().addClass('services-list');
			$(this).removeClass().addClass('services-list-active');
		});
	});
});