jQuery(function() {

    // Set up variables
    var gridvarel, gridvarparentWrap, gridvarotherWrap, 
        gridvarallTitles = jQuery("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
        }),
        gridvarallCells = jQuery("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   
    jQuery("#page-wrap").delegate("a.image","click", function(e) { 
        
        if ( !jQuery(this).parent().hasClass("curCol") ) {         
            e.preventDefault(); 
            jQuery(this).next().find('dt:first').click(); 
        } 
        
    });
    
    // clicking on titles does stuff
    jQuery("#page-wrap").delegate("dt", "click", function() {
        
        // cache this, as always, is good form
        gridvarel = jQuery(this);
        
        // if this is already the active cell, don't do anything
        if (!gridvarel.hasClass("current")) {
        
            gridvarparentWrap = gridvarel.parent().parent();
            gridvarotherWraps = jQuery(".info-col").not(gridvarparentWrap);
            
            // remove current cell from selection of all cells
            gridvarallTitles = jQuery("dt").not(this);
            
            // close all info cells
            gridvarallCells.slideUp();
            
            // return all titles (except current one) to normal size
            gridvarallTitles.animate({
                fontSize: "14px",
                paddingTop: 5,
                paddingRight: 5,
                paddingBottom: 5,
                paddingLeft: 5
            });
            
            // animate current title to larger size            
            gridvarel.animate({
                "font-size": "20px",
                paddingTop: 10,
                paddingRight: 5,
                paddingBottom: 0,
                paddingLeft: 10
            }).next().slideDown('fast');
            
            // make the current column the large size
            gridvarparentWrap.animate({
                width: 320
            }).addClass("curCol");
            
            // make other columns the small size
            gridvarotherWraps.animate({
                width: 140
            }).removeClass("curCol");
            
            // make sure the correct column is current
            gridvarallTitles.removeClass("current");
            gridvarel.addClass("current");  
        
        }
        
    });
    
    jQuery("#starter").trigger("click");
    
});