function Particle(control, canvas, left, top)
{
    this.currentPoint = new Point(left, top);
    this.lastPoint = new Point(left, top);
    this.forcePoint = new Point(0 ,0);
    this.tempPoint = new Point(0, 0);
    this.calcPoint = new Point(0, 0);
    this.constraints = new Array();
    this.center = control.width / 2;
    
    this._particle = control.content.createFromXaml(this.xaml, true);
    this._particle["Canvas.Left"] = left;
    this._particle["Canvas.Top"] = top;
    canvas.children.add(this._particle);             
    
    // todo: find the actual scaled width & height of the 
    // xaml element we created... why is that so hard?
    this.width = 30; 
    this.height = 30;     
}

Particle.prototype =
{
    left: function()
    {
        return this._particle["Canvas.Left"];    
    },

    top: function()
    {
        return this._particle["Canvas.Top"];
    },

    update: function()
    {
        this._particle["Canvas.Left"] = this.currentPoint.x;        
        this._particle["Canvas.Top"] = this.currentPoint.y;
    },
    
    verlet: function(timeStep)
    {    
        this.tempPoint.copy(this.currentPoint);
        
        this.calcPoint.init();
        this.calcPoint.add(this.currentPoint);        
        this.calcPoint.subtract(this.lastPoint);
        this.forcePoint.scale(timeStep * timeStep);
        this.calcPoint.add(this.forcePoint);
        this.currentPoint.add(this.calcPoint)
        
        this.lastPoint.copy(this.tempPoint);
    },
    
    satisfyConstraints: function()
    {
        for(var i = 0; i < this.constraints.length; i++)
        {
            var dx = this.currentPoint.x - this.constraints[i].element.left();
            var dy = this.currentPoint.y - this.constraints[i].element.top();
            var d1 = Math.sqrt((dx*dx) + (dy*dy));
            var d2 = 0;
            if( d1 != 0)
            {
                d2 = 0.5 * (d1 - this.constraints[i].distance) / d1;
            }
            dx = dx * d2;
            dy = dy * d2;
            this.currentPoint.x -= dx;
            this.currentPoint.y -= dy; 
            if(this.constraints[i].element.currentPoint != null)
            {
                this.constraints[i].element.currentPoint.x += dx;
                this.constraints[i].element.currentPoint.y += dy;
            }    
            else
            {
                this.currentPoint.x -= dx;
                this.currentPoint.y -= dy;             
            }        
        }
    },  
    
    xaml: 
        '<Canvas Width="100" Height="95" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">' +
            '<Canvas.RenderTransform>' +
                 '<TransformGroup>' +     
                    '<ScaleTransform ScaleX="0.30" ScaleY="0.30" />' +
                    '<RotateTransform Angle="0" x:Name="rotation" />' +
                 '</TransformGroup>' +
            '</Canvas.RenderTransform>' +
            '<Path Fill="#FF38C246">' +
                '<Path.Data>' +
                    '<RectangleGeometry Rect="31,27,20,38" />' +
                '</Path.Data>' +
            '</Path>' +
            '<Path Fill="#FFDDBE22">' +
                '<Path.Data>' +
                    '<RectangleGeometry Rect="50,27,20,38" />' +
                '</Path.Data>' +
            '</Path>' +
            '<Path Fill="White" StrokeThickness="7" Data="M5,46 C 24,75 76,75 95,46 76,17 24,17 5,46 z M29,46 A21,21 180 1 1 71,46 A21,21 180 1 1 29,46 z">' +
                '<Path.Stroke>' +
                    '<VideoBrush SourceName="butterflyMediaElement" Stretch="UniformToFill" />' +
                '</Path.Stroke>' +
            '</Path>' +
            '<Path Fill="Black">' +
                '<Path.Data>' +
                    '<GeometryGroup>' +
                        '<EllipseGeometry Center="50,4" RadiusX="3.5" RadiusY="3.5" />' +
                        '<EllipseGeometry Center="50,14.5" RadiusX="3.5" RadiusY="3.5" />' +
                        '<EllipseGeometry Center="50,35.5" RadiusX="3.5" RadiusY="3.5" />' +
                        '<EllipseGeometry Center="50,46" RadiusX="3.5" RadiusY="3.5" />' +
                        '<EllipseGeometry Center="50,56.5" RadiusX="3.5" RadiusY="3.5" />' +
                        '<EllipseGeometry Center="50,77.5" RadiusX="3.5" RadiusY="3.5" />' +
                        '<EllipseGeometry Center="50,88" RadiusX="3.5" RadiusY="3.5" />' +
                    '</GeometryGroup>' +
                '</Path.Data>' +
            '</Path>' +
        '</Canvas>'    
}