FMastro/gist:9895676

## gistfile1.txt
  <script type="text/javascript">

        $(window).load(function () {

            var component = draw2d.shape.basic.Rectangle.extend({

                init: function (width, height, label, level) {
                    this._super(width, height);

                    // Create any Draw2D figure as decoration for the connection
                    //
                    this.label = new draw2d.shape.basic.Label(label);

                    //Set Colors based on Danger, Warning, Good

                    var fontColor, backColor;

                    switch(parseInt(level)) {
                        case 1: //Good
                            fontColor = "#000000";
                            backColor = "#33FF00";
                            break;
                        case 2: //Warning
                            fontColor = "#000000";
                            backColor = "#FFFF00";
                            break;
                        case 3: //Danger
                            fontColor = "#ffffff";
                            backColor = "#CC0000";
                            break;
                        default:
                            fontColor = "#FFFFFF";
                            backColor = "#0000CC";
                    }
                    this.label.setFontColor(fontColor);
                    this.label.setColor(backColor);
                    this.setBackgroundColor(backColor);
                    this.setColor("#000000");

                    // add the new decoration to the connection with a position locator.
                    //
                    this.addFigure(this.label, new draw2d.layout.locator.CenterLocator(this));
                    this.createPort("input");
                    this.createPort("output");


                }
            });
            var canvas = new draw2d.Canvas("gfx_holder");
            canvas.addFigure(new component(200, 100, "Low Errors - Good", 1), 90, 80);
            canvas.addFigure(new component(200, 100, "Warning Count: This_is_component_2_with_a_really_long_unbreaking_name_as_well", 2), 90, 80);
            canvas.addFigure(new component(200, 100, "High Error Count - Danger", 3), 90, 80);

            function showJsonData() {
                var writer = new draw2d.io.json.Writer();
                writer.marshal(canvas, function (json) {
                    // convert the json object into string representation
                    var jsonTxt = JSON.stringify(json, null, 2);

                    // insert the json string into a DIV for preview or post
                    // it via ajax to the server....
                    alert(jsonTxt);
                });
            };

            function addComponent() {
                canvas.addFigure(new component(200, 100, "New Component - Normal"), 90, 80);
            }
        });

    </script>
</head>
<body>
    <input type="button" onclick="showJsonData();" value="Get jSON Data" />
    <input type="button" onclick="addComponent();" value="Add Component" />
    <input type="button" value="Click here to be alerted" onclick='    alert("there you have been alerted")'>
	<script type="text/javascript">

	$(window).load(function () {

	var component = draw2d.shape.basic.Rectangle.extend({

	init: function (width, height, label, level) {
	this._super(width, height);

	// Create any Draw2D figure as decoration for the connection
	//
	this.label = new draw2d.shape.basic.Label(label);

	//Set Colors based on Danger, Warning, Good

	var fontColor, backColor;

	switch(parseInt(level)) {
	case 1: //Good
	fontColor = "#000000";
	backColor = "#33FF00";
	break;
	case 2: //Warning
	fontColor = "#000000";
	backColor = "#FFFF00";
	break;
	case 3: //Danger
	fontColor = "#ffffff";
	backColor = "#CC0000";
	break;
	default:
	fontColor = "#FFFFFF";
	backColor = "#0000CC";
	}
	this.label.setFontColor(fontColor);
	this.label.setColor(backColor);
	this.setBackgroundColor(backColor);
	this.setColor("#000000");

	// add the new decoration to the connection with a position locator.
	//
	this.addFigure(this.label, new draw2d.layout.locator.CenterLocator(this));
	this.createPort("input");
	this.createPort("output");


	}
	});
	var canvas = new draw2d.Canvas("gfx_holder");
	canvas.addFigure(new component(200, 100, "Low Errors - Good", 1), 90, 80);
	canvas.addFigure(new component(200, 100, "Warning Count: This_is_component_2_with_a_really_long_unbreaking_name_as_well", 2), 90, 80);
	canvas.addFigure(new component(200, 100, "High Error Count - Danger", 3), 90, 80);

	function showJsonData() {
	var writer = new draw2d.io.json.Writer();
	writer.marshal(canvas, function (json) {
	// convert the json object into string representation
	var jsonTxt = JSON.stringify(json, null, 2);

	// insert the json string into a DIV for preview or post
	// it via ajax to the server....
	alert(jsonTxt);
	});
	};

	function addComponent() {
	canvas.addFigure(new component(200, 100, "New Component - Normal"), 90, 80);
	}
	});

	</script>
	</head>
	<body>
	<input type="button" onclick="showJsonData();" value="Get jSON Data" />
	<input type="button" onclick="addComponent();" value="Add Component" />
	<input type="button" value="Click here to be alerted" onclick=' alert("there you have been alerted")'>