// based on Bill Mill's HTML5 tutorial: http://billmill.org/static/canvastutorial/

function playGame() {
    
    //get a reference to the canvas
	canvas = document.getElementById("canvas");
	ctx = canvas.getContext("2d");
    WIDTH = document.getElementById("canvas").clientWidth ;
    HEIGHT = document.getElementById("canvas").clientHeight ;
    
    //init game
    
    livesLeft = 3;
    
    x = (WIDTH / 2);
    y = 150;
    dx = ((Math.floor(Math.random()*8)*4)-16);
    dy = 10;
    
    score1 = 0;
    score2 = 0;
    score3 = 0;

	soundNote = 1;
	
	//init paddle
	paddlex = WIDTH / 2;
    paddleh = 20;
    paddlew = 150;
	paddley = (HEIGHT-paddleh-20);
	
	rightDown = false;
	leftDown = false;
	
$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);
$(document).mousemove(onMouseMove);

canvasMinX = 70;
canvasMaxX = canvasMinX + WIDTH;

paused = false;
infoToggle = "off";

	//start game loop
	gameLoopIntervalId = setInterval(draw, 20);

}




//set rightDown or leftDown if the right or left keys are down
function onKeyDown(evt) {
if (evt.keyCode == 39) rightDown = true;
else if (evt.keyCode == 37) leftDown = true;
}

//and unset them when the right or left key is released
function onKeyUp(evt) {
if (evt.keyCode == 39) rightDown = false;
else if (evt.keyCode == 37) leftDown = false;
}

// get mouse
function onMouseMove(evt) {
  if (evt.pageX > canvasMinX && evt.pageX < canvasMaxX) {
    paddlex = evt.pageX - canvasMinX - 38;
  }
}


// get accelerometer
window.ondevicemotion = function(e) {  
var accelerationX = event.accelerationIncludingGravity.x * 5;  
if (accelerationX > 3) {rightDown = true; leftDown = false}
else if (accelerationX < -3) {rightDown = false; leftDown = true}
else if (accelerationX > -3 && accelerationX < 3){rightDown = false; leftDown = false}
}  


// Puck
function puck(x,y) {
	ctx.fillStyle = "rgb(255, 0, 180)";
	ctx.beginPath();
	ctx.rect(x, y, 20, 20);
	ctx.closePath();
	ctx.fill();
}

// Draw Paddle
function paddle(x,y,w,h) {
	ctx.fillStyle = "rgb(255, 0, 180)";
    ctx.beginPath();
	ctx.rect(x,y,w,h);
	ctx.closePath();
	ctx.fill();
}

// Draw Back
function drawBack() {
	ctx.fillStyle = "rgb(0,0,0)";
    ctx.beginPath();
	ctx.rect(1,1,WIDTH,HEIGHT);
	ctx.closePath();
	ctx.fill();
}

// DRAW LOGO
function drawLogo() {

var drawLogoPlusX = (WIDTH * .5 ) - 282.5;

ctx.save();
ctx.translate(drawLogoPlusX,100);
ctx.fillStyle =  "rgba(255, 255, 255, 0.2)";
ctx.beginPath();
ctx.moveTo(270.585 ,215.68);
ctx.bezierCurveTo(285.11499999999995 , 215.686, 297.44899999999996 , 203.351, 297.46099999999996 , 188.626);
ctx.lineTo(297.48099999999994, 141.666);
ctx.lineTo(280.77199999999993, 141.661);
ctx.lineTo(280.74999999999994, 188.613);
ctx.bezierCurveTo(280.7459999999999, 194.385, 276.3639999999999, 199.161, 270.59299999999996, 199.163);
ctx.bezierCurveTo(264.81999999999994, 199.155, 260.24699999999996, 194.37900000000002, 260.25199999999995, 188.609);
ctx.lineTo(260.27399999999994, 141.645);
ctx.lineTo(243.75399999999993, 141.639);
ctx.lineTo(243.73399999999992, 188.401);
ctx.bezierCurveTo(243.727, 202.931, 255.46, 215.672, 270.585, 215.68);
ctx.closePath();
ctx.fill();
ctx.restore();

ctx.save();
ctx.translate(drawLogoPlusX,100);
ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
ctx.beginPath();
ctx.moveTo(214.67, 215.65);
ctx.bezierCurveTo(229.79399999999998, 215.65800000000002, 241.539, 203.321, 241.545, 188.398);
ctx.lineTo(241.56599999999997, 141.638);
ctx.lineTo(225.25099999999998, 141.62900000000002);
ctx.lineTo(225.22899999999998, 188.39200000000002);
ctx.bezierCurveTo(225.226, 194.163, 220.648, 199.13800000000003, 214.87699999999998,199.13100000000003);
ctx.bezierCurveTo(209.10799999999998, 199.12800000000004, 204.73, 194.35300000000004, 204.73, 188.58600000000004);
ctx.lineTo(204.753, 141.61900000000003);
ctx.lineTo(188.03699999999998, 141.61200000000002);
ctx.lineTo(188.01899999999998, 188.57500000000002);
ctx.bezierCurveTo(188.01, 203.302, 199.947, 215.443, 214.67,215.65);
ctx.closePath();
ctx.fill();
ctx.restore();

ctx.save();
ctx.translate(drawLogoPlusX,100);
ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
ctx.beginPath();
ctx.moveTo(405.942,124.309);
ctx.lineTo(405.922,174.78);
ctx.bezierCurveTo(401.21000000000004,154.291,382.69500000000005,138.631,360.754,138.618);
ctx.bezierCurveTo(339.16,138.60399999999998,320.858,153.468,315.776,173.63299999999998);
ctx.bezierCurveTo(315.783,162.813,315.78700000000003,152.046,315.788,141.676);
ctx.lineTo(299.07300000000004,141.665);
ctx.lineTo(299.07700000000006,144.001);
ctx.lineTo(299.07700000000006,144.001);
ctx.lineTo(298.85100000000006,188.97);
ctx.bezierCurveTo(298.8500000000001,201.106,291.0830000000001,211.85,280.13300000000004,215.824);
ctx.lineTo(280.13500000000005,215.90900000000002);
ctx.bezierCurveTo(277.18500000000006,216.918,273.98600000000005,217.47100000000003,270.583,217.467);
ctx.bezierCurveTo(257.05100000000004,217.46,246.11100000000002,208.702,242.73200000000003,196.363);
ctx.bezierCurveTo(239.34600000000003,208.504,227.60300000000004,217.64600000000002,214.47000000000003,217.441);
ctx.bezierCurveTo(198.74800000000002,217.237,186.02300000000002,204.491,186.02600000000004,188.776);
ctx.lineTo(186.05100000000004,141.61);
ctx.lineTo(169.53300000000004,141.615);
ctx.lineTo(169.51400000000004,188.57);
ctx.bezierCurveTo(169.49900000000005,213.439,189.58700000000005,233.94799999999998,214.65900000000005,234.158);
ctx.bezierCurveTo(224.80800000000005,234.16199999999998,234.76100000000005,230.783,242.52100000000004,224.41899999999998);
ctx.bezierCurveTo(250.27800000000005,230.39299999999997,259.83000000000004,233.97899999999998,270.17800000000005,234.182);
ctx.bezierCurveTo(273.54200000000003,234.17999999999998,276.88300000000004,233.80599999999998,280.12600000000003,233.08599999999998);
ctx.lineTo(280.12600000000003,233.33499999999998);
ctx.bezierCurveTo(285.63500000000005,232.04099999999997,290.745,229.70799999999997,295.29100000000005,226.61399999999998);
ctx.bezierCurveTo(295.34800000000007,226.57899999999998,295.41200000000003,226.54899999999998,295.46400000000006,226.51099999999997);
ctx.lineTo(295.46200000000005,226.50099999999998);
ctx.bezierCurveTo(306.27900000000005,219.07699999999997,313.76300000000003,207.21599999999998,315.24700000000007,193.96799999999996);
ctx.bezierCurveTo(319.4510000000001,215.30299999999997,338.3020000000001,231.33099999999996,360.71100000000007,231.34499999999997);
ctx.bezierCurveTo(369.4650000000001,231.34599999999998,378.4190000000001,231.34899999999996,387.17500000000007,231.35699999999997);
ctx.bezierCurveTo(382.80000000000007,220.41099999999997,372.25900000000007,214.43399999999997,360.7170000000001,214.42999999999998);
ctx.bezierCurveTo(344.3960000000001,214.42,331.2700000000001,201.27999999999997,331.2790000000001,184.96299999999997);
ctx.bezierCurveTo(331.2940000000001,168.64799999999997,344.42700000000013,155.51699999999997,360.7460000000001,155.52899999999997);
ctx.bezierCurveTo(376.1060000000001,155.53799999999995,388.3400000000001,167.07199999999997,389.97800000000007,181.65699999999998);
ctx.lineTo(405.9150000000001,181.65999999999997);
ctx.lineTo(405.8910000000001,227.22699999999998);
ctx.bezierCurveTo(399.66600000000005,208.60799999999998,381.5230000000001,194.97699999999998,361.1280000000001,195.52299999999997);
ctx.bezierCurveTo(355.1520000000001,195.71799999999996,350.1850000000001,190.94299999999996,350.1850000000001,184.96999999999997);
ctx.bezierCurveTo(350.1870000000001,179.20099999999996,355.1620000000001,174.43099999999998,360.7400000000001,174.43199999999996);
ctx.bezierCurveTo(365.5000000000001,174.43399999999997,369.49400000000014,177.48699999999997,370.91000000000014,181.64899999999997);
ctx.lineTo(387.76800000000014,181.65399999999997);
ctx.bezierCurveTo(386.14700000000016,168.26999999999998,374.90500000000014,157.72099999999998,360.7400000000001,157.71599999999998);
ctx.bezierCurveTo(345.82100000000014,157.71399999999997,333.4710000000001,169.84499999999997,333.4710000000001,184.96399999999997);
ctx.bezierCurveTo(333.46300000000014,200.09199999999998,345.7980000000001,212.23099999999997,360.7190000000001,212.23899999999998);
ctx.bezierCurveTo(373.2520000000001,212.24699999999999,384.7930000000001,219.21499999999997,389.5600000000001,231.35599999999997);
ctx.lineTo(405.8940000000001,231.36299999999997);
ctx.lineTo(407.0730000000001,231.35899999999998);
ctx.lineTo(422.6070000000001,231.36599999999999);
ctx.lineTo(422.6460000000001,148.99099999999999);
ctx.bezierCurveTo(422.651,138.244,415.691,128.294,405.942,124.309);
ctx.closePath();
ctx.fill();
ctx.restore();

ctx.save();
ctx.translate(drawLogoPlusX,100);
ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
ctx.beginPath();
ctx.moveTo(440.599,124.326);
ctx.lineTo(440.589,140.763);
ctx.bezierCurveTo(437.317,123.31,423.597,108.761,405.949,104.59400000000001);
ctx.lineTo(405.94300000000004,122.123);
ctx.bezierCurveTo(416.88700000000006,126.104,424.63900000000007,136.854,424.636,148.988);
ctx.lineTo(424.59700000000004,231.37099999999998);
ctx.lineTo(440.545,231.37399999999997);
ctx.lineTo(441.314,231.37799999999996);
ctx.lineTo(457.264,231.38799999999995);
ctx.lineTo(457.302,149.00899999999996);
ctx.bezierCurveTo(457.307,138.263,450.35,128.307,440.599,124.326);
ctx.closePath();
ctx.fill();
ctx.restore();

ctx.save();
ctx.translate(drawLogoPlusX,100);
ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
ctx.beginPath();
ctx.moveTo(486.944,212.695);
ctx.bezierCurveTo(497.684,212.70399999999998,507.565,206.016,511.62600000000003,195.992);
ctx.bezierCurveTo(512.15,194.22299999999998,515.494,175.628,515.494,175.628);
ctx.bezierCurveTo(519.472,164.68499999999997,530.221,156.92999999999998,542.3580000000001,156.934);
ctx.lineTo(564.4200000000001,156.948);
ctx.lineTo(564.4230000000001,140.226);
ctx.lineTo(542.1680000000001,140.226);
ctx.bezierCurveTo(521.2740000000001,140.214,502.76100000000014,155.32999999999998,497.9780000000001,175.619);
ctx.lineTo(494.9850000000001,193.058);
ctx.lineTo(494.9730000000001,193.03199999999998);
ctx.bezierCurveTo(494.46300000000014,196.29299999999998,491.1800000000001,195.94299999999998,491.1800000000001,195.94299999999998);
ctx.lineTo(491.2190000000001,195.98299999999998);
ctx.lineTo(475.9860000000001,195.97499999999997);
ctx.lineTo(476.0030000000001,148.80999999999997);
ctx.bezierCurveTo(476.0190000000001,127.91799999999998,460.9030000000001,109.40299999999998,440.6080000000001,104.61499999999998);
ctx.lineTo(440.5940000000001,122.13699999999997);
ctx.bezierCurveTo(451.5430000000001,126.11599999999997,459.29500000000013,136.86899999999997,459.2920000000001,149.00799999999998);
ctx.lineTo(459.2560000000001,231.38599999999997);
ctx.lineTo(464.87700000000007,231.39399999999998);
ctx.lineTo(475.97400000000005,231.39499999999998);
ctx.lineTo(487.129,231.397);
ctx.bezierCurveTo(508.026,231.40599999999998,527.514,215.095,531.317,195.999);
ctx.bezierCurveTo(532.199,191.92,533.84,181.579,534.316,178.551);
ctx.bezierCurveTo(534.83,175.29899999999998,538.113,175.641,538.113,175.641);
ctx.lineTo(564.408,175.654);
ctx.lineTo(564.418,158.939);
ctx.lineTo(542.363,158.93);
ctx.bezierCurveTo(531.613,158.917,520.8850000000001,166.506,517.677,175.633);
ctx.bezierCurveTo(516.788,177.906,513.814,195.997,513.814,195.997);
ctx.bezierCurveTo(509.82599999999996,206.93300000000002,499.07899999999995,214.69400000000002,486.941,214.68400000000003);
ctx.lineTo(475.979,214.68100000000004);
ctx.lineTo(475.977,212.69100000000003);
ctx.lineTo(486.944,212.695);
ctx.closePath();
ctx.fill();
ctx.restore();

ctx.save();
ctx.translate(drawLogoPlusX,100);
ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
ctx.beginPath();
ctx.moveTo(223.568,109.461);
ctx.lineTo(223.56400000000002,125.981);
ctx.bezierCurveTo(202.95100000000002,125.97,185.52500000000003,112.056,179.80700000000002,93.21799999999999);
ctx.lineTo(179.936,125.36099999999999);
ctx.lineTo(163.226,125.35199999999999);
ctx.lineTo(163.042,80.392);
ctx.bezierCurveTo(163.048,68.249,155.29,57.498999999999995,144.348,53.51599999999999);
ctx.lineTo(144.357,36.007999999999996);
ctx.bezierCurveTo(160.395,39.79299999999999,173.164,52.151999999999994,177.823,67.482);
ctx.bezierCurveTo(177.83,51.498,177.839,35.533,177.844,19.702999999999996);
ctx.bezierCurveTo(187.59199999999998,23.684999999999995,194.355,33.63999999999999,194.34799999999998,44.184999999999995);
ctx.bezierCurveTo(194.345,51.74699999999999,194.34699999999998,50.351,194.332,80);
ctx.bezierCurveTo(194.326,96.118,207.252,109.454,223.568,109.461);
ctx.closePath();
ctx.moveTo(263.316,68.49);
ctx.lineTo(289.38199999999995,68.505);
ctx.bezierCurveTo(285.00399999999996,58.15299999999999,274.65999999999997,51.181999999999995,263.31899999999996,51.17699999999999);
ctx.bezierCurveTo(247.99699999999996,51.36899999999999,235.25699999999995,63.90299999999999,235.25199999999995,79.41999999999999);
ctx.bezierCurveTo(235.24499999999995,94.74399999999999,248.37199999999996,107.48399999999998,263.489,107.49099999999999);
ctx.bezierCurveTo(275.23299999999995,107.29299999999999,285.186,100.13799999999999,289.368,90.19099999999999);
ctx.lineTo(263.5,90.17999999999999);
ctx.bezierCurveTo(257.728,90.17999999999999,252.559,85.198,252.559,79.42699999999999);
ctx.bezierCurveTo(252.563,73.461,257.542,68.485,263.316,68.49);
ctx.closePath();
ctx.moveTo(344.295,50.219);
ctx.bezierCurveTo(329.569,50.214,317.62,65.929,317.615,80.654);
ctx.bezierCurveTo(317.612,95.574,317.604,110.103,317.6,125.424);
ctx.lineTo(334.112,125.43100000000001);
ctx.bezierCurveTo(334.118,110.51000000000002,334.12800000000004,92.00400000000002,334.134,77.08200000000002);
ctx.bezierCurveTo(334.136,71.50800000000002,338.514,66.53400000000002,344.283,66.53600000000003);
ctx.bezierCurveTo(350.255,66.53900000000003,354.63,71.51600000000003,354.62600000000003,77.09000000000003);
ctx.bezierCurveTo(354.62000000000006,92.01200000000003,354.612,110.51900000000003,354.605,125.43700000000004);
ctx.lineTo(371.31800000000004,125.44700000000005);
ctx.bezierCurveTo(371.326,110.52600000000004,371.336,91.81800000000004,371.34200000000004,77.09800000000004);
ctx.bezierCurveTo(371.355,62.173,359.217,50.226,344.295,50.219);
ctx.closePath();
ctx.moveTo(333.353,35.29);
ctx.bezierCurveTo(333.165,17.185,316.458,2.0519999999999996,299.145,0.2530000000000001);
ctx.lineTo(299.143,17.366);
ctx.bezierCurveTo(309.885,21.549,317.638,31.9,317.635,44.037);
ctx.bezierCurveTo(317.627,52.595,317.626,61.351,317.622,69.908);
ctx.bezierCurveTo(322.00100000000003,59.159,332.356,48.223,344.288,48.227000000000004);
ctx.bezierCurveTo(360.21000000000004,48.237,373.342,60.979000000000006,373.334,76.89500000000001);
ctx.bezierCurveTo(373.324,91.822,373.323,110.524,373.312,125.447);
ctx.lineTo(389.629,125.46000000000001);
ctx.bezierCurveTo(389.632,110.53300000000002,389.644,92.028,389.644,77.10300000000001);
ctx.bezierCurveTo(389.665,47.65,361.618,26.944,333.353,35.29);
ctx.closePath();
ctx.moveTo(315.644,43.843);
ctx.bezierCurveTo(315.632,71.296,315.619,98.16300000000001,315.608,125.424);
ctx.lineTo(299.09000000000003,125.412);
ctx.bezierCurveTo(299.093,120.349,299.096,115.307,299.093,110.25200000000001);
ctx.bezierCurveTo(290.22200000000004,120.30900000000001,277.24600000000004,126.798,263.285,126.792);
ctx.bezierCurveTo(246.87100000000004,126.784,232.09500000000003,117.818,223.574,104.693);
ctx.lineTo(223.572,107.27199999999999);
ctx.bezierCurveTo(208.448,107.26799999999999,196.514,94.72399999999999,196.522,80.00099999999999);
ctx.bezierCurveTo(196.52599999999998,71.04899999999999,196.528,62.09299999999999,196.534,53.135999999999996);
ctx.lineTo(223.86499999999998,53.148999999999994);
ctx.bezierCurveTo(224.35699999999997,52.404999999999994,224.86499999999998,51.675,225.396,50.965999999999994);
ctx.lineTo(196.536,50.94899999999999);
ctx.bezierCurveTo(196.534,48.75699999999999,196.538,46.37199999999999,196.537,44.18599999999999);
ctx.bezierCurveTo(196.544,32.24799999999999,188.989,21.494999999999994,177.844,17.511999999999993);
ctx.lineTo(177.851,0);
ctx.bezierCurveTo(194.768,3.985,208.094,17.723,212.064,34.438);
ctx.lineTo(227.965,34.446000000000005);
ctx.lineTo(227.961,47.833000000000006);
ctx.bezierCurveTo(236.651,38.041000000000004,249.29500000000002,31.871000000000006,263.32800000000003,31.875000000000007);
ctx.bezierCurveTo(277.58900000000006,31.883000000000006,290.391,38.224000000000004,299.122,48.182);
ctx.bezierCurveTo(299.129,38.602000000000004,299.134,29.007,299.13800000000003,19.356);
ctx.bezierCurveTo(308.688,23.738,315.647,33.293,315.644,43.843);
ctx.closePath();
ctx.moveTo(215.95,79.413);
ctx.bezierCurveTo(215.952,76.069,216.29999999999998,72.806,216.95499999999998,69.66);
ctx.lineTo(213.04199999999997,69.66);
ctx.bezierCurveTo(213.039,73.24199999999999,213.03799999999998,76.62899999999999,213.03699999999998,80.00699999999999);
ctx.bezierCurveTo(213.033,83.26599999999999,214.492,86.26799999999999,216.83499999999998,88.267);
ctx.bezierCurveTo(216.262,85.384,215.948,82.421,215.95,79.413);
ctx.closePath();
ctx.moveTo(299.114,68.506);
ctx.lineTo(291.568,68.501);
ctx.bezierCurveTo(287.19599999999997,56.762,276.056,49.193000000000005,263.318,49.18900000000001);
ctx.bezierCurveTo(246.60699999999997,49.181000000000004,233.266,62.70700000000001,233.259,79.42000000000002);
ctx.bezierCurveTo(233.25099999999998,96.13600000000002,247.178,109.27300000000002,263.495,109.48200000000001);
ctx.bezierCurveTo(276.226,109.683,287.371,101.92800000000001,291.557,90.19200000000001);
ctx.lineTo(299.1,90.194);
ctx.bezierCurveTo(299.108,82.965,299.111,75.734,299.114,68.506);
ctx.closePath();
ctx.moveTo(144.349,55.703);
ctx.lineTo(144.37099999999998,65.346);
ctx.bezierCurveTo(138.807,46.729,121.63999999999999,32.965,101.12499999999997,32.798);
ctx.bezierCurveTo(90.97499999999997,32.794000000000004,81.02599999999997,36.17,73.26299999999998,42.535000000000004);
ctx.bezierCurveTo(65.50399999999998,36.562000000000005,55.95399999999998,32.970000000000006,45.607999999999976,32.768);
ctx.bezierCurveTo(42.24399999999998,32.77,38.90899999999998,32.896,35.66199999999998,33.619);
ctx.lineTo(35.66199999999998,33.619);
ctx.bezierCurveTo(30.14899999999998,34.916,25.04199999999998,37.244,20.494999999999976,40.338);
ctx.bezierCurveTo(20.440999999999978,40.376,20.380999999999975,40.402,20.325999999999976,40.442);
ctx.lineTo(20.325999999999976,40.46);
ctx.bezierCurveTo(8.961,48.25,0.943,60.933,0.022,74.98);
ctx.lineTo(0.022,74.98);
ctx.bezierCurveTo(0.017,91.858,0.006,109.05,0,125.282);
ctx.lineTo(16.713,125.28699999999999);
ctx.lineTo(16.712,122.957);
ctx.lineTo(16.712,122.957);
ctx.lineTo(16.937,77.99);
ctx.bezierCurveTo(16.941000000000003,65.851,24.707,55.105999999999995,35.655,51.13099999999999);
ctx.lineTo(35.655,51.04399999999999);
ctx.bezierCurveTo(38.603,50.04199999999999,41.804,49.48199999999999,45.208,49.48899999999999);
ctx.bezierCurveTo(58.733999999999995,49.49299999999999,69.676,58.25199999999999,73.05199999999999,70.585);
ctx.bezierCurveTo(76.44099999999999,58.459999999999994,88.18499999999999,49.309999999999995,101.31799999999998,49.504999999999995);
ctx.bezierCurveTo(117.03699999999998,49.717,129.766,62.458,129.76,78.178);
ctx.lineTo(129.738,125.33699999999999);
ctx.lineTo(144.517,125.34899999999999);
ctx.lineTo(146.254,125.34499999999998);
ctx.lineTo(161.23,125.35099999999998);
ctx.lineTo(161.04899999999998,80.38099999999999);
ctx.bezierCurveTo(161.056,69.641,154.096,59.687,144.349,55.703);
ctx.closePath();
ctx.moveTo(45.202,51.278);
ctx.bezierCurveTo(30.674999999999997,51.271,18.334,63.604,18.328,78.328);
ctx.lineTo(18.306,125.286);
ctx.lineTo(35.019999999999996,125.295);
ctx.lineTo(35.041,78.336);
ctx.bezierCurveTo(35.043,72.566,39.422999999999995,67.793,45.19499999999999,67.795);
ctx.bezierCurveTo(50.96499999999999,67.799,55.538,72.574,55.53699999999999,78.346);
ctx.lineTo(55.51599999999999,125.307);
ctx.lineTo(72.03399999999999,125.31);
ctx.lineTo(72.053,78.55000000000001);
ctx.bezierCurveTo(72.06,64.025,60.327,51.285,45.202,51.278);
ctx.closePath();
ctx.moveTo(101.117,51.302);
ctx.bezierCurveTo(85.995,51.296,74.24600000000001,63.626,74.239,78.551);
ctx.lineTo(74.22200000000001,125.311);
ctx.lineTo(90.536,125.32400000000001);
ctx.lineTo(90.559,78.55700000000002);
ctx.bezierCurveTo(90.559,72.78500000000001,95.142,67.81700000000002,100.91199999999999,67.82100000000001);
ctx.bezierCurveTo(106.67999999999999,67.82100000000001,111.056,72.60100000000001,111.05399999999999,78.37300000000002);
ctx.lineTo(111.03199999999998,125.32900000000002);
ctx.lineTo(127.74799999999999,125.33700000000002);
ctx.lineTo(127.773,78.37500000000001);
ctx.bezierCurveTo(127.777,63.654,115.841,51.51,101.117,51.302);
ctx.closePath();
ctx.fill();
ctx.restore();
}

// Increase Score
function ChangeScoreF() {
   score1 = score1 + 1;
   if (score1 == 10){
       score1 = 0; 
       score2 = score2 + 1;
       }
   if (score2 == 10) {
       score2 = 0;
       score3 = score3 + 1;
   }

   
   var lastDigit = 'num' + score1;
   var digit3 = document.getElementById("digit3");
   digit3.className = lastDigit;
   
   var midDigit = 'num' + score2;
   var digit2 = document.getElementById("digit2");
   digit2.className = midDigit;
   
   var firstDigit = 'num' + score3;
   var digit1 = document.getElementById("digit1");
   digit1.className = firstDigit;
   
   playSound('wav/'+soundNote+'.wav');
   
   
   soundNote = soundNote + 1;
   if (soundNote == 6) { soundNote = 1;}
   
}

function continueGame(){
   x = (WIDTH / 2);
    y = 150;
    dx = ((Math.floor(Math.random()*8)*4)-16);
    dy = 8;
    paused = false;
}

function lessLife(){
livesLeft = livesLeft - 1;
if (livesLeft == 2 ){
   var turnOff = 'dead';
   var life1 = document.getElementById("life1");
   life1.className = turnOff; }
if (livesLeft == 1 ){
   var turnOff = 'dead';
   var life2 = document.getElementById("life2");
   life2.className = turnOff; }   
if (livesLeft == 0 ){
   var turnOff = 'dead';
   var life3 = document.getElementById("life3");
   life3.className = turnOff; }    
   
}

// RESET GAME
function resetGamePlay(){

var turnOn = 'alive';
var life1 = document.getElementById("life1");
life1.className = turnOn; 
var life2 = document.getElementById("life2");
life2.className = turnOn; 
var life3 = document.getElementById("life3");
life3.className = turnOn; 

var digit3 = document.getElementById("digit3");
digit3.className = 'num0';
var digit2 = document.getElementById("digit2");
digit2.className = 'num0';
var digit1 = document.getElementById("digit1");
digit1.className = 'num0';

document.getElementById("playAgain").style.display = "none";
document.getElementById("canvas").style.display = "inherit";


playGame();
}

function resetGamePlay2(){
document.getElementById("pinkPongInfo").className = "isDom";
clearInterval (  gameLoopIntervalId );
var turnOn = 'alive';
var life1 = document.getElementById("life1");
life1.className = turnOn; 
var life2 = document.getElementById("life2");
life2.className = turnOn; 
var life3 = document.getElementById("life3");
life3.className = turnOn; 

var digit3 = document.getElementById("digit3");
digit3.className = 'num0';
var digit2 = document.getElementById("digit2");
digit2.className = 'num0';
var digit1 = document.getElementById("digit1");
digit1.className = 'num0';

infoToggle = "off";

document.getElementById("canvas").style.display = "block";
document.getElementById("playAgain").style.display = "none";
document.getElementById("content").style.display = "none";
document.getElementById("canvas").style.display = "inherit";


playGame();
}



// SOUND
function playSound(soundfile) {
if (soundToggleVar == 'on'){
var snd = new Audio(soundfile);
		snd.load();
		snd.play();
 }
 }

function toggleSound(){
if (soundToggleVar == 'on') {
soundToggleVar = 'off';
var turnOn = 'soundOff';
var soundToggle = document.getElementById("soundToggle");
soundToggle.className = turnOn; 
soundToggleVar = 'off';  
}
else {
soundToggleVar = 'on';
var turnOn = 'soundOn';
var soundToggle = document.getElementById("soundToggle");
soundToggle.className = turnOn; 
soundToggleVar = 'on';  
}
}

// Main Game Play
	function draw() {
	
	ctx.clearRect(0, 0, WIDTH, HEIGHT);
	
	drawBack();
	puck(x, y);
	drawLogo(); 
	
	    
	//move the paddle if left or right is currently pressed
	if (rightDown) paddlex += 20;
	else if (leftDown) paddlex -= 20;
	if (paddlex > (WIDTH - paddlew) ) paddlex = (WIDTH - paddlew);
	if (paddlex < 0 ) paddlex = 0;
	
	paddle(paddlex, paddley, paddlew, paddleh);

if (paused == false){	

	
	if (x + dx > (WIDTH - 16) || x + dx < 0)
    dx = -dx;
    if (y + dy < 0)
    dy = -1.05 * dy;
    
    if (dy > 29){dy = 29};
    
	if (y + dy > (HEIGHT - 60) && y + dy < (HEIGHT - 34)) {
	if (x > (paddlex-(paddlew/2)) && x < (paddlex + paddlew)) {
	dx = 32 * ((x-(paddlex+paddlew/2))/paddlew);
    dy = -dy; 
    ChangeScoreF();
    }
    }
    
    if (y  > (HEIGHT+25) ) {
    lessLife();
    
    paused = true;
    if (livesLeft == 0	&& infoToggle == "off") {
    clearInterval (  gameLoopIntervalId );

    document.getElementById("playAgain").style.display = "block";
   
    }
    else {
    setTimeout("continueGame();", 1500);}
    }
    

    x += dx;
    y += dy;
}    
    
}

// NAVIGATION STUFF
function pinkPongInfo() {
paused = true;
document.getElementById("playAgain").style.display = "none";
document.getElementById("content").style.display = "block";
document.getElementById("pinkPongInfo").className = "selected";
infoToggle = "on";
}

function showCommentsPP() {
document.getElementById("commentbox").style.display = "block";
document.getElementById("commentAccordian").style.display = "none";

}