var Header = {
	// Let's write in JSON to make it more modular
	addFade : function(selector){
		$("<span class=\"fake-hover\"></span>").css("display", "none").prependTo($(selector));
		// Safari dislikes hide() for some reason
			$(selector+" .fake-hover").fadeIn("slow");		
	}
};

var Contenido = {
	addFade : function(selector){
		// Safari dislikes hide() for some reason
			$(selector).fadeIn("slow");		
	}
};

var Contenido2 = {
	quitFade: function(selector){
		// Safari dislikes hide() for some reason
			$(selector).fadeOut("slow");		
	}
};    


function deslizador () {
	var $firstTime = $('#firstTime').val();
	var $once = $('#once').val();
	
	if ($once == 0)
	{
		$('.scrollContainerVisual').fadeIn(10);
		$('.scrollContainerVisual').fadeOut(10);
		
		$('.scrollContainerClientes').fadeIn(10);
		$('.scrollContainerClientes').fadeOut(10);
		
		$('.scrollContainerTrabajo').fadeIn(10);
		$('.scrollContainerTrabajo').fadeOut(10);
		
		$('.scrollContainerActuamos').fadeIn(10);
		$('.scrollContainerActuamos').fadeOut(10);
		
		$('.scrollContainerSegmentacion').fadeIn(10);
		$('.scrollContainerSegmentacion').fadeOut(10);

		$('.scrollContainerOrganizacion').fadeIn(10);
		$('.scrollContainerOrganizacion').fadeOut(10);
		
		$('#once').val('1');
	}

	if ($firstTime == 0)
	{		
    	var $panels = $('#slider .scrollContainer > div');
	    var $container = $('#slider .scrollContainer');
	
	    // if false, we'll float all the panels left and fix the width 
	    // of the container
	    var horizontal = true;
	
	    // float the panels left if we're going horizontal
	    if (horizontal) {
	        $panels.css({
	            'float' : 'left',
	            'position' : 'relative' // IE fix to ensure overflow is hidden
	        });
	
	        // calculate a new width for the container (so it holds all panels)
	        $container.css('width', $panels[0].offsetWidth * $panels.length);
	    }
	
	    // collect the scroll object, at the same time apply the hidden overflow
	    // to remove the default scrollbars that will appear
	    var $scroll = $('#slider .scroll').css('overflow', 'hidden');
	
	    // apply our left + right buttons
	    $scroll
	        .before('<img class="scrollButtons left" src="http://socialnoise.com/images/scroll_left.png" /> <img class="scrollButtons right" src="http://socialnoise.com/images/scroll_right.png" />');
	   // handle nav selection
	    
	    $('#firstTime').val('1');
	
    function selectNav() {
        $(this)
            .parents('ul:first')
                .find('a')
                    .removeClass('selected')
                .end()
            .end()
            .addClass('selected');
    }

    $('.navigation').find('a').click(selectNav);
    $('#menu-socialnoise').find('a').click(selectNav);
    
    // go find the navigation link that has this target and select the nav
    function trigger(data) {
        var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
        selectNav.call(el);
    }

    if (window.location.hash) {
        trigger({ id : window.location.hash.substr(1) });
    } else {
        $('ul.navigation a:first').click();
    }

    // offset is used to move to *exactly* the right place, since I'm using
    // padding on my example, I need to subtract the amount of padding to
    // the offset.  Try removing this to get a good idea of the effect
    var offset = parseInt((horizontal ? 
        $container.css('paddingTop') : 
        $container.css('paddingLeft')) 
        || 0) * -1;


    var scrollOptions = {
        target: $scroll, // the element that has the overflow

        // can be a selector which will be relative to the target
        items: $panels,

        navigation: '.navigation a',

        // selectors are NOT relative to document, i.e. make sure they're unique
        prev: 'img.left', 
        next: 'img.right',

        // allow the scroll effect to run both directions
        axis: 'xy',

        onAfter: trigger, // our final callback

        offset: offset,

        // duration of the sliding effect
        duration: 500,

        // easing - can be used with the easing plugin: 
        // http://gsgd.co.uk/sandbox/jquery/easing/
        easing: 'swing'
    };

    // apply serialScroll to the slider - we chose this plugin because it 
    // supports// the indexed next and previous scroll along with hooking 
    // in to our navigation.
    $('#slider').serialScroll(scrollOptions);

    // now apply localScroll to hook any other arbitrary links to trigger 
    // the effect
    $.localScroll(scrollOptions);

    // finally, if the URL has a hash, move the slider in to position, 
    // setting the duration to 1 because I don't want it to scroll in the
    // very first page load.  We don't always need this, but it ensures
    // the positioning is absolutely spot on when the pages loads.
    scrollOptions.duration = 1;
    $.localScroll.hash(scrollOptions);
	}
};
    
function cambiarContenidoClientes() {
		var $menuActivo = $('#menuActivo').val();
		
		if($menuActivo != "clientes")
		{
			//$('.scrollButtons.left').css('display', 'inline');
			//$('.scrollButtons.right').css('display', 'inline');

			//Ocultamos las capas activas
			//Contenido2.quitFade('.scrollContainer');
	        Contenido2.quitFade('.navigation');
	        
	        $('.scrollContainer').fadeOut('slow', function() {
		 
	        //Cambiamos los display a none
	     	$('.scrollContainer').css('display', 'none');
			$('.navigation').css('display', 'none');
	        
	        //Cambiamos las capas activas
			if($menuActivo == "servicios")
			{     
		        $('.scrollContainer').attr('class', 'scrollContainerServicios');
	  			$('.navigation').attr('class', 'navigationServicios');
			}
			if($menuActivo == "visual")
			{
		        $('.scrollContainer').attr('class', 'scrollContainerVisual');
		        $('.navigation').attr('class', 'navigationVisual');
			}
			
			if($menuActivo == "actuamos")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerActuamos');
	        	$('.navigation').attr('class', 'navigationActuamos');
			}
			
			if($menuActivo == "segmentacion")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerSegmentacion');
	        	$('.navigation').attr('class', 'navigationSegmentacion');
			}
			
			if($menuActivo == "trabajo")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerTrabajo');
	        	$('.navigation').attr('class', 'navigationTrabajo');
			}
			
	        if($menuActivo == "organizacion")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerOrganizacion');
	        	$('.navigation').attr('class', 'navigationOrganizacion');
			}
			
	        $('.scrollContainerClientes').attr('class', 'scrollContainer');
			$('.navigationClientes').attr('class', 'navigation');
			$('ul.navigation a').css('text-indent', '0em');
			$('ul.navigation a').css('background-image', 'none');
			$('ul.navigation a').css('width', 'auto');
			$('ul.navigation a').css('height', 'auto');	
			$('.navigation').css('margin-top', '-240px');
			$('.navigation').css('margin-left', '250px');		
	
			//Mostramos las capas activas
	        Contenido.addFade('.scrollContainer');
			Contenido.addFade('.navigation');
			
			//Reiniciamos los valores
			$('#firstTime').val('0');
			$('ul.navigation a:first').click();
	        //deslizador();
	        $('#menuActivo').val('clientes');
		});

		}
    }

function cambiarContenidoServicios() {
	
		var $menuActivo = $('#menuActivo').val();
		if($menuActivo != "servicios")
		{
			//$('.scrollButtons.left').css('display', 'inline');
			//$('.scrollButtons.right').css('display', 'inline');

			//Ocultamos las capas activas
			//Contenido2.quitFade('.scrollContainer');
	        Contenido2.quitFade('.navigation');
	        
	        $('.scrollContainer').fadeOut('slow', function() {
	        //Cambiamos los display a none
	        $('.scrollContainer').css('display', 'none');
	        $('.navigation').css('display', 'none');
	        
	        //Cambiamos las capas activas
	        if($menuActivo == "clientes")
			{
		        $('.scrollContainer').attr('class', 'scrollContainerClientes');
		        $('.navigation').attr('class', 'navigationClientes');
			}
			
			if($menuActivo == "visual")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerVisual');
	        	$('.navigation').attr('class', 'navigationVisual');
			}
			
			if($menuActivo == "actuamos")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerActuamos');
	        	$('.navigation').attr('class', 'navigationActuamos');
			}
			
			if($menuActivo == "segmentacion")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerSegmentacion');
	        	$('.navigation').attr('class', 'navigationSegmentacion');
			}
			
			if($menuActivo == "trabajo")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerTrabajo');
	        	$('.navigation').attr('class', 'navigationTrabajo');
			}
			
			if($menuActivo == "organizacion")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerOrganizacion');
	        	$('.navigation').attr('class', 'navigationOrganizacion');
			}
			
	        $('.scrollContainerServicios').attr('class', 'scrollContainer');
			$('.navigationServicios').attr('class', 'navigation');
			
			//Mostramos las capas activas
			Contenido.addFade('.scrollContainer');
			Contenido.addFade('.navigation');
			
			//Reiniciamos los valores
			$('#firstTime').val('0');
			$('ul.navigation a:first').click();
	        //deslizador();
	       	$('#menuActivo').val('servicios');
	        });
		}
    }

function cambiarContenidoVisual() {
	
		var $menuActivo = $('#menuActivo').val();
		if($menuActivo != "visual")
		{
			//$('.scrollButtons.left').css('display', 'inline');
			//$('.scrollButtons.right').css('display', 'inline');

			//Ocultamos las capas activas
			//Contenido2.quitFade('.scrollContainer');
	        Contenido2.quitFade('.navigation');
	        
	        //Cambiamos los display a none
	        $('.scrollContainer').fadeOut('slow', function() {
			$('.scrollContainer').css('display', 'none');
	        $('.navigation').css('display', 'none');
	        
	        //Cambiamos las capas activas
	        if($menuActivo == "clientes")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerClientes');
	        	$('.navigation').attr('class', 'navigationClientes');
			}
	        
	        if($menuActivo == "servicios")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerServicios');
	        	$('.navigation').attr('class', 'navigationServicios');
			}
			
			if($menuActivo == "actuamos")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerActuamos');
	        	$('.navigation').attr('class', 'navigationActuamos');
			}
			
			if($menuActivo == "segmentacion")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerSegmentacion');
	        	$('.navigation').attr('class', 'navigationSegmentacion');
			}
			
			if($menuActivo == "trabajo")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerTrabajo');
	        	$('.navigation').attr('class', 'navigationTrabajo');
			}
			
			if($menuActivo == "organizacion")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerOrganizacion');
	        	$('.navigation').attr('class', 'navigationOrganizacion');
			}

	        $('.scrollContainerVisual').attr('class', 'scrollContainer');
			$('.navigationVisual').attr('class', 'navigation');
			
			//Mostramos las capas activas
			Contenido.addFade('.scrollContainer');
			Contenido.addFade('.navigation');
			
			//Reiniciamos los valores
			$('#firstTime').val('0');
			$('ul.navigation a:first').click();
	        //deslizador();
	       	$('#menuActivo').val('visual');
	        });
	       	
		}
    }

function cambiarContenidoActuamos() {
	
		var $menuActivo = $('#menuActivo').val();
		if($menuActivo != "actuamos")
		{
			//$('.scrollButtons.left').css('display', 'none');
			//$('.scrollButtons.right').css('display', 'none');

			//Ocultamos las capas activas
			//Contenido2.quitFade('.scrollContainer');
	        Contenido2.quitFade('.navigation');

	        $('.scrollContainer').fadeOut('slow', function() {
	        //Cambiamos los display a none
			$('.scrollContainer').css('display', 'none');
	        $('.navigation').css('display', 'none');
	        
	        //Cambiamos las capas activas
	        if($menuActivo == "clientes")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerClientes');
	        	$('.navigation').attr('class', 'navigationClientes');
			}
	        
	        if($menuActivo == "servicios")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerServicios');
	        	$('.navigation').attr('class', 'navigationServicios');
			}
			
			if($menuActivo == "visual")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerVisual');
	        	$('.navigation').attr('class', 'navigationVisual');
			}
			
			if($menuActivo == "segmentacion")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerSegmentacion');
	        	$('.navigation').attr('class', 'navigationSegmentacion');
			}
			
			if($menuActivo == "trabajo")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerTrabajo');
	        	$('.navigation').attr('class', 'navigationTrabajo');
			}
			
			if($menuActivo == "organizacion")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerOrganizacion');
	        	$('.navigation').attr('class', 'navigationOrganizacion');
			}

	        $('.scrollContainerActuamos').attr('class', 'scrollContainer');
	        $('.navigationActuamos').attr('class', 'navigation');
			
			//Mostramos las capas activas
			Contenido.addFade('.scrollContainer');
			Contenido.addFade('.navigation');
			
			//Reiniciamos los valores
			$('#firstTime').val('0');
			$('ul.navigation a:first').click();
	        //deslizador();
	       	$('#menuActivo').val('actuamos');
	        });
	       	
		}
}

function cambiarContenidoSegmentacion() {
	
		var $menuActivo = $('#menuActivo').val();
		if($menuActivo != "segmentacion")
		{
			//$('.scrollButtons.left').css('display', 'none');
			//$('.scrollButtons.right').css('display', 'none');

			//Ocultamos las capas activas
			//Contenido2.quitFade('.scrollContainer');
	        Contenido2.quitFade('.navigation');
	        
	        $('.scrollContainer').fadeOut('slow', function() {
	        //Cambiamos los display a none
			$('.scrollContainer').css('display', 'none');
	        $('.navigation').css('display', 'none');
	        
	        //Cambiamos las capas activas
	        if($menuActivo == "clientes")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerClientes');
	        	$('.navigation').attr('class', 'navigationClientes');
			}
	        
	        if($menuActivo == "servicios")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerServicios');
	        	$('.navigation').attr('class', 'navigationServicios');
			}
			
			if($menuActivo == "visual")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerVisual');
	        	$('.navigation').attr('class', 'navigationVisual');
			}
			
			if($menuActivo == "actuamos")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerActuamos');
	        	$('.navigation').attr('class', 'navigationActuamos');
			}
			
			if($menuActivo == "trabajo")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerTrabajo');
	        	$('.navigation').attr('class', 'navigationTrabajo');
			}
			
			if($menuActivo == "organizacion")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerOrganizacion');
	        	$('.navigation').attr('class', 'navigationOrganizacion');
			}

	        $('.scrollContainerSegmentacion').attr('class', 'scrollContainer');
	        $('.navigationSegmentacion').attr('class', 'navigation');
			
			//Mostramos las capas activas
			Contenido.addFade('.scrollContainer');
			Contenido.addFade('.navigation');
			
			//Reiniciamos los valores
			$('#firstTime').val('0');
			$('ul.navigation a:first').click();
	        //deslizador();
	       	$('#menuActivo').val('segmentacion');
	        });
		}
}

function cambiarContenidoTrabajo() {
	
		var $menuActivo = $('#menuActivo').val();
		if($menuActivo != "trabajo")
		{
			//$('.scrollButtons.left').css('display', 'none');
			//$('.scrollButtons.right').css('display', 'none');

			//Ocultamos las capas activas
			//Contenido2.quitFade('.scrollContainer');
	        Contenido2.quitFade('.navigation');
	        
	        $('.scrollContainer').fadeOut('slow', function() {
	        //Cambiamos los display a none
			$('.scrollContainer').css('display', 'none');
	        $('.navigation').css('display', 'none');
	        
	        //Cambiamos las capas activas
	        if($menuActivo == "clientes")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerClientes');
	        	$('.navigation').attr('class', 'navigationClientes');
			}
	        
	        if($menuActivo == "servicios")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerServicios');
	        	$('.navigation').attr('class', 'navigationServicios');
			}
			
			if($menuActivo == "visual")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerVisual');
	        	$('.navigation').attr('class', 'navigationVisual');
			}
			
			if($menuActivo == "actuamos")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerActuamos');
	        	$('.navigation').attr('class', 'navigationActuamos');
			}
			
			if($menuActivo == "segmentacion")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerSegmentacion');
	        	$('.navigation').attr('class', 'navigationSegmentacion');
			}
			
			if($menuActivo == "organizacion")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerOrganizacion');
	        	$('.navigation').attr('class', 'navigationOrganizacion');
			}

	        $('.scrollContainerTrabajo').attr('class', 'scrollContainer');
	        $('.navigationTrabajo').attr('class', 'navigation');
			
			//Mostramos las capas activas
	        Contenido.addFade('.scrollContainer');
			Contenido.addFade('.navigation');
			
			//Reiniciamos los valores
			$('#firstTime').val('0');
			$('ul.navigation a:first').click();
	        //deslizador();
	       	$('#menuActivo').val('trabajo');
	        });
		}
}

function cambiarContenidoOrganizacion() {
	
		var $menuActivo = $('#menuActivo').val();
		if($menuActivo != "organizacion")
		{
			//$('.scrollButtons.left').css('display', 'none');
			//$('.scrollButtons.right').css('display', 'none');

			//Ocultamos las capas activas
			//Contenido2.quitFade('.scrollContainer');
	        Contenido2.quitFade('.navigation');
	        
	        $('.scrollContainer').fadeOut('slow', function() {
	        //Cambiamos los display a none
			$('.scrollContainer').css('display', 'none');
	        $('.navigation').css('display', 'none');
	        
	        //Cambiamos las capas activas
	        if($menuActivo == "clientes")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerClientes');
	        	$('.navigation').attr('class', 'navigationClientes');
			}
	        
	        if($menuActivo == "servicios")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerServicios');
	        	$('.navigation').attr('class', 'navigationServicios');
			}
			
			if($menuActivo == "visual")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerVisual');
	        	$('.navigation').attr('class', 'navigationVisual');
			}
			
			if($menuActivo == "actuamos")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerActuamos');
	        	$('.navigation').attr('class', 'navigationActuamos');
			}
			
			if($menuActivo == "segmentacion")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerSegmentacion');
	        	$('.navigation').attr('class', 'navigationSegmentacion');
			}
			
			if($menuActivo == "trabajo")
			{
	        	$('.scrollContainer').attr('class', 'scrollContainerTrabajo');
	        	$('.navigation').attr('class', 'navigationTrabajo');
			}

	        $('.scrollContainerOrganizacion').attr('class', 'scrollContainer');
	        $('.navigationOrganizacion').attr('class', 'navigation');
			
			//Mostramos las capas activas
			Contenido.addFade('.scrollContainer');
			Contenido.addFade('.navigation');
			
			//Reiniciamos los valores
			$('#firstTime').val('0');
			$('ul.navigation a:first').click();
	        //deslizador();
	       	$('#menuActivo').val('organizacion');
	        });
		}
}

$(document).ready(function(){
 
$(".scrollButtons.left").hover(function() {

$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
});
 
});

$(document).ready(function(){ // Script del Navegador
				$("div.subnavegador").hide();
				$('.metodologia').toggle(function() { 
						$(this).parent().find("div.subnavegador").slideDown('fast'); 
					},
					function() { 
						$(this).parent().find("div.subnavegador").slideUp('fast'); 
					}				
				);	
			});
			
$(function () {
  $('.bubbleInfo').each(function () {
    // options
    var distance = 10;
    var time = 250;
    var hideDelay = 500;

    var hideDelayTimer = null;

    // tracker
    var beingShown = false;
    var shown = false;
    
    var trigger = $('.trigger', this);
    var popup = $('.popup', this).css('opacity', 0);

    // set the mouseover and mouseout on both element
    $([trigger.get(0), popup.get(0)]).mouseover(function () {
      // stops the hide event if we move from the trigger to the popup element
      if (hideDelayTimer) clearTimeout(hideDelayTimer);

      // don't trigger the animation again if we're being shown, or already visible
      if (beingShown || shown) {
        return;
      } else {
        beingShown = true;

        // reset position of popup box
        popup.css({
          top: -100,
          left: -33,
          display: 'block' // brings the popup back in to view
        })

        // (we're using chaining on the popup) now animate it's opacity and position
        .animate({
          top: '-=' + distance + 'px',
          opacity: 1
        }, time, 'swing', function() {
          // once the animation is complete, set the tracker variables
          beingShown = false;
          shown = true;
        });
      }
    }).mouseout(function () {
      // reset the timer if we get fired again - avoids double animations
      if (hideDelayTimer) clearTimeout(hideDelayTimer);
      
      // store the timer so that it can be cleared in the mouseover if required
      hideDelayTimer = setTimeout(function () {
        hideDelayTimer = null;
        popup.animate({
          top: '-=' + distance + 'px',
          opacity: 0
        }, time, 'swing', function () {
          // once the animate is complete, set the tracker variables
          shown = false;
          // hide the popup entirely after the effect (opacity alone doesn't do the job)
          popup.css('display', 'none');
        });
      }, hideDelay);
    });
  });
});