/* EVERY THING BELOW ACTUALY RENDER THE CANASA RAILS */

function clearCanvas(context, canvas) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    var w = canvas.width;
    canvas.width = 1;
    canvas.width = w;
}

function addGradient(ctx, glowTop, glowBot) {
    var my_gradient = ctx.createLinearGradient(0, glowTop, 0, glowBot);
    my_gradient.addColorStop(0, "#b5b5b5");
    //my_gradient.addColorStop(.25, "#FFA500");
    //my_gradient.addColorStop(.5, "white");
    //my_gradient.addColorStop(.75, "#FFA500");
    //my_gradient.addColorStop(0, "white");

    my_gradient.addColorStop(.5, "#FFA500");

    my_gradient.addColorStop(1, "#b5b5b5");
    return my_gradient;
}

function addBarGradient(ctx, glowTop, glowBot) {
    var my_gradient = ctx.createLinearGradient(0, glowTop, 0, glowBot);
    my_gradient.addColorStop(0, "#b5b5b5");
    my_gradient.addColorStop(.5, "white");
    my_gradient.addColorStop(1, "#b5b5b5");
    return my_gradient;
}

function drawRail(ctx, glowTop, glowBot) {

    //right left
    //$('#canvasL').height = $('.mainRailDividerLeft').height(); //canas height = the height og the parent in this case is '#railPlaceHolder'
    //document.getElementById("canvasL").height = $('#canvasL').parent('div').height();

    //right rail
    //$('#canvasR').height = $('.mainRailDividerRight').height(); //canas height = the height og the parent in this case is '#railPlaceHolder'
    //document.getElementById("canvasR").height = $('#canvasR').parent('div').height();



    var numOfRepeats = Math.ceil($('.mainRailDividerRight').height() / 475);

    var repeatOffset = 0;
    var i = 0;
    for (i = 0; i <= (numOfRepeats - 1); i++) {

        // middleCurve/Path
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(7.3, 106.4 + repeatOffset);
        ctx.bezierCurveTo(7.3, 106.4 + repeatOffset, 10.0, 108.9 + repeatOffset, 10.8, 112.6 + repeatOffset);
        ctx.bezierCurveTo(11.5, 116.4 + repeatOffset, 12.2, 121.5 + repeatOffset, 12.2, 124.7 + repeatOffset);
        ctx.bezierCurveTo(12.2, 128.0 + repeatOffset, 12.0, 136.0 + repeatOffset, 10.8, 140.6 + repeatOffset);
        ctx.bezierCurveTo(9.7, 145.3 + repeatOffset, 7.8, 152.9 + repeatOffset, 6.7, 155.8 + repeatOffset);
        ctx.bezierCurveTo(5.5, 158.7 + repeatOffset, 3.2, 170.2 + repeatOffset, 3.0, 173.4 + repeatOffset);
        ctx.bezierCurveTo(2.8, 176.5 + repeatOffset, 2.9, 184.0 + repeatOffset, 3.0, 185.7 + repeatOffset);
        ctx.bezierCurveTo(3.1, 187.5 + repeatOffset, 4.4, 196.8 + repeatOffset, 4.8, 198.1 + repeatOffset);
        ctx.bezierCurveTo(5.3, 199.5 + repeatOffset, 6.5, 205.5 + repeatOffset, 8.7, 208.4 + repeatOffset);
        ctx.bezierCurveTo(10.8, 211.3 + repeatOffset, 12.1, 213.9 + repeatOffset, 12.2, 218.6 + repeatOffset);
        ctx.bezierCurveTo(12.3, 223.4 + repeatOffset, 11.2, 228.8 + repeatOffset, 9.7, 232.4 + repeatOffset);
        ctx.bezierCurveTo(8.2, 236.0 + repeatOffset, 5.1, 242.5 + repeatOffset, 4.6, 244.5 + repeatOffset);
        ctx.bezierCurveTo(4.1, 246.4 + repeatOffset, 2.7, 249.0 + repeatOffset, 2.9, 253.8 + repeatOffset);
        ctx.bezierCurveTo(3.1, 258.5 + repeatOffset, 3.9, 263.6 + repeatOffset, 5.3, 267.2 + repeatOffset);
        ctx.bezierCurveTo(6.8, 270.8 + repeatOffset, 6.2, 275.0 + repeatOffset, 8.3, 278.7 + repeatOffset);
        ctx.bezierCurveTo(9.4, 280.5 + repeatOffset, 11.8, 283.4 + repeatOffset, 11.2, 287.4 + repeatOffset);
        ctx.bezierCurveTo(10.6, 291.4 + repeatOffset, 8.4, 297.6 + repeatOffset, 6.7, 301.6 + repeatOffset);
        ctx.bezierCurveTo(4.9, 305.6 + repeatOffset, 3.4, 309.5 + repeatOffset, 5.8, 313.9 + repeatOffset);
        ctx.bezierCurveTo(8.1, 318.3 + repeatOffset, 8.7, 318.4 + repeatOffset, 10.0, 320.0 + repeatOffset);
        ctx.bezierCurveTo(11.1, 321.4 + repeatOffset, 12.2, 324.5 + repeatOffset, 10.8, 327.0 + repeatOffset);
        ctx.bezierCurveTo(9.3, 329.5 + repeatOffset, 7.3, 331.9 + repeatOffset, 6.3, 333.5 + repeatOffset);
        ctx.bezierCurveTo(5.3, 335.2 + repeatOffset, 3.7, 335.9 + repeatOffset, 4.5, 338.6 + repeatOffset);
        ctx.bezierCurveTo(5.1, 340.4 + repeatOffset, 6.7, 341.0 + repeatOffset, 7.5, 344.7 + repeatOffset);
        ctx.bezierCurveTo(8.3, 348.4 + repeatOffset, 7.1, 347.6 + repeatOffset, 6.9, 347.0 + repeatOffset);
        ctx.bezierCurveTo(6.8, 346.3 + repeatOffset, 5.3, 343.5 + repeatOffset, 4.6, 342.7 + repeatOffset);
        ctx.bezierCurveTo(3.8, 341.9 + repeatOffset, 1.9, 338.5 + repeatOffset, 2.4, 336.0 + repeatOffset);
        ctx.bezierCurveTo(2.9, 333.5 + repeatOffset, 6.2, 330.8 + repeatOffset, 7.3, 329.1 + repeatOffset);
        ctx.bezierCurveTo(8.3, 327.5 + repeatOffset, 10.7, 323.8 + repeatOffset, 8.8, 321.3 + repeatOffset);
        ctx.bezierCurveTo(7.0, 318.8 + repeatOffset, 3.4, 316.5 + repeatOffset, 2.9, 312.2 + repeatOffset);
        ctx.bezierCurveTo(2.4, 308.0 + repeatOffset, 2.4, 304.8 + repeatOffset, 4.6, 300.6 + repeatOffset);
        ctx.bezierCurveTo(6.8, 296.5 + repeatOffset, 7.5, 293.5 + repeatOffset, 8.3, 291.4 + repeatOffset);
        ctx.bezierCurveTo(9.0, 289.2 + repeatOffset, 10.6, 285.0 + repeatOffset, 7.8, 281.8 + repeatOffset);
        ctx.bezierCurveTo(5.1, 278.5 + repeatOffset, 4.4, 275.8 + repeatOffset, 4.2, 273.7 + repeatOffset);
        ctx.bezierCurveTo(3.9, 271.6 + repeatOffset, 3.3, 268.9 + repeatOffset, 2.4, 266.1 + repeatOffset);
        ctx.bezierCurveTo(1.6, 264.0 + repeatOffset, -0.1, 257.7 + repeatOffset, 0.1, 253.6 + repeatOffset);
        ctx.bezierCurveTo(0.3, 249.5 + repeatOffset, 1.3, 244.5 + repeatOffset, 3.1, 241.2 + repeatOffset);
        ctx.bezierCurveTo(4.9, 237.9 + repeatOffset, 7.1, 232.9 + repeatOffset, 8.0, 230.0 + repeatOffset);
        ctx.bezierCurveTo(8.9, 227.0 + repeatOffset, 10.3, 219.7 + repeatOffset, 9.8, 217.1 + repeatOffset);
        ctx.bezierCurveTo(9.2, 214.5 + repeatOffset, 5.7, 210.5 + repeatOffset, 4.7, 207.6 + repeatOffset);
        ctx.bezierCurveTo(3.7, 204.7 + repeatOffset, 1.3, 197.7 + repeatOffset, 0.9, 193.7 + repeatOffset);
        ctx.bezierCurveTo(0.5, 189.7 + repeatOffset, -0.3, 180.7 + repeatOffset, 0.1, 175.6 + repeatOffset);
        ctx.bezierCurveTo(0.4, 170.5 + repeatOffset, 2.9, 160.8 + repeatOffset, 4.1, 156.3 + repeatOffset);
        ctx.bezierCurveTo(5.3, 151.8 + repeatOffset, 7.4, 142.7 + repeatOffset, 8.1, 140.0 + repeatOffset);
        ctx.bezierCurveTo(8.8, 137.2 + repeatOffset, 9.6, 129.0 + repeatOffset, 9.5, 126.5 + repeatOffset);
        ctx.bezierCurveTo(9.4, 123.9 + repeatOffset, 10.2, 116.2 + repeatOffset, 8.7, 114.1 + repeatOffset);
        ctx.bezierCurveTo(7.2, 112.0 + repeatOffset, 6.8, 109.9 + repeatOffset, 6.8, 109.0 + repeatOffset);
        ctx.bezierCurveTo(6.8, 108.0 + repeatOffset, 7.3, 106.4 + repeatOffset, 7.3, 106.4 + repeatOffset);
        ctx.closePath();
        //ctx.fillStyle = "rgb(197, 35, 38)";
        ctx.fillStyle = addGradient(ctx, glowTop, glowBot);
        ctx.fill();

        // middleCurve/Path
        ctx.beginPath();
        ctx.moveTo(66.5, 256.4 + repeatOffset);
        //ctx.fillStyle = "rgb(197, 35, 38)";
        ctx.fillStyle = addGradient(ctx, glowTop, glowBot);
        ctx.fill();
        ctx.restore();

        // bar/Guide
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(8.3, 2.3 + repeatOffset);
        ctx.lineTo(5.3, 2.3 + repeatOffset);
        ctx.lineTo(5.3, 468.2 + repeatOffset);
        ctx.lineTo(8.3, 468.2 + repeatOffset);
        ctx.lineTo(8.3, 2.3 + repeatOffset);
        ctx.closePath();
        ctx.fillStyle = addBarGradient(ctx, glowTop, glowBot);
        //ctx.fillStyle = "#b5b5b5" //rgb(197, 35, 38)";
        ctx.fill();
        ctx.restore();

        // top/Path
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(3.8, 3.7 + repeatOffset);
        ctx.bezierCurveTo(3.8, 3.7 + repeatOffset, 3.4, 4.1 + repeatOffset, 2.8, 4.1 + repeatOffset);
        ctx.bezierCurveTo(2.3, 4.2 + repeatOffset, 1.9, 3.5 + repeatOffset, 1.7, 3.4 + repeatOffset);
        ctx.bezierCurveTo(1.4, 3.3 + repeatOffset, 0.9, 1.8 + repeatOffset, 1.4, 1.3 + repeatOffset);
        ctx.bezierCurveTo(1.9, 0.8 + repeatOffset, 2.6, 1.2 + repeatOffset, 3.1, 0.8 + repeatOffset);
        ctx.bezierCurveTo(3.7, 0.3 + repeatOffset, 4.6, -0.0 + repeatOffset, 5.2, 0.0 + repeatOffset);
        ctx.bezierCurveTo(5.9, 0.0 + repeatOffset, 6.0, 1.0 + repeatOffset, 6.8, 1.0 + repeatOffset);
        ctx.bezierCurveTo(7.7, 1.0 + repeatOffset, 9.1, 1.2 + repeatOffset, 9.9, 1.6 + repeatOffset);
        ctx.bezierCurveTo(10.6, 2.1 + repeatOffset, 11.6, 2.8 + repeatOffset, 12.0, 3.3 + repeatOffset);
        ctx.bezierCurveTo(12.5, 3.8 + repeatOffset, 13.6, 5.5 + repeatOffset, 12.6, 7.3 + repeatOffset);
        ctx.bezierCurveTo(11.7, 9.2 + repeatOffset, 10.7, 9.5 + repeatOffset, 9.3, 10.0 + repeatOffset);
        ctx.bezierCurveTo(8.0, 10.6 + repeatOffset, 6.2, 10.4 + repeatOffset, 4.3, 11.5 + repeatOffset);
        ctx.bezierCurveTo(2.3, 12.5 + repeatOffset, 1.6, 14.5 + repeatOffset, 2.4, 15.5 + repeatOffset);
        ctx.bezierCurveTo(3.2, 16.5 + repeatOffset, 4.3, 17.2 + repeatOffset, 5.2, 17.2 + repeatOffset);
        ctx.bezierCurveTo(6.1, 17.2 + repeatOffset, 6.9, 16.2 + repeatOffset, 7.1, 15.5 + repeatOffset);
        ctx.bezierCurveTo(7.3, 14.8 + repeatOffset, 6.7, 13.2 + repeatOffset, 7.4, 12.7 + repeatOffset);
        ctx.bezierCurveTo(8.1, 12.3 + repeatOffset, 9.6, 12.0 + repeatOffset, 10.3, 12.4 + repeatOffset);
        ctx.bezierCurveTo(10.9, 12.9 + repeatOffset, 11.5, 13.7 + repeatOffset, 11.2, 14.6 + repeatOffset);
        ctx.bezierCurveTo(11.0, 15.5 + repeatOffset, 9.2, 15.5 + repeatOffset, 8.7, 16.1 + repeatOffset);
        ctx.bezierCurveTo(8.2, 16.6 + repeatOffset, 7.0, 17.3 + repeatOffset, 7.6, 17.8 + repeatOffset);
        ctx.bezierCurveTo(8.1, 18.3 + repeatOffset, 10.0, 17.5 + repeatOffset, 10.7, 18.3 + repeatOffset);
        ctx.bezierCurveTo(11.3, 19.2 + repeatOffset, 11.3, 20.3 + repeatOffset, 10.8, 21.0 + repeatOffset);
        ctx.bezierCurveTo(10.2, 21.6 + repeatOffset, 9.8, 22.0 + repeatOffset, 9.6, 22.3 + repeatOffset);
        ctx.bezierCurveTo(9.5, 22.6 + repeatOffset, 7.3, 23.1 + repeatOffset, 7.3, 22.0 + repeatOffset);
        ctx.bezierCurveTo(7.3, 20.9 + repeatOffset, 7.3, 20.4 + repeatOffset, 7.5, 20.1 + repeatOffset);
        ctx.bezierCurveTo(7.6, 19.8 + repeatOffset, 7.3, 19.5 + repeatOffset, 6.6, 19.6 + repeatOffset);
        ctx.bezierCurveTo(5.8, 19.8 + repeatOffset, 3.6, 18.8 + repeatOffset, 3.0, 18.4 + repeatOffset);
        ctx.bezierCurveTo(2.4, 17.9 + repeatOffset, 0.3, 15.9 + repeatOffset, 0.3, 14.6 + repeatOffset);
        ctx.bezierCurveTo(0.2, 13.3 + repeatOffset, 0.8, 11.2 + repeatOffset, 2.3, 10.3 + repeatOffset);
        ctx.bezierCurveTo(3.7, 9.4 + repeatOffset, 6.8, 8.9 + repeatOffset, 8.0, 8.3 + repeatOffset);
        ctx.bezierCurveTo(9.1, 7.8 + repeatOffset, 9.8, 7.5 + repeatOffset, 10.1, 7.1 + repeatOffset);
        ctx.bezierCurveTo(10.4, 6.8 + repeatOffset, 11.1, 5.1 + repeatOffset, 10.0, 4.3 + repeatOffset);
        ctx.bezierCurveTo(8.9, 3.5 + repeatOffset, 8.1, 2.5 + repeatOffset, 7.1, 2.3 + repeatOffset);
        ctx.bezierCurveTo(6.0, 2.1 + repeatOffset, 5.0, 2.5 + repeatOffset, 4.7, 2.8 + repeatOffset);
        ctx.bezierCurveTo(4.4, 3.2 + repeatOffset, 3.8, 3.7 + repeatOffset, 3.8, 3.7 + repeatOffset);
        ctx.closePath();
        ctx.fillStyle = addGradient(ctx, glowTop, glowBot);
        //ctx.fillStyle = "rgb(162, 162, 162)";
        ctx.fill();
        ctx.restore();

        // bottom/Path
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(9.8, 462.7 + repeatOffset);
        ctx.bezierCurveTo(9.8, 462.7 + repeatOffset, 8.7, 463.7 + repeatOffset, 9.2, 464.3 + repeatOffset);
        ctx.bezierCurveTo(9.6, 464.9 + repeatOffset, 10.6, 465.2 + repeatOffset, 10.7, 465.5 + repeatOffset);
        ctx.bezierCurveTo(10.9, 465.7 + repeatOffset, 10.8, 466.4 + repeatOffset, 10.3, 466.8 + repeatOffset);
        ctx.bezierCurveTo(9.8, 467.3 + repeatOffset, 9.5, 467.8 + repeatOffset, 7.6, 467.5 + repeatOffset);
        ctx.bezierCurveTo(5.6, 467.3 + repeatOffset, 3.6, 466.5 + repeatOffset, 3.4, 465.2 + repeatOffset);
        ctx.bezierCurveTo(3.2, 463.8 + repeatOffset, 3.3, 463.0 + repeatOffset, 4.2, 462.4 + repeatOffset);
        ctx.bezierCurveTo(5.1, 461.8 + repeatOffset, 6.8, 461.3 + repeatOffset, 7.1, 460.3 + repeatOffset);
        ctx.bezierCurveTo(7.3, 459.4 + repeatOffset, 7.6, 457.7 + repeatOffset, 7.3, 457.2 + repeatOffset);
        ctx.bezierCurveTo(7.0, 456.8 + repeatOffset, 7.3, 456.8 + repeatOffset, 7.1, 457.7 + repeatOffset);
        ctx.bezierCurveTo(6.8, 458.6 + repeatOffset, 5.8, 459.5 + repeatOffset, 4.7, 459.8 + repeatOffset);
        ctx.bezierCurveTo(3.5, 460.1 + repeatOffset, 1.5, 461.3 + repeatOffset, 0.9, 462.5 + repeatOffset);
        ctx.bezierCurveTo(0.5, 463.4 + repeatOffset, 0.3, 465.5 + repeatOffset, 0.9, 466.5 + repeatOffset);
        ctx.bezierCurveTo(1.6, 467.5 + repeatOffset, 3.0, 468.4 + repeatOffset, 4.3, 468.9 + repeatOffset);
        ctx.bezierCurveTo(5.6, 469.3 + repeatOffset, 6.8, 469.8 + repeatOffset, 7.4, 470.0 + repeatOffset);
        ctx.bezierCurveTo(7.9, 470.2 + repeatOffset, 9.8, 470.2 + repeatOffset, 10.8, 469.4 + repeatOffset);
        ctx.bezierCurveTo(11.8, 468.6 + repeatOffset, 12.3, 467.5 + repeatOffset, 12.3, 466.5 + repeatOffset);
        ctx.bezierCurveTo(12.3, 465.6 + repeatOffset, 12.8, 465.3 + repeatOffset, 12.9, 465.0 + repeatOffset);
        ctx.bezierCurveTo(13.1, 464.7 + repeatOffset, 13.4, 462.8 + repeatOffset, 12.3, 462.4 + repeatOffset);
        ctx.bezierCurveTo(11.3, 462.0 + repeatOffset, 10.1, 462.3 + repeatOffset, 9.8, 462.7 + repeatOffset);
        ctx.closePath();
        ctx.fillStyle = addGradient(ctx, glowTop, glowBot);
        ctx.fill();
        ctx.restore();

        repeatOffset += 475;
    }
}




/* ************ TEST FOR CANVAS TAG SUPPORT *********************** */

$(window).load(function () {

    if (Modernizr.canvas) {

        $('.mainRailDividerLeft').css('background-image', 'url()');
        $('.mainRailDividerRight').css('background-image', 'url()');

        //Insert Left Rail
        $('.mainRailDividerLeft').html("<canvas id='canvasL' width='15' ></canvas>");

        //Insert Right Rail
        $('.mainRailDividerRight').html("<canvas id='canvasR' width='15' style='margin-left: 8px;' ></canvas>");

        //draw left rail
        //document.getElementById("canvasL").height = $('.mainRailDividerLeft').height();

        //document.getElementById("canvasL").height = $('#canvasL').parent('div').height();
        var canvasL = document.getElementById("canvasL");
        var ctx = canvasL.getContext("2d");
        drawRail(ctx, 0, 300);

        //draw right rail
        //document.getElementById("canvasR").height = $('.mainRailDividerRight').height();
        //document.getElementById("canvasR").height = $('#canvasR').parent('div').height();
        var canvasR = document.getElementById("canvasR");
        var ctx = canvasR.getContext("2d");
        drawRail(ctx, 0, 300);

        /* *********************** add mouse move eventlisteners */
        $("body").mousemove(function (e) {

            var bannerAndNavOffset = 359;
            var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
            $("#client").text(" page " + pageCoords);
            var glowTop = (e.pageY - bannerAndNavOffset) - 60;
            var glowBot = (e.pageY - bannerAndNavOffset) + 60;

            //DRAW LEFT RAIL
            var canvasL = document.getElementById("canvasL");
            var ctx = canvasL.getContext("2d");
            clearCanvas(ctx, canvasL);
            drawRail(ctx, glowTop, glowBot);

            //DRAW RIGHT RAIL
            var canvasR = document.getElementById("canvasR");
            var ctx = canvasR.getContext("2d");
            clearCanvas(ctx, canvasR);
            drawRail(ctx, glowTop, glowBot);

            //if the rail container is > the <canvas> resize to fit
            if ($('.mainRailDividerRight').height() > document.getElementById("canvasR").height) {
                document.getElementById("canvasR").height = $('.mainRailDividerRight').height();
                document.getElementById("canvasL").height = $('.mainRailDividerLeft').height();
            }

        });
    } else {
        //$('#railPlaceHolder').replaceWith("<div id='rail' style='background-color:grey; width: 15px; height:1000px; display: block;'></div>");
    }
});

/* ************ END TEST FOR CANVAS TAG SUPPORT ***************** */