if (!window.DynamicXAML)
	window.DynamicXAML = {};

DynamicXAML.Scene = function() 
{
}

DynamicXAML.Scene.prototype =
{
	handleLoad: function(plugIn, userContext, rootElement) 
	{
		this.plugIn = plugIn;
	}
}

var currentTop = 0;
var currentLeft = 0;
var template = '<Rectangle Width="50" Height="50" ' +
               '           Canvas.Top="%1" Canvas.Left="%2" ' +
               '           Fill="Gray" Stroke="Black" />';

function root_Loaded(sender, args) {
  // Get a reference to the Host
  var host = sender.getHost();

  // The XAML 
  var xaml = '<Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ' +
             '           x:Name="aRect" Fill="Blue" Width="100" Height="100" />';

  // Create a new object from the fragment
  var newRect = host.content.createFromXaml(xaml);

  // Add it to the children of our root Canvas
  sender.children.add(newRect);
}
               
function addButton_click() {

  // Get the host and the root canvas
  var theHost = document.getElementById("SilverlightPlugIn");
  var root = theHost.content.findName("theRoot");
  
  // Get a copy of the template and replace the 
  // placeholders with the top and left values
  var newTemplate = template.replace("%1", currentTop);
  newTemplate = newTemplate.replace("%2", currentLeft);
  
  // Create the new rectangle from the template
  var newRect = theHost.content.createFromXaml(newTemplate);
  
  // Add it to the root canvas
  root.children.add(newRect);

  // Increment the top and left for the next rectangle
  currentTop += 10;
  currentLeft += 10;
}