$(document).ready(function(){ 

		// Gallery
		if(jQuery("#gallery").length){

		// Declare variables
		var totalImages = jQuery("#gallery3 >li").length,
			imageWidth = jQuery("#gallery3 > li:first").outerWidth(true),
			totalWidth = imageWidth * totalImages,
			visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth),
			visibleWidth = visibleImages * imageWidth,
			stopPosition = (visibleWidth - totalWidth);

		jQuery("#gallery3").width(totalWidth);

		jQuery("#gallery-prev").click(function(){
			if(jQuery("#gallery3").position().left < 0 && !jQuery("#gallery3").is(":animated")){
				jQuery("#gallery3").animate({left : "+=" + "998px"});
			}
			return false;
		});

		jQuery("#gallery-next").click(function(){
			if(jQuery("#gallery3").position().left > stopPosition && !jQuery("#gallery3").is(":animated")){
				jQuery("#gallery3").animate({left : "-=" + "998px"});
			}
			return false;
		});
		}

		//Mostramos el div padding con el primer link activo
		$(".paging").show();
		$(".paging a:first").addClass("active");

		/*Obtenemos el tamaño de la imagen,el numero de imagenes que hay y el
		tamaño del riel de imagenes.*/
		var imageWidth = $(".window").width();
		var imageSum = $(".image_reel img").size();
		var imageReelWidth = imageWidth * imageSum;

		//Ajustamos el riel de imagenes a su nuevo tamaño
		$(".image_reel").css({'width' : imageReelWidth});

		//Function  Paging y Slider
		rotate = function(){
  			var triggerID = $active.attr("rel") - 1; 
  			//Obtenemos el numero de veces que avanazara el slider antes de volver a empezar
  			var image_reelPosition = triggerID * imageWidth; 
  			//Determinamos la distancia de la imagen del riel para recorrerlo

    			$(".paging a").removeClass('active'); //Removemos todos los active class
    			$active.addClass('active'); 
    			//Añadimos el active class (el $active es declarado en la funcion rotateSwitch 

   			//Animacion del Slider
   			 $(".image_reel").animate({
       	 		left: -image_reelPosition
    			}, 500 );

		}; 

		//Rotacion y tiempo del evento
		rotateSwitch = function(){
    			play = setInterval(function(){ 
    			//colocamos el tiempo - se cambiara cada 7 segundos
       		 $active = $('.paging a.active').next(); //movemos al siguiente slider
       		 if ( $active.length === 0) { //Si llegamos al final...
        		    $active = $('.paging a:first'); //regresamos al primer slider
        		}
        		rotate(); //Activamos la funcion
   			}, 7000); //Velocidad del timer en milisegundos (7 seconds)
		};

		rotateSwitch(); //Ejecutar la funcion
		
		//Cuando ocurra el Hover
		$(".image_reel a").hover(function() {
   			 clearInterval(play); //Se detiene la rotacion
		}, function() {
   		 rotateSwitch(); //volvemos al rotador
		});	

		//Caundo ocurra un click sobre el padding
		$(".paging a").click(function() {
  			$active = $(this); //Activamos el slider clickeado en el padding
   			 //Reseteamos el timer
   	 		clearInterval(play); //detenemos la rotacion
   			rotate(); //activamos la funcion inmediatamente
    			rotateSwitch(); // volvemos al rotador
    			return false; //Evitar que el navegador vaya al link
		});

		//Caundo ocurra un click sobre el next button
		$(".nav .left").click(function() {
			$active = $('.paging a.active').prev();
  			 //Pasamos al siguiente slider
  			if ( $active.length === 0) { //Si llegamos al final...
        		   $active = $('.paging a:last'); //regresamos al primer slider
        		}
   			 //Reseteamos el timer
   	 		clearInterval(play); //detenemos la rotacion
   			rotate(); //activamos la funcion inmediatamente
    			rotateSwitch(); // volvemos al rotador
    			return false; //Evitar que el navegador vaya al link
		});
		
		//Caundo ocurra un click sobre el next button
		$(".nav .right").click(function() {
			$active = $('.paging a.active').next();
  			 //Pasamos al siguiente slider
  			if ( $active.length === 0) { //Si llegamos al final...
        		   $active = $('.paging a:first'); //regresamos al primer slider
        		}
   			 //Reseteamos el timer
   	 		clearInterval(play); //detenemos la rotacion
   			rotate(); //activamos la funcion inmediatamente
    			rotateSwitch(); // volvemos al rotador
    			return false; //Evitar que el navegador vaya al link
		});
});