Uncaught ReferenceError: picturePath is not defined

Uncaught ReferenceError: picturePath is not defined

apparently i haven't defined the function picturePath, but i'm not sure where or how to. errors occur on 86, 92, 98

  2. <!DOCTYPE html> 
  3. <html>
  4. <head>
  5. <!-- This is a comment tag -->
  6. <meta charset="UTF-8" />
  7. <title></title>
  8. <link rel="stylesheet" href="generic.css" type="text/css" media="screen,projection" />
  9. <script type="text/javascript" src="jquery-2.1.3.min.js"></script>
  10. <script type="text/javascript">
  12. // Global variables go here
  13. var picture = new Image();
  16. // functions go below here
  17. function startPicturePuzzle(picturePath)
  18. {
  19. // Set picturePuzzle division to relative
  20. $('#picturePuzzle').css('position', 'relative');

  22. // Load the picture
  23. $(picture)
  24. .load(function() {
  25. getPicturePuzzleDifficulty();
  26. })
  27. // if there is a loading error
  28. .error(function () {
  29. // notify the user
  30. $('#picturePuzzle')
  31. .html("<h1>Picture Puzzle<br />Unable to load image</h1>")
  32. .find("h1").each(function() {
  33. $(this).css('position', 'absolute');
  34. $(this).css('left', Math.floor(($('#picturePuzzle').width() - $(this).width())/2) + "px");
  35. $(this).css('top', Math.floor(($('#picturePuzzle').height() - $(this).height())/2) + "px");
  36. });
  38. })
  39. // Set the src attribute to load the image
  40. .attr('src', picturePath);
  41. }
  43. function getPicturePuzzleDifficulty()
  44. {
  45. $('#picturePuzzle')
  46. .css('background-image', 'url("' + $(picture).attr('src') + '")')
  47. .css('background-position', 'center center')
  48. .css('background-repeat', 'no-repeat')
  49. .css('background-size', 'contain')
  50. .html("<h2>Picture Puzzle</h2><div id='dialog'>" + "<p>Difficulty</p><h2>Please choose a difficulty</h2>"+ "<button id='difficult'>Difficult</button>" + "<button id='medium'>Medium</button>" + "<button id='easy'>Easy</button></div>" + "<h2><span id='time'>Time: </span>" + "<span id='moves'>Moves: </span></h2>");

  52. $('#picturePuzzle > h2')
  53. .css('padding', '2px 5px')
  54. .css('background-color', 'lightgrey');
  56. $('#picturePuzzle h2:nth-child(3)')
  57. .css('position', 'relative')
  58. .css('top', ($('#picturePuzzle').height() - ($('#picturePuzzle h2:nth-child(3)').height() * 2) - 8) + "px")
  59. .find('span:nth-child(2)')
  60. .css('padding-left', '80px');
  62. $('#dialog p')
  63. .css('background-color', 'black')
  64. .css('color', 'white')
  65. .css('padding', '2px 5px');
  67. $('#dialog h2')
  68. .css('padding', '5px');
  70. $('#dialog button')
  71. .css('padding', '2px 5px')
  72. .css('float', 'right')
  73. .css('color', 'white')
  74. .css('background-color', 'IndianRed');
  76. $('#dialog')
  77. .css('background-color', 'white')
  78. .css('opacity', '0.8')
  79. .css('position', 'absolute')
  80. .css('top', Math.floor(($('#picturePuzzle').height() - $('#dialog').height())/2) +"px")
  81. .css('left', Math.floor(($('#picturePuzzle').width() - $('#dialog').width())/2) +"px");
  83. $('#difficult').on('click', function() {
  84. $('#dialog').remove();
  85. $('#picturePuzzle').css('background-image', 'none');
  86. setupPicturePuzzle(picturePath, 5);
  87. });
  89. $('#medium').on('click', function() {
  90. $('#dialog').remove();
  91. $('#picturePuzzle').css('background-image', 'none');
  92. setupPicturePuzzle(picturePath, 4);
  93. });
  95. $('#easy').on('click', function() {
  96. $('#dialog').remove();
  97. $('#picturePuzzle').css('background-image', 'none');
  98. setupPicturePuzzle(picturePath, 3);
  99. });
  101. }
  103. function setupPicturePuzzle(difficulty)
  104. {
  105. var gridY, gridX, gridID = 1;
  106. var picWidth, picHeight, ratio;
  108. // create picture grid element
  109. $('#picturePuzzle > h2:nth-child(1)')
  110. .after("<div id='grid'></div>");
  112. // work out the renderable width and height of the picture
  113. if (picture.naturalWidth > picture.naturalHeight)
  114. {
  115. picWidth = $('#picturePuzzle').innerWidth();
  116. ratio = picture.naturalWidth / picWidth;
  117. picHeight = Math.floor(picture.naturalHeight / ratio) - 8;
  118. $('#grid')
  119. .css('position', 'relative')
  120. .css('top', ((($('#picturePuzzle').height() - picHeight) /2) - $('#picturePuzzle > h2:nth-child(1)').height()));
  121. }
  122. else
  123. {
  124. picHeight = ($('#picturePuzzle').height() - ($('#picturePuzzle > h2:nth-child(1)').height() * 2)) - 8;
  125. ratio = picture.naturalHeight / picHeight;
  126. picWidth = Math.floor(picture.naturalWidth / ratio);
  127. $('#grid')
  128. .css('position', 'relative')
  129. .css('left', ($('#picturePuzzle').width() - picWidth) + "px");
  130. }
  132. // work out the tile width and height
  133. segWidth = (Math.floor(picWidth / difficulty) - 2);
  134. segHeight = (Math.floor(picHeight / difficulty) - 2);
  136. for (gridY=0; gridY<difficulty; gridY++)
  137. {
  138. for (gridX=0; gridX<difficulty; gridX++)
  139. {
  140. if (!((gridY == (difficulty - 1)) && (gridX == (difficulty - 1))))
  141. {
  142. // setup grid value
  143. gameGrid[gridY][gridX] = gridID;
  145. // add grid element and style its background
  146. $('#grid').append("<a href='#' id='grid" + gridID + "'><div></div></a>");
  147. $('#grid' + gridID + ' > div')
  148. .css('width', segWidth + "px")
  149. .css('height', segHeight + "px")
  150. .css('background-image', 'url("' + $(picture).attr('src') + '")')
  151. .css('background-size', picWidth + 'px ' + picHeight + 'px')
  152. .css('background-position', '-' + (gridX *segWidth) + 'px -' +(gridY * segHeight) + 'px');
  154. $('#grid' + gridID)
  155. .css('border', '1px solid green')
  156. .css('position', 'absolute')
  157. .css('top', (gridY *(segHeight + 2)) + "px")
  158. .css('left', (gridX * (segWidth + 2)) + "px");
  160. gridID++;
  161. }
  162. else
  164. {
  165. gameGrid[gridY][gridX] = 0;
  166. }
  167. }
  168. }
  170. } 
  172. $( document ).ready(function() {
  173. // initial function call goes here
  174. startPicturePuzzle("Birkenhead Park.jpg");
  175. });

  177. </script>
  178. </head>
  179. <body>
  180. <!-- HTML goes here -->
  181. <div id="picturePuzzle">
  182. </body>
  183. </html>