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

ArtsAndArchitecture.MainView = function(control, target)
{
    
    this.control = control;
    this.target = target;

    this._mainView = this.target.FindName("MainView");
    this._mainViewImage = this.target.findName("MainViewImage");
    
    this._mainViewCanvas = this.target.findName("MainViewCanvas");
    this._mainViewCanvasClickShield = this.target.findName("MainViewCanvasClickShield");
    this._mainViewCanvasClickShieldRect = this.target.findName("MainViewCanvasClickShieldRect");
    this._mainViewCanvasClickShieldRect.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseLeftButtonDown_MainViewCanvasClickShield));

    this._mainViewCanvas.addEventListener("MouseLeave", Silverlight.createDelegate(this, this.handleMouseLeave_Control));
    
    this._hotSpotXaml = AADownloader.getResponseText("HotSpot.xaml");
    
    this._mainViewTimer = this.target.findName("MainViewTimer");
    this._mainViewTimer.Duration = "00:00:00.0007";
    this._mainViewTimer.addEventListener("Completed", Silverlight.createDelegate(this, this.handleCompleted_MainViewTimer));
        
    // add pan tool
    this._panToolXaml = AADownloader.getResponseText("PanTool.xaml");
    this._panTool = this.control.content.createFromXaml(this._panToolXaml, true);
    this._mainView.children.add(this._panTool);
	this._mainViewHotSpotCanvas = this.target.findName("MainViewHotSpotCanvas");
	
    new ArtsAndArchitecture.PanTool(this.control, this._panTool, 820, 370);
}

ArtsAndArchitecture.MainView.prototype = 
{
    _isMouseDown: false,
    _inAttractMode: true,
    _isZoomedOut: false,
    _inTween: false,
    
    _imageOffset: {
        x: 0,
        y: 0
    },
    
    _canvasCenter: {
        x: 0,
        y: 0
    },
    
    _originRect: {
        x: 0,
        y: 0,
        width: 0,
        height: 0
    },
   
    _destRect: {
        x: 0,
        y: 0,
        width: 0,
        height: 0
    },
    
    _movement: 0,
    _easeScaleFactor: 1,
 
 loadMainView: function()
 {
    this._currentAttractHotSpot = null;
    this._nextAttractHotSpot = null;
    this._mouseDownStartX = 0;
    this._mouseDownStartY = 0;
    
    this._tweenStartX = null;
    this._tweenStartY = null;
    this._tweenEndX = null;
    this._tweenEndY = null;
    
    this._mainViewScaleTransform = this.target.findName("MainViewScaleTransform");
    this._mainViewTranslateTransform = this.target.findName("MainViewTranslateTransform");
   
    this._hotSpotCanvasFadeIn = this.target.findName("HotSpotCanvasFadeIn");
    this._hotSpotCanvasFadeOut = this.target.findName("HotSpotCanvasFadeOut");
    this._hotSpotCanvasFadeOut.addEventListener("Completed", Silverlight.createDelegate(this, this.hotSpotCanvasFadeOutCompleted));
     
    this._mainViewCanvas.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseLeftButtonDown_MainViewCanvas));
    this._mainViewCanvas.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.handleMouseLeftButtonUp_MainViewCanvas));
    this._mainViewCanvas.addEventListener("MouseMove", Silverlight.createDelegate(this, this.handleMouseMove_MainViewCanvas));
    
	this._mainViewCanvas["Canvas.Left"] = AACurrentData.startX1;
	this._mainViewCanvas["Canvas.Top"] = AACurrentData.startY1;
	
    this._mainViewImage.setSource(AADownloader, AACurrentData.mainImage);
    this._mainViewImage.Width = AACurrentData.mainImageWidth;
    this._mainViewImage.Height = AACurrentData.mainImageHeight;

    this._mainViewCanvas.Width = AACurrentData.mainImageWidth;
    this._mainViewCanvas.Height = AACurrentData.mainImageHeight;

	this.addHotSpots();    
    
    
    this._canvasCenter.x = this._mainViewCanvas.width / 2;
    this._canvasCenter.y = this._mainViewCanvas.height / 2;
    
    this._maxMainViewImageMaxDistance = Math.sqrt(Math.pow(this._mainViewImage.width,2) + Math.pow(this._mainViewImage.height,2));

 },
 
 clearHotSpots: function()
 {
 	if (this._mainViewHotSpotCanvas.children.Count > 0) {
		this._mainViewHotSpotCanvas.children.Clear();
	}
 },
 
 showHotSpots: function()
 {
    this._mainViewHotSpotCanvas.Visibility = "Visible";
    this._hotSpotCanvasFadeIn.Begin();
 },
 
 hideHotSpots: function()
 {
    this._panTool.Visibility = "Collapsed";
    this._hotSpotCanvasFadeOut.Begin();
 },
 
 hotSpotCanvasFadeOutCompleted: function(sender, args)
 {
    this._mainViewHotSpotCanvas.Visibility = "Collapsed";
 },
 
 zoomToRect: function()
 {
 },
   // For native type conversion, RectangleGeometry.Rect = "x,y,h,w"
 
 panPointToCenter: function(x, y)
 {
   
    this._destRect.x = this._canvasCenter.x - x;
    this._destRect.y = this._canvasCenter.y - y;    
 },
 
 startAttractMode: function()
 {    
    var tweenToPeer = this.target.findName("TweenToPeer");
    if (tweenToPeer != null) {
		tweenToPeer.Stop();
        this.target.resources.remove(tweenToPeer);
    }  
	var delayAttractMode = this.target.findName("DelayAttractMode");
    if (delayAttractMode != null) {
		delayAttractMode.Stop();
        this.target.resources.remove(delayAttractMode);
    }  
    this._tweenStartX = null;
    this._inAttractMode = true;
    this.delayAttractMode(1);
 },
 
 stopAttractMode: function(sender, args)
 {
    this._inAttractMode = false;
 },
 
 tweenToRandom: function()
 {
    if (this._tweenStartX == null) {
         //var randomStartHotSpot = AACurrentData.hotSpots[Math.floor(Math.random() * AACurrentData.hotSpots.length)];
        this._tweenStartX = this._mainViewCanvas["Canvas.Left"];
        this._tweenStartY = this._mainViewCanvas["Canvas.Top"];
    } else {
        this._tweenStartX = this._tweenEndX;
        this._tweenStartY = this._tweenEndY;
    }
   
    var randomEndHotSpot = null;
    
    do {
         randomEndHotSpot = AACurrentData.hotSpots[Math.floor(Math.random() * AACurrentData.hotSpots.length)];
    } while ((randomEndHotSpot.x == this._tweenStartX) && (randomEndHotSpot.y == this._tweenStartY));

    this._tweenEndX = (this.target.width / 2) - (randomEndHotSpot.x * this._mainViewImage.width);
    this._tweenEndY = (this.target.height / 2) - (randomEndHotSpot.y * this._mainViewImage.height);
    
    // don't scroll image off canvas
    
    this._tweenEndX = Math.min(this._tweenEndX, 0);
    this._tweenEndY = Math.min(this._tweenEndY, 0);

    this._tweenEndX = Math.max(this._tweenEndX, 0 - this._mainViewCanvas.width + this.target.width);
    this._tweenEndY = Math.max(this._tweenEndY, 0 - this._mainViewCanvas.height + this.target.height);


    this.tweenToPeer(this._tweenStartX, this._tweenStartY, this._tweenEndX, this._tweenEndY);
 },
 
 tweenBreath: function()
 {
    var tweenBreathXaml = 
         '<Storyboard xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="TweenBreath" >\n'
		+'<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainViewCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">'
		+'		<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>'
		+'		<SplineDoubleKeyFrame KeyTime="00:00:03" Value="0.95" />'
		+'		<SplineDoubleKeyFrame KeyTime="00:00:06" Value="1"/>'
		+'	</DoubleAnimationUsingKeyFrames>'
		+'	<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainViewCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">'
		+'		<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>'
		+'		<SplineDoubleKeyFrame KeyTime="00:00:03" Value="0.95" />'
		+'		<SplineDoubleKeyFrame KeyTime="00:00:06" Value="1"/>'
		+'	</DoubleAnimationUsingKeyFrames>'
		+'</Storyboard>';
				    
    var object = this.control.content.createFromXaml(tweenBreathXaml, false);
    var tweenBreath = this.target.findName("TweenBreath");
    if (tweenBreath != null) {
        this.target.resources.remove(tweenBreath);
    }    
    this.target.resources.add(object);
    //object.addEventListener("Completed", Silverlight.createDelegate(this, this.tweenToPeerCompleted));
   
    object.begin();
 
 },
 
 tweenFromStart: function()
 {
    var tweenScale = .75; //this._mainView.width / AACurrentData.mainImageWidth;
    var x0 = AACurrentData.startX0;
    var y0 = AACurrentData.startY0;
    var x1 = AACurrentData.startX1;
    var y1 = AACurrentData.startY1;
    
    this._inTween = true;
    var tweenDistance = Math.sqrt(Math.pow(x0 - x1,2) + Math.pow(y0 - y1,2));
    
    var tweenTime= "00.5";

    var tweenFromStartXaml = '<Storyboard xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="TweenFromStart" >'
        		         +'     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainViewCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:00" Value="' + tweenScale + '"/>'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:' + tweenTime + '" Value="1" />'
			             +'     </DoubleAnimationUsingKeyFrames>'
			             +'     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainViewCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:00" Value="'+ tweenScale + '"/>'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:' + tweenTime + '" Value="1" />'
			             +'         </DoubleAnimationUsingKeyFrames>'
			             +'</Storyboard>';
			             
    var object = this.control.content.createFromXaml(tweenFromStartXaml, false);
    var tweenFromStart = this.target.findName("TweenFromStart");
    if (tweenFromStart != null) {
        this.target.resources.remove(tweenFromStart);
    }    
    this.target.resources.add(object);
    object.addEventListener("Completed", Silverlight.createDelegate(this, this.handleCompleted_TweenFromStart));
   
    object.begin();
 },
 
 handleCompleted_TweenFromStart: function(sender, args)
 {
      if (AAPanelAttract._panelAttractClickShield.Visibility == "Collapsed") {
	  	 this._panTool.Visibility = "Visible";
		 this.showHotSpots();
  	  }
      this._mainViewCanvasClickShield.Visibility = "Collapsed";
      this._isZoomedOut = false;
 },
 
 tweenToStart: function()
 {
 	this._mainViewHotSpotCanvas.Visibility = "Collapsed";
    this._panTool.Visibility = "Collapsed";
    this._mainViewCanvasClickShield.Visibility = "Visible";
    this._isZoomedOut = true;
    var tweenScale = .75; //this._mainView.width / AACurrentData.mainImageWidth;
    var x0 = AACurrentData.startX0;
    var y0 = AACurrentData.startY0;
    var x1 = AACurrentData.startX1;
    var y1 = AACurrentData.startY1;
    
    this._inTween = true;
    var tweenDistance = Math.sqrt(Math.pow(x0 - x1,2) + Math.pow(y0 - y1,2));
    
    var tweenTime= Math.round((tweenDistance/this._maxMainViewImageMaxDistance) * 500) / 100;
    


    var tweenToStartXaml = '<Storyboard xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="TweenToStart" >'
        		         +'     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainViewCanvas" Storyboard.TargetProperty="(Canvas.Left)">'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:00" Value="' + x0 + '" />'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:' + tweenTime + '" Value="'+ x1 + '" />'
			             +'     </DoubleAnimationUsingKeyFrames>'
			             +'     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainViewCanvas" Storyboard.TargetProperty="(Canvas.Top)">'
    				     +'         <SplineDoubleKeyFrame KeyTime="00:00:00" Value="' + y0 + '" />'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:' + tweenTime + '" Value="' + y1 + '" />'
			             +'     </DoubleAnimationUsingKeyFrames>'
			             +'     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainViewCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:' + tweenTime + '" Value="' + tweenScale + '" />'
			             +'     </DoubleAnimationUsingKeyFrames>'
			             +'     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainViewCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:' + tweenTime + '" Value="'+ tweenScale + '" />'
			             +'         </DoubleAnimationUsingKeyFrames>'
			             +'</Storyboard>';
			             
    var object = this.control.content.createFromXaml(tweenToStartXaml, false);
    var tweenToStart = this.target.findName("TweenToStart");
    if (tweenToStart != null) {
        this.target.resources.remove(tweenToStart);
    }    
    this.target.resources.add(object);
    object.addEventListener("Completed", Silverlight.createDelegate(this, this.handleCompleted_TweenToStart));
   
    object.begin();
 },
 
 handleCompleted_TweenToStart: function(sender, args)
 {
    this._inTween = false;
    //this.delayAttractMode(/(Math.random() * 20) + 10);
 },
 
 tweenToPeer: function(x0, y0, x1, y1)
 {
    this._inTween = true;
    var tweenDistance = Math.sqrt(Math.pow(x0 - x1,2) + Math.pow(y0 - y1,2));
    
    var tweenTime= Math.round((tweenDistance/this._maxMainViewImageMaxDistance) * 2000) / 100;
    var tweenMidTime = Math.round((tweenTime/2) * 100) / 100;
    
    var tweenScale = 1 - ((tweenDistance / this._maxMainViewImageMaxDistance) * 0.4);

    var tweenToPeerXaml = '<Storyboard xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="TweenToPeer" >'
        		         +'     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainViewCanvas" Storyboard.TargetProperty="(Canvas.Left)">'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:00" Value="' + x0 + '" />'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:' + tweenTime + '" Value="'+ x1 + '" />'
			             +'     </DoubleAnimationUsingKeyFrames>'
			             +'     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainViewCanvas" Storyboard.TargetProperty="(Canvas.Top)">'
    				     +'         <SplineDoubleKeyFrame KeyTime="00:00:00" Value="' + y0 + '" />'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:' + tweenTime + '" Value="' + y1 + '" />'
			             +'     </DoubleAnimationUsingKeyFrames>'
			             +'     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainViewCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:' + tweenMidTime + '" Value="' + tweenScale + '"/>'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:' + tweenTime + '" Value="1"/>'
			             +'     </DoubleAnimationUsingKeyFrames>'
			             +'     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MainViewCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:' + tweenMidTime + '" Value="'+ tweenScale + '"/>'
				         +'         <SplineDoubleKeyFrame KeyTime="00:00:' + tweenTime + '" Value="1"/>'
			             +'         </DoubleAnimationUsingKeyFrames>'
			             +'</Storyboard>';
    
    var object = this.control.content.createFromXaml(tweenToPeerXaml, false);
    var tweenToPeer = this.target.findName("TweenToPeer");
    if (tweenToPeer != null) {
        this.target.resources.remove(tweenToPeer);
    }    
    this.target.resources.add(object);
    object.addEventListener("Completed", Silverlight.createDelegate(this, this.tweenToPeerCompleted));
    //this._timer.addEventListener("Completed", Silverlight.createDelegate(this, this.onMainViewTick));
   
    object.begin();
 },
 
 tweenToPeerCompleted: function(sender, args)
 {
    this._inTween = false;
    this.delayAttractMode((Math.random() * 5) + 1);
 },
 
 delayAttractMode: function(seconds)
 {
    var delay = Math.round(seconds * 100) / 100;
    
    var xaml = '<Storyboard xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="DelayAttractMode" Duration="00:00:' + delay + '" />';
		    
    var object = this.control.content.createFromXaml(xaml, false);
    var old = this.target.findName("DelayAttractMode");
    if (old != null) {
        this.target.resources.remove(old);
    }    
    this.target.resources.add(object);
    this._storyboardDelayAttractMode = object.addEventListener("Completed", Silverlight.createDelegate(this, this.delayAttractModeCompleted));
   
    object.begin();
 },
 
 delayAttractModeCompleted: function(sender, args)
 {
    if (this._inAttractMode == true) {
        this.tweenToRandom();
    }
 },
    
handleMouseLeftButtonDown_MainViewCanvas: function(sender, args)
{
    sender.captureMouse();
    
//    alert(args.getPosition(sender).x + " " + args.getPosition(sender).y);
    
    this._isMouseDown = true;
    this._mouseDownStartX = args.getPosition(sender).x;
    this._mouseDownStartY = args.getPosition(sender).y;
},

handleMouseLeftButtonUp_MainViewCanvas: function(sender, args)
{
 //   alert(this._mainViewCanvas["Canvas.Left"] + " " + this._mainViewCanvas["Canvas.Top"]);
    this._isMouseDown = false;
    sender.releaseMouseCapture();
},

handleMouseMove_MainViewCanvas: function(sender, args)
{
    if(this._isMouseDown == true) {
        var mouseX = args.getPosition(sender).x;
        var mouseY = args.getPosition(sender).y;
        var deltaX = mouseX - this._mouseDownStartX;
        var deltaY = mouseY - this._mouseDownStartY;
        
        var newLeft = this._mainViewCanvas["Canvas.Left"] + deltaX;
        var newTop = this._mainViewCanvas["Canvas.Top"] + deltaY;

        newLeft = Math.min(newLeft, 0);
        newTop = Math.min(newTop, 0);
        newLeft = Math.max(newLeft, 0 - this._mainViewCanvas.width + this.target.width);
        newTop = Math.max(newTop, 0 - this._mainViewCanvas.height + this.target.height);
        
        this._mainViewCanvas["Canvas.Left"] = newLeft;
        this._mainViewCanvas["Canvas.Top"] = newTop;

        this._mouseStartX = mouseX;
        this._mouseStartY = mouseY;
    }
},
    
    addHotSpots: function()
    {
		this.clearHotSpots();
 		
        for (var i = 0; i < AACurrentData.hotSpots.length; i++) {
            var hotSpot = this.control.content.createFromXaml(this._hotSpotXaml, true);

            this.addHotSpotHighlight(AACurrentData.hotSpots[i].highlightPoints);

            this._mainViewHotSpotCanvas.children.add(hotSpot);
            newHotSpot = new ArtsAndArchitecture.HotSpot(this.control, hotSpot,
                                            AACurrentData.hotSpots[i].x * this._mainViewImage.width,
                                            AACurrentData.hotSpots[i].y * this._mainViewImage.height,
                                            i);
        }
    },
    
    addHotSpotHighlight: function(highlightPoints)
    {
        if (highlightPoints == null) return;
        if (highlightPoints.length < 3) return;
        
        var polyPoints = ""; 
        
        for (var i = 0; i < highlightPoints.length; i++) {
            polyPoints += (highlightPoints[i].x * this._mainViewImage.width).toString() + "," + (highlightPoints[i].y * this._mainViewImage.height).toString() + " ";
        }
        
        polyPoints += (highlightPoints[0].x * this._mainViewImage.width).toString() + "," + (highlightPoints[0].y * this._mainViewImage.height).toString();
        
        // add poly xaml
        var polyXaml = 
             '<Polygon '
            +'  Points="' + polyPoints + '"'
            +'  Stroke="#FF333333"'
            +'  StrokeThickness="1" FillRule="EvenOdd"  StrokeDashCap="Square" StrokeDashOffset="2" StrokeStartLineCap="Square" StrokeDashArray="1 2" StrokeEndLineCap="Square" StrokeLineJoin="Miter">'
            +'  <Polygon.Fill>'
		    +'      <RadialGradientBrush>'
		 	+'          <GradientStop Color="#00FFFFFF" Offset="0.1"/>'
		 	+'          <GradientStop Color="#4DFFFFFF" Offset="1"/>'
		    +'      </RadialGradientBrush>'
		 	+'  </Polygon.Fill>'
		 	+'</Polygon>';
				    
        var object = this.control.content.createFromXaml(polyXaml, false);
        this._mainViewHotSpotCanvas.children.add(object);
        
    },
    
    handleMouseLeftButtonDown_MainViewCanvasClickShield: function(sender, args)
    {
        if (this._inTween == false) {
            this.tweenFromStart();
        };
    },
    
    handleMouseLeave_Control: function(sender, args) 
    {
        this._isMouseDown = false;
        sender.releaseMouseCapture();
    },
    
     
    handleCompleted_MainViewTimer: function(sender, args)
    {
        var newTop = this._mainViewCanvas["Canvas.Top"];
        var newLeft = this._mainViewCanvas["Canvas.Left"];
        var panStep = 5;
        
        if (this._isPanning) {
            if (this._panDirection == "Up") {
                newTop += panStep;
            } else if (this._panDirection == "Down") {
                newTop -= panStep;
            } else if (this._panDirection == "Left") {
                newLeft += panStep;
            } else {
                newLeft -= panStep;
            }

            newLeft = Math.min(newLeft, 0);
            newTop = Math.min(newTop, 0);
            newLeft = Math.max(newLeft, 0 - this._mainViewCanvas.width + this.target.width);
            newTop = Math.max(newTop, 0 - this._mainViewCanvas.height + this.target.height);
            
            this._mainViewCanvas["Canvas.Top"] = newTop;
            this._mainViewCanvas["Canvas.Left"] = newLeft;
            
            this._mainViewTimer.Begin();
        }
     },
     
    startPanningUp: function()
    {
        this._isPanning = true;
        this._panDirection = "Up";
        this._mainViewTimer.Begin();        
    },
    
    startPanningDown: function()
    {
        this._isPanning = true;
        this._panDirection = "Down";
        this._mainViewTimer.Begin();        
    },
    
    startPanningLeft: function()
    {
        this._isPanning = true;
        this._panDirection = "Left";
        this._mainViewTimer.Begin();        
    },
    
    startPanningRight: function()
    {
        this._isPanning = true;
        this._panDirection = "Right";
        this._mainViewTimer.Begin();        
    },
    
    stopPanning: function()
    {
        this._isPanning = false;
    }

}