// Common JavaScript code across your application goes here.

// Insert the Canvas Object into the div with id #MyDiv 
$(document).ready(function() 
{
//	$('#header').corner("dog2 30px cc:#444 tl tr");
//	$('#footer').corner("dog2 30px cc:#444 bl br");
//	$('div.group').corner("10px cc#E9ECF1");
//	$('div.group').backgroundCanvas();
//    $("#header").backgroundCanvas();
//    $("#nav").backgroundCanvas();
//	$("#sponsor").backgroundCanvas();
//    $("#content tr").backgroundCanvas();

	$('#content span.expander').expander({
	  slicePoint: 300, 
	  widow: 5,
	  expandText: '[more]',
	  expandEffect: 'show',
	  expandSpeed: 500,
	  userCollapseText: '[less]'
	});
});

// Helper function to draw background for convienience
function DrawBackground() 
{	
    // Paints on the background canvas with the PaintFunction you must provide! 
//	$('div.group').backgroundCanvasPaint(MemberBkgd);
//    $("#header").backgroundCanvasPaint(HeaderBkgd); 
//    $("#nav").backgroundCanvasPaint(LeftNavBkgd); 
//    $("#sponsor").backgroundCanvasPaint(RightNavBkgd); 
//    $("#content").backgroundCanvasPaint(ContentBkgd); 
}

// Draw the background  on load and resize
$(window).load(function () { DrawBackground(); });
$(window).resize(function() { DrawBackground(); });

// This is the canvas paint function you have to provide. Don't care about the canvas, just draw on it!
function MemberBkgd(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{
    var options = {x:0, height: height, width: width, radius:30,  border: 0 };

    // Draw a red red border round corner rectangle
    context.fillStyle = "#ccc";

    // Draw the gradient filled inner rectangle
//    var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 10);
//    backgroundGradient.addColorStop(0 ,'#000');
//    backgroundGradient.addColorStop(1, '#999');
    
//    options.border = 1;
	options.radiusTL = 20;
	options.radiusTR = 20;
	options.radiusBL = 20;
	options.radiusBR = 20;
//    context.fillStyle = backgroundGradient; 
    $.canvasPaint.roundedRect(context,options);
}

function HeaderBkgd(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{
    var options = {x:0, height: height, width: width, radius:30,  border: 0 };

    // Draw a red red border round corner rectangle
    context.fillStyle = "#000";

    // Draw the gradient filled inner rectangle
    var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 10);
    backgroundGradient.addColorStop(0 ,'#000');
    backgroundGradient.addColorStop(1, '#333');
    
    options.border = 1;
	options.radiusTL = 0;
	options.radiusTR = 0;
    context.fillStyle = backgroundGradient; 
    $.canvasPaint.roundedRect(context,options);
}

function LeftNavBkgd(context, width, height, canvas, $canvas, $canvasDiv, $content, $element )
{
    var options = {x:0, height: height, width: width, radius:30,  border: 0 };

    // Draw a black border round corner rectangle
    context.fillStyle = "#000";

    // Draw the gradient filled inner rectangle
    var backgroundGradient = context.createLinearGradient(0, 0, 0, 400);
    backgroundGradient.addColorStop(0 ,'#333');
    backgroundGradient.addColorStop(1, '#000');
    
    options.border = 1;
	options.radiusTR = 0;
	options.radiusBL = 0;
	options.radiusBR = 0;
    context.fillStyle = backgroundGradient; 
    $.canvasPaint.roundedRect(context,options);
}

function RightNavBkgd(context, width, height, canvas, $canvas, $canvasDiv, $content, $element )
{
    var options = {x:0, height: height, width: width, radius:30,  border: 0 };

    // Draw a black border round corner rectangle
    // Draw the gradient filled inner rectangle
    var backgroundGradient = context.createLinearGradient(0, 0, 0, 400);
    backgroundGradient.addColorStop(0 ,'#333');
    backgroundGradient.addColorStop(1, '#000');
    
    options.border = 1;
	options.radiusTL = 0;
	options.radiusBL = 0;
	options.radiusBR = 0;
    context.fillStyle = backgroundGradient; 
    $.canvasPaint.roundedRect(context,options);
}