$(document).ready(function(){

$(".box, #footer-bgwrap").not("#intro").hide();



$('#nav').vAlign();

$(".toggle-snippet a").hover(
	function () {		
		
		$(".snippet", this).fadeIn(200);
		
	
		
	}, 
	function () {
		
		$(".snippet", this).fadeOut(200);
		
		
			
	}
);


$("input.form-submit").hover(
	function () {		
		$(this).addClass("hovering");
		
		
	}, 
	function () {
		
		$(this).removeClass("hovering");
		
			
	}
);

$(".process").hover(
	function () {		
		$(this).addClass('hovering');
		$('.process-swap-a', this).fadeOut(0);
		$('.process-swap-b', this).fadeIn(0);
		
	}, 
	function () {
		
		$('.process-swap-b', this).fadeOut(0);
		$('.process-swap-a', this).fadeIn(0);
		$(this).removeClass('hovering');		
			
	}
);


function validate(formData, jqForm, options) { 
    // fieldValue is a Form Plugin method that can be invoked to find the 
    // current value of a field 
    // 
    // To validate, we can capture the values of both the username and password 
    // fields and return true only if both evaluate to true 
 
    var nameValue = $('input[name=name]').fieldValue(); 
    var emailValue = $('input[name=email]').fieldValue(); 
    var inquiryValue = $('textarea[name=inquiry]').fieldValue();
 
    // usernameValue and passwordValue are arrays but we can do simple 
    // "not" tests to see if the arrays are empty 
    if (!nameValue[0] || !emailValue[0] || !inquiryValue[0] ) { 
       // alert('Please fill out all fields'); 
        $(".validate-alert").show(1);
        return false; 
    } 
    
}

var options = { 
    beforeSubmit: validate, 
    success:    function() { 
	    $('#myForm, #footer .headline, .validate-alert').fadeOut(200);
	    $('#form-success').fadeIn(200); 
    } 
}; 

$('#myForm').ajaxForm(options); 



});




$(window).load(function(){

var currentEq = 0;
var currentTag = "#content .work" ;
var currentProject = ".p1";
var allTag = "#content .box";

var speed = 200;
var masonit = '#content';
var workDetail = ".toggle-snippet a";

var showID = "otari";
var subnavTag = "all-active";

currentProject = 0;





$(masonit).masonry({
    columnWidth: 232, 
    itemSelector: '.box:not(.invis)',
    animate: true,
    saveOptions: true,
    animationOptions: {
        duration: speed,
        queue: false
    }
     
	}
);


$('#header-wrap a, .sub-cat a').click(function(){
     currentProject = '.' + $(this).attr('class');
     $(".arrow-wrap, #big-arrows").hide(200);
     
     $('.detailed').fadeOut(1);
     //$(".image-col").fadeOut(1);
    
    if(currentProject=='.all') {
	    
	    $("#subnav-wrap").removeClass(subnavTag);
		subnavTag = "all-active";
		$("#subnav-wrap").addClass(subnavTag);
		
	    currentTag = "#content .work";
	    
	    
	   // $(".work").not(".expanded") .find(".detailed").fadeOut(10).fadeOut(10);
		//$(".work").not(".expanded2") .find(".detailed").fadeOut(10).fadeOut(10);

	    
	    

	    
	    $(".snippet").fadeIn(1).fadeOut(1);
	  
	    $(".toggle-snippet").fadeIn(200);
	     $(".expanded").removeClass("expanded");
	     $(".expanded2").removeClass("expanded2");
	     $(".arrow-wrap, #big-arrows").hide(200);
     
        // show all hidden boxes
        $("#subnav-wrap").removeClass("clicked");
        $("#subnav-wrap").slideUp(200);
        
        $(masonit).children('.invis')
              .toggleClass('invis').not("#big-arrows").fadeIn(speed);
           
              
    } else if(currentProject=='.work' || currentProject=='.web' || currentProject=='.print' || currentProject=='.branding' || currentProject=='.type') {   
    
	    currentTag = "#content " + currentProject;
	    
	    
	    
	    $("#subnav-wrap").removeClass(subnavTag);
	    subnavTag = $(this).attr('class') + "active";
	    $("#subnav-wrap").addClass(subnavTag);
	    
	    
	    

        //$(".detailed").not("expanded").fadeOut(5).fadeOut(5);
	    //$(".detailed").not("expanded2").fadeOut(5).fadeOut(5);

	    
	    
	    $(".snippet").fadeIn(1).fadeOut(1);
	    $(".toggle-snippet").fadeIn(200);
	     $(".expanded").removeClass("expanded");
	     $(".expanded2").removeClass("expanded2");
	     $(".arrow-wrap, #big-arrows").hide(200);
	    
        // hide visible boxes 
        $("#subnav-wrap").addClass("clicked");
         
        $("#subnav-wrap").slideDown(200);
        
       $(masonit).children().not(currentProject).not('.invis')
            .toggleClass('invis').fadeOut(speed);
            
                    // show hidden boxes
       $(masonit).children(currentProject+'.invis')
             .toggleClass('invis').fadeIn(speed);
             
       
       
    } else {    
    
	    $("#subnav-wrap").removeClass(subnavTag);
		subnavTag = "all-active";
		$("#subnav-wrap").addClass(subnavTag);
		
	    

    
		
		$(".snippet").fadeIn(1).fadeOut(1);
		$(".toggle-snippet").fadeIn(200);
		$(".expanded").removeClass("expanded");
		$(".expanded2").removeClass("expanded2");
		$(".arrow-wrap, #big-arrows").hide(200);
        // hide visible boxes 
        $("#subnav-wrap").removeClass("clicked");
        $("#subnav-wrap").slideUp(200);
        $(".arrow-wrap, #big-arrows").hide(200);
        
        $(masonit).children().not(currentProject).not('.invis')
             .toggleClass('invis').fadeOut(speed);
             
         // show hidden boxes
        $(masonit).children(currentProject+'.invis')
              .toggleClass('invis').fadeIn(speed);
    }
	    $(masonit).masonry();

    return false;
});

/*
$(workDetail).click(function(){
	
	showID = '#' + $(this).attr('class');
	
	currentProject = $(this).parent().parent();
		
	
	
	currentEq =  $(currentProject).index(currentTag);
          
   

    $(".toggle-snippet").fadeOut(200);
    $(".snippet").fadeOut(0);
    $("#subnav-wrap").addClass("clicked");
    $("#subnav-wrap").slideDown(200);
   
	$(".arrow-wrap, #big-arrows").show(200);
        
        
        
        
       $(allTag).not('.invis').not(currentProject).toggleClass('invis').fadeOut(200, function() {
      
         // show hidden boxes
		       $(currentProject).addClass("expanded");
		       
		        $('.image-col', currentProject).load('projects.htm ' + showID, function() {

		        
		         
		             $(".detailed", currentProject).fadeIn(400);
		       
		             $(masonit).masonry();
		        
		             return false;
                });
    
   
		});
		 
		$(masonit).masonry();
	
    
});
*/





$(".toggle-snippet a").click(function(){

	showID = '#' + $(this).attr('class');
	currentProject = $(this).parent().parent();
	currentEq =  $(currentProject).index(currentTag);
	
	//$(".image-col").fadeOut();

	
	$("#subnav-wrap").addClass("clicked");
    $("#subnav-wrap").slideDown(200);
    $(".arrow-wrap, #big-arrows").show(200);
    
    
    $(".toggle-snippet").not('currentProject').fadeOut(200);
    //alert('after');
     $(allTag).not('.invis').not(currentProject).toggleClass('invis').fadeOut(200);
    
    
    $(".toggle-snippet", currentProject).fadeOut(200, function() {
	    $(currentProject).addClass("expanded");
	     
	     $(".detailed", currentProject).fadeIn(200, function() {
			  
			  $(masonit).masonry();   
	     
	          $('.image-col', currentProject).load('projects.htm ' + showID, function() {
		          //$(".image-col", currentProject).fadeIn(50);
		          $(masonit).masonry();
	          });
	          
	    });
	        //alert('during');

    });
	    
        
	    
	   
	   //$(".toggle-snippet", currentProject).fadeIn(200);
	   
	    
	   
          
	              
	/*
		         
	              $(".detailed", currentProject).fadeIn(200, function() { 
					
					
					//alert('looping?');
	                 $(masonit).masonry({
						    columnWidth: 232, 
						    itemSelector: '.box:not(.invis)',
						    animate: true,
						    saveOptions: true,
						    animationOptions: {
						        duration: speed,
						        queue: false
						    } }
				     );
	     
	                 
	              });
	            */  
	    
		
	
	$(masonit).masonry();
	return false;

});



$("#subnav .arrows a, #big-arrows a").click(function(){
    
   
    $(".detailed").stop(true, true).fadeOut(200);
    
    
	
    //$(".expanded .detailed").fadeOut(200);
    //$(".expanded2 .detailed").fadeOut(200);
	
	
     
     
     var whichArrow = '.' + $(this).attr('class');
     
     
     
    
    
    if (whichArrow=='.previous') {
    
		if (currentEq===0) {

	        currentEq =  $(currentTag).size() - 1;
	    
	    } else {
	    
	        currentEq =  $(currentProject).index(currentTag) - 1;
	    
	    }
	    
	   
    
    } else {
    
	    if (currentEq==$(currentTag).size() - 1) {
	    
	        currentEq = 0;
	    
	    } else {
	    
	        currentEq =  $(currentProject).index(currentTag) + 1;

	    }

	}
	
        
         currentProject = $(currentTag).eq(currentEq);
         
        
         
         $("#subnav-wrap").addClass("clicked");
         $("#subnav-wrap").slideDown(200);
         //$(".arrow-wrap, #big-arrows").show(200);
         
         $(".toggle-snippet").fadeOut(200);
           
           
           $(currentTag).not('.invis').toggleClass('invis').fadeOut(200); 
             
     
          $(".expanded").removeClass("expanded");
          $(".expanded2").removeClass("expanded2");
          
          $(".toggle-snippet", currentProject).parent().addClass("expanded2");
          
         showID = '#' + $('.toggle-snippet a', currentProject).attr('class');
          
         $('.image-col', currentProject).load('projects.htm ' + showID, function() {
              
          
              $(currentProject).toggleClass('invis').fadeIn(0); 

         
              $(".detailed", currentProject).fadeIn(400); 

              $(masonit).masonry();
     
              return false;
         });
          
         
          
});
    
    

  $('#preload-hide').load('projects.htm #all-content', function() {
		  $('#preload-hide').load('projects.htm #no-content');
	});

});

		/*sequence load fade*/
$(window).load(function() {

	var work_length = $(".work").length - 1;
	//alert(work_length);
	var i_count = 0;

	$(".work").each(function(i) {
	  $(this).delay(100*i).fadeIn();
	  
	 //$(".box").not(".work").fadeIn();
		
		//alert(i_count);
		
		if (i >= work_length)
		{
			$(".box, #footer-bgwrap").not('.work').delay(100*(i+1)).fadeIn();
		}
	
	  	  
 
  });
  
  
  
  
});