brushes = new Array('dot','slash','dash')
currentBrush = 0

colors = new Array('black','red','green','blue')
currentColor = 0

drawActive = 0

cursorXOffset = 26
cursorYOffset = 6

htmlContent = ''

HTMLdata = ''

// last/current directions, last X coordinate
lDirection = 'none'
cDirection = 0
lastX = 0

timeoutID = 0
sCounterID = 0
sCounter = 0

i=0

function preloadSpraypaintImages() {
  pImg = new Array()
  pImgSrc = new Array('spray_can_active','dot_black','dot_red','dot_green','dot_blue','slash_black','slash_red','slash_green','slash_blue','dash_black','dash_red','dash_green','dash_blue')
  for (i=0; i<pImgSrc.length; i++) {
    pImg[i] = new Image()
    pImg[i].src = sprayPaintPath + pImgSrc[i] + '.gif'
  }
}

function recreate() {
  divContent.innerHTML = ''
  divStatus.innerHTML = 'Drawing ' + mXcoords.length + ' points'
  mCursor.style.pixelLeft = mXcoords[0] - cursorXOffset
  mCursor.style.pixelTop = mYcoords[0] - cursorYOffset
  i=0
  HTMLdata = ''
  mCursor.src = sprayPaintPath + 'spray_can_active.gif'
  mCursor.style.visibility = 'visible'
  if (!renderAfterEvent[2].checked) 
    recreateCoords();
  else
    setTimeout("recreateAllCoords()",250,"Javascript");
}

function recreateAllCoords() {
  HTMLdata = ''
  for (i=1; i<mXcoords.length; i++) {
    if (currentBrush != brushD[i])
      setBrush(brushD[i]);
    if (colors[colorD[i]] != colors[currentColor])
      setColor(colorD[i]);
    HTMLdata += getRecData()
  }
  divContent.innerHTML += HTMLdata
  setTimeout("mCursor.style.visibility='hidden'",500,"Javascript")
}

function recreateCoords() {
  i++
  if (i<mXcoords.length) {
    if (!renderAfterEvent[2].checked) {
      mCursor.style.pixelLeft = mXcoords[i] - cursorXOffset
      mCursor.style.pixelTop  = mYcoords[i] - cursorYOffset
    }
    if (currentBrush != brushD[i])
      setBrush(brushD[i]);
    if (colors[colorD[i]] != colors[currentColor])
      setColor(colorD[i]);

    if (renderAfterEvent[1].checked) {
      HTMLdata += getRecData()
      if (releaseD[i]) {
        divContent.innerHTML += HTMLdata
        HTMLdata = ''
      }
    }
    else if (renderAfterEvent[2].checked) {
      HTMLdata += getRecData()
/*
      if (HTMLdata.length > 8192) {
        divContent.innerHTML += HTMLdata
        HTMLdata = ''
      }
*/
    }
    else
      divContent.innerHTML += getRecData();
    if (!renderAfterEvent[2].checked)
      setTimeout("recreateCoords()",timeData[i],"Javascript");
    else
      setTimeout("recreateCoords()",20,"Javascript");
  }
  else if (renderAfterEvent[2].checked)
    divContent.innerHTML += HTMLdata;
  if (i == mXcoords.length) {
    divStatus.innerHTML = ''
    mCursor.src = sprayPaintPath + 'spray_can.gif'
    setTimeout("mCursor.style.visibility='hidden'",500,"Javascript")
  }
}

function getRecData() {
  return '<img src="' + sprayPaintPath + brushes[currentBrush] + '_' + colors[currentColor] + '.gif" style="position:absolute;left:' + (mXcoords[i]-8) + ';top:' + (mYcoords[i]-8) + '">'
}

function doNothing() {
}

mSec = 0

function setBrush(newIndex) {
  currentBrush = newIndex
}

function setColor(newIndex) {
  currentColor = newIndex
}

function setStatus(newStatus) {
  divStatus.innerHTML = newStatus
}

function initSpraypaintViewer() {
  preload()
  setBrush(1)
  setColor(0)
  setStatus('ready')
}