var idx = -1;
var max = 4;
var interv = 6000;
var to;
var tony;

JQ(document).ready(function() {
	animate();
});

function nextFrame(i) {
	JQ("#left_carosel").find("div").each(function() {
	JQ("#d_0").css({display: "none"});
	JQ("#d_1").css({display: "none"});
	JQ("#d_2").css({display: "none"});
	JQ("#d_3").css({display: "none"});
		if(JQ(this).css("display") != 'none')
			JQ(this).fadeOut();
	});
	JQ("#right_carosel").find("div").each(function() {
		JQ("#l_0").css({ backgroundImage: "url('images/tooltip_missio_off.png')"});
		JQ("#txt_0").css({ color: "#4e85ad"});
		JQ("#l_1").css({ backgroundImage: "url('images/tooltip_missio_off.png')"});
		JQ("#txt_1").css({ color: "#4e85ad"});
		JQ("#l_2").css({ backgroundImage: "url('images/tooltip_missio_off.png')"});
		JQ("#txt_2").css({ color: "#4e85ad"});
		JQ("#l_3").css({ backgroundImage: "url('images/tooltip_missio_off.png')"});
		JQ("#txt_3").css({ color: "#4e85ad"});
	});

	JQ("#c_"+idx).fadeIn();
	JQ("#d_"+idx).css({display: "block"});
	
	if (idx == 0){
	JQ("#l_"+idx).css({ backgroundImage: "url('images/tooltip_missio.png')"});
	JQ("#txt_0").css({ color: "#ffffff"});
	}else if (idx == 1){
	JQ("#l_"+idx).css({ backgroundImage: "url('images/tooltip_missio.png')"});
	JQ("#txt_1").css({ color: "#ffffff"});
	}else if (idx == 2){
	JQ("#l_"+idx).css({ backgroundImage: "url('images/tooltip_missio.png')"});
	JQ("#txt_2").css({ color: "#ffffff"});
	}else if (idx == 3){
	JQ("#l_"+idx).css({ backgroundImage: "url('images/tooltip_missio.png')"});
	JQ("#txt_3").css({ color: "#ffffff"});
	}
}
function nextFrameX(i) {
	JQ("#left_carosel").find("div").each(function() {
	JQ("#d_0").css({display: "none"});
	JQ("#d_1").css({display: "none"});
	JQ("#d_2").css({display: "none"});
	JQ("#d_3").css({display: "none"});
		if(JQ(this).css("display") != 'none')
			JQ(this).css({display: "none"});
	});
	JQ("#right_carosel").find("div").each(function() {
		JQ("#l_0").css({ backgroundImage: "url('images/tooltip_missio_off.png')"});
		JQ("#txt_0").css({ color: "#395066"});
		JQ("#l_1").css({ backgroundImage: "url('images/tooltip_missio_off.png')"});
		JQ("#txt_1").css({ color: "#395066"});
		JQ("#l_2").css({ backgroundImage: "url('images/tooltip_missio_off.png')"});
		JQ("#txt_2").css({ color: "#395066"});
		JQ("#l_3").css({ backgroundImage: "url('images/tooltip_missio_off.png')"});
		JQ("#txt_3").css({ color: "#395066"});
	});

	JQ("#c_"+idx).css({display: "block"});
	JQ("#d_"+idx).css({display: "block"});
	
	if (idx == 0){
	JQ("#l_"+idx).css({ backgroundImage: "url('images/tooltip_missio.png')"});
	JQ("#txt_0").css({ color: "#ffffff"});
	}else if (idx == 1){
	JQ("#l_"+idx).css({ backgroundImage: "url('images/tooltip_missio.png')"});
	JQ("#txt_1").css({ color: "#ffffff"});
	}else if (idx == 2){
	JQ("#l_"+idx).css({ backgroundImage: "url('images/tooltip_missio.png')"});
	JQ("#txt_2").css({ color: "#ffffff"});
	}else if (idx == 3){
	JQ("#l_"+idx).css({ backgroundImage: "url('images/tooltip_missio.png')"});
	JQ("#txt_3").css({ color: "#ffffff"});
	}
}


function animate() {
	idx = (idx+1)%max;
	nextFrame(idx);
	to = setTimeout("animate()", 10000);
}

function pause() {
	clearTimeout(to);
	clearTimeout(tony);
}

function restart() {
	tony = setTimeout("animate()", 6000);
}

function selectFrame(i) {
	pause();
	idx = i;
	nextFrameX(idx);
}