var slides = [];
	var lastId = -1;
	var mouseOnSlider = false;

	$(document).ready(function() {

	$('#handles a').each(function(){

		slides.push($(this).attr('href').substr(1));

		$(this).hover(function(){
			slideId = getKey($(this));
			activateHandle(slideId);
		});

		});

		$('#slider').mouseenter(function(){
			mouseOnSlider = true;
		}).mouseleave(function(){
			mouseOnSlider = false;
			var resume = setTimeout('gotoNextSlide(lastId + 1)',2500);
		});

		//initiate:
		gotoNextSlide(0);

	});

	function activateHandle(slideId){
		if(slideId != lastId) {

			$('#' + slides[slideId]).fadeIn({ queue:true, duration:500});
			$('#handles').find('a[href="#'+ slides[slideId] +'"] img').fadeIn({ queue:true, duration:500});


			$('#' + slides[lastId]).fadeOut({ queue:true, duration:700 });
			$('#handles').find('a[href="#'+ slides[lastId] +'"] img').fadeOut({ queue:true, duration:700 });

			lastId = slideId;

		}
	}


	function gotoNextSlide(slideId) {
		//console.log('goto: ' + slideId);
		if(!mouseOnSlider) {
			slideId = slideId >= slides.length ? 0 : slideId;
			activateHandle(slideId);
			var timer = setTimeout(function(){ gotoNextSlide(slideId + 1) },1500);
		}
	}

	function getKey(el) {
		val = el.attr('href').substr(1);
		for(i=0; i < slides.length; i++) {
			if(val == slides[i]) {
				return i;
				break;
			}
		}
	}