$(function(){
		//Start for the whole content tab
		$(".MainTabContent").tabSwitch('create',{type:"slide", height: 600, width: 900});
		//Start with the slide effect
		$(".SlideTab").tabSwitch('create', {type: "slide", height: 400, width: 800});
		//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
			$("#tabSwitchLimit").animate({"opacity":"0.3"},500, function(){
				//Destroy the tab first
				$(".SlideTab").tabSwitch('destroy');
				//Turn the auto image off
				$("#tabSwitchAutoToggle").attr("src","assets/images/autooff.png");
				//See what type of option user choose
				switch(Obj.attr("rel")){
					case "destroy":
						
					break;
					case "toggle":
						$("#tabSwitchToggleTypes").slideDown(200);
					default:
						$(".SlideTab").tabSwitch('create', {type: Obj.attr("rel"), height: 300, width: 440});
						if($("#tabSwitchToggleTypes").css("display")!="none" && Obj.attr("rel")!="toggle"){
							$("#tabSwitchToggleTypes").slideUp(200);	
						}						
				}
				//Write the new tab number
				setTabIndex();
				//Light up the example form
				$("#tabSwitchLimit").animate({"opacity":"1"},500);
			});
		});
		//When user click on the toggle type
		$(".toggleType").click(function(){
			var Obj=$(this);
			//Like before, grey out the example
			$("#tabSwitchLimit").animate({"opacity":"0.3"},500, function(){
				//reset it
				$(".SlideTab").tabSwitch('destroy');
				$("#tabSwitchAutoToggle").attr("src","assets/images/autooff.png");
				//Start with the toggle effect
				$(".SlideTab").tabSwitch('create', {type: "toggle", toggle:  Obj.attr("rel"), height: 300, width: 440});
				//reset the number and return the opacity
				setTabIndex();
				$("#tabSwitchLimit").animate({"opacity":"1"},500);
			});
		});
		//When user click on the auto
		$("#tabSwitchAutoToggle").click(function(){
			//Check to change the correct image
			if($(".SlideTab").tabSwitch('isAuto')==true){
				$(this).attr("src","assets/images/autooff.png");
				$("#AutoSpeed").removeAttr("disabled");
			}else{
				$(this).attr("src","assets/images/autoon.png");
				$("#AutoSpeed").attr("disabled", "disabled");
			}
			//Let the tab auto toggle
			$(".SlideTab").tabSwitch('toggleAuto',{interval: $("#AutoSpeed").val()},function(){
				//Change the index number everytime it step
				setTabIndex();
			});
		});
		
		//This happen when you click on the navigation arrow
		$(".swNav").click(function(){
			$(".SlideTab").tabSwitch('moveStep',{step: parseInt($(this).attr('rel'))});
			setTabIndex();
		});
		
		//Move to the selected tab
		$(".swHeadTitle").click(function(e){
			$(".SlideTab").tabSwitch('moveTo',{index : $(this).attr("rel") });
			setTabIndex();
			e.preventDefault();
		});
		
		function setTabIndex(){
			$("#tabCurrentID").text(parseInt($(".SlideTab").tabSwitch('index')));
		}

		//Controls the main content
		$(".MainMenuTabA").click(function(e){
			$(".MainTabContent").tabSwitch('moveTo',{index : $(this).attr("rel") });
			e.preventDefault();
		});		
	});