// create an array of the services based on what's in the list of links
var servicesArr = new Array();

// make service link active
function selectService(id) {
	$.history.add('id-'+id);
	$(".serv a").removeClass("active");
	$(".serv a."+id).addClass("active");
}

// returns jquery element by hash id
function getService(hash) {
	hash = hash.split('id-')[1];
	return $("a."+hash);
}

$(document).ready(function(){

	// this is problematic , check later.
	$('.serv a').each(function(){
        servicesArr.push("." + $(this).attr('class'));
	});

	// link classes					   
	$("#servicesSlides").jCarouselLite({
		 btnNext: "#next",
		 btnPrev: "#prev",
		 visible: 1,
		 btnGo: servicesArr,
		// add active class to links that match current frame ids.
		afterEnd: function(currentFrame) {
			selectService(currentFrame[0].id);
		}
	});
	
	// get current hash and start the carousel with the correct position
	var currentHash = $.history.getCurrent();
	if(currentHash == '') $('#servicesWrapper a:first').click();
	else getService(currentHash).click();
	
	// on hash change event
	$(window).history(function(e, hash) {
		// get jquery element by the given hash and move the carousel
		getService(hash).click();
    });	

});