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

// Classes:
// PanelCanvas


PanelCanvas = function(plugIn, name) {
   
    this.plugIn = plugIn || "";
    this.name = name || Math.floor(Math.random()*9999);
    
    this.left = 0;
    this.top = 0;
    this.width = 100;
    this.height = 100;
    this.cursor = "Arrow";
    this.fill = "Black";
    
    
    this.isDragButtonMouseDown = false;
    this.beginX = 0;
    this.beginY = 0;
    
    
    var canvasXamlString = "<Canvas xmlns='http://schemas.microsoft.com/client/2007' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' x:Name='" + this.name + "' Canvas.Left='" + this.left + "' Canvas.Top='" + this.top + "' Height='" + this.height + "' Width='" + this.width + "' Cursor='" + this.cursor + "' />";
    this.canvas = this.plugIn.content.createFromXaml(canvasXamlString);
    
    
    
    var rectXamlString = "<Rectangle xmlns='http://schemas.microsoft.com/client/2007' Fill='" + this.fill + "' Stroke='White' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' x:Name='" + this.name + "_PanelRect' StrokeThickness='0.75' RadiusX='12.5' RadiusY='12.5' Canvas.Left='0' Canvas.Top='0' Height='" + this.height + "' Width='" + this.width + "'>";
		/*rectXamlString +="		<Rectangle.Fill>";
		rectXamlString +="			<LinearGradientBrush EndPoint='1,0.5' StartPoint='0,0.5'>";
		rectXamlString +="				<GradientStop Color='#FFAEA9A9' Offset='1'/>";
		rectXamlString +="				<GradientStop Color='#FFFFFFFF' Offset='0.423'/>";
		rectXamlString +="			</LinearGradientBrush>";
		rectXamlString +="		</Rectangle.Fill>";
		rectXamlString +="		<Rectangle.Stroke>";
		rectXamlString +="			<LinearGradientBrush EndPoint='1,0.5' StartPoint='0,0.5'>";
		rectXamlString +="				<GradientStop Color='#FFDDDDDD' Offset='1'/>";
		rectXamlString +="				<GradientStop Color='#FFA09F9F' Offset='0'/>";
		rectXamlString +="			</LinearGradientBrush>";
		rectXamlString +="		</Rectangle.Stroke>";  */ 
		rectXamlString +="</Rectangle>";
		this.rect = this.plugIn.content.createFromXaml(rectXamlString)
	
	this.canvas.children.add(this.rect);
	var whiteRectXamlString = "<Rectangle xmlns='http://schemas.microsoft.com/client/2007' Fill='White' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' x:Name='" + this.name + "_WhitePanelRect' StrokeThickness='3' RadiusX='12.5' RadiusY='12.5' Canvas.Left='0' Canvas.Top='0' Height='" + this.height + "' Width='" + this.width + "' Opacity='0.8'/>";
        this.whiteRect = this.plugIn.content.createFromXaml(whiteRectXamlString);
    this.canvas.children.add(this.whiteRect);
    
    this.titleCanvas = this.plugIn.content.createFromXaml("<Canvas/>");
    
    var titleXamlString = "<TextBlock ";
            titleXamlString += "Canvas.Top='5' ";
            titleXamlString += "FontSize='20' ";
            titleXamlString += "FontWeight='Bold' ";
            titleXamlString += "FontFamily='Arial' ";
            titleXamlString += "FontStyle='Italic' ";
            titleXamlString += "Foreground='Black' ";
        titleXamlString += "/>";
    this.title = this.plugIn.content.createFromXaml(titleXamlString);
    this.canvas.children.add(this.title);
    
    var lineXamlString = "<Path ";
            //lineXamlString = "Width='200' ";
            lineXamlString += "Height='1' ";
            lineXamlString += "Fill='#FFFFFFFF' ";
            lineXamlString += "Stretch='Fill' ";
            lineXamlString += "Stroke='#FF000000' ";
            lineXamlString += "Canvas.Top='30' ";
            lineXamlString += "Data='M144,295 L237,295' ";
            lineXamlString += "StrokeThickness='3' ";
            lineXamlString += "Visibility = 'Collapsed' ";
        lineXamlString += "/> ";
    this.line = this.plugIn.content.createFromXaml(lineXamlString);
    this.canvas.children.add(this.line);
}

PanelCanvas.prototype.setTitle = function(title) {

    this.title.Text = title;
    
    this.line.visibility = "Visible";
    this.title["Canvas.Left"] = (this.canvas.width / 2) - (this.title.actualWidth / 2);
}

PanelCanvas.prototype.setLeft = function(left) {
    this.left = left;
    this.canvas["Canvas.Left"] = left;
    
    /*try {
        this.plugIn.content.findName(this.name)["Canvas.Left"] = left;
     } catch(err) {
        //do nothing, this panel hasn't been added yet.
    } */
}


PanelCanvas.prototype.setTop = function(top) {
    this.top = top;
    this.canvas["Canvas.Top"] = top;
    
    /*try {
        this.plugIn.content.findName(this.name)["Canvas.Top"] = top;
     } catch(err) {
        //do nothing, this panel hasn't been added yet.
    } */
}

PanelCanvas.prototype.setWidth = function(width) {
    this.width = width;
    this.rect.Width = width;
    this.whiteRect.Width = width;
    this.canvas.Width = width;
    //this.title.width = width - (10 * 2);
    this.title["Canvas.Left"] = (this.canvas.width / 2) - (this.title.actualwidth / 2);
    this.line.width = width - 20;
    this.line["Canvas.Left"] = (this.canvas.width / 2) - (this.line.width / 2);
    /*try {
        this.plugIn.content.findName(this.name + "_PanelRect").Width = width;
        this.plugIn.content.findName(this.name).Width = width;
     } catch(err) {
        //do nothing, this panel hasn't been added yet.
    } */
    try {
        this.closeButton["Canvas.Left"] = width - 30;
    }catch(err) {
    
    }
    
}

PanelCanvas.prototype.setHeight = function(height) {
    this.height = height;
    this.rect.Height = height;
    this.whiteRect.Height = height;
    this.canvas.Height = height;
    
    /*try {
        this.plugIn.content.findName(this.name + "_PanelRect").Height = height;
        this.plugIn.content.findName(this.name).Height = height;
     } catch(err) {
        //do nothing, this panel hasn't been added yet.
    } */
}

PanelCanvas.prototype.setCursor = function(cursor) {
    this.cursor = cursor;
    this.canvas.Cursor = cursor;
    
    /*try {
        this.plugIn.content.findName(this.name).Cursor = cursor;
    } catch(err) {
     //do nothing, this panel hasn't been added yet.
     
    }*/

}

PanelCanvas.prototype.setFill = function(color) {
    this.fill = color;
    this.rect.Fill = color;
    }

PanelCanvas.prototype.add = function(element) {
    
    this.canvas.children.add(element);
    
    /*try {
        this.plugIn.content.findName(this.name).children.add(element);
     } catch(err) {
        //do nothing, this panel hasn't been added yet.
    }*/
}

PanelCanvas.prototype.hide = function() {

    this.canvas.Visibility = "Collapsed";
}

PanelCanvas.prototype.show = function() {

    this.canvas.Visibility = "Visible";
}

PanelCanvas.prototype.getXamlElement = function() {
	
    return this.canvas;
}

PanelCanvas.prototype.getParent = function() {
    return this.canvas.getParent();
}

PanelCanvas.prototype.centerElement = function(element) {
    element["Canvas.Left"] = (this.width / 2) - (element.width / 2);

}
PanelCanvas.prototype.centerTextBlock = function(textBlock) {
    
    textBlock["Canvas.Left"] = (this.width / 2) - (textBlock.actualWidth / 2);

}

PanelCanvas.prototype.setAsDraggable = function() {
    var dragButtonXamlString = "<Canvas ";
            dragButtonXamlString += "Width='" + (this.title.actualWidth * 1.1) + "' ";
            dragButtonXamlString += "Height='" + (this.title.actualHeight * 1.2) + "' ";
            dragButtonXamlString += "Canvas.Top='" + (this.title["Canvas.Top"] - 3) + "' ";
            dragButtonXamlString += "Canvas.Left='" + (this.title["Canvas.Left"] - 3) + "' ";
            dragButtonXamlString += "Background='" + this.fill + "' ";
            dragButtonXamlString += "Opacity='0.1' ";
            dragButtonXamlString += "Cursor='Hand' ";
        dragButtonXamlString += "/>";
        this.dragButton = this.plugIn.content.createFromXaml(dragButtonXamlString);
    this.add(this.dragButton);
    
    
    this.canvas.addEventListener("MouseMove", Silverlight.createDelegate(this, this.handleMove));
    this.dragButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
    this.dragButton.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.handleMouseUp));
            

}

PanelCanvas.prototype.handleMove = function(sender, mouseEventArgs) {
            // Determine whether the mouse button is down.
    // If so, move the object.
    if (this.isDragButtonMouseDown == true)
    {
        
        // Retrieve the current position of the mouse.
        var currX = mouseEventArgs.getPosition(null).x;
        var currY = mouseEventArgs.getPosition(null).y;
        
       
        
        // Reset the location of the object.
        sender["Canvas.Left"] += currX - this.beginX;
        sender["Canvas.Top"] += currY - this.beginY;
        
        this.beginX = currX;
        this.beginY = currY;
        }

}

PanelCanvas.prototype.handleMouseDown = function(sender, mouseEventArgs) {
    // Set the beginning position of the mouse.
    this.beginX = mouseEventArgs.getPosition(null).x;
    this.beginY = mouseEventArgs.getPosition(null).y;

    this.isDragButtonMouseDown = true;

    // Ensure this object is the only one receiving mouse events.
    sender.captureMouse();

}

PanelCanvas.prototype.handleMouseUp = function(sender, mouseEventArgs) {
    this.isDragButtonMouseDown = false;

    // Allow all objects to receive mouse events.
    sender.releaseMouseCapture();

}

PanelCanvas.prototype.setAsCloseable = function() {
    var closeXamlString = "<Canvas "
        closeXamlString += "Cursor='Hand' ";
        closeXamlString += "> ";
            closeXamlString += "<Rectangle ";
                closeXamlString += "Width='15' ";
                closeXamlString += "Height='15' ";
                closeXamlString += "Fill='Transparent' ";
                closeXamlString += "Stroke='#FF000000' ";
                closeXamlString += "Canvas.Left='" + (this.width - 30).toString() + "' ";
                closeXamlString += "Canvas.Top='10' ";
            closeXamlString += "/>";
            closeXamlString += "<Path ";
                closeXamlString += "Width='14.875' ";
                closeXamlString += "Height='14.75' ";
                closeXamlString += "Fill='Transparent' ";
                closeXamlString += "Stretch='Fill' ";
                closeXamlString += "Stroke='#FF000000' ";
                closeXamlString += "Canvas.Left='" + (this.width - 30).toString() + "' ";
                closeXamlString += "Canvas.Top='10' ";
                closeXamlString += "Data='M158.375,252.625 L172.25,266.375'";
            closeXamlString += "/>";
            closeXamlString += "<Path ";
                closeXamlString += "Width='14.5' ";
                closeXamlString += "Height='14.875' ";
                closeXamlString += "Fill='Transparent' ";
                closeXamlString += "Stretch='Fill' ";
                closeXamlString += "Stroke='#FF000000' ";
                closeXamlString += "Canvas.Left='" + (this.width - 30).toString() + "' ";
                closeXamlString += "Canvas.Top='10' ";
                closeXamlString += "Data='M172.375,252.375 L158.875,266.25'";
            closeXamlString += "/>";
        closeXamlString += "</Canvas>";
            this.closeButton = this.plugIn.content.createFromXaml(closeXamlString);
            this.canvas.children.add(this.closeButton);
            
            
            this.closeButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.hide));


}


PanelCanvas.prototype.hideBackground = function() {
    this.rect.fill = "Transparent";
    this.whiteRect.fill = "Transparent";
    this.rect.stroke = "Transparent";

}

PanelCanvas.prototype.showBackground = function() {
    this.rect.fill = this.fill;
    this.whiteRect.fill = "White";
    this.rect.stroke = "White";


}