//var canvasWidth = 804;
//var canvasHeight = 250;
//var width;
//var height;



//window.onload = windowReady;


$j(function () {



    //var checkframeCanvasTop = document.getElementById('frameCanvas').getframeCanvasTop('2d');

    if (typeof window.G_vmlCanvasManager != "undefined") { //For I.E.
        window.onload = drawFrame;

    }
    else {
        drawFrame();
    }
    // alert($j('#frameCanvas').attr('getframeCanvasTop').length);

});

function drawFrame() {

    var ContextTop = document.getElementById('frameCanvasTop').getContext('2d');
    var ContextLeft = document.getElementById('frameCanvasLeft').getContext('2d');
    var ContextRight = document.getElementById('frameCanvasRight').getContext('2d');
    var ContextTopLeft = document.getElementById('canvasTopLeft').getContext('2d');
    var ContextTopRight = document.getElementById('canvasTopRight').getContext('2d');
    var ContextBottomLeft = document.getElementById('canvasBottomLeft').getContext('2d');
    var ContextBottom = document.getElementById('frameCanvasBottom').getContext('2d');
    var ContextBottomRight = document.getElementById('canvasBottomRight').getContext('2d');
    

    var width = $j('#frameCanvasTop').attr('width');
    var height = $j("#frameCanvasLeft").attr('height');
    
    var radius = 10;
    var padding = 8;
    var xY = padding / 2;

    var innerRadius = padding + 8;
    var innerZero = padding;
    var innerWidth = width - padding;
    var innerHeight = height - padding;

    var whiteRadius = (padding - 3) + 10;
    var whiteZero = padding - 3;
    var whiteWidth = width - whiteZero;
    var whiteHeight = height - whiteZero;

    var shadowRadius = 2 + 11;
    var shadowZero = 2;
    var shadowWidth = width - shadowZero;
    var shadowHeight = height - shadowZero;

    /*Constants*/
    var CORNER_SIZE = 16;
    var FRAME_COLOR = "#FFF";
    var SHADOW_COLOR = "#dedede";
    var BORDER_COLOR = "#e3e3e3";

   // var cornerY = height - CORNER_SIZE;
   // var cornerX = width - CORNER_SIZE;
   // var sideY = height - padding;
    //var sideX = width - padding;

    function drawCorner(ctx) {

        //White background
        ctx.beginPath();
        ctx.fillStyle = "#FFF";
        ctx.moveTo(0, 0);
        ctx.lineTo(0, CORNER_SIZE);
        ctx.lineTo(4, CORNER_SIZE);
        ctx.quadraticCurveTo(0, 0, CORNER_SIZE, 4);
        ctx.lineTo(CORNER_SIZE, 0);
        ctx.closePath();
        ctx.fill();
        //Shadow
        ctx.beginPath();
        ctx.strokeStyle = "#dedede";
        ctx.lineWidth = 4;
        ctx.moveTo(shadowZero, CORNER_SIZE);
        ctx.quadraticCurveTo(shadowZero, shadowZero, shadowRadius, shadowZero);
        ctx.lineTo(CORNER_SIZE, shadowZero);
        ctx.stroke();

        //white frame
        ctx.beginPath();
        ctx.strokeStyle = "#FFF";
        ctx.lineWidth = 6;
        ctx.moveTo(whiteZero, CORNER_SIZE);
        ctx.lineTo(whiteZero, whiteRadius);
        ctx.quadraticCurveTo(whiteZero, whiteZero, whiteRadius, whiteZero);
        ctx.lineTo(16, whiteZero);
        ctx.stroke();
        // Draw inner border
        ctx.beginPath();
        ctx.strokeStyle = BORDER_COLOR;
        ctx.lineWidth = 1;
        ctx.moveTo(innerZero, innerRadius);
        ctx.quadraticCurveTo(innerZero, innerZero, innerRadius, innerZero);
        ctx.stroke();
    }
    /*----CREATE TOP LEFT CORNER----*/
    drawCorner(ContextTopLeft);
    /*----CREATE TOP RIGHT CORNER----*/
    ContextTopRight.translate(8, 8);
    ContextTopRight.rotate(90*Math.PI / 180);
    ContextTopRight.translate(-8, -8);
    drawCorner(ContextTopRight);

    /*----CREATE BOTTOM LEFT CORNER----*/
    ContextBottomLeft.translate(8, 8);
    ContextBottomLeft.rotate(-90 * Math.PI / 180);
    ContextBottomLeft.translate(-8, -8);
    drawCorner(ContextBottomLeft);

    /*----CREATE BOTTOM RIGHT CORNER----*/
    ContextBottomRight.translate(8, 8);
    ContextBottomRight.rotate(180 * Math.PI / 180);
    ContextBottomRight.translate(-8, -8);
    drawCorner(ContextBottomRight);

    createHorizontalSides(ContextTop);

    ContextBottom.translate(width / 2, 4);
    ContextBottom.rotate(180 * Math.PI / 180);
    ContextBottom.translate(-width / 2, -4);
    createHorizontalSides(ContextBottom);


    
    //White background
//    ContextTopRight.beginPath();
//    ContextTopRight.fillStyle = "#FFF";
//    ContextTopRight.moveTo(16, 16);
//    ContextTopRight.lineTo(4, 16);
//    ContextTopRight.quadraticCurveTo(16, 0, 0, 4);
//    ContextTopRight.lineTo(0, 0);
//    ContextTopRight.lineTo(16, 0);
//    ContextTopRight.closePath();
//    ContextTopRight.fill();
    //Shadow
//    ContextTopRight.beginPath();
//    ContextTopRight.strokeStyle = "#dedede";
//    ContextTopRight.lineWidth = 4;
//    ContextTopRight.moveTo(0, shadowZero);
//    ContextTopRight.quadraticCurveTo(16-shadowZero, 16-shadowZero, shadowRadius, shadowZero);
//    ContextTopRight.lineTo(16, shadowZero);
//    ContextTopRight.stroke();

    //white frame
//    ContextTopRight.beginPath();
//    ContextTopRight.strokeStyle = "#FFF";
//    ContextTopRight.lineWidth = 6;
//    ContextTopRight.moveTo(whiteZero, 16);
//    ContextTopRight.lineTo(whiteZero, whiteRadius);
//    ContextTopRight.quadraticCurveTo(whiteZero, whiteZero, whiteRadius, whiteZero);
//    ContextTopRight.lineTo(16, whiteZero);
//    ContextTopRight.stroke();
    // Draw inner border
//    ContextTopRight.beginPath();
//    ContextTopRight.strokeStyle = "#EDEDED";
//    ContextTopRight.lineWidth = 1;
//    ContextTopRight.moveTo(innerZero, innerRadius);
//    ContextTopRight.quadraticCurveTo(innerZero, innerZero, innerRadius, innerZero);
//    ContextTopRight.stroke();

    /*-----CREATE TOP FRAME------*/
    //Draw top background
   // ContextTop.beginPath();
   // ContextTop.fillStyle = "#FFF";
    //ContextTop.fillRect(0, 0, width, 8);

    /*----CREATE SIDES-----*/
    function createHorizontalSides(context) { 
    //Shadow
        context.beginPath();
        context.strokeStyle = "#dedede";
        context.lineWidth = 4;
        context.moveTo(0, shadowZero);
        context.lineTo(width, shadowZero);
        context.stroke();
        context.closePath();

    //white frame
        context.beginPath();
        context.strokeStyle = "#FFF";
        context.lineWidth = 6;
        context.moveTo(0, whiteZero);
        context.lineTo(width, whiteZero);
        context.stroke();
        context.closePath();

    // Draw inner border
        context.beginPath();
        context.strokeStyle = BORDER_COLOR;
        context.lineWidth = 1;
        context.moveTo(0, innerZero);
        context.lineTo(width, innerZero);
        context.stroke();
        context.closePath();
}
/*----CREATE VERTICAL SIDES----*/
createVerticalSides(ContextLeft);
ContextRight.translate(padding / 2, height / 2);
ContextRight.rotate(180 * Math.PI / 180);
ContextRight.translate(-padding / 2, -height / 2);
createVerticalSides(ContextRight);

function createVerticalSides(ctxt) { 


    // Draw left  background
   // ContextLeft.beginPath();
   // ContextLeft.fillStyle = "#FFF";
   // ContextLeft.fillRect(0, 0, 8, height);

    // Draw the frame shadow
    ctxt.beginPath();
    ctxt.strokeStyle = "#dedede";
    ctxt.lineWidth = 4;
    ctxt.moveTo(shadowZero, 0);
    ctxt.lineTo(shadowZero, height);
    ctxt.stroke();

    // Draw the white frame
    ctxt.beginPath();
    ctxt.strokeStyle = "#FFF";
    ctxt.lineWidth = 6;
    ctxt.moveTo(whiteZero, 0);
    ctxt.lineTo(whiteZero, height);
    ctxt.stroke();

    // Draw inner border
    ctxt.beginPath();
    ctxt.strokeStyle = BORDER_COLOR;
    ctxt.lineWidth = 1;
    ctxt.moveTo(innerZero, 0);
    ctxt.lineTo(innerZero, height);
    ctxt.stroke();
}

    /*---CREATE RIGHT FRAME---*/
   // $j('#frameRight').css('top', '0', 'left', '798');
    // Draw right background
   // ContextRight.beginPath();
    //ContextRight.fillStyle = "#FFF";
    //ContextRight.fillRect(width - 8, 0, 8, height);

    // Draw the frame shadow
//    ContextRight.beginPath();
//    ContextRight.strokeStyle = "#dedede";
//    ContextRight.lineWidth = 4;
//    ContextRight.moveTo(shadowWidth - shadowRadius, shadowZero);
//    ContextRight.quadraticCurveTo(shadowWidth, shadowZero, shadowWidth, shadowRadius);
//    ContextRight.lineTo(shadowWidth, shadowHeight - shadowRadius);
//    ContextRight.quadraticCurveTo(shadowWidth, shadowHeight, shadowWidth - shadowRadius, shadowHeight);
//    ContextRight.stroke();

    // Draw the white frame
//    ContextRight.beginPath();
//    ContextRight.strokeStyle = "#FFF";
//    ContextRight.lineWidth = 6;
//    ContextRight.moveTo(whiteWidth - whiteRadius, whiteZero);
//    ContextRight.quadraticCurveTo(whiteWidth, whiteZero, whiteWidth, whiteRadius);
//    ContextRight.lineTo(whiteWidth, whiteHeight - whiteRadius);
//    ContextRight.quadraticCurveTo(whiteWidth, whiteHeight, whiteWidth - whiteRadius, whiteHeight);
//    ContextRight.stroke();

    // Draw inner border
//    ContextRight.beginPath();
//    ContextRight.strokeStyle = "#EDEDED";
//    ContextRight.lineWidth = 1;
//    ContextRight.moveTo(innerWidth - innerRadius, innerZero);
//    ContextRight.quadraticCurveTo(innerWidth, innerZero, innerWidth, innerRadius);
//    ContextRight.lineTo(innerWidth, innerHeight - radius);
//    ContextRight.quadraticCurveTo(innerWidth, innerHeight, innerWidth - innerRadius, innerHeight);
//    ContextRight.stroke();
}