Bizarre JavaScript Bug

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

    <head>
        <title>Cytoscape Web example</title>

        <script type="text/javascript" src="js/min/json2.min.js"></script>
        <script type="text/javascript" src="js/min/AC_OETags.min.js"></script>
        <script type="text/javascript" src="js/min/cytoscapeweb.min.js"></script>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

        <script type="text/javascript">

            // These two topmost functions are the only ones that I wrote, the rest is copied from the Cytoscape tutorial

            function get_filename()
            {

                // Dirty trick, will be replaced in next version

                var output = false;

                var url = document.location;
                url = url.toString();
                url = url.split("?");

                if (url.length > 1)

                    { output = url[1]; }

                else

                    { output = "xml/example.xml"; }

                return output;

            }

            function get_network(filename)
            {

                var output = "";

                $.ajax({url: filename, type: "GET", dataType: "text", success: function(result) { output = result; } });

                alert("ASDFSADF");

                return output;

            }

            window.onload = function() {
                // id of Cytoscape Web container div
                var div_id = "cytoscapeweb";

                // NOTE: - the attributes on nodes and edges
                //       - it also has directed edges, which will automatically display edge arrows

                var xml = get_network(get_filename());

                function rand_color() {
                    function rand_channel() {
                        return Math.round( Math.random() * 255 );
                    }

                    function hex_string(num) {
                        var ret = num.toString(16);

                        if (ret.length < 2) {
                            return "0" + ret;
                        } else {
                            return ret;
                        }
                    }

                    var r = rand_channel();
                    var g = rand_channel();
                    var b = rand_channel();

                    return "#" + hex_string(r) + hex_string(g) + hex_string(b);
                }

                // visual style we will use
                var visual_style = {
                    global: {
                        backgroundColor: "#ABCFD6"
                    },
                    nodes: {
                        shape: "OCTAGON",
                        borderWidth: 3,
                        borderColor: "#ffffff",
                        size: {
                            defaultValue: 25,
                            continuousMapper: { attrName: "weight", minValue: 25, maxValue: 75 }
                        },
                        color: {
                            discreteMapper: {
                                attrName: "id",
                                entries: [
                                    { attrValue: 1, value: "#0B94B1" },
                                    { attrValue: 2, value: "#9A0B0B" },
                                    { attrValue: 3, value: "#dddd00" }
                                ]
                            }
                        },
                        labelHorizontalAnchor: "center"
                    },
                    edges: {
                        width: 3,
                        color: "#0B94B1"
                    }
                };

                // initialization options
                var options = {
                    swfPath: "swf/CytoscapeWeb",
                    flashInstallerPath: "swf/playerProductInstall"
                };

                var vis = new org.cytoscapeweb.Visualization(div_id, options);

                vis.ready(function() {
                    // set the style programmatically
                    document.getElementById("color").onclick = function(){
                        visual_style.global.backgroundColor = rand_color();
                        vis.visualStyle(visual_style);
                    };
                });

                var draw_options = {
                    // your data goes here
                    network: xml,

                    // show edge labels too
                    edgeLabelsVisible: true,

                    // let's try another layout
                    layout: "Tree",

                    // set the style at initialisation
                    visualStyle: visual_style,

                    // hide pan zoom
                    panZoomControlVisible: false
                };

                vis.draw(draw_options);
            };
        </script>

        <style>
            * { margin: 0; padding: 0; font-family: Helvetica, Arial, Verdana, sans-serif; }
            html, body { height: 100%; width: 100%; padding: 0; margin: 0; background-color: #f0f0f0; }
            body { line-height: 1.5; color: #000000; font-size: 14px; }
            /* The Cytoscape Web container must have its dimensions set. */
            #cytoscapeweb { width: 100%; height: 80%; }
            #note { width: 100%; text-align: center; padding-top: 1em; }
            .link { text-decoration: underline; color: #0b94b1; cursor: pointer; }
        </style>
    </head>

    <body>
        <div id="cytoscapeweb">
            Cytoscape Web will replace the contents of this div with your graph.
        </div>
        <div id="note">
            <span class="link" id="color">Color me surprised</span>
        </div>
    </body>

</html>