$(document).ready(function() {

	var deviceAgent = navigator.userAgent.toLowerCase();
	var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
	if (agentID) {	
		$('#nav').css('display', 'none');
	}
	
	$(".scroll").click(function(event){
		//prevent the default action for the click event
		event.preventDefault();

		//get the full url - like mysite.com/#home
		var full_url = this.href;

		//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
		var parts = full_url.split("#");
		var trgt = parts[1];

		//get the top offset of the target anchor
		var target_offset = $("#"+trgt).offset();
		var target_top = target_offset.top;

		//goto that anchor by setting the body scroll top to anchor top
		$('html, body').animate({scrollTop:target_top}, 900);
	}); 


  	var top = $('#nav').offset().top - parseFloat($('#nav').css('marginTop').replace(/auto/, 0));
  	$(window).scroll(function (event) {
    	// what the y position of the scroll is
    	var y = $(this).scrollTop();
  
    	// whether that's below the form
    	if (y >= top) {
      		// if so, ad the fixed class
      		$('#nav').addClass('fixed');
    	} else {
      		// otherwise remove it
      		$('#nav').removeClass('fixed');
    }
    
    
    // viewport class settings
    $("#home:in-viewport").each(function() {
    	$('#button1').addClass('active');
          		       
    });
          	
    $("#events:in-viewport").each(function() {
    	$('#button2').addClass('active').removeClass('nonactive');	
          		
    	if ( $('#button1').hasClass('active') )
   			$('#button2').addClass('nonactive');		

    });
          		
    $("#about:in-viewport").each(function() {
    	$('#button3').addClass('active').removeClass('nonactive');
          		
  		if ( $('#button2').hasClass('active') )
   			$('#button3').addClass('nonactive');
        });
          	
   	$("#photos:in-viewport").each(function() {
    	$('#button4').addClass('active').removeClass('nonactive');

  		if ( $('#button3').hasClass('active') )
   				$('#button4').addClass('nonactive');
    });
          	
    $("#repertoire:in-viewport").each(function() {
    	$('#button5').addClass('active').removeClass('nonactive');

  		if ( $('#button4').hasClass('active') )
   			$('#button5').addClass('nonactive');
    });
          		
    $("#contact:in-viewport").each(function() {
    	$('#button6').addClass('active').removeClass('nonactive');

  		if ( $('#button5').hasClass('active') )
   			$('#button6').addClass('nonactive');
    });
   			
   	// remove class if out of viewport
   	$("#home:above-the-top, #one:below-the-fold").each(function() {
   		$('#button1').removeClass('active');
   	});
   			
   	$("#events:above-the-top, #two:below-the-fold").each(function() {
   		$('#button2').removeClass('active');
   	});
   			
   	$("#about:above-the-top, #three:below-the-fold").each(function() {
   		$('#button3').removeClass('active');
   	});
   			
   	$("#photos:above-the-top, #four:below-the-fold").each(function() {
   		$('#button4').removeClass('active');
   	});
   			
   	$("#repertoire:above-the-top, #five:below-the-fold").each(function() {
   		$('#button5').removeClass('active');
   	});
   			
   	$("#contact:above-the-top, #six:below-the-fold").each(function() {
   		$('#button6').removeClass('active');
   	});
  });
});