//creates the images and adds them to the photoCanvas
function loadImages()
{
    var numberOfImages = images.length;
    
    for(i = 0; i < numberOfImages; i++)
    {
        var imgXaml = '<Image xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="image' + i + '" Stretch="Uniform">';
        imgXaml += '<Image.RenderTransform>';
        imgXaml += '<RotateTransform x:Name="imgRotateTransform' + i + '" />';
        imgXaml += '</Image.RenderTransform>';
        imgXaml += '<Image.Triggers>';
        imgXaml += '<EventTrigger>';
        imgXaml += '<BeginStoryboard>';
        imgXaml += '<Storyboard x:Name="imgRotationStoryboard' + i + '">';
        imgXaml += '<DoubleAnimation x:Name="imgRotationAnimation' + i + '" Storyboard.TargetProperty="Angle"  Storyboard.TargetName="imgRotateTransform' + i + '" />';
        imgXaml += '</Storyboard>';
        imgXaml += '</BeginStoryboard>';
        imgXaml += '</EventTrigger>';
        imgXaml += '<EventTrigger>';
        imgXaml += '<BeginStoryboard>';
        imgXaml += '<Storyboard Name="imgTranslationStoryboard' + i + '">';
        imgXaml += '<DoubleAnimation x:Name="imgTranslateAnimationX' + i + '" Storyboard.TargetName="image' + i + '" Storyboard.TargetProperty="(Canvas.Left)"/>';
        imgXaml += '<DoubleAnimation x:Name="imgTranslateAnimationY' + i + '" Storyboard.TargetName="image' + i + '" Storyboard.TargetProperty="(Canvas.Top)"/>';
        imgXaml += '</Storyboard>';
        imgXaml += '</BeginStoryboard>';
        imgXaml += '</EventTrigger>';
        imgXaml += '</Image.Triggers>';
        imgXaml += '</Image>';
        
        var img = host.createFromXaml(imgXaml);
        
        img.RenderTransform.CenterX = maxImageSize / 2;
        img.RenderTransform.CenterY = maxImageSize / 2;
        img.RenderTransform.Angle = (Math.random() - 0.5) * 15;
        
        img.width = maxImageSize;
        img.height = maxImageSize;
        img.Source = images[i];
        
        img.addEventListener("mouseEnter", "showLegend");
        img.addEventListener("mouseLeave", "hideLegend");
        
        img.addEventListener("MouseLeftButtonDown", "imageButtonDown");
        img.addEventListener("MouseLeftButtonUp", "imageButtonUp");
        img.addEventListener("MouseMove", "drag");
        
        photoCanvas.children.add(img);
        
        img["Canvas.Top"] = 0;
        img["Canvas.Left"] = 0;
    }
    
    zoomOutStep2();
}