Bar = function(ID, Parent, locationX, locationY, barValue, barPercentage, Title) {
  this._ID = ID + "_";
  this._parent = Parent; 
  this._locationX = locationX;
  this._locationY = locationY;
  this._barValue = barValue;
  this._barPercentage = barPercentage;
  this._Title = Title;
  this._host = this._parent.getHost();

  // The first step is to retrive the XAML content for the "Bar"
  this.StartXamlDownload();
}

Bar.prototype = {

  _findNameByXamlID : function(nameInXamlFile) { return this._parent.findName(this._getIdFor(nameInXamlFile)); },

  _getIdFor : function(nameInXamlFile) { return this._ID + nameInXamlFile; },
  
  StartXamlDownload : function() {
    // A Silverlight "downloader" object is used to retrieve the "Bar.xaml" file that contains the XAML for the "Bar"
    // A delegate is created that will call the "XamlDownloadCompleted" method when the download is completed
    var xamlDownloader = this._host.createObject("downloader");
    xamlDownloader.open("GET", "Xaml/Bar.xaml");
    xamlDownloader.addEventListener("completed", Silverlight.createDelegate(this, this.XamlDownloadCompleted));
    xamlDownloader.send();
  },

  XamlDownloadCompleted : function(sender, eventArgs) {
    // The download of "Bar.xaml" has been completed "sender.ResponseText" contains the contents of "Bar.xaml"
    var originalXaml = sender.ResponseText;

    // In order to avoid name collisions, the name of each "Bar" object will be replaced
    // with a name that begins with the ID that was passed in the object constructor
    originalXaml = originalXaml.replace(/Name="/g, "Name=\"" + this._ID);

    // The "Bar" will now be added to the main Canvas "plugin" is a reference to the Silverlight control on the html page 
    var plugin = sender.getHost(); 

    // The altered "Bar.xaml" is used to create a XAML object
    var newElement = plugin.content.createFromXaml(originalXaml)

    // "rootCanvas" is a reference to the main Silverlight Canvas 
    var rootCanvas = plugin.content.findName("BarChart_Canvas");

    // The XML object is added to the root Canvas
    rootCanvas.children.add(newElement);

    // Now that the "Bar" has been added to the main Canvas
    // the "BarTitle" will be altered and the "Bar" position will be set
    this._setControlReferences(plugin); 
  }, 

  _setControlReferences : function(plugin) {
   
    this._Bar_Rectangle = this._findNameByXamlID("Bar_Rectangle");
    this._Shine_Rectangle = this._findNameByXamlID("Shine_Rectangle");

    this._Bar_Rectangle["Canvas.Left"] = this._locationX;
    this._Bar_Rectangle["Canvas.Top"] = this._locationY;
    this._Bar_Rectangle["Width"] = plugin.content.findName("BarChart_Canvas").Width - 150;
    
    var barWidth = (this._Bar_Rectangle.Width / 100) * this._barPercentage;

    this._findNameByXamlID("Title_Run").Text = this._Title;
    this._Title_TextBlock = this._findNameByXamlID("Title_TextBlock");
    this._Title_TextBlock["Canvas.Top"] = this._locationY + ((30 - this._Title_TextBlock.ActualHeight) / 2);

    this._Shine_Rectangle["Canvas.Left"] = this._locationX;
    this._Shine_Rectangle["Canvas.Top"] = this._locationY;

    this._Bar_Hover = this._findNameByXamlID("Bar_Hover");
    this._Bar_Reset = this._findNameByXamlID("Bar_Reset");
    this._Bar_Rectangle.addEventListener("MouseEnter", Silverlight.createDelegate(this, this.handleMouseEnter));
    this._Bar_Rectangle.addEventListener("MouseLeave", Silverlight.createDelegate(this, this.handleMouseLeave));

    this._RollOver_TextBlock = this._findNameByXamlID("RollOver_TextBlock");
    this._RollOver_TextBlock["Canvas.Left"] = this._locationX + barWidth + 10;
    this._RollOver_TextBlock["Canvas.Top"] = this._Title_TextBlock["Canvas.Top"];

    this._findNameByXamlID("Value_Run").Text = this._barValue + ' ';
    this._findNameByXamlID("Percentage_Run").Text = this._barPercentage + ' %';

    this._findNameByXamlID("Bar_GrowLine").Value =  barWidth;
    this._findNameByXamlID("Shine_GrowLine").Value = barWidth;
    this._findNameByXamlID("GrowLine").begin();
  },
  handleMouseEnter: function (sender, eventArgs) {
      this._Bar_Hover.begin(); 
      this._RollOver_TextBlock.Visibility = "Visible";
  }, 
  handleMouseLeave: function (sender, eventArgs) {
    this._Bar_Reset.begin();
    this._RollOver_TextBlock.Visibility = "Collapsed";
  }
}