// JavaScript Document

$(document).ready(function() {
// general

	$('iframe').attr('allowtransparency','true');
// TabPanels
// General
	// Estado Inicial
	$(".tab-content").hide(); // oculta el contenido
	$(".tabs li:first").addClass("active").show(); // aplica la clase .active al primer tab
	$(".tab-content:first").show(); //muestra el contenido del primer Tab
	
	//Al hacer Click (On Click event)
	$(".tabs li").click(function() {
		$(".tabs li").removeClass("active"); //elimina cualquier clase .active
		$(this).addClass("active"); //agrega la clase .active al tab seleccionado
		$(".tab-content").hide(); //oculta el contenido del tab
		var activeTab = $(this).find("a").attr("rel"); //Busca en el atributo "rel" el identificador del elemento para asociar el tab + contenido
		$(activeTab).fadeIn(); //Aplica el efecto FadeIn al tab actual
		return false;
		
		
	// controles
	$('.controls li').click(function() {
		$(".tab-content").hide(); //oculta el contenido del tab
		var activeControls = $(this).find("a").attr("rel"); //Busca en el atributo "rel" el identificador del elemento para asociar el tab + contenido
		$(activeControl).fadeIn(); //Aplica el efecto FadeIn al tab actual
	})
	});
});