var slider_index = 0;

$(document).ready(function() {
	$('#slider').cycle({
		fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
		before: slidechange
	});
	
	/* Support touch devices too! */
	$("#opt0").click(function() {
		setslide(0);				  
	});
	
	$("#opt1").click(function() {
		setslide(1);				  
	});
	
	$("#opt2").click(function() {
		setslide(2);				  
	});
	
	$("#opt3").click(function() {
		setslide(3);				  
	});
	
	$("#opt0").hover(function() {
		setslide(0);
	}, function() {
		$('#slider').cycle('resume');	
	});
	
	$("#opt1").hover(function() {
		setslide(1);
	}, function() {
		$('#slider').cycle('resume');	
	});
	
	$("#opt2").hover(function() {
		setslide(2);
	}, function() {
		$('#slider').cycle('resume');	
	});
	
	$("#opt3").hover(function() {
		setslide(3);
	}, function() {
		$('#slider').cycle('resume');
	});
});

function setslide(index) {
	$('#slider').cycle(index); // This runs sliderchange() again.
	slider_index = index;
	$(".selector").removeClass("selected selected-top unselected-top");
	if (index == 0) {
		$("#opt" + index).addClass("selected-top");
	} else {
		$("#opt0").addClass("unselected-top");
		$("#opt" + index).addClass("selected");
	}
	$('#slider').cycle('pause');
	
	if (slider_index == 3) {
		slider_index = 0;
	} else {
		slider_index++;
	}
}

function slidechange(index)
{
	$(".selector").removeClass("selected selected-top unselected-top");
	
	if (slider_index == 0) {
		$("#opt" + slider_index).addClass("selected-top");
	} else {
		$("#opt0").addClass("unselected-top");
		$("#opt" + slider_index).addClass("selected");
	}
	
	if (slider_index < 3) {
		slider_index++;	
	} else {
		slider_index = 0;	
	}
}