now the slide is displayed when we first load the page

labs/meteor-client/client/main.coffee

@@ -28,8 +28,6 @@ Meteor.startup ->
 		{isActive:false, name:"Options", class: "optionsChatTab"}
 	]
 
-	@whiteboardPaperModel = new WhiteboardPaperModel('whiteboard-paper')
-
 Template.header.events
 	"click .usersListIcon": (event) ->
 		toggleUsersList()

labs/meteor-client/client/views/whiteboard/whiteboard.coffee

@@ -1,16 +1,26 @@
-Template.whiteboard.png = ->
+Template.whiteboard.rendered = ->
+  alert "rendered - dom is ready"
   currentPresentation = Meteor.Presentations.findOne({"presentation.current": true})
   presentationId = currentPresentation?.presentation?.id
   currentSlide = Meteor.Slides.findOne({"presentationId": presentationId, "slide.current": true})
   console.log "the current slide is:" + currentSlide?.slide?.id
   if currentSlide?.slide?.png_uri?
-    Template.whiteboard.displaySlide((slide) ->
-      console.log "THIS SLIDE IS DISPLAYED:"# + JSON.stringify slide
-      Template.whiteboard.displayShapeOnSlide();
-      )
+
+    Template.whiteboard.createWhiteboardPaper((wpm)->
+      Template.whiteboard.displaySlide(wpm, (currentSlide)->
+        console.log "wpm=" + wpm
+        Template.whiteboard.displayShapeOnSlide()
+        ))
 
 Template.whiteboard.helpers
+  createWhiteboardPaper: (callback) ->
+    console.log "this should happen 1st" + document.getElementById('whiteboard-paper')
+    console.log "whiteboardPaperModel already exists" if whiteboardPaperModel?
+    whiteboardPaperModel = new WhiteboardPaperModel('whiteboard-paper')
+    callback(whiteboardPaperModel)
+
   displayShapeOnSlide: ->
+    console.log "this should happen third"
     currentPresentation = Meteor.Presentations.findOne({"presentation.current": true})
     presentationId = currentPresentation?.presentation?.id
     currentSlide = Meteor.Slides.findOne({"presentationId": presentationId, "slide.current": true})
@@ -30,14 +40,16 @@ Template.whiteboard.helpers
       console.log "shapeType=" + shapeType
       console.log "data=" + JSON.stringify data
 
-      whiteboardPaperModel.makeShape(shapeType, data)
-      whiteboardPaperModel.updateShape(shapeType, data)
+      #whiteboardPaperModel.makeShape(shapeType, data)
+      #whiteboardPaperModel.updateShape(shapeType, data)
 
-  displaySlide: (callback) ->
+  displaySlide: (wpm, callback) ->
+    console.log "this should happen second!"
+    console.log "wpm2=" + wpm
     currentPresentation = Meteor.Presentations.findOne({"presentation.current": true})
     presentationId = currentPresentation?.presentation?.id
     currentSlide = Meteor.Slides.findOne({"presentationId": presentationId, "slide.current": true})
 
-    whiteboardPaperModel.create() #TODO maybe move this to main.coffee
-    whiteboardPaperModel._displayPage(currentSlide?.slide?.png_uri)
+    wpm.create() #TODO maybe move this to main.coffee
+    wpm._displayPage(currentSlide?.slide?.png_uri)
     callback(currentSlide?.slide)

labs/meteor-client/client/views/whiteboard/whiteboard.html

@@ -3,6 +3,7 @@
 	<p>The whiteboard</p>
 	{{/if}}
 	<div id="whiteboard-paper" style="position: fixed; top: 10%; left: 30%;">
+		<!-- {{createWhiteboardPaper}} -->
 		<p>
 			{{png}}
 		</p>

labs/meteor-client/client/whiteboard_models/whiteboard_paper.coffee

@@ -33,9 +33,9 @@ class @WhiteboardPaperModel
     @shiftPressed = false
     @currentPathCount = 0
 
-    $(window).on "resize.whiteboard_paper", _.bind(@_onWindowResize, @)
-    $(document).on "keydown.whiteboard_paper", _.bind(@_onKeyDown, @)
-    $(document).on "keyup.whiteboard_paper", _.bind(@_onKeyUp, @)
+    # $(window).on "resize.whiteboard_paper", _.bind(@_onWindowResize, @)
+    # $(document).on "keydown.whiteboard_paper", _.bind(@_onKeyDown, @)
+    # $(document).on "keyup.whiteboard_paper", _.bind(@_onKeyUp, @)
 
     # Bind to the event triggered when the client connects to the server
     # if globals.connection.isConnected()