Ext.onReady(function() {
var canvas1 = new Naxos.graphics.Canvas({ });
var panel1 = new Ext.Panel({ layout: 'fit', items: [ canvas1 ], renderTo: 'simple', height: 200});
var g = canvas1.getGraphics();
var onMouseOver = function(evt, shape) { shape.setStroke({color:"red",width:5}) };
var onMouseOut = function(evt, shape) { shape.setStroke({color:"green",width:5}) };
var circle = g.createCircle({ cx: 80, cy: 80, r: 70}).setStroke({color:"green",width:5}).setFill("rgba(0,0,255,0.5)");
var rect = g.createRect({ x: 80, y: 80, width: 300, height: 100}).setStroke({color:"green",width:5}).setFill("rgba(255, 255, 0, 0.5)");
circle.addListener("mouseover", onMouseOver);
circle.addListener("mouseout", onMouseOut);
rect.addListener("mouseover", onMouseOver);
rect.addListener("mouseout", onMouseOut);
g.makeMoveable(circle);
g.makeMoveable(rect);
var canvas2 = new Naxos.graphics.Canvas({ });
var panel2 = new Ext.Panel({ layout: 'fit', items: [ canvas2 ], renderTo: 'scatterbox', height: 400 });
var images = [
{ url: "uploads/samples/scatterbox/resources/images/castle.jpg", title: "Ancient Sirmione", width: 300, height: 225 },
{ url: "uploads/samples/scatterbox/resources/images/mountains.jpg", title: "Somewhere in the Alps", width: 300, height: 225 },
{ url: "uploads/samples/scatterbox/resources/images/frosty.jpg", title: "Frosty Night", width: 300, height: 225 },
{ url: "uploads/samples/scatterbox/resources/images/hever.jpg", title: "Hever Castle", width: 300, height: 225 },
{ url: "uploads/samples/scatterbox/resources/images/danesfield.jpg", title: "Danesfield House", width: 300, height: 225 },
{ url: "uploads/samples/scatterbox/resources/images/sunset.jpg", title: "Greek Sunset", width: 300, height: 225 },
{ url: "uploads/samples/scatterbox/resources/images/entrance.jpg", title: "Various Curves", width: 300, height: 225 },
{ url: "uploads/samples/scatterbox/resources/images/lake.jpg", title: "Lago di Garda", width: 300, height: 225 }
];
scatterBox = new Naxos.ScatterBox({ canvas: canvas2, images: images });
scatterBox.scatter();
});