// JScript File
function fisheyeApp(){
    this.silverlightControl = null;    
	this.rootCanvas = null;
	this.tileCanvas = null;
	
	this.imageArray = new Array(0);
	this.hash = new Object();
	
	// constants
	this.TILE_HEIGHT = 60;
	this.TILE_WIDTH = 60;
	this.PADDING = 40;
	this.OUTTER_PADDING = 23;
	this.TILE_HEIGHT_LARGE = 60;
	this.TILE_WIDTH_LARGE = 60;
	
	
	this.ticker = new Date();	
	this.tileZIndex = 0;
	
	this.picUrlArray = [
        "images/bt_hospedagem.png",
	"images/bt_diversao.png",
	"images/bt_gastronomia.png"]
        
	this.picCount = 0;
		
}

fisheyeApp.prototype.handleLoad = function(control, userContext, rootElement) 
{
	this.silverlightControl = control;
	this.rootCanvas = control.content.findName("rootCanvas");
	this.tileCanvas = control.content.findName("tileCanvas");
	
	this.silverlightControl.settings.enableFramerateCounter = true;
	this.createGrid(1);
}

fisheyeApp.prototype.createGrid = function(rowCount)
{
	var availableHeight = this.rootCanvas.height - 2*this.OUTTER_PADDING;
	var i=1;
	this.createRow(i);
	/*for (var i = 0; ((i+1)*this.TILE_HEIGHT + i*this.PADDING) < availableHeight; i++)
	{
		
	}*/
}

fisheyeApp.prototype.createRow = function(rowNumber)
{

	var availableWidth = this.rootCanvas.width - 2*this.OUTTER_PADDING;
	
	for (var i = 0; ((i+1)*this.TILE_WIDTH + i*this.PADDING) <= availableWidth; i++) 
	{
		var canvasLeft = this.OUTTER_PADDING + i*(this.TILE_WIDTH + this.PADDING);
		
		var canvasTop = this.OUTTER_PADDING + rowNumber*(this.PADDING + this.TILE_HEIGHT);
		//var rect = this.createRect(this.TILE_WIDTH, this.TILE_HEIGHT, canvasTop, canvasLeft);
		var img = this.createImage(this.TILE_WIDTH, this.TILE_HEIGHT, canvasTop, canvasLeft);
		
		this.tileCanvas.children.add(img);
	}	
}

fisheyeApp.prototype.createImage = function(w, h, ct, cl)
{
	var name = "rect_" + ct.toString() + "_" + cl.toString();

    var xamlFragment = '<Image xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ';
       xamlFragment += 'Name="' + name + '" RenderTransformOrigin="0.5,0.5" Cursor="Hand">';
       xamlFragment += '<Image.RenderTransform><TransformGroup><ScaleTransform ScaleX="1" ScaleY="1"/></TransformGroup></Image.RenderTransform></Image>';
       
    this.hash[name] = this.picCount;

	var img = this.silverlightControl.content.createFromXaml(xamlFragment);
	img.width = w;
	img.height = h;
	img["Canvas.Left"] = cl;
	img["Canvas.Top"] = ct;
	this.imageArray.push(img); 
	
	img.source = this.getNextPicUrl();
	img.addEventListener("mouseEnter", Silverlight.createDelegate(this, this.mouseEnter));	
	img.addEventListener("mouseLeave", Silverlight.createDelegate(this, this.mouseLeave));	
	//img.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this, this.mouseLeftButtonDown));	
	
	this.addStoryboards(img);
	
	return img;
}

fisheyeApp.prototype.addStoryboards = function(rect)
{
	//Scaling animation
	var scaleXAnim = this.buildDoubleAnimationString(rect.name, "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)","0:0:0.2","1","scaleX"+rect.name);
	var scaleYAnim = this.buildDoubleAnimationString(rect.name, "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)","0:0:0.2","1","scaleY"+rect.name);
	
	var name = "sb_width_up_" + rect.name;
	
    var xamlFragment = this.getStoryboardBeginTag(name) + scaleXAnim + scaleYAnim + '</Storyboard>';//widthAnim + heightAnim + canvasLeftAnim + canvasTopAnim
       
	var storyboard = this.silverlightControl.content.createFromXaml(xamlFragment);
	this.rootCanvas.resources.add(storyboard);
	
	//Add Scaling to Large Image
	var largeScale = 980/rect.width;
	
	var scaleXLargeAnim = this.buildDoubleAnimationString(rect.name, "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)","0:0:0.5",largeScale,"scaleXLarge"+rect.name);
	var scaleYLargeAnim = this.buildDoubleAnimationString(rect.name, "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)","0:0:0.5",largeScale,"scaleYLarge"+rect.name);
	var canvasLeftLarge = this.buildDoubleAnimationString(rect.name, "(Canvas.Left)","0:0:0.5","360","canvasLeftLarge"+rect.name);
	var canvasTopLarge = this.buildDoubleAnimationString(rect.name, "(Canvas.Top)","0:0:0.5","350","canvasTopLarge"+rect.name);
	
	var name2 = "make_large_" + rect.name;
	
    var xamlFragment2 = this.getStoryboardBeginTag(name2) + scaleXLargeAnim + scaleYLargeAnim + canvasLeftLarge + canvasTopLarge + '</Storyboard>';//widthAnim + heightAnim
       
	var storyboard2 = this.silverlightControl.content.createFromXaml(xamlFragment2);
	this.rootCanvas.resources.add(storyboard2);
	
	//Large Image back to normal
	var scaleXNormalAnim = this.buildDoubleAnimationString(rect.name, "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)","0:0:0.5","2.5","scaleXNormal"+rect.name);
	var scaleYNormalAnim = this.buildDoubleAnimationString(rect.name, "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)","0:0:0.5","2.5","scaleYNormal"+rect.name);
	var canvasLeftNormal = this.buildDoubleAnimationString(rect.name, "(Canvas.Left)","0:0:0.5",rect["Canvas.Left"],"canvasLeftNormal"+rect.name);
	var canvasTopNormal = this.buildDoubleAnimationString(rect.name, "(Canvas.Top)","0:0:0.5",rect["Canvas.Top"],"canvasTopNormal"+rect.name);
	
	var name3 = "make_normal_" + rect.name;
	
    var xamlFragment3 = this.getStoryboardBeginTag(name3) + scaleXNormalAnim + scaleYNormalAnim + canvasLeftNormal + canvasTopNormal + '</Storyboard>';//widthAnim + heightAnim
       
	var storyboard3 = this.silverlightControl.content.createFromXaml(xamlFragment3);
	this.rootCanvas.resources.add(storyboard3);
}

//------------------------------------------------------------------------------------------------
//------------------------------------------------------------------------------------------------
//			Events
//------------------------------------------------------------------------------------------------
//------------------------------------------------------------------------------------------------

fisheyeApp.prototype.mouseEnter = function(sender, args)
{
	sender["Canvas.ZIndex"] = ++(this.tileZIndex);
	this.ReLayoutGrid(this.hash[sender.name],true);
}

fisheyeApp.prototype.mouseLeave = function(sender, args)
{
	if(sender["RenderTransform"].children.getItem(0).scaleX>2.5)
	{
	    this.silverlightControl.content.findName("make_normal_"+ sender.name).begin();
	}
	//this.ReLayoutGrid(this.hash[sender.name],false);
}

fisheyeApp.prototype.mouseLeftButtonDown = function(sender, args)
{
	if(sender["RenderTransform"].children.getItem(0).scaleX>2.5)
	{
	    this.silverlightControl.content.findName("make_normal_"+ sender.name).begin();
	}
	else
	{
	    this.silverlightControl.content.findName("make_large_"+ sender.name).begin();
	}
}

//------------------------------------------------------------------------------------------------
//------------------------------------------------------------------------------------------------
//			Utility
//------------------------------------------------------------------------------------------------
//------------------------------------------------------------------------------------------------

fisheyeApp.prototype.getNextPicUrl = function()
{
	return this.picUrlArray[(this.picCount++) % this.picUrlArray.length];
}

fisheyeApp.prototype.getStoryboardBeginTag = function(sbName)
{
    var xamlFrag = '<Storyboard xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ';
       xamlFrag += ' FillBehavior="HoldEnd"'
       xamlFrag += ' Name="' + sbName + '">'
       
    return xamlFrag;
}

fisheyeApp.prototype.buildDoubleAnimationString = function(targetName, targetProperty, duration, to, name)
{
	var xamlString = ""; 
	xamlString += '<DoubleAnimation';
	xamlString += ' Storyboard.TargetName="' + targetName + '"';
	xamlString += ' Storyboard.TargetProperty="' + targetProperty + '"';
	xamlString += ' Duration="' + duration + '"';
	xamlString += ' To="' + to + '"';
	xamlString += ' Name="' + name + '"';
	xamlString += '/>';
	
	return xamlString;
}

fisheyeApp.prototype.ReLayoutGrid = function(index,isDirectionUp)
{
    var currentImg = this.imageArray[index];
    for(i=0;i<this.imageArray.length;i++)
    {
        var diffY = this.imageArray[i].getValue("Canvas.Top") - currentImg.getValue("Canvas.Top");
        var diffX = this.imageArray[i].getValue("Canvas.Left") - currentImg.getValue("Canvas.Left");
        
        var scaleX = this.silverlightControl.content.findName("scaleX"+this.imageArray[i].name);
        var scaleY = this.silverlightControl.content.findName("scaleY"+this.imageArray[i].name);
        
        if(isDirectionUp)
        {
            if(diffX!=0 || diffY!=0)
            {
                var r = Math.sqrt(diffX*diffX+diffY*diffY);
                var scale = (this.TILE_WIDTH*2)/r;
                
                if(scale>.6)
                {             
                  scaleX.to = scale;
                  scaleY.to = scale;
                }
                else
                {
                    scaleX.to = .9;
                    scaleY.to = .9;
                }          
            }
            else
            {
                scaleX.to = 1.4;
                scaleY.to = 1.4; 
            }
        }
    }
    
    for(n=0;n<this.imageArray.length;n++)
    {
        this.silverlightControl.content.findName("sb_width_up_"+ this.imageArray[n].name).begin();
    }
}