// Estilos dinámicos para Gecko
var cssStyle = '';
if($.browser.mozilla) {
	cssStyle = "<style type=\"text/css\"> \
	div.mainDestinos, \
	div.mainDestinos ul.cmContentList, \
	div.mainDestinos ul.cmContentList li.cmContentItem { \
		width: 65.3em; \
	} \
	div.mainSearcher input.cmSearchInput { \
		width: 13.1em; \
	} \
	div.mainSearcher select.cmSearchSelect { \
		width: 13.25em; \
	} \
	body.contentPage div.topBgColor { \
		height: 21.1em; \
	} \
	.tabSection.tabGallery { \
		padding: 2.5em 0 0.5em 2.5em; \
	} \
	button.cmSearchButton img { \
		left: -8px; \
		top: -3px; \
	} \
	div.mainAdvancedSearcher button.cmSearchButton { \
			margin-top: -2px; \
	} \
	div.mainAdvancedSearcher .cmSearchLabel { \
		margin-bottom: 0.4em; \
	} \
	div.mainAdvancedSearcher .cmLabelGroup { \
		margin-right: 2em; \
	} \
	div.mainAdvancedSearcher div.cmSearchButtonZone { \
		margin-top: 0.7em; \
	} \
	div.mainSearcher div.cmSearchRow { \
		padding: 0.1em 0; \
	} \
	div.mainSearcher h2 { \
		padding-top: 0.55em; \
	} \
	ul.menuMiddle li.menuMiddleItem .menuMiddleItem span.cmMenuTitle { \
		padding: 0.1em 0.45em; \
	} \
	ul.menuMiddle li.menuMiddleItem.firstElement { \
		padding: 0.45em 0.7em; \
		margin-right: 0.8em; \
	} \
	ul.menuMiddle li.menuMiddleItem .menuMiddleItem span.cmMenuDescription { \
		left: 11.15em; \
	} \
	.googleMapsRoute { \
		width: 395px; \
	} \
	li.cmWebMapLevel1.cmElementPosition_1 ul.cmWebMapLevel2 { \
		width: 19.42em; \
	} \
	</style>";
	$(cssStyle).appendTo("head");
}

// Estilos dinámicos para Webkit
if($.browser.webkit) {
	cssStyle = "<style type=\"text/css\"> \
	ul.menuMiddle li.menuMiddleItem .menuMiddleItem span.cmMenuDescription { \
		left: 10.8em; \
		right: 0.95em; \
	} \
	</style>";
	$(cssStyle).appendTo("head");
}

cssStyle = "<style type=\"text/css\"> \
	div.bannerMainContainer { \
		text-shadow: #555 0 0 12px; \
	} \
	</style>";
$(cssStyle).appendTo("head");

// Función que cambia la pestaña activa
function changeTab(tabNumber) {
	var tabContainer = $("div.tabContainer");
	if(tabContainer.size() > 0) {
		if($(".tabMenuOption:eq("+tabNumber+")", tabContainer).hasClass("tabMenuOptionActive")) return false;
		$(".tabMenuOption", tabContainer).removeClass("tabMenuOptionActive");
		$(".tabMenuOption:eq("+tabNumber+")", tabContainer).addClass("tabMenuOptionActive");
		$(".tabSection", tabContainer).hide();
		$(".tabSection:eq("+tabNumber+")", tabContainer).show();
		$(".tabSection", tabContainer).css({"z-index":"1", "position":"absolute"});
		$(".tabSection:eq("+tabNumber+")", tabContainer).css({"z-index":"0", "position":"relative"});
	}
}

// Sobreescribimos la función loadPrettyPhoto del init.js para utilizar un tema de prettyPhoto personalizado
function loadPrettyPhoto() {
	$("a[rel^='prettyPhoto']").prettyPhoto({
		theme: 'villatermal',
		flowplayerSettings: flpSettings
	});
}

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

	// Formulario de búsqueda general
	var searchForm = $("#simpleSearcher");
	if(searchForm.size() > 0) {
		var searchInput = $("#simpleSearchPattern", searchForm);
		searchInputText = searchInputText.toUpperCase();
		if(searchInput.val() == '') searchInput.val(searchInputText);
		searchInput.focus(function() { if($(this).val() == searchInputText) $(this).val(''); });
		searchInput.blur(function() { if($(this).val() == '') $(this).val(searchInputText); });
		searchForm.bind("submit", function() {
			if(searchInput.val() == '' || searchInput.val() == searchInputText) {
				searchInput.val('');
				checkPattern(this.simpleSearchPattern);
				searchInput.focus();
				return false;
			}
			else
				return true;
		});
	}

	// Cambiamos el texto TÍTULO por MUNICIPIO en el formulario de búsqueda
	// de DESTINOS de la página principal
	var mainSearcher = $("div.mainSearcher");
	if(mainSearcher.size() > 0) {
		var labelName = $("label[for=name]", mainSearcher);
		if(labelName.size() > 0) {
			if(_userLocale=="en_UK")
				labelName.html("Town");
			else
				labelName.html("Municipio");
		}
	}

	// Slider para DESTINOS en página principal
	var mainDestinos = $("div.mainDestinos");
	if(mainDestinos.size() > 0) {
		mainDestinos.easySlider({
			speed: 600,
			numericId: 'controlDestinos',
			imageNormal: _rootWeb + '/imagenes/villastermales/dot_normal.png',
			imageCurrent: _rootWeb + '/imagenes/villastermales/dot_current.png',
			auto: true,
			continuous: true,
			pause: 20000
		});
	}

	// Slider para DESTACAMOS en página principal
	var mainDestacamos = $("div.mainDestacamos");
	if(mainDestacamos.size() > 0) {
		mainDestacamos.easySlider({
			speed: 400,
			numericId: 'controlDestacamos',
			imageNormal: _rootWeb + '/imagenes/villastermales/dot_normal.png',
			imageCurrent: _rootWeb + '/imagenes/villastermales/dot_current.png',
			auto: true,
			continuous: true,
			pause: 13000
		});
	}

	// Asociamos el onclick a la pestaña INFORMACIÓN
	var tabMenuOptionInfo = $("h3#tabMenuOptionInfo");
	if(tabMenuOptionInfo.size() > 0) tabMenuOptionInfo.bind('click', function() { changeTab(0); return false; });

	// Asociamos el onclick a la pestaña CÓMO LLEGAR
	var tabMenuOptionMap = $("h3#tabMenuOptionMap");
	if(tabMenuOptionMap.size() > 0) tabMenuOptionMap.bind('click', function() { changeTab(1); initMapContent(); return false; });

	// Asociamos el onclick a la pestaña IMÁGENES
	var tabMenuOptionGallery = $("h3#tabMenuOptionGallery");
	if(tabMenuOptionGallery.size() > 0) tabMenuOptionGallery.bind('click', function() { changeTab(2); return false; });

	// Sombra para las imágenes destacadas
	var shadowTemplate = "<div class=\"shadowContainer\"> \
		<div class=\"shadowTL\"></div> \
		<div class=\"shadowT\"></div> \
		<div class=\"shadowTR\"></div> \
		<div class=\"shadowR\"></div> \
		<div class=\"shadowBR\"></div> \
		<div class=\"shadowB\"></div> \
		<div class=\"shadowBL\"></div> \
		<div class=\"shadowL\"></div> \
	</div>";

	var mainDestinosImagenes = $("div.contentLeft img", mainDestinos);
	if(mainDestinosImagenes.size() > 0) {
		mainDestinosImagenes.each(function() {
			$(this).after(shadowTemplate);
		});
	}

});