var setTabIndex = function(){
		$(".ColorSelected").removeClass("ColorSelected");
		$(".TWICS").eq(parseInt($(".TWITab").tabSwitch('index'))).addClass("ColorSelected");
}
var startAutoSwitch = function(){
	//Let the tab auto toggle
	$(".TWITab").tabSwitch('toggleAuto',{interval: 5000},function(){
		//Change the index number everytime it step
		setTabIndex();
	});
}
$(function(){
	$(".TWITab").tabSwitch('create',{type:"toggle", toggle: "fade", height: 179, width: 460});
	startAutoSwitch();
	//Start Create Tab when user click on the option
	$(".typeButton").click(function(){
		//For reference when get inside the animation
		var Obj=$(this);
		//Grey out the example form
		$("#jslider").animate({"opacity":"0.3"},500, function(){
			//Destroy the tab first
			$(".TWITab").tabSwitch('destroy');
			//Turn the auto image off
			
		//Write the new tab number
			startAutoSwitch();
			//Light up the example form
			$("#jslider").animate({"opacity":"1"},500);
		});
	});
	$(".TWICS").click(function(){
		var Obj=$(this);
		$(".TWITab").tabSwitch('moveTo',{index: $(".TWICS").index(this)},setTabIndex);
	});
	//When user click on the toggle type
	
});