var is_IE = navigator.appName.indexOf("Microsoft") != -1

colors = [  "#000000", "#000080", "#008000", "#008080", "#800080", "#800000",
           "#808000", "#808080", "#ffffff", "#0000ff", "#00ff00", "#00ffff",
           "#ff00ff", "#ff0000", "#ffff00", "#c0c0c0" ]

document.left_pressed = false
document.right_pressed = false

document.onmousedown = function(event) {
  if (!event) event = window.event

  if (which_button(event) == 1) {
    document.left_pressed = true
  } else if (which_button(event) == 2) {
    document.right_pressed = true
  }
}

document.onmouseup = function(event) {
  if (!event) event = window.event

  if (which_button(event) == 1) {
    document.left_pressed = false
  } else if (which_button(event) == 2) {
    document.right_pressed = false
  }
}

function load_app() {
  var editor = document.getElementById("editor")

  while (editor.childNodes.length)
    editor.removeChild(editor.childNodes[0])

  var cb = [];
  var cur_color = 0;
  for (var column = 0; column < 2; column++) {
    cb[column] = document.createElement("div")
    cb[column].id = "cb1"

    if (is_IE)
      cb[column].style.cssText += "float: left"
    else
      cb[column].style.cssFloat = "left"

    cb[column].style.width = "50px"
    cb[column].style.height = "398px"

    for (var i = 0; i < 8; i++, cur_color++) {
      var swatch = document.createElement("div")
      swatch.style.width = "50px"
      swatch.style.height = "50px"
      if (i == 7) swatch.style.height = "48px"

      swatch.style.backgroundColor = colors[cur_color]
      swatch.color_index = cur_color

      swatch.onmousedown = function(event) {
        if (!event) event = window.event
        
        return reg_click(this.ownerDocument, which_button(event), 'col',
          this.color_index)
      }

      cb[column].appendChild(swatch)
    }
  }

  var color_bar = document.createElement("div")


  if (is_IE)
    color_bar.style.cssText = "border: 1px solid black; float: left;"
  else {
    color_bar.style.border = "1px solid black"
    color_bar.style.cssFloat = "left"
  }

  color_bar.appendChild(cb[0])
  color_bar.appendChild(cb[1])

  var background = document.createElement("div")
  background.id = "background"
  background.style.position = "relative"
  background.style.right = "6px"
  background.style.width = "25px"
  background.style.height = "25px"
  background.style.border = "1px solid black"
  background.style.backgroundColor = colors[0]
  background.color_index = 0

  var foreground = document.createElement("div")
  foreground.id = "foreground"
  foreground.style.position = "relative"
  foreground.style.bottom = "18px"
  foreground.style.width = "25px"
  foreground.style.height = "25px"
  foreground.style.border = "1px solid black"
  foreground.style.backgroundColor = colors[1]
  foreground.color_index = 1

  var preview = generate_canvas(1, 1, "prev")
  preview.style.border = "1px solid black"

  var selection = document.createElement("div")
  if (is_IE)
    selection.style.cssText = "float: right;"
  else
    selection.style.cssFloat = "right"

  selection.appendChild(background)
  selection.appendChild(foreground)
  selection.appendChild(preview)
  
  var canvas = generate_canvas(20, 20, "")
  if (is_IE)
    canvas.style.cssText = "position: relative; left: 20px; top: 20px; " +
      "float: left; border: 1px solid black;"
  else {
    canvas.style.position = "relative"
    canvas.style.left = "20px"
    canvas.style.top = "20px"
    canvas.style.cssFloat = "left"
    canvas.style.border = "1px solid black"
  }
  
  var saveButton = document.createElement("input")
  saveButton.type = "button"
  saveButton.value = "Save icon"
  saveButton.style.cssText = "position: relative; left: 140px; top: 35px;"
  saveButton.onclick = function() {
    save_icon()
  }

  editor.appendChild(color_bar)
  editor.appendChild(canvas)
  editor.appendChild(selection)
  editor.appendChild(saveButton)

  for (var row = 0; row < 16; row++) {
    for (var col = 0; col < 16; col++) {
      var pixel = document.getElementById(row + "," + col)
      pixel.color_index = 15
    }
  }

  editor.oncontextmenu = function() { return false }
}

function generate_canvas(pix_width, pix_height, append) {
  var canvas = document.createElement("div")
  canvas.style.width = pix_width * 16 + 'px'
  canvas.style.height = pix_height * 16 + 'px'

  for (var j = 0; j < 16; j++) {
    var column = document.createElement("div")
    column.id = "col" + j

    if (is_IE)
      column.style.cssText = "float: left;"
    else
      column.style.cssFloat = "left"

    for (var i = 0; i < 16; i++) {
      var pixel = document.createElement("div")
      var loc = i + "," + j
      
      pixel.id = loc + append
      pixel.coord = loc
      pixel.style.width = pix_width + 'px'
      pixel.style.height = pix_height + 'px'
      pixel.style.backgroundColor = colors[15]

      pixel.onmousedown = function(event) {
        if (!event) event = window.event
        
        return reg_click(this.ownerDocument, which_button(event), 'can',
          this.coord)
      }
      
      pixel.onmouseover = function(event) {
        if (!event) event = window.event
        
        if (this.ownerDocument.left_pressed) {
          return reg_click(this.ownerDocument, 1, 'can', this.coord)
        } else if (this.ownerDocument.right_pressed) {
          return reg_click(this.ownerDocument, 2, 'can', this.coord)
        }
      }

      if (is_IE)
        pixel.appendChild(document.createComment())

      column.appendChild(pixel)
    }

    canvas.appendChild(column)
  }
  
  return canvas
}

function setForeground(doc, pixel_name) {
  var pixel = doc.getElementById(pixel_name)
  var preview = doc.getElementById(pixel_name + 'prev')
  var foreground = doc.getElementById("foreground")
  pixel.style.backgroundColor = foreground.style.backgroundColor
  pixel.color_index = foreground.color_index
  preview.style.backgroundColor = foreground.style.backgroundColor
}

function setBackground(doc, pixel_name) {
  var pixel = doc.getElementById(pixel_name)
  var preview = doc.getElementById(pixel_name + 'prev')
  var background = doc.getElementById("background")
  pixel.style.backgroundColor = background.style.backgroundColor
  pixel.color_index = background.color_index
  preview.style.backgroundColor = background.style.backgroundColor
}

function which_button(event) {
  if (event.button == 0 || event.button == 1) {
    return 1;
  } else {
    return 2;
  }
}

function reg_click(doc, button, sender, arg) {
  if (sender == "col") {
    if (button == 1) {
      var foreground = doc.getElementById("foreground")
      foreground.style.backgroundColor = colors[arg]
      foreground.color_index = arg
    } else if (button == 2) {
      var background = doc.getElementById("background")
      background.style.backgroundColor = colors[arg]
      background.color_index = arg
    }
  } else if (sender == "can") {
    var pixel = doc.getElementById(arg)

    if (button == 1) {
      setForeground(doc, arg)
    } else if (button == 2) {
      setBackground(doc, arg)
    }
  }

  return false;
}


function save_icon() {
  var icon = new RawIconData()

  for (var i = 0; i < 16; i++) {
    icon.colors[i][0] = parseInt(colors[i].substring(1, 3), 16)
    icon.colors[i][1] = parseInt(colors[i].substring(3, 5), 16)
    icon.colors[i][2] = parseInt(colors[i].substring(5, 7), 16)
  }
  

  for (var row = 0; row < 16; row++) {
    for (var col = 0; col < 16; col++) {
      var pixel_color_num = 
        document.getElementById(row + "," + col).color_index
      
      icon.data[row][col] = pixel_color_num
    }
  }
  
  var file = new Binfile()
  file.writeIcon(icon)
  
  var new_win = window.open("", "icon", "width=300,height=200,location=no,menubar=no,status=no")
  new_win.document.open()
  new_win.document.write('<html><head><title>Your icon</title></head>')
  new_win.document.write('<body><p>Your icon: ')
  new_win.document.write('<image src="' + file.as_data_uri("image/x-icon") + '" />')
  new_win.document.write('<br />Right-click and chose "Save as..." to save the icon to a file.</p></body></html>')
  new_win.document.close()
}