/// <reference path="Overlay.js" />
/// <reference path="ImageTool.js" />
/// <reference path="RectangleTool.js" />
/// <reference path="PolygonTool.js" />
/// <reference path="RectangleKeyFrame.js" />
/// <reference path="Splitter.js" />
/// <reference path="Timeline.js" />

var Margin = 8;

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

MediaOverlayDesigner.Page = function() 
{
    this.Drawing = false;
    this.MovingShuttle = false;
    this.Paused = false;
    this.TimelineMarkers = new Array();
    this.XamlFileNames = new Array("Marker.xaml", "TimeBar.xaml", "ImageThumbnail.xaml", "Tomato.xaml", "RectangleTool.xaml", "Handle.xaml", "PolygonTool.xaml", "PolygonSupportTools.xaml", "xaml/LiveSpaces.xaml", "xaml/ButtonTheme.xaml", "xaml/ScrollBar.xaml", "xaml/TimeInterval.xaml", "ImageTools.xaml");

    this.XamlFiles = new Array();
    this.MarkerCount = 0;
}

MediaOverlayDesigner.Page.prototype =
{
	handleLoad: function(control, userContext, rootElement) 
	{
        window.onresize = OnResizeWindow;
	    
	    this.Timeline = new Timeline(this, rootElement);
	    
	    this.DesignHeight = rootElement.Height;
	    this.DesignWidth  = rootElement.Width;
	    this.MediaFrame = rootElement.findName("MediaFrame");
	    this.MediaFrameHeight = this.MediaFrame.Height;
	    this.MediaFrameWidth = this.MediaFrame.Width;
		this.control = control;
		this.content = control.content;
		this.SelectedOverlay = null;
		
		var siteMap = rootElement.findName("SiteMap");
		
		siteMap.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.ShowSiteMap));
		
		var publish = rootElement.findName("Publish");
		publish.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.ShowPublish));
		

		this.Play = rootElement.findName("Play");
		this.Pause = rootElement.findName("Pause");
		this.Stop = rootElement.findName("Stop");
		this.Media = rootElement.findName("Media");
		this.CurrentTime = rootElement.findName("CurrentTime");
		this.Overlay = rootElement.findName("Overlay");
		this.DownloadScale = rootElement.findName("DownloadScale");
		this.Markers = rootElement.findName("Markers");
		this.AddKeyFrame = rootElement.findName("AddKeyFrame");
		this.AddKeyFrame.IsHitTestVisible = false;
		
		this.XamlButton = rootElement.findName("Xaml");
		
		this.XamlButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.OnXaml));
		
		this.Play.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.OnPlay));
		this.Pause.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.OnPause));
	    this.Stop.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.OnStop));
		this.Media.addEventListener("MediaOpened", Silverlight.createDelegate(this, this.MediaOpened));
		this.Media.addEventListener("MediaEnded", Silverlight.createDelegate(this, this.MediaEnded));
		
		this.Media.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.MediaLeftButtonDown));
		this.Media.addEventListener("MouseMove", Silverlight.createDelegate(this, this.MediaMouseMove));
		this.Media.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.MediaLeftButtonUp));
		this.Media.addEventListener("DownloadProgressChanged", Silverlight.createDelegate(this, this.DownloadProgressChanged));
		this.Media.addEventListener("CurrentStateChanged", Silverlight.createDelegate(this, this.MediaStateChanged));
		
		this.Media.addEventListener("BufferingProgressChanged", Silverlight.createDelegate(this, this.BufferingProgressChanged)); 
		this.Media.addEventListener("MarkerReached", MarkerReached);
		
		var fullScreen = rootElement.findName("FullScreen");
		
		fullScreen.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.OnFullScreen));
		this.control.content.onFullScreenChange = Silverlight.createDelegate(this, this.OnFullScreenChanged);
		this.control.content.onResize = Silverlight.createDelegate(this, this.OnResize);
		this.AddKeyFrame.addEventListener("MouseLeftButtonDown",Silverlight.createDelegate(this, this.OnAddKeyFrame));
		this.DownloadingResources = rootElement.findName("DownloadingResources");
		//this.DownloadingResources.Visibility = "Collapsed";
		var tools = rootElement.findName("Tools");
		
		for (var i = 0; i < tools.children.Count; i++)
		{
		    var tool = tools.children.getItem(i);
		    
		    tool.IsHitTestVisible = false;
		    
		    tool.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.OnSelectTool));
		    tool.addEventListener("MouseEnter", Silverlight.createDelegate(this, this.OnEnterTool));
		    tool.addEventListener("MouseLeave", Silverlight.createDelegate(this, this.OnLeaveTool));
		}
		
		this.Play.Background = "Gray";
        this.Pause.Background = "Gray";
        this.Stop.Background = "Gray";
        
        this.Tools = new Array();
        
        this.Splitter = new Splitter(this, rootElement);
        
        this.StartDownloading();
        
        this.content.Root.addEventListener("KeyDown", Silverlight.createDelegate(this, this.OnKeyDown));
        
        var buffering = this.content.findName("Buffering");
        
        buffering.Visibility = "Collapsed";
        
        OnResizeWindow();
	}
}

MediaOverlayDesigner.Page.prototype.StartDownloading = function()
{
    this.Downloaders = new Array();
    
    for (var i = 0; i < this.XamlFileNames.length; i++)
    {
        var filename = this.XamlFileNames[i];
        
        if (this.XamlFiles[filename] == null)
        {
            var downloader = this.control.createObject("Downloader");
            this.Downloaders.push(downloader);
            downloader.addEventListener("completed", Silverlight.createDelegate(this, this.OnFileDownloaded));
            downloader.addEventListener("downloadProgressChanged", Silverlight.createDelegate(this, this.OnDownloadProgressChanged));
            downloader.open("GET", filename);
            downloader.send();
        }
    }
    
    this._DoneDownloading();
}


function OnRetrivedOverlays(overlays, context, arg)
{
}

MediaOverlayDesigner.Page.prototype.MediaOpened = function(sender, eventArgs)
{
    if (this.Media.CanPause)
    {
		this.Pause.Visibility = "Visible";
    }
    else
    {
        this.Pause.Visibility = "Collapsed";
    }
    
    this.Play.Background = "White";
    
    if (this.Overlays)
    {
        for(var i = 0; i < this.Overlays.length; i++)
        {
            this.Overlays[i].Delete();
        }
    }
    
    this.SelectedOverlay = null;
    
    if (this.Tool)
    {
        this.Tool.Deactivate();
        this.Tool.Activate();
    }

    this.Overlays = new Array();  
    
    this.UpdateXaml();
}

MediaOverlayDesigner.Page.prototype.OnDownloadProgressChanged = function(sender, eventArgs)
{
    var total = 0.0;
    
    for (var i = 0; i < this.Downloaders.length; i++)
    {
        total+= this.Downloaders[i].DownloadProgress;
    }
    
    var percentage = total / this.Downloaders.length;
        
    var scale = sender.findName("DownloadProgressScale");
    
    sender.downloadProgress.ScaleX = percentage;
    
    if (percentage < 1.0)
    {
        this.DownloadingResources.Visibility = "Visible";
    }
    else
    {
        this.DownloadingResources.Visibility = "Collapsed";
    }
}


MediaOverlayDesigner.Page.prototype.OnFileDownloaded = function(sender, eventArgs)
{
    this.XamlFiles[sender.Uri] = sender.ResponseText;
    
    this._DoneDownloading();
}

MediaOverlayDesigner.Page.prototype._DoneDownloading = function()
{
    for (var i = 0; i < this.XamlFileNames.length; i++)
    {
        var filename = this.XamlFileNames[i];
        
        if (this.XamlFiles[filename] == null)
        {
            return;
        }
    }
    
    this.AllXamlDownloaded();
}

MediaOverlayDesigner.Page.prototype.AllXamlDownloaded = function()
{
    var buttonNames = new Array("Play", "Stop", "Pause", "Next", "Previous", "FullScreen", "SiteMap", "Publish", "AddKeyFrame", "Xaml");
    
    this.Buttons = new Array();
    
    for (var i = 0; i < buttonNames.length; i++)
    {
        var name = buttonNames[i];
        var button = new Button(this.content, name, this.XamlFiles["xaml/ButtonTheme.xaml"]);
        this.Buttons[name] = button;
    }
    
    this.Timeline.Initialize();
    
    this.OnResize();

       AddMarkers(this);
    
    if (this.Tools.length == 0)
    {
        this.Tools["Rectangle"] = new RectangleTool(this);
        this.Tools["Polygon"] = new PolygonTool(this);
        this.Tools["Ellipse"] = new EllipseTool(this);
        this.Tools["Select"]  = new SelectTool(this);
        this.Tools["Tomato"] = new TomatoTool(this);
        this.Tools["Image"] = new ImageTool(this);
        this.Tools["Video"] = new VideoTool(this);
                
        this.Tool = this.Tools["Select"];

        this.Tool.Activate();
   }
   
	var tools = this.control.content.Root.findName("Tools");
	
	for (i = 0; i < tools.children.Count; i++)
	{
	    var tool = tools.children.getItem(i);
	    
	    tool.IsHitTestVisible = true;
    }
}


function AddMarkers(page)
{
    this.MarkerCount = page.Media.Markers.Count;
    
    page.Markers.Children.Clear();
    
    for (var i = 0; i < page.Media.Markers.Count; i++)
    {
        var marker = page.Media.Markers.GetItem(i);
        
        var markerGraphic = page.control.content.createFromXaml(this.MarkerXaml, true);
        
        markerGraphic["Canvas.Left"] = marker.Time.seconds * page.Timeline.Scale;
        
        page.Markers.children.Add(markerGraphic);
    }
}


MediaOverlayDesigner.Page.prototype.OnPlay = function(sender, eventArgs)
{
    ///<summary>Play the media.  All UI updates happen in the OnMediaChanged event handler.</summary>
    this.Media.Play();
}


MediaOverlayDesigner.Page.prototype.UpdateTime = function()
{
    this.CurrentTime.Text = formatTime(this.Media.Position.seconds);
    
    if (this.Media.NaturalDuration.seconds > 0)
    {
        var percentage = this.Media.Position.seconds / this.Media.NaturalDuration.seconds;
        
        this.Timeline.SetShuttlePosition(percentage);
    }
}

MediaOverlayDesigner.Page.prototype.OnStop = function(sender, eventArgs)
{
    this.Media.Stop();
}

MediaOverlayDesigner.Page.prototype.OnPause = function(sender, eventArgs)
{
    this.Media.Pause();
}

function LoadMedia()
{
    var mediaURL = document.getElementById("MediaURL").value;
    
    var control = document.getElementById("SilverlightControl");
    
    var media = control.content.findName("Media");
    
    media.Source = mediaURL;
}

MediaOverlayDesigner.Page.prototype.OnSelectTool = function(sender, eventArgs)
{
    this.Media.IsHitTestVisible = true;
    
    var lastToolName = "Select";
    
    if (this.CurrentToolName)
    {
        lastToolName = this.CurrentToolName;
    }
    
    var start = 15.5;
    
    if (this.Tool)
    {
        this.Tool.Deactivate();
        
        var startTool = this.content.findName(lastToolName);
        
        if (startTool)
        {
            start = startTool.Tag;
        }
    }
    
    var end = sender.Tag;
    
    var angle = start - end;
    
    var gear = this.content.findName("Gear");
    
    var distanceToTurn = this.content.findName("SelectToolPath").Height * Math.PI * angle / 360;
    var gearCircumfrence = gear.Width * Math.PI;
    var percentage = distanceToTurn / gearCircumfrence;
    var gearRotateToAngle = percentage * 360;
    
    this.content.findName("RotateToToolStart").Value = start;
    this.content.findName("RotateToToolEnd").Value = end;
    var gearRotateTo = this.content.findName("GearRotateTo");
    this.content.findName("GearRotateFrom").Value = gearRotateTo.Value;
    gearRotateTo.Value += gearRotateToAngle;
    
    var beltEnd = this.content.findName("BeltEnd");
    this.content.findName("BeltStart").Value = beltEnd.Value;
    beltEnd.Value -= gearRotateToAngle * 0.1;
    
    this.Tool = this.Tools[sender.Name];
    
    if (this.Tool == null)
    {
        return;
    }
    
    this.CurrentToolName = sender.Name;
    
    this.content.findName("RotateToTool").Begin();
    
    this.Tool.Activate();
    
    this.SelectedOverlay = null;
}


MediaOverlayDesigner.Page.prototype.DeselectOverlay = function()
{
    if (this.SelectedOverlay)
    {
        this.SelectedOverlay.Deselect();
        
        this.SelectedOverlay = null;
    }
}

MediaOverlayDesigner.Page.prototype.MediaLeftButtonDown = function(sender, eventArgs)
{
    if (this.Tool)
    {
        this.Tool.LeftButtonDown(sender, eventArgs);
    }
}

MediaOverlayDesigner.Page.prototype.MediaMouseMove = function(sender, eventArgs)
{
    if (this.Tool)
    {
        this.Tool.MouseMove(sender, eventArgs);
    }
}

MediaOverlayDesigner.Page.prototype.MediaLeftButtonUp = function(sender, eventArgs)
{
    if (this.Tool)
    {
        this.Tool.LeftButtonUp(sender, eventArgs);
    }
}


MediaOverlayDesigner.Page.prototype.DownloadProgressChanged = function(sender, eventArgs)
{
    this.DownloadScale.ScaleX = sender.DownloadProgress;
}

MediaOverlayDesigner.Page.prototype.UpdateXaml = function()
{
    var xaml = GetXaml(this.Overlays, this.Media.NaturalDuration.seconds, this);
    
    this.Xaml = xaml;
    
    SetXamlText(xaml);
    
    var content = this.Media.getHost().content;
    
    /// Remove all markers after the original marker count.
    while (this.Media.Markers.Count > this.MarkerCount)
    {
        this.Media.Markers.RemoveAt(this.Media.Markers.Count - 1);
    }
    
    var mediaMarkers = "";
    
    for (var i = 0; i < this.TimelineMarkers.length; i++)
    {
        var markerXaml = this.TimelineMarkers[i];
        mediaMarkers += markerXaml + "\r\n";
        var marker = content.createFromXaml(markerXaml, true);
        
        this.Media.Markers.Add(marker);
    }
    
    SetMediaMarkersText(mediaMarkers);
    
    var overlays = this.control.content.createFromXaml(xaml);
    
    var parent = this.control.content.findName("MediaOverlay");
    
    parent.children.Clear();
    
    parent.children.Add(overlays);
    
    var animation = this.control.content.findName("MediaAnimation");
    
    if (animation)
    {
        var timePosition = this.Media.NaturalDuration.seconds;
                
        var position = formatTime(timePosition);
        
        animation.Seek(position);
        animation.Begin();
        
        switch(this.Media.CurrentState)
        {
            case "Paused":
            this.Paused = true;
            animation.Pause();
            break;
            
            case "Playing":
            this.Paused = false;
            animation.Begin();
            break;
            
            case "Stopped":
            this.Paused = true;
            animation.Pause();
            break;
        }
    }            
    
    return xaml;
}

MediaOverlayDesigner.Page.prototype.OnAddKeyFrame = function(sender, eventArgs)
{
    this.SelectedOverlay.AddKeyFrame(this);
    
    //var keyFrame = new RectangleKeyFrame(this.Media.Position.seconds, this.Tool.Shape["Canvas.Left"], this.Tool.Shape["Canvas.Top"], this.Tool.Rectangle.Width, this.Tool.Rectangle.Height);
    
    //this.SelectedOverlay.Add(keyFrame);

    var xaml = this.UpdateXaml();
    

}

function GetXaml(overlays, duration, page)
{
    var xaml = '<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="' + page.Media.Width + '" Height="' + page.Media.Height + '" Tag="' + page.Media.Source + '">\n';
    
    xaml+= '\t<Canvas.Resources>\n';
    xaml+= '\t\t<Storyboard x:Name="MediaAnimation" Duration="' + formatTime(duration) + '">\n';
    for (var i = 0; i < overlays.length; i++)
    {
        xaml += overlays[i].GetAnimationXaml();
    }
    xaml+= '\t\t</Storyboard>\n';
    xaml+= '\t</Canvas.Resources>\n';
	xaml+= '\t<Canvas.RenderTransform>\n';
		xaml+= '\t<TransformGroup>\n';
			xaml+= '\t<ScaleTransform ScaleX="1" ScaleY="1" x:Name="AnimationScale"/>\n';
			xaml+= '\t<SkewTransform AngleX="0" AngleY="0"/>\n';
			xaml+= '\t<RotateTransform Angle="0"/>\n';
			xaml+= '\t<TranslateTransform X="0" Y="0"/>\n';
		xaml+= '\t</TransformGroup>\n';
	xaml+= '\t</Canvas.RenderTransform>\n';
	
    for (i = 0; i < overlays.length; i++)
    {
        xaml += overlays[i].GetXaml();
    }
    
    xaml += "</Canvas>";
    
    return xaml;
}

MediaOverlayDesigner.Page.prototype.OnResize = function(sender, eventArgs)
{
    this.ResizePage(this.control.content.ActualWidth, this.control.content.ActualHeight);
}


MediaOverlayDesigner.Page.prototype.OnFullScreen = function(sender, eventArgs)
{
    this.control.content.FullScreen = !this.control.content.FullScreen;
}


MediaOverlayDesigner.Page.prototype.OnFullScreenChanged = function(sender, eventArgs)
{
    this.ResizePage(this.control.content.ActualWidth, this.control.content.ActualHeight);
}

MediaOverlayDesigner.Page.prototype.ResizePage = function(width, height)
{
    this.control.content.Root.Width = width;
    this.control.content.Root.Height = height;
    var bottom = this.control.content.findName("Bottom");
    bottom.Width = width;
    bottom["Canvas.Top"] = height - bottom.Height;
    
    var fullScreen = this.control.content.findName("FullScreen");
    
    //fullScreen["Canvas.Left"] = width - fullScreen.Width - 10;
    
    var mediaFrame = this.control.content.findName("MediaFrame");
    //mediaFrame["Canvas.Left"] = width - Margin - mediaFrame.Width;
    var mediaWidth = width - mediaFrame["Canvas.Left"] - Margin;
    var mediaHeight = height - mediaFrame["Canvas.Top"] - bottom.Height - Margin;
    
    var mediaScale = this.control.content.findName("MediaScale");
    var minScale = Math.min(mediaWidth / mediaFrame.Width, mediaHeight / mediaFrame.Height);
    mediaScale.ScaleX = minScale;
    mediaScale.ScaleY = minScale;
    
    this.Splitter.ResizeGraphic();
    this.Timeline.Resize();
    //this.Splitter.Resize();
    
    var bottomGear = this.content.findName("BottomGear");
    bottomGear.StrokeDashOffset = bottom.Height / 20;
}

MediaOverlayDesigner.Page.prototype.OnEnterTool = function(sender, eventArgs)
{
    sender.Background = "#99FFFFFF";
}

MediaOverlayDesigner.Page.prototype.OnLeaveTool = function(sender, eventArgs)
{
    sender.Background = "#00FFFFFF";
}

MediaOverlayDesigner.Page.prototype.BufferingProgressChanged = function(sender, eventArgs)
{
    ///<summary>Show the buffering progress graph while buffering </summary>
    var bufferingProgress = sender.findName("BufferingProgress");
    bufferingProgress.ScaleX = sender.BufferingProgress;
    
    var buffering = sender.findName("Buffering");
        
    if (sender.BufferingProgress == 0 || sender.BufferingProgress == 1)
    {
        buffering.Visibility = "Collapsed";
    }
    else
    {
        buffering.Visibility = "Visible";
    }
}


MediaOverlayDesigner.Page.prototype.MediaStateChanged= function(sender, eventArgs)
{
    var animationName = null;
    
    window.status = "Media " + sender.CurrentState;
    
    switch (sender.CurrentState)
    {
        case "Paused":
            this.Buttons["Play"].Release();
            this.Buttons["Pause"].Press();
            if (!this.MovingShuttle)
            {
                animationName= "ShowOverlay";
            }
            
            clearInterval(this.Interval);
            
            this.UpdateTime();
            
            var animation = sender.findName("MediaAnimation");

            if (animation)
            {
                animation.Pause();
                this.Paused = true;
            }
            
            break;
        
        case "Playing":
            if (this.Buttons)
            {
                this.Buttons["Play"].Press();
                this.Buttons["Pause"].Release();
                this.Buttons["Pause"].Enable();
                this.Buttons["Stop"].Release();
            }
            this.Interval = setInterval(Silverlight.createDelegate(this, this.UpdateTime), 40);
            
            var animation = sender.findName("MediaAnimation");
            
            if (animation)
            {
                if (this.Paused)
                {
                    animation.Resume();
                    this.Paused = false;
                }
                else
                {
                    animation.Begin();
                }
            }
            
            animationName = "HideOverlay";
            break;
            
        case "Stopped":
            if (this.Buttons)
            {
                this.Buttons["Stop"].Press();
                this.Buttons["Play"].Release();
                this.Buttons["Pause"].Disable();
            }
            animationName = "ShowOverlay";
            clearInterval(this.Interval);
            this.UpdateTime();
            
            var animation = sender.findName("MediaAnimation");

            if (animation)
            {
                animation.Stop();
            }
            break;
    }
    
    if (animationName != null)
    {
        var animation = sender.findName(animationName);
        
        animation.Begin();
    }
}


function ChildLoader(parent)
{
    this.Parent = parent;
}

ChildLoader.prototype.Downloaded = function(sender, eventArgs)
{
    var child = sender.getHost().content.createFromXaml(sender.ResponseText, true);
    this.Parent.Visibility = "Collapsed";
    this.Parent.children.Add(child);
}

function LoadTagXaml(canvas, nullArg)
{
    var downloader = canvas.getHost().createObject("Downloader");
    
    var loader = new ChildLoader(canvas);
    
    downloader.AddEventListener("Completed", Silverlight.createDelegate(loader, loader.Downloaded));
    
    downloader.open("GET", canvas.Tag);
    downloader.send();
}

function MarkerReached(media, markerEventArgs)
{
    var marker = markerEventArgs.Marker;
    
    var overlayName = marker.Text;
    
    var overlay = media.findName(overlayName);
    
    if (overlay == null)
    {
        return;
    }
    
    var firstChild = overlay.children.getItem(0);
    
    var animation = firstChild.findName("Animation");
    
    if (animation)
    {
        overlay.Visibility = "Visible";
        
        animation.Begin();
    }
}


MediaOverlayDesigner.Page.prototype.OnKeyDown = function(sender, keyEventArgs)
{
    switch (keyEventArgs.Key)
    {
        case 19: //DELETE
            if (this.SelectedOverlay)
            {
                this.DeleteOverlay(this.SelectedOverlay);
            }
            break;
            
        default:
            break;
    }
}

Array.prototype.Remove = function(element)
{
    for (var i = 0; i < this.length; i++)
    {
        if (this[i] == element)
        {
            this.splice(i, 1);
            
            return;
        }
    }
}

MediaOverlayDesigner.Page.prototype.DeleteOverlay = function(overlay)
{
    if (overlay == this.SelectedOverlay)
    {
        this.SelectedOverlay = null;
    }

    this.Overlays.Remove(overlay);
    
    overlay.Delete();
}

function OpenLink(sender, eventArgs)
{
    var url = sender.Tag;
    
    if (url != "")
    {
        window.open(url, "_blank");
    }
}

MediaOverlayDesigner.Page.prototype.UpdateSelectedOverlay = function()
{
    if (this.SelectedOverlay)
    {
        this.SelectedOverlay.Update();
    }
}

MediaOverlayDesigner.Page.prototype.UpdateTool = function()
{
    if (!this.Tool)
    {
        return;
    }
    
    if (!this.SelectedOverlay)
    {
        return;
    }
    
    var shape = this.content.findName(this.SelectedOverlay.Name);
    
    try
    {
        this.Tool.Update(shape);
    }
    catch (error)
    {
        if (error.name == "TypeError" && error.number == -2146827850)
        {
            alert("Tool " + this.Tool.toString() + " must have an Update(shape) function defined.");
        }
        else
        {
            throw error;
        }
    }
}

MediaOverlayDesigner.Page.prototype.MediaEnded = function(sender, eventArgs)
{
    this.Buttons["Stop"].Press();
    this.Buttons["Play"].Release();
    this.Buttons["Pause"].Disable();
    
    clearInterval(this.Interval);
    
    this.UpdateTime();
}

MediaOverlayDesigner.Page.prototype.ShowPane = function(element)
{
    if (this.VisiblePane)
    {
        this.VisiblePane.style.display = "none";
        
        if (this.VisiblePane.id == element.id)
        {
            this.VisiblePane = null;
            
            return;
        }
    }
    
    this.VisiblePane = element;
    
    this.VisiblePane.style.display = "block";
}

MediaOverlayDesigner.Page.prototype.ShowSiteMap = function(sender, eventArgs)
{
    var photos = document.getElementById("SiteMap");
    
    this.ShowPane(photos);
}

MediaOverlayDesigner.Page.prototype.ShowPublish = function(sender, eventArgs)
{
    var photos = document.getElementById("Publish");
    
    this.ShowPane(photos);
}


MediaOverlayDesigner.Page.prototype.OnXaml = function(sender, eventArgs)
{
    var xamlDiv = document.getElementById("XamlAndMarkers");
    
    this.ShowPane(xamlDiv);
}