var setTabIndex = function(){
		$(".selected").removeClass("selected");
		$(".tabSwitchThumb").eq(parseInt($(".tabSwitchDiv").tabSwitch('index'))).addClass("selected");
}
var startAutoSwitch = function(){
	//Let the tab auto toggle
	$(".tabSwitchDiv").tabSwitch('toggleAuto',{interval: 7000},function(){
		//Change the index number everytime it step
		setTabIndex();
	});
}
$(function(){
	$(".tabSwitchDiv").tabSwitch('create',{type:"toggle", height: 328, width: 950});
	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
		$("#HeadTitle").animate({"opacity":"0.3"},500, function(){
			//Destroy the tab first
			$(".tabSwitchDiv").tabSwitch('destroy');
			//Turn the auto image off
			$("#tabSwitchAutoToggle").attr("src","/Scripts/tabswitch/sample/images/autobaron.jpg");
			//See what type of option user choose
			switch(Obj.attr("rel")){
				case "toggle":
					$("#tabSwitchToggleTypes").slideDown(200);
				default:
					$(".tabSwitchDiv").tabSwitch('create', {type: Obj.attr("rel"), height: 328, width: 950});
					if($("#tabSwitchToggleTypes").css("display")!="none" && Obj.attr("rel")!="toggle"){
						$("#tabSwitchToggleTypes").slideUp(200);	
					}						
			}
			//Write the new tab number
			startAutoSwitch();
			//Light up the example form
			$("#HeadTitle").animate({"opacity":"1"},500);
		});
	});
	$(".tabSwitchThumb").click(function(){
		var Obj=$(this);
		$(".tabSwitchDiv").tabSwitch('moveTo',{index: $(".tabSwitchThumb").index(this)},setTabIndex);
	});
	//When user click on the toggle type
	$(".toggleType").click(function(){
		var Obj=$(this);
		//Like before, grey out the example
		$("#HeadTitle").animate({"opacity":"0.3"},500, function(){
			//reset it
			$(".tabSwitchDiv").tabSwitch('destroy');
			$("#tabSwitchAutoToggle").attr("src","/Scripts/tabswitch/sample/images/autobaron.jpg");
			//Start with the toggle effect
			$(".tabSwitchDiv").tabSwitch('create', {type: "toggle", toggle:  Obj.attr("rel"), height: 300, width: 440});
			startAutoSwitch();
			//reset the number and return the opacity
			setTabIndex();
			$("#HeadTitle").animate({"opacity":"1"},500);
		});
	});
	//When user click on the auto
	$("#tabSwitchAutoToggle").click(function(){
		//Check to change the correct image
		if($(".tabSwitchDiv").tabSwitch('isAuto')==true){
			$(this).attr("src","/Scripts/tabswitch/sample/images/autobar.jpg");
		}else{
			$(this).attr("src","/Scripts/tabswitch/sample/images/autobaron.jpg");
		}
		//Let the tab auto toggle
		startAutoSwitch();
	});	
});