


function showTagNodes() {

var redraw, g, renderer;
    
//    var width = $('#tagCloudInner').width() - 20;
//    var height = $('#tagCloudInner').height() - 60;
    var width = $('#une').width() - 20;
    var height = $('#une').height() - 60;
    
    //alert("show tag : "+width+"x"+height);
    g = new Graph();

    var render = function(r, n) {
                var color = Raphael.getColor();
		var label = r.text(0, 30, n.label).attr({opacity:1,"font-size":"12px"});

        var set = r.set().push(
            r.rect(-10, 10, 10, 10).attr({"fill": color, "stroke-width": 1, r : "4px"}))
            .push(label);

        //set.hover(function(){ label.animate({opacity:1,"fill-opacity":1}, 500); }, function(){ label.animate({opacity:0},300); });


        return set;
    };

    for (var p in computedTags) {
	g.addNode(p, {label:p,render:render});
    }
    for (var p in computedTags) {
	for (var i=0; i<computedTags[p].length;i++) {
	    //g.addEdge(p,computedTags[p][i]);
	}
    }

    /* add a simple node */

    /*
    g.addNode("strawberry");
    g.addNode("cherry");

        
    g.addNode("1", { label : "Tomato" });
    var render = function(r, n) {
        var label = r.text(0, 30, n.label).attr({opacity:0});

        var set = r.set().push(
            r.rect(-30, -13, 62, 86).attr({"fill": "#fa8", "stroke-width": 2, r : "9px"}))
            .push(label);

        set.hover(function(){ label.animate({opacity:1,"fill-opacity":1}, 500); }, function(){ label.animate({opacity:0},300); });

        tooltip = r.set()
            .push(
                r.rect(0, 0, 90, 30).attr({"fill": "#fec", "stroke-width": 1, r : "9px"})
            ).push(
                r.text(25, 15, "overlay").attr({"fill": "#000000"})
            );
        for(i in set.items) {
	    //            set.items[i].tooltip(tooltip);
        };

        return set;
    };
    g.addNode("id35", {
        label : "meat\nand\ngreed" ,
        render : render
    });


    st = { directed: true, label : "Label"};
    g.addEdge("kiwi", "penguin", st);

 
    g.addEdge("strawberry", "cherry");
    g.addEdge("cherry", "apple");
    g.addEdge("cherry", "apple")
    g.addEdge("1", "id35");
    g.addEdge("penguin", "id35");
    g.addEdge("penguin", "apple");
    g.addEdge("kiwi", "id35");

 
    g.addEdge("1", "cherry", { directed : true } );
    
 
    g.addEdge("id35", "apple", { stroke : "#bfa" , fill : "#56f", label : "Meat-to-Apple" });
    
 
    g.addEdge("strawberry", "apple");
    
    */
    //g.removeNode("1");
 
    var layouter = new Graph.Layout.Spring(g);

     for (var p in computedTags) {
	g.nodes[p].onclick = function(){alert(p+" clicked")};
    }
   
 
    renderer = new Graph.Renderer.Raphael('canvasTag', g, width, height);
   
    redraw = function() {
        layouter.layout();
	  renderer.draw();
    };
    hide = function(id) {
        g.nodes[id].hide();
    };
    show = function(id) {
        g.nodes[id].show();
    };


    
};


