$().ready(function(){

    var on_color =  'rgb(0,128,176)';
    var off_color = 'rgb(255,255,255)';
    var anim_time = 1000;
    var cell_patterns =  
    { 0 : 
        { 
        "#cell_1_0":true,
        "#cell_2_1":true,
        "#cell_0_2":true,
        "#cell_1_2":true,
        "#cell_2_2":true,
        },

     1: {
        "#cell_0_0":true,
        "#cell_1_1":true,
        "#cell_2_1":true,
        "#cell_0_2":true,
        "#cell_1_2":true,
        },
     2: {
        "#cell_0_1":true,
        "#cell_1_2":true,
        "#cell_2_2":true,
        "#cell_2_0":true,
        "#cell_2_1":true,
        },
    }; 

      num_patterns = 3; 

    function changeCells(pattern, color){ for (var cell in pattern){
            $(cell).animate(
                {'backgroundColor' : color}, anim_time);
        }
    }

    //set up the intial pattern
    var current_pattern = 0;
    changeCells(cell_patterns[current_pattern], on_color);


    $("#where").mouseover(function (){
        changePattern(0); 
        $("#box_img").attr("src", "images/sf.jpg");
    }); 
    $("#work").mouseover(function (){
        changePattern(1); 
        $("#box_img").attr("src", "images/uber_logo.png?v=2");
    }); 
    $("#games").mouseover(function (){
        changePattern(2); 
        $("#box_img").attr("src", "images/powergrid.jpg?v=2");
    }); 
    function changePattern(new_pattern){
        var to_on = {}; 
        var to_off = {};
        for (var cell in cell_patterns[new_pattern])
            to_on[cell] = true;
        for (var cell in cell_patterns[current_pattern]){
            if (to_on[cell])
                delete to_on[cell];
            else
                to_off[cell] = true;
        }

        current_pattern = new_pattern;
        changeCells(to_off, off_color);
        changeCells(to_on, on_color);
    }
    
});