# Source: draw_event.js

    /** @file This file contains the scripts for when the draw event is activated. */

    var draw_anno = null;
    var query_anno = null;

    /** This function is called with the draw event is started.  It can be
     triggered when the user (1) clicks on the base canvas. */
    function StartDrawEvent(event) {
      if(!action_CreatePolygon) return;
      if(active_canvas != REST_CANVAS) return;

      // Write message to the console:
      console.log('LabelMe: Starting draw event...');

      // If we are hiding all polygons, then clear the main canvas:
      if(IsHidingAllPolygons) {
        for(var i = 0; i < main_canvas.annotations.length; i++) {
          main_canvas.annotations[i].hidden = true;
          main_canvas.annotations[i].DeletePolygon();
        }
      }

      // Set active canvas:
      active_canvas = DRAW_CANVAS;
      if (video_mode) oVP.Pause();
      // Get (x,y) mouse click location and button.
      var x = GetEventPosX(event);
      var y = GetEventPosY(event);
      var button = event.button;

      // If the user does not left click, then ignore mouse-down action.
      if(button>1) return;

      // Move draw canvas to front:
      $('#draw_canvas').css('z-index','0');
      $('#draw_canvas_div').css('z-index','0');

      if(username_flag) submit_username();

      // Create new annotation structure:
      var numItems = $(LM_xml).children('annotation').children('object').length;
      draw_anno = new annotation(numItems);

      // Add first control point:
      draw_anno.pts_x.push(Math.round(x/main_media.GetImRatio()));
      draw_anno.pts_y.push(Math.round(y/main_media.GetImRatio()));

      // Draw polyline:
      draw_anno.SetDivAttach('draw_canvas');
      draw_anno.DrawPolyLine();

      // Set mousedown action to handle when user clicks on the drawing canvas:
      $('#draw_canvas_div').unbind();
      $('#draw_canvas_div').mousedown({obj: this},function(e) {
          return DrawCanvasMouseDown(e.originalEvent);
        });

      WriteLogMsg('*start_polygon');
    }

    /** Handles when the user presses the mouse button down on the drawing
    canvas. */
    function DrawCanvasMouseDown(event) {
      // User right-clicked mouse, so close polygon and return:
      if(event.button > 1) return DrawCanvasClosePolygon();

      // Else, the user left-clicked the mouse.
      if(active_canvas!=DRAW_CANVAS) return;
      if(username_flag) submit_username();

      // Get (x,y) mouse location:
      var scale = main_media.GetImRatio();
      var x = Math.round(GetEventPosX(event)/scale);
      var y = Math.round(GetEventPosY(event)/scale);

      // Add point to polygon:
      draw_anno.pts_x.push(x);
      draw_anno.pts_y.push(y);

      // Create array of line IDs if it is null:
      if(!draw_anno.line_ids) draw_anno.line_ids = Array();

      var line_idx = draw_anno.line_ids.length;
      var n = draw_anno.pts_x.length-1;

      // Draw line segment:
      draw_anno.line_ids.push(DrawLineSegment(draw_anno.div_attach,draw_anno.pts_x[n-1],draw_anno.pts_y[n-1],draw_anno.pts_x[n],draw_anno.pts_y[n],'stroke="#0000ff" stroke-width="4"',scale));

      // Set cursor to be crosshair on line segment:
      $('#'+draw_anno.line_ids[line_idx]).css('cursor','crosshair');

      // Move the first control point to be on top of any drawn lines.
      $('#'+draw_anno.div_attach).append($('#'+draw_anno.point_id));
    }

    /** Handles when the user closes the polygon by right-clicking or clicking
     on the first control point. For video events the bubble is slightly different
    */
    function DrawCanvasClosePolygon() {
      if(active_canvas!=DRAW_CANVAS) return;
      if(username_flag) submit_username();
      if((object_choices!='...') && (object_choices.length==1)) {
        main_handler.SubmitQuery();
        StopDrawEvent();
        return;
      }
      active_canvas = QUERY_CANVAS;

      // Move draw canvas to the back:
      document.getElementById('draw_canvas').style.zIndex = -2;
      document.getElementById('draw_canvas_div').style.zIndex = -2;

      // Remove polygon from the draw canvas:
      var anno = null;

      if(draw_anno) {
        draw_anno.DeletePolygon();
        anno = draw_anno;
        draw_anno = null;
      }

      // Move query canvas to front:
      document.getElementById('query_canvas').style.zIndex = 0;
      document.getElementById('query_canvas_div').style.zIndex = 0;

      // Set object list choices for points and lines:
      var doReset = SetObjectChoicesPointLine(anno.GetPtsX().length);

      // Get location where popup bubble will appear:
      var pt = main_media.SlideWindow(Math.round(anno.GetPtsX()[0]*main_media.GetImRatio()),Math.round(anno.GetPtsY()[0]*main_media.GetImRatio()));

      // Make query popup appear.
      main_media.ScrollbarsOff();
      WriteLogMsg('*What_is_this_object_query');
      if (video_mode){
        var html_str = "<b>Enter object name</b><br />";
        html_str += HTMLobjectBox("");

        if(use_attributes) {
          html_str += HTMLoccludedBox("");
          html_str += "<b>Enter attributes</b><br />";
          html_str += HTMLattributesBox("");
        }
        if(use_parts) {
          html_str += HTMLpartsBox("");
        }
        html_str += "<br />";

        // Done button:
        html_str += '<input type="button" value="Done" title="Press this button after you have provided all the information you want about the object." onclick="main_media.SubmitObject();" tabindex="0" />';

        // Undo close button:
        html_str += '<input type="button" value="Undo close" title="Press this button if you accidentally closed the polygon. You can continue adding control points." onclick="UndoCloseButton();" tabindex="0" />';

        // Delete button:
        html_str += '<input type="button" value="Delete" title="Press this button if you wish to delete the polygon." onclick="scribble_canvas.WhatIsThisObjectDeleteButton();" tabindex="0" />';

        CreatePopupBubble(pt[0],pt[1], html_str, 'main_section');
      }
      else mkPopup(pt[0],pt[1]);

      // If annotation is point or line, then
      if(doReset) object_choices = '...';

      // Render annotation:
      query_anno = anno;
      query_anno.SetDivAttach('query_canvas');
      FillPolygon(query_anno.DrawPolygon(main_media.GetImRatio()));
    }

    /** Handles when the user presses the undo close button in response to
     the "What is this object?" popup bubble. */
    function UndoCloseButton() {
      active_canvas = DRAW_CANVAS;

      // Move query canvas to the back:
      document.getElementById('query_canvas').style.zIndex = -2;
      document.getElementById('query_canvas_div').style.zIndex = -2;

      // Remove polygon from the query canvas:
      query_anno.DeletePolygon();
      var anno = query_anno;
      query_anno = null;

      CloseQueryPopup();
      main_media.ScrollbarsOn();

      // Move draw_canvas to front:
      document.getElementById('draw_canvas').style.zIndex = 0;
      document.getElementById('draw_canvas_div').style.zIndex = 0;

      // Draw polyline:
      draw_anno = anno;
      draw_anno.SetDivAttach('draw_canvas');
      draw_anno.DrawPolyLine();
    }

    /** This function is called when the draw event is finished.  It can be
     triggered when the user (1) closes the polygon and only one option is
     valid in the drop-down list (2) erases the last control point.
    */
    function StopDrawEvent() {
      // Set active canvas:
      active_canvas = REST_CANVAS;
      if (video_mode) oVP.Play();
      // Move draw canvas to the back:
      $('#draw_canvas').css('z-index','-2');
      $('#draw_canvas_div').css('z-index','-2');

      // Remove polygon from draw canvas:
      if(draw_anno) {
        draw_anno.DeletePolygon();
        draw_anno = null;
      }

      // Write message to the console:
      console.log('LabelMe: Stopped draw event.');
    }