// UI_ThumbnailPanel.js
// Ryan van der Kooy
// 01/30/08
// eComSystems, Inc.

// Classes:
// ThumbnailPanel

ThumbnailPanel = function(plugIn, name) {
    this.plugIn = plugIn;
    
   
    this.top = 0;
    this.left = 0;
    this.width = 0;
    this.height = 0;
    
    this.thumbnails = new Array();
    this.numberOfPages = 0;
    this.currThumbnail = 0;
    
    
    
    this.backgroundPanel = new PanelCanvas(plugIn, name);
    //this.backgroundPanel.setWidth(700);
    this.backgroundPanel.hideBackground();
    
    var canvasXamlString = "<Canvas ";
            //canvasXamlString += "Background='Blue' ";
            canvasXamlString += "Canvas.Left='0' ";
            //canvasXamlString += "Width='20' ";
            //canvasXamlString += "Height='40' ";
            canvasXamlString += "Canvas.Top='40' ";
        canvasXamlString += " />";
    this.mainCanvas = this.plugIn.content.createFromXaml(canvasXamlString);
    
    var thumbCanvasXamlString = "<Canvas "
            //thumbCanvasXamlString += "Background='Orange' ";
            thumbCanvasXamlString += "Height='10' ";
            thumbCanvasXamlString += "Width='20' ";
            //thumbCanvasXamlString += "Canvas.Left='60' ";
            thumbCanvasXamlString += "Canvas.Top='0' ";
        thumbCanvasXamlString += "/>";
    this.thumbCanvas = this.plugIn.content.createFromXaml(thumbCanvasXamlString);
    this.mainCanvas.children.add(this.thumbCanvas);
   
    
    this.backgroundPanel.add(this.mainCanvas);
    



            var nextButtonXamlString = "<Path ";
                    nextButtonXamlString += "Width='25' ";
                    nextButtonXamlString += "Height='20' ";
                    nextButtonXamlString += "Fill='White' ";
                    nextButtonXamlString += "Stretch='Fill' ";
                    nextButtonXamlString += "Stroke='Black' ";
                    nextButtonXamlString += "Canvas.Left='0' ";
                    nextButtonXamlString += "Canvas.Top='0' ";
                    nextButtonXamlString += "Data='M12.25,5.625 L24.5,24.5 0.5,24.5 z' ";
                    nextButtonXamlString += "Cursor='Hand' ";
                nextButtonXamlString += ">";
                    nextButtonXamlString += "<Path.RenderTransform>";
                        nextButtonXamlString += "<TransformGroup>";
                         //nextButtonXamlString += "<ScaleTransform ScaleY='-1'/>";
                            nextButtonXamlString += "<RotateTransform Angle='180' CenterX='10' CenterY='12.5'/>";
                        nextButtonXamlString += "</TransformGroup>";
                    nextButtonXamlString += "</Path.RenderTransform>";
                nextButtonXamlString += "</Path>";
    this.NextButton = this.plugIn.content.createFromXaml(nextButtonXamlString);
    this.backgroundPanel.add(this.NextButton);
    


              var previousButtonXamlString = "<Path ";
                    previousButtonXamlString += "Width='25' ";
                    previousButtonXamlString += "Height='20' ";
                    previousButtonXamlString += "Fill='White' ";
                    previousButtonXamlString += "Stretch='Fill' ";
                    previousButtonXamlString += "Stroke='Black' ";
                    previousButtonXamlString += "Canvas.Left='0' ";
                    previousButtonXamlString += "Canvas.Top='-5' ";
                    //previousButtonXamlString += "Data='M0.5,0.5 L31,26 0.5,51.5 z' ";
                    previousButtonXamlString += "Data='M12.25,5.625 L24.5,24.5 0.5,24.5 z' ";
                    previousButtonXamlString += "Cursor='Hand' ";
                previousButtonXamlString += ">";
                    previousButtonXamlString += "<Path.RenderTransform>";
                        previousButtonXamlString += "<TransformGroup>";
                            //previousButtonXamlString += "<ScaleTransform ScaleX='0.6' ScaleY='0.8'/>";
                            //previousButtonXamlString += "<RotateTransform Angle='-90' CenterX='16' CenterY='26'/>";
                        previousButtonXamlString += "</TransformGroup>";
                    previousButtonXamlString += "</Path.RenderTransform>";
                previousButtonXamlString += "</Path>";
    this.PreviousButton = this.plugIn.content.createFromXaml(previousButtonXamlString);
    this.backgroundPanel.add(this.PreviousButton);
            
      
    

}

//ThumbnailPanel.prototype = PanelCanvas;


ThumbnailPanel.prototype.getXamlElement = function() {
    //var xamlElement = this.base.getXamlElement();
    
    //return xamlElement;
    return this.backgroundPanel.getXamlElement();
    //return this.backgroundPanel;
    
}

ThumbnailPanel.prototype.setTop = function(top) {
    this.top = top;
    this.backgroundPanel.setTop(top);
}

ThumbnailPanel.prototype.setLeft = function(left) {
    this.left = left;
    this.backgroundPanel.setLeft(left);
    //this.mainCanvas["Canvas.Left"] = ((this.backgroundPanel.width / 2) - (this.mainCanvas.width / 2));
}

ThumbnailPanel.prototype.setWidth = function(width) {
    this.width = width;
    this.backgroundPanel.setWidth(width);
    //this.mainCanvas["Canvas.Left"] = ((this.backgroundPanel.width / 2) - (this.mainCanvas.width / 2));
    this.NextButton["Canvas.Left"] = ((width / 2) - (this.NextButton.width / 2));
    this.PreviousButton["Canvas.Left"] = ((width / 2) - (this.NextButton.width / 2));
}

ThumbnailPanel.prototype.setHeight = function(height) {
    this.height = height;
    this.backgroundPanel.setHeight(height);
    this.NextButton["Canvas.Top"] = height - 10;
}

ThumbnailPanel.prototype.setNumberOfPages = function(numberOfPages) {
    this.numberOfPages = numberOfPages;
}

ThumbnailPanel.prototype.addThumbnail = function(thumbnailCanvas) {
    
    var posIncr = 540 / this.numberOfPages;
    
    thumbnailCanvas.setTop(this.currThumbnail * posIncr);
    thumbnailCanvas.setHeight(this.getThumbnailHeight());
    
    
    if (this.currThumbnail != this.numberOfPages - 1) {
     this.mainCanvas.height += posIncr;   
    } else {
        this.mainCanvas.height += thumbnailCanvas.height;
    }
    
    this.thumbCanvas.children.add(thumbnailCanvas.getXamlElement());
    
    this.mainCanvas["Canvas.Top"] = ((this.backgroundPanel.height / 2) - (this.mainCanvas.height / 2));
    this.currThumbnail++;
    this.thumbnails[thumbnailCanvas.pageNumber - 1] = thumbnailCanvas;
    thumbnailCanvas.setLeft((this.backgroundPanel.width / 2) - (thumbnailCanvas.width / 2));
    
}

ThumbnailPanel.prototype.hideNextButton = function() {

    this.NextButton.Opacity = .3;
    this.NextButton.Cursor = "Arrow";
    }
    
ThumbnailPanel.prototype.hidePreviousButton = function() {

    this.PreviousButton.Opacity = .3;
    this.PreviousButton.Cursor = "Arrow";
}

ThumbnailPanel.prototype.showNextButton = function() {

    this.NextButton.Opacity = 1;
    this.NextButton.Cursor = "Hand";
    }
    
ThumbnailPanel.prototype.showPreviousButton = function() {

    this.PreviousButton.Opacity = 1;
    this.PreviousButton.Cursor = "Hand";
}

ThumbnailPanel.prototype.getThumbnailSizeRatio = function() {
    
    var thumbCanvasWidth = this.mainCanvas.Width;
    var currRatio = (.8 / this.numberOfPages);
    
    
    return (currRatio);
    
}

ThumbnailPanel.prototype.getThumbnailHeight = function() {
    var currHeight = 540 * this.getThumbnailSizeRatio();
   
    if (currHeight > 50) {
        return 50;
    } else {
        return currHeight;
    }
}

ThumbnailPanel.prototype.setActiveThumbnail = function(pageNumber) {

    this.thumbnails[pageNumber].setAsActive();

}

ThumbnailPanel.prototype.setAllInactive = function() {
    for(i=0;i<this.thumbnails.length;i++)
        if (this.thumbnails[i].isActive) { this.thumbnails[i].setAsInactive(); }
        
    
} 

ThumbnailPanel.prototype.setFill = function(color) {
    this.backgroundPanel.setFill(color);
}