jQuery(document).ready(function($) {

    // Set up variables
    var $el, $parentWrap, $otherWrap, 
        $allTitles = $(".slideTitle").css({
            padding: 15, // 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: -1,
            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('.slideTitle:first').click(); 
        } 
        
    });
    
    // clicking on titles does stuff
	$("#page-wrap div.slideTitle").bind('autoplay');
    $("#page-wrap").delegate("div.slideTitle", "click autoplay", function() {
        // cache this, as always, is good form
        $el = $(this);
		$elSpan = $(this).children("p.subtitle");
        
        // if this is already the active cell, don't do anything
        if (!$el.hasClass("current")) {
        
            $parentWrap = $el.parent().parent();
            $otherWraps = $(".info-col").not($parentWrap);
            
            // remove current cell from selection of all cells
            $allTitles = $("div.slideTitle h2").not(this);
			$allsubs = $(".slideTitle p.subtitle").not(this);
            
            // close all info cells
            $allCells.slideUp();
            
            // return all titles (except current one) to normal size
            $allTitles.stop().animate({
                fontSize: "30px"
            });
			$allsubs.stop().animate({
				fontSize: "13px"
			});
            
            // animate current title to larger size            
			$elSpan.stop().animate({
				fontSize: "18px"
			},{queue: false });
            $el.stop().children("h2").animate({
                "font-size": "42px"
            },{queue: false }).parent().next().stop(true,true).slideDown();
			

			
            // make the current column the large size
            $parentWrap.stop().animate({
                width: 475
            }).addClass("curCol");

            
            // make other columns the small size
            $otherWraps.stop().animate({
                width: 240
            }).removeClass("curCol");
            
            // make sure the correct column is current
            $allTitles.parent().removeClass("current");
            $el.addClass("current");  
        
        }
        
    });

});