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

var uniqueAnimationName = 0;

ButtonGallery.Page = function() 
{
}

ButtonGallery.Page.prototype =
{
	handleLoad: function(control, userContext, rootElement) 
	{
		this.control = control;
		this.rootElement = rootElement;
		
		this.rightArrow = new Button(control, "left", this, this.moveListToLeft, "assets/Over.wma", "assets/Click.wma");
		this.leftArrow = new Button(control, "right", this, this.moveListToRight, "assets/Over.wma", "assets/Click.wma");
		
		this.totalButtons = 0;

		this.image_data = get_mediainfo(0);		

		for (var i = 0; i < this.image_data.images.length -1; i++) 
	   	{
		    this.CreateImage( control, rootElement, "flexi"+i, this.image_data.images[i].imageUrl, this.image_data.images[i].Caption ); 
   		}

		this.currentButtonIndex = 0;
		
		this.leftArrow.Visibility = "Collapsed";
		
	},
	
	moveListToLeft: function()
	{
		if (this.currentButtonIndex > ((this.totalButtons*-1)+1))
		{
			this.currentButtonIndex--;
			this.moveList();
			if (this.currentButtonIndex == (this.totalButtons*-1)+1) this.rightArrow.Visibility = "Collapsed";
		}
		this.leftArrow.Visibility = "Visible";
	},
	
	moveListToRight: function()
	{
		if (this.currentButtonIndex < 0)
		{
			this.currentButtonIndex++;
			this.moveList();
			if (this.currentButtonIndex == 0) this.leftArrow.Visibility = "Collapsed";
		}
		this.rightArrow.Visibility = "Visible";
	},
	
	moveList: function()
	{
		this.DoubleAnimationKeyFrame(this.control, this.rootElement, "buttonList", "(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)", this.currentButtonIndex*300);		
	},
	
	// -----------------------------------------
    // Add a DoubleAnimation for an element, returns the animation created
    // -----------------------------------------
	DoubleAnimationKeyFrame: function(control, root, targetName, targetProperty, value)
    {
        uniqueAnimationName++;
        var xaml =  "<Canvas>"+
                        "<Canvas.Triggers>"+
                            "<EventTrigger>"+
                                "<EventTrigger.Actions>"+
                                    "<BeginStoryboard>"+    
                                        "<Storyboard xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' x:Name='_Generated_Animation_"+uniqueAnimationName+"' BeginTime='0'>"+
                                            "<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='"+targetName+"' Storyboard.TargetProperty='"+targetProperty+"'>"+
						                        "<SplineDoubleKeyFrame KeyTime='00:00:00.5' KeySpline='0.5,0,0.5,1' Value='"+value+"'/>"+
					                        "</DoubleAnimationUsingKeyFrames>"+
                                        "</Storyboard>"+
                                    "</BeginStoryboard>"+
                                "</EventTrigger.Actions>"+    
                            "</EventTrigger>"+
                        "</Canvas.Triggers>"+ 
                    "</Canvas>";  
        var animationCanvas = control.content.createFromXaml(xaml);
        root.children.add(animationCanvas);
        return control.content.findName("_Generated_Animation_"+uniqueAnimationName);
    },
	
	CreateImage: function( control, root, targetName, imageName, caption )
	{
		 var xaml = ""+
				 "<Canvas xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' x:Name='"+targetName+"' Width='179' Height='353' Canvas.Left='" + (this.totalButtons+1) * 300 +"' Canvas.Top='43'>"+
					"<Canvas x:Name='"+targetName+"_normal' Width='179' Height='353' RenderTransformOrigin='0.486,0.249'>"+
						"<Canvas.OpacityMask>"+
							"<LinearGradientBrush EndPoint='89.5,353' StartPoint='89.5,0' MappingMode='Absolute'>" +
								"<GradientStop Color='#FF000000' Offset='0.495'/>" +
								"<GradientStop Color='#00FFFFFF' Offset='0.784'/>" +
								"<GradientStop Color='#3F4D4D4D' Offset='0.505'/>" +
							"</LinearGradientBrush>" +
						"</Canvas.OpacityMask>" +
						"<Canvas.RenderTransform>" +
							"<TransformGroup>" +
								"<ScaleTransform ScaleX='1' ScaleY='1'/>" +
								"<SkewTransform AngleX='0' AngleY='0'/>" +
								"<RotateTransform Angle='0'/>" +
								"<TranslateTransform X='0' Y='0'/>" +
							"</TransformGroup>" +
						"</Canvas.RenderTransform>" +
						"<Canvas Width='179' Height='179' RenderTransformOrigin='0.5,0.5' x:Name='"+targetName+"canvas'>" +
							"<Canvas.RenderTransform>" +
								"<TransformGroup>" +
									"<ScaleTransform ScaleX='1' ScaleY='1'/>" +
									"<SkewTransform AngleX='0' AngleY='0'/>" +
									"<RotateTransform Angle='0'/>" +
									"<TranslateTransform X='0' Y='0'/>" +
								"</TransformGroup>" +
							"</Canvas.RenderTransform>" +
							"<TextBlock Opacity='0.5' Width='210' Height='53' Canvas.Left='45' Canvas.Top='-23' Foreground='#FFFFFFFF' Text='"+caption+"' TextWrapping='Wrap' RenderTransformOrigin='0.5,0.5' FontSize='12'>" +
								"<TextBlock.RenderTransform>" +
									"<TransformGroup>" +
										"<ScaleTransform ScaleX='1' ScaleY='1'/>" +
										"<SkewTransform AngleX='0' AngleY='0'/>" +
										"<RotateTransform Angle='0'/>" +
										"<TranslateTransform X='0' Y='0'/>" +
									"</TransformGroup>" +
								"</TextBlock.RenderTransform>" +
							"</TextBlock>" +
							"<Image Width='179' Height='179' Source='"+imageName+"' Stretch='Fill' RenderTransformOrigin='0.5,0.5' x:Name='"+targetName+"large'>" +
								"<Image.RenderTransform>" +
									"<TransformGroup>" +
										"<ScaleTransform ScaleX='1' ScaleY='1'/>" +
										"<SkewTransform AngleX='0' AngleY='0'/>" +
										"<RotateTransform Angle='0'/>" +
										"<TranslateTransform X='0' Y='0'/>" +
									"</TransformGroup>" +
								"</Image.RenderTransform>" +
							"</Image>" +
							"<Image Width='179' Height='179' Source='"+imageName+"' Stretch='Fill' RenderTransformOrigin='0.5,0.5' Canvas.Top='150' x:Name='"+targetName+"reflection'>" +
								"<Image.RenderTransform>" +
									"<TransformGroup>" +
										"<ScaleTransform ScaleX='1' ScaleY='-0.75'/>" +
										"<SkewTransform AngleX='0' AngleY='0'/>" +
										"<RotateTransform Angle='0'/>" +
										"<TranslateTransform X='0' Y='0'/>" +
									"</TransformGroup>" +
								"</Image.RenderTransform>" +
							"</Image>" +
						"</Canvas>" +
					"</Canvas>" +
				"</Canvas>";
				   
		var bl = control.content.findName("buttonList");
		var newItem = control.content.createFromXaml(xaml);		
		
		// Create enter / leave animations
		var enterAni = "" +
                     "<Storyboard xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' x:Name='"+targetName+"_enter' BeginTime='0'>"+
                         "<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='"+targetName+"_normal' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)'>"+
	                         "<SplineDoubleKeyFrame KeyTime='00:00:00.1000000' Value='1.9'/>"+
                         "</DoubleAnimationUsingKeyFrames>"+
                         "<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='"+targetName+"_normal' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)'>"+
	                         "<SplineDoubleKeyFrame KeyTime='00:00:00.1000000' Value='1.9'/>"+
                         "</DoubleAnimationUsingKeyFrames>"+
                     "</Storyboard>";
		
		var leaveAni = "" +
                     "<Storyboard xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' x:Name='"+targetName+"_leave' BeginTime='0'>"+
                         "<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='"+targetName+"_normal' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)'>"+
	                         "<SplineDoubleKeyFrame KeyTime='00:00:00.1000000' Value='1.0'/>"+
                         "</DoubleAnimationUsingKeyFrames>"+
                         "<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='"+targetName+"_normal' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)'>"+
	                         "<SplineDoubleKeyFrame KeyTime='00:00:00.1000000' Value='1.0'/>"+
                         "</DoubleAnimationUsingKeyFrames>"+
                     "</Storyboard>";
										
		var newAni = control.content.createFromXaml(enterAni);		
		
		if( newAni != null )
		{
			root.resources.add(newAni);
		}
		
		newAni = control.content.createFromXaml(leaveAni);		
		
		if( newAni != null )
		{
			root.resources.add(newAni);
		}
		
		if( newItem != null )
		{
			bl.children.add(newItem);
			this.totalButtons = this.totalButtons + 1;
			new Button(control, targetName, null, null, "assets/Over.wma", "assets/Click.wma");
		}

	}
}