jQuery(function($){

		 // Set up variables
		    var $el, $parentWrap, $otherWrap, 
		        $allTitles = $("dt").css({
		            //padding: 5, // setting the padding here prevents a weird situation, where it would start animating at 0 padding instead of 5
		            "cursor": "pointer" // make it seem clickable
		        }),
		        $allCells = $("dd").css({
		            position: "relative",
		            top: 0,
		            left: 0,
		            display: "none" // info cells are just kicked off the page with CSS (for accessibility)
		        });
		    
		    // clicking image of inactive column just opens column, doesn't go to link   
		    $("#page-wrap").delegate("a.image","click", function(e) { 
		        
		        if ( !$(this).parent().hasClass("curCol") ) {         
		            e.preventDefault(); 
		            $(this).next().find('dt:first').click(); 
		        } 
		        
		    });
		    
		    // clicking on titles does stuff
		    $("#page-wrap").delegate("dt", "click", function() {
		        
		        // cache this, as always, is good form
		        $el = $(this);
		        
		        // if this is already the active cell, don't do anything
		        if (!$el.hasClass("current")) {
		        
		        	
		        	//set active nav
		        	$('.services-subnav').removeClass("active");
		        	var servNum = $el.attr("id").charAt( $el.attr("id").length-1 );
    				$("#services-subnav-"+servNum).addClass("active");
		        	
		        	
		        	//set custom height
		        	var idOfDiv = $el.parent().parent().attr('id');
		        	var imageHeight = 0;
		        	switch(idOfDiv)
					{
					case 'info-col-1':
					  imageHeight = 133;
					  break;
					case 'info-col-2':
					  imageHeight = 170;
					  break;
					case 'info-col-3':
					  imageHeight = 100;
					  break;
					case 'info-col-4':
					  imageHeight = 112;
					  break;
					default:
					  imageHeight = 170;
					}
							        	
		        	//expand image area
		        	$el.parent().prev("a").animate({ 
			            height: imageHeight
			        }, 500); 
			        
			        //bring in image
			        $el.parent().prev("a").addClass('open');
			        //$el.parent().prev("a").removeClass('batman');
			        
			        
			        //shrink other images
			        $("#page-wrap a").not($el.parent().prev("a")).animate({ 
			            height: "100px"
			        }, 500);
			        
			        //bring out other images
			        //$("#page-wrap a").not($el.parent().prev("a")).addClass('batman');
			        $("#page-wrap a").not($el.parent().prev("a")).removeClass('open');
			        
			        
			        
		        
		            $parentWrap = $el.parent().parent();
		            
		            $otherWraps = $(".info-col").not($parentWrap);
		            
		            // remove current cell from selection of all cells
		            $allTitles = $("dt").not(this);
		            
		            // close all info cells
		            $allCells.slideUp();
		            
		            //hack
		            $groupWrap = $el.parent();
		            $otherGroups = $("dl").not($groupWrap);
		            $otherGroups.slideUp();
					$groupWrap.slideDown();
		            
		            //set background of all inactive titles
		            //$allTitles.css("background", "#fff url('images/service_cell_bg_minus.jpg') no-repeat left top");
		            
		            // return all titles (except current one) to normal size
		            $allTitles.animate({
		                /*
		                fontSize: "14px",
		                paddingTop: 5,
		                paddingRight: 5,
		                paddingBottom: 5,
		                paddingLeft: 5
		                */
		            });
		            
		            // animate current title to larger size            
		            $el.animate({
		                /*
		                "font-size": "20px",
		                paddingTop: 10,
		                paddingRight: 5,
		                paddingBottom: 0,
		                paddingLeft: 10
		                */
		            }).next().slideDown();
		            
		            
		            
		            //expand down
		            //$el.next().slideDown();
		            
		            
		            // make the current column the large size
		            $parentWrap.animate({
		                width: 320
		            }).addClass("curCol");
		            
		            // make other columns the small size
		            $otherWraps.animate({
		                width: 140
		            }).removeClass("curCol");
		            
		            // make sure the correct column is current
		            $allTitles.removeClass("current");
		            $el.addClass("current");  
		        
		        }
		        
		    });
		    
		    $("#serv2").trigger("click");
})