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: 2000},function(){
		//Change the index number everytime it step
		setTabIndex();
	});
}


var startAutoSwitch = function(){
	//Let the tab auto toggle
	$(".TWITab1").tabSwitch('toggleAuto',{interval: 2000},function(){
		//Change the index number everytime it step
		setTabIndex();
	});
}


$(function(){
	$(".TWITab").tabSwitch('create',{type:"toggle", height: 260, width: 490});
	//Start Create Tab when user click on the option
	
	$(".TWICS").click(function(){
		var Obj=$(this);
		$(".TWITab").tabSwitch('moveTo',{index: $(".TWICS").index(this)},setTabIndex);
	});
	//When user click on the toggle type
	
	//When user click on the auto
	
	$("#tabSwitchAutoToggle").click(function(){
		//Check to change the correct image
		if($(".TWITab").tabSwitch('isAuto')==true){
			$(this).attr("src","assets/images/autobar.jpg");
		}else{
			$(this).attr("src","assets/images/autobaron.jpg");
		}
		//Let the tab auto toggle
		startAutoSwitch();
	});	
});

















































var setTabIndex2 = function(){
		$(".ColorSelected1").removeClass("ColorSelected1");
		$(".TWICS1").eq(parseInt($(".TWITab1").tabSwitch('index'))).addClass("ColorSelected1");
}


$(function(){
	$(".TWITab1").tabSwitch('create',{type:"toggle", height: 180, width: 410});
	//Start Create Tab when user click on the option
	$(".typeButton1").click(function(){
		//For reference when get inside the animation
		var Obj=$(this);
		//Grey out the example form
		$("#HeadTitle1").animate({"opacity":"0.3"},500, function(){
			//Destroy the tab first
			$(".TWITab1").tabSwitch('destroy');
			//Turn the auto image off
			$("#tabSwitchAutoToggle1").attr("src","assets/images/autobaron.jpg");
			//See what type of option user choose
			switch(Obj.attr("rel")){
				case "toggle":
					$("#tabSwitchToggleTypes1").slideDown(200);
				default:
					$(".TWITab1").tabSwitch('create', {type: Obj.attr("rel"), height: 133, width: 322});
					if($("#tabSwitchToggleTypes1").css("display")!="none" && Obj.attr("rel")!="toggle"){
						$("#tabSwitchToggleTypes1").slideUp(200);	
					}						
			}
			//Write the new tab number
			startAutoSwitch();
			//Light up the example form
			$("#HeadTitle1").animate({"opacity":"1"},500);
		});
	});
	$(".TWICS1").click(function(){
		var Obj=$(this);
		$(".TWITab1").tabSwitch('moveTo',{index: $(".TWICS1").index(this)},setTabIndex2);
	});
	//When user click on the toggle type
	$(".toggleType1").click(function(){
		var Obj=$(this);
		//Like before, grey out the example
		$("#HeadTitle1").animate({"opacity":"0.3"},500, function(){
			//reset it
			$(".TWITab1").tabSwitch('destroy');
			$("#tabSwitchAutoToggle1").attr("src","assets/images/autobaron.jpg");
			//Start with the toggle effect
			$(".TWITab1").tabSwitch('create', {type: "toggle", toggle:  Obj.attr("rel"), height: 300, width: 440});
			startAutoSwitch();
			//reset the number and return the opacity
			setTabIndex2();
			$("#HeadTitle1").animate({"opacity":"1"},500);
		});
	});
	//When user click on the auto
	$("#tabSwitchAutoToggle1").click(function(){
		//Check to change the correct image
		if($(".TWITab1").tabSwitch('isAuto')==true){
			$(this).attr("src","assets/images/autobar.jpg");
		}else{
			$(this).attr("src","assets/images/autobaron.jpg");
		}
		//Let the tab auto toggle
		startAutoSwitch();
	});	
});