// UI_ThumbnailCanvas.js
// Ryan van der Kooy
// 02/08/08
// eComSystems, Inc.

// Classes:
// ThumbnailCanvas

ThumbnailCanvas = function(plugIn, pageNumber) {
    
    this.plugIn = plugIn;
    this.pageNumber = pageNumber;
    
    this.left = 0;
    this.top = 0;
    this.width = 50;
    this.height = 50;
    this.cursor = "Arrow";
    
    this.isActive = false;
   

    var mainCanvasXamlString = "<Canvas ";
                mainCanvasXamlString += "xmlns='http://schemas.microsoft.com/client/2007' ";
                mainCanvasXamlString += "xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ";
                mainCanvasXamlString += "x:Name='" + this.pageNumber + "' ";
                mainCanvasXamlString += "Canvas.Left='" + this.left + "' ";
                mainCanvasXamlString += "Canvas.Top='" + this.top + "' ";
                mainCanvasXamlString += "Height='" + this.height + "' ";
                mainCanvasXamlString += "Width='" + this.width + "' ";
                mainCanvasXamlString += "Cursor='Hand' ";
                mainCanvasXamlString += "Canvas.ZIndex='1' ";
                //mainCanvasXamlString += "Background='Purple' ";
        mainCanvasXamlString += " />";
    this.mainCanvas = this.plugIn.content.createFromXaml(mainCanvasXamlString);
    
    var iconXamlString = "<Canvas ";
            iconXamlString += "xmlns='http://schemas.microsoft.com/client/2007' ";
            iconXamlString += "xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ";
            iconXamlString += "x:Name='" + this.pageNumber + "_Icon' ";
            iconXamlString += "Width='20' ";
            iconXamlString += "Height='20' ";
            iconXamlString += "Cursor='Hand' ";
            //iconXamlString += "Background='Red' ";
            iconXamlString += ">";
                
        iconXamlString += "</Canvas>";
    this.icon = this.plugIn.content.createFromXaml(iconXamlString);
   
    this.mainCanvas.children.add(this.icon);
        var iconImageXamlString = "<Canvas ";
                iconImageXamlString += "xmlns='http://schemas.microsoft.com/client/2007' ";
                iconImageXamlString += "xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ";
                iconImageXamlString += "x:Name='" + this.pageNumber + "_Icon_Image' ";
            iconImageXamlString += "> ";
            iconImageXamlString += "<Canvas.Resources>" ;
                iconImageXamlString += "<Storyboard ";
                iconImageXamlString += "xmlns='http://schemas.microsoft.com/client/2007' ";
                iconImageXamlString += "xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ";
                iconImageXamlString += "x:Name='" + this.pageNumber + "_Animation' ";
                iconImageXamlString += "AutoReverse='True' ";
                iconImageXamlString += "RepeatBehavior='Forever' ";
            iconImageXamlString += ">";
			    iconImageXamlString += "<ColorAnimationUsingKeyFrames ";
			        iconImageXamlString += "BeginTime='00:00:00' ";
			        iconImageXamlString += "Storyboard.TargetName='" + this.pageNumber + "_Path' ";
			        iconImageXamlString += "Storyboard.TargetProperty='(Shape.Fill).(SolidColorBrush.Color)' ";
			        iconImageXamlString += ">";
				        iconImageXamlString += "<SplineColorKeyFrame ";
				        iconImageXamlString += "KeyTime='00:00:00.7500000' ";
				        iconImageXamlString += "Value='" + gblPrimaryColor + "'";
				    iconImageXamlString += "/>";
			    iconImageXamlString += "</ColorAnimationUsingKeyFrames>";
		    iconImageXamlString += "</Storyboard>";
		    
		   iconImageXamlString += "<Storyboard ";
                iconImageXamlString += "xmlns='http://schemas.microsoft.com/client/2007' ";
                iconImageXamlString += "xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ";
                iconImageXamlString += "x:Name='" + this.pageNumber + "_Inactive' ";
                iconImageXamlString += "AutoReverse='False' ";
                iconImageXamlString += "RepeatBehavior='1x' ";
            iconImageXamlString += ">";
			    iconImageXamlString += "<ColorAnimationUsingKeyFrames ";
			        iconImageXamlString += "BeginTime='00:00:00' ";
			        iconImageXamlString += "Storyboard.TargetName='" + this.pageNumber + "_Path' ";
			        iconImageXamlString += "Storyboard.TargetProperty='(Shape.Fill).(SolidColorBrush.Color)' ";
			        iconImageXamlString += ">";
				        iconImageXamlString += "<SplineColorKeyFrame ";
				        iconImageXamlString += "KeyTime='00:00:01.0000000' ";
				        iconImageXamlString += "Value='Gray'";
				    iconImageXamlString += "/>";
			    iconImageXamlString += "</ColorAnimationUsingKeyFrames>";
		    iconImageXamlString += "</Storyboard>";
		    
		    iconImageXamlString += "<Storyboard ";
                iconImageXamlString += "xmlns='http://schemas.microsoft.com/client/2007' ";
                iconImageXamlString += "xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ";
                iconImageXamlString += "x:Name='" + this.pageNumber + "_Active' ";
                iconImageXamlString += "AutoReverse='False' ";
                iconImageXamlString += "RepeatBehavior='1x' ";
            iconImageXamlString += ">";
			    iconImageXamlString += "<ColorAnimationUsingKeyFrames ";
			        iconImageXamlString += "BeginTime='00:00:00' ";
			        iconImageXamlString += "Storyboard.TargetName='" + this.pageNumber + "_Path' ";
			        iconImageXamlString += "Storyboard.TargetProperty='(Shape.Fill).(SolidColorBrush.Color)' ";
			        iconImageXamlString += ">";
				        iconImageXamlString += "<SplineColorKeyFrame ";
				        iconImageXamlString += "KeyTime='00:00:01.0000000' ";
				        iconImageXamlString += "Value='White'";
				    iconImageXamlString += "/>";
			    iconImageXamlString += "</ColorAnimationUsingKeyFrames>";
		    iconImageXamlString += "</Storyboard>";
		    iconImageXamlString += "</Canvas.Resources>"; 
                iconImageXamlString += "<Path ";
                    iconImageXamlString += "x:Name='" + this.pageNumber + "_Path' ";
                    iconImageXamlString += "Width='46' ";
                    iconImageXamlString += "Height='46' ";
                    iconImageXamlString += "Fill='Gray' ";
                    iconImageXamlString += "Stretch='Fill' ";
                    iconImageXamlString += "Stroke='Black' ";
                    iconImageXamlString += "Data='M0.5,0.5 L39.125,0.5 39,7 46.5,7.125 46.5,45.5 0.5,45.5 z' ";
                iconImageXamlString += "/>";
                iconImageXamlString += "<Path ";
                    iconImageXamlString += "Width='8.25' ";
                    iconImageXamlString += "Height='8' ";
                    iconImageXamlString += "Fill='Gray' ";
                    iconImageXamlString += "Stretch='Fill' ";
                    iconImageXamlString += "Stroke='Black' ";
                    iconImageXamlString += "Canvas.Left='37.75' ";
                    iconImageXamlString += "Data='M164.25,142.25 L171.5,149.25' ";
                iconImageXamlString += "/>";
	        iconImageXamlString += "</Canvas> ";
	                 
    /*var iconImageXamlString = "<Image ";
            iconImageXamlString += "xmlns='http://schemas.microsoft.com/client/2007' ";
            iconImageXamlString += "xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ";
            iconImageXamlString += "x:Name='" + this.pageNumber + "_Icon_Image' ";                 
            iconImageXamlString += "Source='assets/page_icon.png' ";           
        iconImageXamlString += " />";*/
    this.iconImage = this.plugIn.content.createFromXaml(iconImageXamlString);
    
    var iconImageSTXamlString = "<ScaleTransform ScaleX='1' ScaleY='1'/> ";
    this.iconImage.RenderTransform = this.plugIn.content.createFromXaml(iconImageSTXamlString);
    
    //var iconAnimationXamlString = "<Canvas.Resources>" ;
    //            iconAnimationXamlString += "<Storyboard ";
    //            iconAnimationXamlString += "xmlns='http://schemas.microsoft.com/client/2007' ";
    //            iconAnimationXamlString += "xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ";
     //           iconAnimationXamlString += "x:Name='" + this.pageNumber + "_Animation' ";
    //            iconAnimationXamlString += "AutoReverse='True' ";
     //           iconAnimationXamlString += "RepeatBehavior='Forever' ";
     //       iconAnimationXamlString += ">";
	//		    iconAnimationXamlString += "<ColorAnimationUsingKeyFrames ";
	//		        iconAnimationXamlString += "BeginTime='00:00:00' ";
	//		        iconAnimationXamlString += "Storyboard.TargetName='" + this.pageNumber + "_Path' ";
	//		        iconAnimationXamlString += "Storyboard.TargetProperty='(Shape.Fill).(SolidColorBrush.Color)' ";
	//		        iconAnimationXamlString += ">";
	//			        iconAnimationXamlString += "<SplineColorKeyFrame ";
	//			        iconAnimationXamlString += "KeyTime='00:00:00.7500000' ";
	//			        iconAnimationXamlString += "Value='" + gblPrimaryColor + "'";
	/*			    iconAnimationXamlString += "/>";
			    iconAnimationXamlString += "</ColorAnimationUsingKeyFrames>";
		    iconAnimationXamlString += "</Storyboard>";
		    
		   iconAnimationXamlString += "<Storyboard ";
                iconAnimationXamlString += "xmlns='http://schemas.microsoft.com/client/2007' ";
                iconAnimationXamlString += "xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ";
                iconAnimationXamlString += "x:Name='" + this.pageNumber + "_Inactive' ";
                iconAnimationXamlString += "AutoReverse='False' ";
                iconAnimationXamlString += "RepeatBehavior='1x' ";
            iconAnimationXamlString += ">";
			    iconAnimationXamlString += "<ColorAnimationUsingKeyFrames ";
			        iconAnimationXamlString += "BeginTime='00:00:00' ";
			        iconAnimationXamlString += "Storyboard.TargetName='" + this.pageNumber + "_Path' ";
			        iconAnimationXamlString += "Storyboard.TargetProperty='(Shape.Fill).(SolidColorBrush.Color)' ";
			        iconAnimationXamlString += ">";
				        iconAnimationXamlString += "<SplineColorKeyFrame ";
				        iconAnimationXamlString += "KeyTime='00:00:01.0000000' ";
				        iconAnimationXamlString += "Value='Gray'";
				    iconAnimationXamlString += "/>";
			    iconAnimationXamlString += "</ColorAnimationUsingKeyFrames>";
		    iconAnimationXamlString += "</Storyboard>";
		    
		    iconAnimationXamlString += "<Storyboard ";
                iconAnimationXamlString += "xmlns='http://schemas.microsoft.com/client/2007' ";
                iconAnimationXamlString += "xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ";
                iconAnimationXamlString += "x:Name='" + this.pageNumber + "_Active' ";
                iconAnimationXamlString += "AutoReverse='False' ";
                iconAnimationXamlString += "RepeatBehavior='1x' ";
            iconAnimationXamlString += ">";
			    iconAnimationXamlString += "<ColorAnimationUsingKeyFrames ";
			        iconAnimationXamlString += "BeginTime='00:00:00' ";
			        iconAnimationXamlString += "Storyboard.TargetName='" + this.pageNumber + "_Path' ";
			        iconAnimationXamlString += "Storyboard.TargetProperty='(Shape.Fill).(SolidColorBrush.Color)' ";
			        iconAnimationXamlString += ">";
				        iconAnimationXamlString += "<SplineColorKeyFrame ";
				        iconAnimationXamlString += "KeyTime='00:00:01.0000000' ";
				        iconAnimationXamlString += "Value='White'";
				    iconAnimationXamlString += "/>";
			    iconAnimationXamlString += "</ColorAnimationUsingKeyFrames>";
		    iconAnimationXamlString += "</Storyboard>";
		    iconAnimationXamlString += "</Canvas.Resources>";
	this.iconImage.Resources = this.plugIn.content.createFromXaml(iconAnimationXamlString); */
	
    this.mainCanvas.children.add(this.iconImage);
    
    var pageNumberText = "<TextBlock ";
                pageNumberText += "Canvas.Top='5' ";
                pageNumberText += "Canvas.Left='5' ";
                pageNumberText += "Width='20' ";
                pageNumberText += "Height='20' ";
                pageNumberText += "Text='" + this.pageNumber + "' ";
        pageNumberText += " />";
    this.pageNumberText = this.plugIn.content.createFromXaml(pageNumberText);
    this.mainCanvas.children.add(this.pageNumberText);
   
                
    
    var thumbImageXamlString = "<Image ";
                thumbImageXamlString += "xmlns='http://schemas.microsoft.com/client/2007' ";
                thumbImageXamlString += "xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ";
                thumbImageXamlString += "x:Name='" + this.pageNumber + "_Image' ";
                //thumbImageXamlString += "Canvas.Left='0' ";
                //thumbImageXamlString += "Canvas.Top='40' ";
                thumbImageXamlString += "Width='100' ";
                thumbImageXamlString += "Height='120' ";
               
                thumbImageXamlString += "Visibility='Collapsed' ";
                thumbImageXamlString += "Canvas.ZIndex='200' ";
        thumbImageXamlString += "/>";
    this.thumbImage = this.plugIn.content.createFromXaml(thumbImageXamlString);
    this.mainCanvas.children.add(this.thumbImage);
    
    this.mainCanvas.addEventListener("mouseEnter", Silverlight.createDelegate(this, this.handleMouseEnter)); 
    this.mainCanvas.addEventListener("mouseLeave", Silverlight.createDelegate(this, this.handleMouseLeave)); 
    
}

ThumbnailCanvas.prototype.handleMouseEnter = function(sender) {
    this.thumbImage["Canvas.Top"] = ((sender.height / 2) - (this.thumbImage.height / 2));
    //this.thumbImage.Opacity = .9;
    this.thumbImage["Canvas.Left"] = this.iconImage["Canvas.Left"] - this.thumbImage.width;
    this.thumbImage["Canvas.ZIndex"] = 400;
    this.thumbImage.visibility = "Visible";
    this.thumbImage["Canvas.Top"] = ((sender.height / 2) - (this.thumbImage.height / 2));
    //alert(sender.findName(sender.Name + "_Animation").Name);
    if (!this.isActive) {sender.findName(sender.Name + "_Animation").begin(); }
    
    //this.thumbImage.Resources[sender.Name + "_Animation"].begin();
}

ThumbnailCanvas.prototype.handleMouseLeave = function(sender) {
    if (this.isActive) {this.plugIn.content.findName(this.pageNumber + "_Active").begin();}
    //this.thumbImage.Opacity = 0;
    this.thumbImage["Canvas.ZIndex"] = 0;
    this.thumbImage.visibility = "Collapsed";
    if (!this.isActive) { sender.findName(this.pageNumber + "_Animation").stop(); }
}


ThumbnailCanvas.prototype.setLeft = function(left) {
    this.left = left;
    this.mainCanvas["Canvas.Left"] = left;
}


ThumbnailCanvas.prototype.setTop = function(top) {
    this.top = top;
    this.mainCanvas["Canvas.Top"] = top;

}


ThumbnailCanvas.prototype.setWidth = function(width) {
    this.width = width;
    this.mainCanvas.Width = width;
    this.iconImage.width = width;
    
    var perc = width / 46;
    this.iconImage.RenderTransform["ScaleX"] = perc;
    this.iconImage.RenderTransform["ScaleY"] = perc;
    this.width = width * this.iconImage.RenderTransform["ScaleX"];
    this.height = this.height * this.iconImage.RenderTransform["ScaleY"];
    
}


ThumbnailCanvas.prototype.setHeight = function(height) {
   this.height = height;
   this.mainCanvas.height = height;
   this.iconImage.height = height;
   //this.thumbImage["Canvas.Top"] = this.iconImage.height;
   //this.thumbImage.height = height;
   
   var perc = height / 46;
   this.iconImage.RenderTransform["ScaleX"] = perc;
   this.iconImage.RenderTransform["ScaleY"] = perc;
   this.height = height * this.iconImage.RenderTransform["ScaleY"];
   this.width = this.width * this.iconImage.RenderTransform["ScaleX"];
}

ThumbnailCanvas.prototype.setCursor = function(cursor) {
    this.mainCanvas.Cursor = cursor;
}

ThumbnailCanvas.prototype.setImage = function(image) {
    //this method is psuedo-overloaded to accept either a
    //downloader object containing an image or a string
    //pointing to an image location.
            //1 = setSource() was used for already downloaded image
            //2 = source string was used
            //0 = failed.
    try {
        this.thumbImage.setSource(image, "");
        return 1;
    } catch(err) {
        try {
            this.thumbImage.Source = image.uri;
            return 2;
        } catch(err2) {
            try {
                this.thumbImage.Source = image;
                return 2;
            } catch(err3) {
                    return 0;
            }
         
         
        }
    
        
    }
    
}

ThumbnailCanvas.prototype.setAsActive = function() {
    this.plugIn.content.findName(this.pageNumber + "_Active").begin();
    this.isActive = true;
}

ThumbnailCanvas.prototype.setAsInactive = function() {
    this.plugIn.content.findName(this.pageNumber + "_Inactive").begin();
    this.isActive = false;
}

ThumbnailCanvas.prototype.getXamlElement = function() {
   
    return this.mainCanvas;
}