WebFontConfig = {
    google: { families: [ 'Nunito:700:latin' ] }
};
(function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();
  
  
jQuery(document).ready(function() {
	
	/* 
	
	APLICAMOS FIX PARA NAVEGADORES Webkit (Chrome y Safari)
	
	Con document.ready, las imágenes y css es posible que aun no se hayan cargado.
	Si el navegador es de tipo Webkit, procesará el javascript y los estilos de modo paralelo,
	por tanto, intentará calcular anchos y altos antes de que tener completado el CSS o la imagen cargada.
	
	Este fix es necesario para calcular el ancho del <ul> del menu-perfiles, y el ancho .bannerspie-pagina
	para poder centrar su contenido con margin: auto.
	
	Por tanto debemos emplear window.load antes de comenzar a calcular anchos y altos.
	
	*/
	jQuery(window).load(function() {

		jQuery.noConflict();


		/***
		=========================================================================
		ACCESIBILIDAD > Focus accesible y llamativo sólo con tabulador
		-------------------------------------------------------------------------
		@autor: Alfonso Martin
		@fecha: 23/03/2011
		@descripcion: 
		
		WCAG2.0: 'Pauta 2.4.7 Focus Visible'
		
		Con esta función marcamos el foco cuando navegamos por teclado, mediante el tabulador; 
		pero si el foco lo hacemos cuando navegamos con ratón,	haciendo click, no marcamos nada.
		
		En el documento CSS debemos especificar el comportamiento de
		
		  a.marcafoco:focus,
		  a.foco { 
		      background-image: none !important; 
			 background-color: #ff0 !important;
			 color:#...... !important; 
		  }
		
		Esto debe hacerse para cada menú que sea necesario.
		
		
		=========================================================================
		***/
		function focoAccesible (dom){
			/* Eliminamos la clase que tiene por defecto, que marca el foco, sin tener javascript. */
			jQuery(dom).removeClass("marcafoco");
			/* Si levantamos la tecla [TAB], añadimos la clase "foco", pero si hacemos click no ocurrirá nada */
			jQuery(dom).keyup(function(event){if(event.keyCode==9) {jQuery(dom).addClass("foco");return false;}})
			/* Eliminamos la clase "foco" si no tenemos foco en el enlace */
			jQuery(dom).focusout(function(){jQuery(dom).removeClass("foco");})
		}

		jQuery('.menu-superior ul li a').each(function(){focoAccesible(jQuery(this));});
		jQuery('.menu-principal ul li a').each(function(){focoAccesible(jQuery(this));});


		/* ================================================================== */
		


		/***
		=========================================================================
		ACCESIBILIDAD > Mostramos contenido accesible sin javascript
		-------------------------------------------------------------------------
		@autor: Alfonso Martin
		@fecha: 23/03/2011
		@descripcion: 
		
		WCAG2.0: -
		
		Con esta función ocultamos el contenido que ha sido marcado específicamente
		para ser mostrado en caso de que el usuario no tenga activado javascript.
		
		Si el usuario no tiene javascript, esta función no se ejecuta, y por tanto
		todos los elementos con class="sinjavascript" seguirán teniendo dicha clase.
		
		En el CSS:
		
		  .sinjavascript {
			float:none !important;
			display:block !important;
			position:relative !important;
			height:auto !important;
			min-height:100%;
			overflow:hidden !important;
		  }
		
		Si esta clase no es removida, el elemento que la lleve será mostrado.
		
		
		=========================================================================
		***/
		jQuery('.sinjavascript').removeClass("sinjavascript");
		/* ================================================================== */





		/***
		=========================================================================
		TIP CON NOMBRE DEL COLOR (En detalle de producto)
		-------------------------------------------------------------------------
		@autor: Alfonso Martin
		@fecha: 19/07/2011
		@descripcion: 
		
			Esta función muestra un <div> que sigue al ratón, con el nombre del 
			color, al pasar el ratón por encima de él, en la caja-detalle.
			
		=========================================================================
		***/
		jQuery('.colores ul li span').hide();
		jQuery('.colores ul li').mousemove(function(e){
			var parentOffset = jQuery(this).parent().offset();
			var x = e.pageX - parentOffset.left;
			var y = e.pageY - parentOffset.top + 55;
			jQuery("span",this).show().css({
				  top: y + "px",
				  left: x + "px"
			});
		});
		
		jQuery('.colores ul li').mouseout(function(e){
			jQuery("span",this).hide();
		});

		/* ================================================================== */








		/***
		=========================================================================
		CENTRADO VERTICAL 
		-------------------------------------------------------------------------
		@autor: http://www.seodenver.com/simple-vertical-align-plugin-for-jquery/
		@fecha: 19/07/2011
		@descripcion: 
		=========================================================================
		***/
		(function ($) {
		$.fn.vAlign = function() {
			return this.each(function(i){
			var ah = $(this).height();
			var ph = $(this).parent().height();
			var mh = Math.ceil((ph-ah) / 2);
			(mh>0)?$(this).css('padding-top', mh):$(this).css('padding-top', 0);
			});
		};
		})(jQuery);

		jQuery(".menu-carrusel ul li a span").vAlign();

		/* ================================================================== */








		/***
		=========================================================================
		FORMULARIOS > BUSCADOR > Al hacer focus quitamos el texto por defecto
		-------------------------------------------------------------------------
		@autor: Alfonso Martin
		@fecha: 23/03/2011
		@descripcion: 
		
		Con esta función lo que hacemos es eliminar el texto que aparece por 
		defecto en el campo <input>, justo cuando el usuario hace focus en él.
		
		Uso: Lee el valor del atributo value, y lo compara con lo que el usuario
		rellena. Por ejemplo:
		
		<input value="Texto por defecto" />
		
		=========================================================================
		***/
		jQuery('#formularioBusquedaTexto').each(function(){
			var defaultVal = jQuery(this).attr('value');
			jQuery(this).focus(function(){
				if (jQuery(this).val() == defaultVal){
					jQuery(this).removeClass('activo').val('');
				}
			})
			.blur(function(){
				if (jQuery(this).val() == ''){
					jQuery(this).addClass('activo').val(defaultVal);
				}
			})
			.blur().addClass('activo');
		});
		/* ================================================================== */


	
	
	
	
	
		/***
		=========================================================================
		CARRUSELES > El paginador avanza junto con el carrusel
		-------------------------------------------------------------------------
		@autor: Alfonso Martin
		@fecha: 21/02/2011
		@descripcion: 

		Redefinimos la función del pluggin Cycle que actualiza el enlace activo del paginador 
		
		=========================================================================
		***/
		jQuery.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
		    jQuery(pager).find('li').removeClass('activo')
			   .filter('li:eq('+currSlideIndex+')').addClass('activo'); 
		}; 
		
		/* ================================================================== */
		
		
		
		
		

		/***
		=========================================================================
		CARRUSELES TIPO 04
		-------------------------------------------------------------------------
		@autor: Alfonso Martin
		@fecha: 21/02/2011
		@descripcion: 
		
		Utilizamos el pluggin de jQuery llamado 'Cycle' para ir rotando de un 
		contenido a otro utilizando un paginador, o incluso flechas para avanzar
		o retroceder. Pluggin Cycle: http://jquery.malsup.com/cycle/
		
		Variables:
		
		item_width -> Ancho de un item, teniendo en cuenta margin y padding
		  
		=========================================================================
		***/
		jQuery('.carrusel-04').each(function(indice_carrusel) {

			total_items = jQuery(".lista-items > .item", this).size();

			if(total_items > 1){
				
				jQuery('.lista-items', this).cycle({speed: 1000, timeout: 10000, pager: '.carrusel-04:eq('+indice_carrusel+') .paginador-carrusel ul', pagerAnchorBuilder: function(idx, slide){return '<li></li>';}, next:'.carrusel-04:eq('+indice_carrusel+') .flecha-derecha', prev:'.carrusel-04:eq('+indice_carrusel+') .flecha-izquierda', delay: 0}).cycle('pause');
				
				/* Pintamos el paginador, inyectando una cadena html en la capa del paginador */
				item_width = 21+6+6;
				total_width = (total_items * item_width);
				cadena_html_menu_carrusel = '';
				for(x=0;x<total_items;x++){
					elemento = x + 1;
					cadena_html_menu_carrusel += '<li><a title="Mostrar elemento '+elemento+'"><span>'+elemento+'</span></a></li>';
				}
				
				jQuery('.paginador-carrusel ul', this).html(cadena_html_menu_carrusel)
				
				/* Marcamos la primera opcion del paginador como "activa" */			
				jQuery('.paginador-carrusel ul li:first', this).addClass("activo");
				
				/* Centramos el paginador */
				jQuery('.paginador-carrusel ul', this).css({width: total_width});
	
				/* Le damos funcionalidar al paginador */			
				jQuery('.carrusel-04:eq('+indice_carrusel+') .paginador-carrusel ul li').each(function(indice_paginador) {
					jQuery(this).click(function() {
	
						jQuery('.carrusel-04:eq('+indice_carrusel+') .lista-items').cycle(indice_paginador).cycle('pause');
			
						jQuery('.carrusel-04:eq('+indice_carrusel+') .paginador-carrusel ul li').removeClass('activo');
						jQuery('.carrusel-04:eq('+indice_carrusel+') .paginador-carrusel ul li:eq('+indice_paginador+')').addClass('activo');
				
					});
				});
				
			}
			else {
				jQuery('.paginador-carrusel', this).hide();
				jQuery('.flechas', this).hide();
			}
		});
		
		/* ================================================================== */








		/***
		=========================================================================
		CARRUSEL HOME
		-------------------------------------------------------------------------
		@autor: Alfonso Martin
		@fecha: 21/02/2011
		@descripcion: 
		
		Utilizamos el pluggin de jQuery llamado 'Cycle' para ir rotando de un 
		contenido a otro utilizando un paginador, o incluso flechas para avanzar
		o retroceder. Pluggin Cycle: http://jquery.malsup.com/cycle/
		
		Variables:
		
		item_width -> Ancho de un item, teniendo en cuenta margin y padding
		  
		=========================================================================
		***/
		jQuery('.carrusel-home').each(function(indice_carrusel) {
			
			total_items = jQuery(".lista-items > .item", this).size();
				
			jQuery('.lista-items-padre', this).cycle({speed: 1000, timeout: 10000, pager: '.carrusel-home:eq('+indice_carrusel+') .menu-carrusel ul', pagerAnchorBuilder: function(idx, slide){return '';}, delay: 0}).cycle('pause');
			
			/* Marcamos la primera opcion del menu como "activo" */			
			jQuery('.menu-carrusel ul li:first', this).addClass("activo");

			/* Le damos funcionalidar al menu */			
			jQuery('.carrusel-home:eq('+indice_carrusel+') .menu-carrusel ul li').each(function(indice_paginador) {
				jQuery(this).click(function() {

					jQuery('.carrusel-home:eq('+indice_carrusel+') .lista-items-padre').cycle(indice_paginador).cycle('pause');
		
					jQuery('.carrusel-home:eq('+indice_carrusel+') .menu-carrusel ul li').removeClass('activo');
					jQuery('.carrusel-home:eq('+indice_carrusel+') .menu-carrusel ul li:eq('+indice_paginador+')').addClass('activo');
			
				});
			});
				

			jQuery('.carrusel-home .carrusel-04').each(function(indice_carrusel_interno) {
				total_items_interno = jQuery(".lista-items > .item", this).size();
				
				if(total_items_interno > 1){
					
					jQuery('.lista-items', this).cycle({speed: 1000, timeout: 10000, pager: '.carrusel-home .carrusel-04:eq('+indice_carrusel_interno+') .paginador-carrusel ul', pagerAnchorBuilder: function(idx, slide){return '<li></li>';}, next:'.carrusel-home .carrusel-04:eq('+indice_carrusel_interno+') .flecha-derecha', prev:'.carrusel-home .carrusel-04:eq('+indice_carrusel_interno+') .flecha-izquierda', delay: 0}).cycle('pause');
					
					/* Pintamos el paginador, inyectando una cadena html en la capa del paginador */
					item_width_interno = 21+6+6;
					total_width_interno = (total_items_interno * item_width_interno);
					cadena_html_menu_carrusel_interno = '';
					for(x=0;x<total_items_interno;x++){
						elemento_interno = x + 1;
						cadena_html_menu_carrusel_interno += '<li><a title="Mostrar elemento '+elemento_interno+'"><span>'+elemento_interno+'</span></a></li>';
					}
					jQuery('.paginador-carrusel ul', this).html(cadena_html_menu_carrusel_interno)
					
					/* Marcamos la primera opcion del paginador como "activa" */			
					jQuery('.paginador-carrusel ul li:first', this).addClass("activo");
					
					/* Centramos el paginador */
					jQuery('.paginador-carrusel ul', this).css({width: total_width_interno});
		
					/* Le damos funcionalidar al paginador */			
					jQuery('.carrusel-home .carrusel-04:eq('+indice_carrusel_interno+') .paginador-carrusel ul li').each(function(indice_paginador_interno) {
						jQuery(this).click(function() {
		
							jQuery('.carrusel-home .carrusel-04:eq('+indice_carrusel_interno+') .lista-items').cycle(indice_paginador_interno).cycle('pause');
							jQuery('.carrusel-home .carrusel-04:eq('+indice_carrusel_interno+') .paginador-carrusel ul li').removeClass('activo');
							jQuery('.carrusel-home .carrusel-04:eq('+indice_carrusel_interno+') .paginador-carrusel ul li:eq('+indice_paginador_interno+')').addClass('activo');
					
						});
					});
					
				}
			});
		});
		
		/* ================================================================== */




	});
});