jQuery(function($){

	
	disableClick = false;
	
	
	//close sliders if user clicks off of a representation
	$('html').click(function() {
	 	$('.rep-slide-out-short, .rep-slide-out-tall').hide();
	 });


	//generic representation click handler
	$(".rep").click(function (event) {
	
	
		//block event from being seen by html listener (or slider will auto close)
	    event.stopPropagation();
	    
	    
    
    	//old - repositioned a single slide out div
    	/*
	    	var position = $(this).position();
		    //$("#rep-slide-out").offset($(this).offset());
		    //$("#rep-slide-out").hide("slide", { direction: "down" }, 1000);
		    $("#rep-slide-out").css("top", position.top);
		    $("#rep-slide-out").css("left", position.left + $(this).width());
		    $("#rep-slide-out").slideToggleWidth();
	    */
	    
	    //new - there is a slide out div for each rep
	    	
	    	$(".rep").css("z-index", "1000");
	    	$(this).css("z-index", "1001");
	    	var slideOutContainer = $(this).children('.rep-slide-out');
	    	var slideOutBox = slideOutContainer.children('.rep-slide-out-short, .rep-slide-out-tall');  //add: or big
	    	
	    	//manually close any open sliders (other than this one)
	   		$('.rep-slide-out-short, .rep-slide-out-tall').not(slideOutBox).hide();
	    	
	    	
	    	var position = $(this).position();
	    	if((position.left + $(this).width()) > 490){
		    	//left
		    	slideOutContainer.css("left", "-310px");
		    	slideOutBox.slideToggleMargin();
	    	}
	    	else{
		    	//right
		    	slideOutContainer.css("left", $(this).width() + "px");
		    	slideOutBox.slideToggleWidth();
		    }
	    	
	    	
	    
	});




	//var repConfig = <?php echo json_encode(sg_get_representations_config()); ?>;
	//alert(repConfig.home_work[13].y);
	
	
	
	 //do opening animation
      function menuItemsIn($list, n) {
		  
      	  $list.eq(n).find("img").height(0);
		  $list.eq(n).find("img").width(0);
      	  $list.eq(n).show();
      	  
      	  var animateToHeight = $list.eq(n).height();
		  var animateToWidth = $list.eq(n).width();
      	  
      	  
	      $list.eq(n).find("img").delay(n*100).animate({ 
	      		height: animateToHeight,
		   		width: animateToWidth
	      	},
	      	500,
	      	function() {
	      		//on complete
		    }
	      
	      );
	      
	      if(n < $list.length-1) { 
		     menuItemsIn($list, n+1) 
		  }
      }
      
      menuItemsIn($(".rep-init"), 0);
      
      
	
	

	//listen for nav click and then do representation animations
	$("#wrapper").bind('subNavClicked',function(e, data){
		
		if(!disableClick){
		
		disableClick = true;
		
		repSelector = "rep-home-" + data.subMenuItem;
		repSlug = "home_" + data.subMenuItem;
		
		if(data.subMenuItem == "home"){
			repSelector = "rep-home";
			repSlug = "home";
		}
		
		doAnimation = data.animateReps;
		
		if(doAnimation){
		
		
			//1. find all *sectionToLoad* items which are currently visible and animate them to their new location
			
			
				$("."+repSelector).filter(":visible").each(function(index) {
				
					//figure out rep number. ex: "3" in .rep-home-work-r3
					var repNumber = 0;
					for (i=1;i<=15;i++){
						if($(this).hasClass(repSelector+'-r'+i)){
							repNumber = i;
						}
					}
					
					//console.log("moving " + repNumber);
					
					//animate from current spot to this destination
					if(repNumber != 0){
						
						$(this).animate({	
						    top: repConfig[repSlug][repNumber-1].y,
						    left: repConfig[repSlug][repNumber-1].x
						}, 1000 );
						
						//$(this).css("top", repConfig.home_work[repNumber-1].y+"px");
						//$(this).css("left", repConfig.home_work[repNumber-1].x+"px");
					}
				
				});
				
				
			
			
			
			//2. find all *sectionToLoad* items which are currently invisible, move them to their proper indiv locations, and animate them onto stage 
			
				$('.' + repSelector).filter(":hidden").each(function(index) {
				
					//figure out rep number. ex: "3" in .rep-home-work-r3
					var repNumber = 0;
					for (i=1;i<=15;i++){
						if($(this).hasClass(repSelector+'-r'+i)){
							repNumber = i;
						}
					}
					
					
					if(repNumber != 0){
						
						//place this object appropriately
						$(this).css("top", repConfig[repSlug][repNumber-1].y+"px");
						$(this).css("left", repConfig[repSlug][repNumber-1].x+"px");
						
						
						//then animate it in
						$(this).find("img").height(0);
						$(this).find("img").width(0);
						$(this).show();
						var animateToHeight = $(this).height();
						var animateToWidth = $(this).width();
						$(this).find("img").animate({	
						    height: animateToHeight,
						    width: animateToWidth
						}, 1000 );

						

					}
				
				});
				

			
			
			//3. find all visible reps which are not in the *sectionToLoad* and animate them away
			
				
				$('.rep').not("." + repSelector).each(function(index) {
					
					//animate out
					var parentRep = $(this);
					$(this).find("img").animate(
						{	
						    height: 0,
						    width: 0
						}, 
						1000, 
						function() {
						    // Animation complete.
						    parentRep.hide();
						    disableClick = false;
						});
					});
					
			
			//4. reps which had the same image file were skipped, so now manually update those so future animation logic won't break
			
					
				
			} //end doAnimation check

		
		/*
		
		//alert('trigger');
		
		//1. Hide un-used
		  $('.home-r2 img, .home-r4 img, .home-r5 img, .home-r9 img, .home-r10 img, .home-r12 img').animate({ 
		    width: 0,
		    height: 0
		  }, 1000 );
		  
		  
		//2. Show new items
		  
		  $('.home-work-r2 img, .home-work-r4 img, .home-work-r6 img, .home-work-r8 img, .home-work-r9 img, .home-work-r10 img, .home-work-r14 img').css("height", "0px");
		  $('.home-work-r2 img, .home-work-r4 img, .home-work-r6 img, .home-work-r8 img, .home-work-r9 img, .home-work-r10 img, .home-work-r14 img').css("width", "0px");
		  $('.home-work-r2, .home-work-r4, .home-work-r6, .home-work-r8, .home-work-r9, .home-work-r10, .home-work-r14').css("z-index", "999");
		  $('.home-work-r2, .home-work-r4, .home-work-r6, .home-work-r8, .home-work-r9, .home-work-r10, .home-work-r14').show();


		  
		  //may need to go this route to add easing and alpha animation
		  //$('.home-work-r6 img, .home-work-r9 img, .home-work-r10 img').switchClass(null,'rep-s',500,'easeOutBounce',function(){
			//  console.log('transition is done!');
			//});

		  
		  
		  
		  
		  $('.home-work-r6 img, .home-work-r9 img, .home-work-r10 img').animateToSelector({
			    selectors: ['.rep-s'],
			    properties: [
			        'height',
			        'width'
			    ],
			    duration: 1000
		  });
		  
		  
		  
		  $('.home-work-r2 img, .home-work-r4 img, .home-work-r8 img, .home-work-r14 img').animateToSelector({
			    selectors: ['.rep-m'],
			    properties: [
			        'height',
			        'width'
			    ],
			    duration: 1000
		  });
		  

		  
		//3. Move re-used itmes
		  
		  $('.home-r6').animateToSelector({
			    selectors: ['.home-work-r13'],
			    properties: [
			        'top',
			        'left'
			    ],
			    duration: 1000
		  });
		  
		  $('.home-r8').animateToSelector({
			    selectors: ['.home-work-r11'],
			    properties: [
			        'top',
			        'left'
			    ],
			    duration: 1000
		  });
		  
		  $('.home-r11').animateToSelector({
			    selectors: ['.home-work-r5'],
			    properties: [
			        'top',
			        'left'
			    ],
			    duration: 1000
		  });
		  
		  $('.home-r13').animateToSelector({
			    selectors: ['.home-work-r12'],
			    properties: [
			        'top',
			        'left'
			    ],
			    duration: 1000
		  });
		  
		  
		  $('.home-r14').animateToSelector({
			    selectors: ['.home-work-r15'],
			    properties: [
			        'top',
			        'left'
			    ],
			    duration: 1000
		  });
		  
		  
		  */
		  
		  } //check for disableClick
		 
	}); //subNavClicked handler

});