// Code for popups and other scroll-position-dependent conditionals

$(window).scroll(function(){
  		// gets the position of the window
          var y = $(window).scrollTop();
          var $first = $('#first').offset().top - 90;
          var $second = $('#second').offset().top - 90;
          var $third = $('#third').offset().top - 90;
          var $fourth = $('#fourth').offset().top - 90;
          var $fifth = $('#fifth').offset().top - 90;
          var $sixth = $('#sixth').offset().top - 90;
          var $cowork = $('#sixth #cowork').offset().top - 90;
          var $photo_site = $('#sixth #photo_site').offset().top - 90;
          var $el_jefe = $('#sixth #el_jefe').offset().top - 90;          
          var $seventh = $('#seventh').offset().top - 90;
          var $contact = $('#contact').offset().top - 90;
          
          // special var for bottom of page
          var docHeight = $(document).height();
				
		$(".popup_next").each(function() {
		    var $parentOffset = $(this).closest('.section').offset().top - 110;
		    var $hideOffset = $parentOffset + 60;
		    if( y > ($parentOffset) && y < ($hideOffset) ) {
		    	$(this).fadeIn('350');}
			if( y > ($hideOffset) ) {
				$(this).fadeOut('500');}
			if( y < ($parentOffset) ) {
				$(this).fadeOut('500');}			
		});
		    
				       
    	// for .popup_01 div
		// fades a div in if it's within the scroll range and then back out if it's not
          if( y > (2460) && y < (2650) ){
            $(".popup_01").fadeIn('350');}
          if( y > (2650) ){
            $(".popup_01").fadeOut('500');}
          if( y < (2460) ){
            $(".popup_01").fadeOut('500');}

		// for .popup_02 div
		// fades a div in if it's within the scroll range and then back out if it's not
		  if( y > (2750) && y < (3050) ){
		    $(".popup_02").fadeIn('350');}
		  if( y > (3050) ){
		    $(".popup_02").fadeOut('500');}
		  if( y < (2750) ){
		    $(".popup_02").fadeOut('500');}

		
		// for .popup_03 div
		// fades a div in if it's within the scroll range and then back out if it's not
		  if( y > (6438) && y < (6878) ){
		    $(".popup_03").fadeIn('350');}
		  if( y > (6878) ){
		    $(".popup_03").fadeOut('500');}
		  if( y < (6438) ){
		    $(".popup_03").fadeOut('500');}
		
		
		if ( y > $first ){
			$("#menu-item-103").addClass('active');}
		if ( y < $first ){
			$("#menu-item-103").removeClass('active');}

		if ( y > $second ){
			$("#menu-item-104").addClass('active');}
		if ( y < $second ){
			$("#menu-item-104").removeClass('active');}

		if ( y > $third ){
			$("#menu-item-105").addClass('active');}
		if ( y < $third ){
			$("#menu-item-105").removeClass('active');}
		
		if ( y > $fourth ){
			$("#menu-item-106").addClass('active');}
		if ( y < $fourth ){
			$("#menu-item-106").removeClass('active');}
		
		if ( y > $fifth ){
			$("#menu-item-107").addClass('active');}
		if ( y < $fifth ){
			$("#menu-item-107").removeClass('active');}

		if ( y > $sixth ){
			$("#menu-item-108").addClass('active');}
		if ( y < $sixth ){
			$("#menu-item-108").removeClass('active');}
		
		if ( y > $seventh ){
			$("#menu-item-109").addClass('active');}
		if ( y < $seventh ){
			$("#menu-item-109").removeClass('active');}
												
		if ( y > $contact ){
			$("#menu-item-204").addClass('active');}
		if ( y < $contact ){
			$("#menu-item-204").removeClass('active');}
		

});

// add the .active class to nav when clicked (not just when scrolled)
$('#nav-main li a').click(function(){
	$(this).parent().addClass('active');
});

// invoke jQuery.parallax-1.1.js and call related variables	
	
	//.moveRelative() options:
	//x position
	//adjuster (y position to start from)
	//inertia (speed to move relative to vertical scroll)
	//outerHeight (true/false)
	$('#first').moveRelative("50%", 742, 0.05, true);
	$('#first .grid').moveRelative("50%", 742, 0.8, true);
	$('#third').moveRelative("50%", 4700, 0.08, true);
	$('#fourth').moveRelative("50%", 6550, 0.08, true);
	$('#fourth .overlay').moveRelative("50%", 6050, 0.14, true);
	$('#fifth').moveRelative("50%", 7900, 0.4, true);
	$('#sixth').moveRelative("50%", 10500, 0.2, true);
	$('#sixth .grid').moveRelative("50%", 0, 0.8, true);
	$('#seventh').moveRelative("50%", 11000, 0.05, true);
		


// echo useragent string inside html element - useful for specific targeting of modern browsers
	var b = document.documentElement;
  	b.setAttribute('data-useragent',  navigator.userAgent);
  	b.setAttribute('data-platform', navigator.platform );


// equal width divs for #nav-main
	var el = $('#nav-main ul li');
	var len = el.children().length;
	if(len > 0){
		len = 100/len;
		el.css("width",  len + "%");
		$('#nav-main ul li:last-of-type').css("width",  len-8 + "%"); 
	} 

// Convert logo img alt tags into div.caption 's
$(".imgs_wrap img").each(function(i, ele) {
	var title = $(ele).attr('title');
	var description = $(ele).attr('alt');
  $(this).parent().prepend('<div class="caption popup"><p> ' +description + '</p>');
});

// Center the .caption popups vertically
$("div.caption").each(function() {
    var theHeight = $(this).height();
	var container = $(this).closest('a').height();
	if( theHeight > container ) { // do this if the caption is bigger
		$(this).css("top",-( (theHeight-container)/4 )  + "px");
	}	
	if( container > theHeight ) { //do this if the logo is bigger
		$(this).css("top", (container-theHeight)/2 + "px");
	}
});