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

// Classes:
// PreviewPanel

PreviewPanel = function(plugIn) {
    this.plugIn = plugIn;
    
   
    this.top = 0;
    this.left = 0;
    this.width = 0;
    this.height = 0;
    
    this.vSpace = 5;
    this.hSpace = 5;
    
    this.adPage;
    
    
    
    
    
    this.previewPanel = new PanelCanvas(plugIn, "PreviewPanel");
    this.previewPanel.setWidth(700);
    this.previewPanel.setTitle("Product Preview");
    
    var mainCanvasXamlString = "<Canvas />";
    this.mainCanvas = this.plugIn.content.createFromXaml(mainCanvasXamlString);
    this.previewPanel.add(this.mainCanvas);
    
    
    
    var imageCanvasXamlString = "<Canvas ";
            imageCanvasXamlString += "Background='White' ";
            imageCanvasXamlString += "Canvas.Left='" + this.hSpace + "' ";
            imageCanvasXamlString += "Canvas.Top='" + (this.vSpace * 10) + "' ";
        imageCanvasXamlString += "/> ";
    this.imageCanvas = this.plugIn.content.createFromXaml(imageCanvasXamlString);
    this.previewPanel.add(this.imageCanvas);
    
    var progressImageXamlString = "<Canvas Canvas.Top='300' Canvas.Left='550'> ";
        progressImageXamlString += "<Canvas.Resources>";
	        progressImageXamlString += "<Storyboard xmlns='http://schemas.microsoft.com/client/2007' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' x:Name='progressAnimation'>";
			    progressImageXamlString += "<DoubleAnimation ";
			        progressImageXamlString += "Storyboard.TargetName='rotTrans' ";
			        progressImageXamlString += "Storyboard.TargetProperty='Angle' ";
			        progressImageXamlString += "From='0' To='360' Duration='0::.7' RepeatBehavior='Forever' ";
			    progressImageXamlString += " />";
		    progressImageXamlString += "</Storyboard>";
	    progressImageXamlString += "</Canvas.Resources>";
            progressImageXamlString += "<Image ";
                progressImageXamlString += "Source='assets/ProgressBar.png' "; 
                progressImageXamlString += "xmlns='http://schemas.microsoft.com/client/2007' ";
                progressImageXamlString += "xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ";   
            progressImageXamlString += ">";
                progressImageXamlString += "<Image.RenderTransform>";
                    progressImageXamlString += "<TransformGroup>";
                        progressImageXamlString += "<RotateTransform x:Name='rotTrans' Angle='45' CenterX='15' CenterY='15' />";
                        progressImageXamlString += "<SkewTransform x:Name='skewTrans' AngleX ='45' CenterY ='0' CenterX ='0' />";
                    progressImageXamlString += "</TransformGroup>";
                progressImageXamlString += "</Image.RenderTransform>";
	    progressImageXamlString += "</Image>";
	    progressImageXamlString += "<TextBlock Foreground='White' Canvas.Left='25' FontSize='14' Text='Loading Image...'/>";
	    progressImageXamlString += "</Canvas>";
	    
	this.progressImage = this.plugIn.content.createFromXaml(progressImageXamlString);
	
	
	//var progressAnimationXamlString = "<Canvas.Resources>";
	//        progressAnimationXamlString += "<Storyboard xmlns='http://schemas.microsoft.com/client/2007' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' x:Name='progressAnimation'>";
	//		    progressAnimationXamlString += "<DoubleAnimation ";
	//		        progressAnimationXamlString += "Storyboard.TargetName='rotTrans' ";
	//		        progressAnimationXamlString += "Storyboard.TargetProperty='Angle' ";
	//		        progressAnimationXamlString += "From='0' To='360' Duration='0::.7' RepeatBehavior='Forever' ";
	//		    progressAnimationXamlString += " />";
	//	    progressAnimationXamlString += "</Storyboard>";
	//    progressAnimationXamlString += "</Canvas.Resources>";
    
    //this.progressAnimation = this.plugIn.content.createFromXaml(progressAnimationXamlString);
    //this.progressImage.Resources = this.progressAnimation;
    this.previewPanel.add(this.progressImage);
    
    var previewText = 'Roll over any product in the ad to get a more detailed view. '
    if (gblDebugMode) {
    previewText = "You are currently in DEBUG MODE, product areas are mapped in blue (slightly opaque).  Scroll to the bottom of the page for image download information.";
    }
    var instructionsXamlString = "<TextBlock ";
            instructionsXamlString += "TextWrapping='Wrap' ";
            instructionsXamlString += "Text='" + previewText + "'";
        instructionsXamlString += " />";
    
    this.instructions = this.plugIn.content.createFromXaml(instructionsXamlString);
    this.instructions.width = this.imageCanvas.width;
    this.instructions.height = this.imageCanvas.height;
    this.imageCanvas.children.add(this.instructions);
    this.shrinkWrap(this.instructions, 30);
    
    
    this.image = this.plugIn.content.createFromXaml("<Image Stretch='Uniform'/>");
    this.imageCanvas.children.add(this.image)
    
    var textCanvasXamlString = "<Canvas ";
            textCanvasXamlString += "Background='Red' ";
            textCanvasXamlString += "Canvas.Left='" + this.hSpace + "' ";
        textCanvasXamlString += "/> ";
    this.textCanvas = this.plugIn.content.createFromXaml(textCanvasXamlString);
    this.textScaleTransForm = this.plugIn.content.createFromXaml("<ScaleTransform/>");
    this.textCanvas.RenderTransform = this.textScaleTransForm;
    
   
    var brandXamlString = "<TextBlock FontSize='18' Width='1' TextWrapping='Wrap' FontStyle='Italic'/>";
    this.brand = this.plugIn.content.createFromXaml(brandXamlString);
    this.textCanvas.children.add(this.brand);
    
    var titleXamlString = "<TextBlock FontSize='30' Width='1' TextWrapping='Wrap'/>" ;
    this.title = this.plugIn.content.createFromXaml(titleXamlString);
    this.textCanvas.children.add(this.title);
    
    var size = "<TextBlock FontSize='14' Width='1' TextWrapping='Wrap' />";
    this.sizeUnit = this.plugIn.content.createFromXaml(size);
    this.textCanvas.children.add(this.sizeUnit);
    
    var description = "<TextBlock FontSize='10' Width='1' TextWrapping='Wrap'/>";
    this.description = this.plugIn.content.createFromXaml(description);
    this.textCanvas.children.add(this.description);
    
    var price = "<TextBlock FontSize='45' Width='1' Foreground='Red' TextWrapping='Wrap' />";
    this.price = this.plugIn.content.createFromXaml(price);
    this.textCanvas.children.add(this.price);
    
    this.previewPanel.add(this.textCanvas);
}

PreviewPanel.prototype.setTop = function(top) {
    this.previewPanel.setTop(top);
    this.top = top;
    

}

PreviewPanel.prototype.setLeft = function(left) {
    this.previewPanel.setLeft(left);
    this.left = left;

}

PreviewPanel.prototype.setWidth = function(width) {
    this.previewPanel.setWidth(width);
    this.mainCanvas.width = width;
    this.width = width;
    this.imageCanvas.width = width - (this.hSpace * 2);
    this.image.width = this.imageCanvas.width;
    this.instructions.width = width - (this.hSpace * 2);
    this.textCanvas.width = width - 10;
    this.shrinkWrap(this.instructions, 15);
   
    
    this.brand.width = width - 10;
    this.title.width = width - 10;
    this.sizeUnit.width = width - 10;
    this.description.width = width - 10;
    this.price.width = width - 10;
    
    
    //this.resizeText();

}

PreviewPanel.prototype.setHeight = function(height) {
    this.previewPanel.setHeight(height);
    this.mainCanvas.height = height;
    this.height = height;
    this.imageCanvas.height = (height / 2) - (this.vSpace * 4);
    this.image.height = this.imageCanvas.height;
    this.instructions.height = (height / 2) - (this.vSpace * 4);
   this.shrinkWrap(this.instructions, 15);
   this.resizeText(height);
    
    
    
    
   

}

PreviewPanel.prototype.setAreas = function(adPage, sizeRatio) {
    
    
   
    this.adPage = adPage;
   
    
    var areasString = "<Canvas Canvas.ZIndex='10' xmlns='http://schemas.microsoft.com/client/2007' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>";
    for (i=0;i<adPage.productAreas.length;i++) {
    if (this.validateAsProductArea(adPage.productAreas[i]))  {
        areasString += "<Canvas x:Name='" + adPage.productAreas[i].areaID;
        if (gblDebugMode) {
        areasString += "' Background='Blue'";
        areasString += " Opacity='.5'";
        } else {
        areasString += "' Background='Transparent'";
        }
        areasString += " Canvas.Left='" + (adPage.productAreas[i].upperLeftX * sizeRatio);
        areasString += "' Canvas.Top='" + (adPage.productAreas[i].upperLeftY * sizeRatio);
        areasString += "' Width='" + (adPage.productAreas[i].width * sizeRatio);
        areasString += "' Height='" + (adPage.productAreas[i].height * sizeRatio);
        areasString += "' Cursor='Hand";
        areasString += "'>";
        areasString += "</Canvas>";
       }
        
    }
    areasString += "</Canvas>";
    this.plugIn.content.findName("AreasCanvas").children.add(this.plugIn.content.createFromXaml(areasString));

     
    for (i=0;i<adPage.productAreas.length;i++) {
                
               try {
                this.plugIn.content.findName(adPage.productAreas[i].areaID).addEventListener("MouseEnter", Silverlight.createDelegate(this, this.showPreview));
                this.plugIn.content.findName(adPage.productAreas[i].areaID).addEventListener("MouseLeave", Silverlight.createDelegate(this, this.clearPreview));
            } catch (err) {
            
            
            }
                }
  
    
    

}


PreviewPanel.prototype.showPreview = function(sender) {
    var areaIndex = this.adPage.getIndexByAreaID(sender.Name); //find where this area is located in the productAreas array.
    var currArea = this.adPage.productAreas[areaIndex];
    this.instructions.visibility = 'Collapsed';
    
    
    try {                           //try to set the previewProductImage = the already downloaded image
    this.image.SetSource(currArea.downloadedImage, "");
    } catch(err) {                  //if the image hasn't downloaded yet, avoid a crash by simply setting
        try{                        //the source = the string containing the address of the image instead.                   
            this.image.Source = this.adPage.getProductImageLocation(currArea.productImageName);
        
        } catch(err2) {             //if the image doesn't exist and all else fails, make it blank.
                this.image.Source = "";
        }
    
    }
    
    /*if(this.image.width > this.image.height) {
        this.image.width = this.imageCanvas.width;
    } else {
        this.image.height = this.imageCanvas.height;
    }*/
    
    
    this.brand.text = currArea.brand;
    this.title.text = currArea.title;
    this.sizeUnit.text = currArea.unit;
    if ((this.sizeUnit.text != "") && (currArea.size != "")) { this.sizeUnit.text += ", "; } //if a unit exists, add a space between unit and size
    this.sizeUnit.text += currArea.size;
    this.description.text = currArea.description
    this.price.text = currArea.price;
    //alert("brand actualHeight: " + this.brand.actualHeight);
    this.shrinkWrap(this.brand, 30);
    this.shrinkWrap(this.title, 30);
    this.shrinkWrap(this.sizeUnit, 12);
    this.shrinkWrap(this.description, 30);
    this.shrinkWrap(this.price, 45);

    
    
}

PreviewPanel.prototype.clearPreview = function(sender) {
    this.image.Source = "";
    this.brand.text = "";
    this.title.text = "";
    this.sizeUnit.text = "";
    this.description.text = "";
    this.price.text = "";
    this.instructions.visibility = 'visible';
}

PreviewPanel.prototype.getXamlElement = function() {

    return this.previewPanel.getXamlElement();
}

PreviewPanel.prototype.resizeText = function() {

    
    
    this.brand["Canvas.Top"] = this.imageCanvas.height + this.imageCanvas["Canvas.Top"] + 10;
    this.brand.height = (this.height/21);
    
    
    this.title["Canvas.Top"] = this.brand["Canvas.Top"] + this.brand.height + this.vSpace;
    this.title.height = (this.height/11);
 
    
    this.sizeUnit["Canvas.Top"] = this.title["Canvas.Top"] + this.title.height + this.vSpace;
    this.sizeUnit.height = (this.height/16);
   
    
    this.description["Canvas.Top"] = this.sizeUnit["Canvas.Top"] + this.sizeUnit.height + (this.vSpace);
    this.description.height = (this.height/13);

    
    this.price["Canvas.Top"] = this.description["Canvas.Top"] + this.description.height + (this.vSpace);
    this.price.height = (this.height/7);
   
    
    
}


PreviewPanel.prototype.setFill = function(color) {

    this.previewPanel.setFill(color);

}

PreviewPanel.prototype.beginDownloadProgress = function() {
    this.plugIn.content.findName("progressAnimation").begin();


}

PreviewPanel.prototype.stopDownloadProgress = function() {
    this.plugIn.content.findName("progressAnimation").stop();
    
    this.progressImage.Visibility = "Collapsed";


}

PreviewPanel.prototype.shrinkWrap = function(textBlock, targetFontSize) {
    
    textBlock.FontSize = targetFontSize;
    
    while ((parseInt(textBlock.actualHeight) > parseInt(textBlock.height)) && (textBlock.FontSize > 7 )) {
      
        textBlock.FontSize--;
  

    }

}

PreviewPanel.prototype.validateAsProductArea = function(productArea) {

    var validationString = (productArea.price + productArea.brand + productArea.title).toString();
     validationString = validationString.replace(" ", "");
    
    if (validationString != " ") {
        return true;
        } else {
            return false;
        }

}