Plugin Methods

$('#odontogram').odontogram('methodName', arg1, arg2, ...)

$('#odontogram').odontogram('setMode', mode)

// Set mode when user clicks treatment button
$('#ODONTOGRAM_MODE_CARIES').click(function() {
  $('#odontogram').odontogram('setMode', ODONTOGRAM_MODE_CARIES)
  console.log('🔧 Mode set to: CARIES')
})

// Set mode for amalgam filling
$('#ODONTOGRAM_MODE_AMF').click(function() {
  $('#odontogram').odontogram('setMode', ODONTOGRAM_MODE_AMF)
})

function setMode($this, mode) {
  var instance = $this.data('odontogram')
  instance.setMode(mode)
}

Odontogram.prototype.setMode = function(mode) {
  this.mode = mode
  return this
}

$('#odontogram').odontogram('redraw')

// Manually trigger redraw after geometry changes
$('#odontogram').odontogram('setGeometry', newGeometry)
$('#odontogram').odontogram('redraw')

// Redraw after clearing treatments
$('#odontogram').odontogram('clearAll')
$('#odontogram').odontogram('redraw')  // Optional, clearAll calls this internally

Odontogram.prototype.redraw = function() {
  var ctx = this.context
  
  // 1. Clear canvas
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
  
  // 2. Draw background tooth grid
  if (this.background) {
    ctx.drawImage(this.background.image, ...)
  }
  
  // 3. Draw hover effects
  for (var i = 0; i < this.hoverGeoms.length; i++) {
    hoverGeoms.render(ctx)
  }
  
  // 4. Render painting functions (background layer)
  var paintingFunctions = ['RES', 'CARIES', 'CARIES_UNTREATABLE', 'FIS', 'Polygon']
  for (var keyCoord in this.geometry) {
    geoms = this.geometry[keyCoord]
    for (var x in geoms) {
      if (geoms[x].render && paintingFunctions.includes(geoms[x].name)) {
        geoms[x].render(ctx)
      }
    }
  }
  
  // 5. Render symbols and markers (foreground layer)
  for (var keyCoord in this.geometry) {
    geoms = this.geometry[keyCoord]
    for (var x in geoms) {
      if (geoms[x].render && !paintingFunctions.includes(geoms[x].name)) {
        geoms[x].render(ctx)
      }
    }
  }
  
  // 6. Draw active selection
  if (this.active_geometry) {
    this.active_geometry.render(ctx)
  }
  
  return this
}

$('#odontogram').odontogram('setGeometry', geometry)

// Load geometry from saved data
const savedGeometry = loadFromLocalStorage('odontogram_geometry')
$('#odontogram').odontogram('setGeometry', savedGeometry)

// Clear all treatments by setting empty geometry
$('#odontogram').odontogram('setGeometry', {})

Odontogram.prototype.setGeometry = function(geometry) {
  // Convert geometry objects to shape class instances
  for (var keyCoord in geometry) {
    for (var i = 0; i < geometry[keyCoord].length; i++) {
      geometry[keyCoord][i] = convertGeomFromObject(geometry[keyCoord][i])
    }
  }
  
  this.geometry = geometry
  this.redraw()  // Automatically redraws
}

var dataURL = $('#odontogram').odontogram('getDataURL')

// Download odontogram as image
$('#download').click(function() {
  const dataURL = $('#odontogram').odontogram('getDataURL')
  
  // Create download link
  const a = document.createElement('a')
  a.href = dataURL
  a.download = 'odontogram.png'
  a.click()
})

// Use in professional document generation
function generateProfessionalPNG() {
  const odontogramDataURL = $('#odontogram').odontogram('getDataURL')
  const odontogramImg = new Image()
  
  odontogramImg.onload = function() {
    // Draw to larger canvas for professional document
    ctx.drawImage(odontogramImg, x, y, width, height)
  }
  
  odontogramImg.src = odontogramDataURL
}

Odontogram.prototype.getDataURL = function() {
  return this.canvas.toDataURL()  // Returns PNG data URL
}

var result = instance.search(key, value)

const instance = $('#odontogram').data('odontogram')

// Find tooth by FDI number
const tooth18 = instance.search('num', '18')
if (tooth18) {
  console.log('Found tooth 18:', tooth18[1])
  console.log('Coordinates:', tooth18[0])
}

// Find tooth by center coordinates
const toothAtCenter = instance.search('cx', 125)

Odontogram.prototype.search = function(key, value) {
  const obj = this.teeth
  for (let k in obj) {
    if (obj[k][key] == value) {
      return [k, obj[k]]  // Returns [key, toothData]
    }
  }
  return null
}

$('#odontogram').odontogram('clearAll')

// Clear all button with confirmation
$('#ODONTOGRAM_MODE_DEFAULT').click(function() {
  const treatmentCount = Object.values(currentGeometry).reduce(
    (sum, treatments) => sum + (treatments?.length || 0), 0
  )
  
  if (treatmentCount > 0) {
    const confirmClear = confirm(
      `⚠️ ¿Está seguro que desea borrar todos los tratamientos?\n\n` +
      `Se eliminarán ${treatmentCount} tratamientos.\n\n` +
      `Esta acción no se puede deshacer.`
    )
    
    if (confirmClear) {
      $('#odontogram').odontogram('clearAll')
      $('#odontogram').odontogram('setMode', ODONTOGRAM_MODE_DEFAULT)
      $('.controls-panel button').removeClass('active')
      
      console.log('🧹 All treatments cleared')
    }
  }
})

// Clear on initialization for clean start
function initializeOdontogram(type) {
  $('#odontogram').odontogram('init', options)
  $('#odontogram').odontogram('clearAll')  // Start clean
}

Odontogram.prototype.clearAll = function() {
  this.geometry = {}              // Clear all treatments
  this.active_geometry = null     // Clear selection
  this.mode_bridge_coords = []    // Clear bridge coordinates
  this.hoverGeoms = []            // Clear hover effects
  this.redraw()                   // Redraw clean canvas
  
  console.log('🧹 Odontogram cleared - all treatments removed')
  return this
}

$('#odontogram').odontogram('setGeometryByPos', data)

// Load treatments from simplified data format
const treatmentData = [
  { code: "AMF", pos: "18-T" },      // Amalgam on tooth 18 top
  { code: "CARIES", pos: "21-M" },   // Caries on tooth 21 middle
  { code: "POC", pos: "16" },        // Crown on tooth 16 (whole)
  { code: "MIS", pos: "36" }         // Missing tooth 36
]

const geometry = $('#odontogram').odontogram('setGeometryByPos', treatmentData)
console.log('Generated geometry:', geometry)

Odontogram.prototype.setGeometryByPos = function(data) {
  let geometry = {}
  
  for (d of data) {
    if (!d.code || !d.pos) continue
    
    if (d.pos.includes('-')) {
      // Surface treatment
      [pos, sub] = d.pos.split('-')
      const t = this.search('num', pos)
      
      // Map surface code to coordinates
      let s
      if (sub == 'L') s = t[1].left
      else if (sub == 'R') s = t[1].right
      else if (sub == 'B') s = t[1].bottom
      else if (sub == 'T') s = t[1].top
      else if (sub == 'M') s = t[1].middle
      
      if (!geometry[t[0]]) geometry[t[0]] = []
      
      geometry[t[0]].push({
        name: d.code,
        pos: d.pos,
        vertices: [s.bl, s.br, s.tr, s.tl]
      })
    } else {
      // Whole tooth treatment
      const t = this.search('num', d.pos)
      if (!geometry[t[0]]) geometry[t[0]] = []
      
      geometry[t[0]].push({
        name: d.code,
        pos: d.pos,
        vertices: [
          { x: t[1].x1, y: t[1].y1 },
          { x: t[1].x2, y: t[1].y2 }
        ]
      })
    }
  }
  
  this.setGeometry(geometry)
  return geometry
}

$('#odontogram')
  .odontogram('init', options)
  .odontogram('clearAll')
  .odontogram('setMode', ODONTOGRAM_MODE_DEFAULT)

// Listen for geometry changes
$('#odontogram').on('change', function(event, geometry) {
  console.log('Geometry updated:', geometry)
  updateOdontogramData(geometry)
})

$('#odontogram').on('change', function(_, geometry) {
  updateOdontogramData(geometry)
  
  console.log('📊 Geometry updated. Total treatments:', 
    Object.values(geometry).reduce(
      (sum, treatments) => sum + (treatments?.length || 0), 0
    )
  )
})