var Tile = Class.create();
Tile.prototype = {
  self: this,

  initialize: function(r, c, markup, parent, pos) {
    this.r = r;
    this.c = c;
    this.reset();
    this.region = parseInt(r / 3) * 3 + parseInt(c / 3);
    this.markup = !!markup;
    if (this.markup) {
      this.parent = parent;
      this.pos = pos;
    }
  },

  construct: function() {
  },

  reset: function() {
    this.assigned = false;
    this.given = false;
    this.n = null;
    this.flashes = 0;
    if (this.div)
      this.display(0);
    if (!this.markup && this.markupTiles)
      this.markupTiles.each(function(t) { t.reset(); });
  },
  
  generate: function() {
  },

  createElement: function() {
    this.div = $(document.createElement("div"));
    this.div.addClassName("tile");
    if (this.markup) this.div.addClassName("markup");
    var y = this.r * field.tileHeight;
    var x = this.c * field.tileWidth;
    var ie = Prototype.Browser.IE;
    if (this.markup) {
      var top = this.r == 0 || this.r == 3 || this.r == 6;
      var left = this.c == 0 || this.c == 3 || this.c == 6;
      if (this.pos % 2 == 1)
	x += field.tileWidth - field.markupTileWidth - (this.c % 3 == 0 ? 0 : 1);
      else {
	x += this.c % 3 == 2 ? 0 : 1;
	if (ie && this.c % 3 != 0) x -= 1;
	if (ie && this.c % 3 == 2) x += 1;
      }
      if (this.pos >= 2)
	y += field.tileHeight - field.markupTileHeight - (top && !ie ? 0 : 1);
      else {
	y += this.r % 3 == 2 ? 0 : 1;
	if (ie && this.r % 3 == 1) y -= 1;
      }
    }
    this.div.setStyle({top: y,
			  left: x});
    this.div.observe("mouseover", this.onMouseOver.bind(this));
    this.div.observe("mouseout", this.onMouseOut.bind(this));
    if (Prototype.Browser.IE)
      this.div.observe("mouseup", this.onClick.bind(this));
    else
      this.div.observe("click", this.onClick.bind(this));
    this.setBorderColor("black");
    return this.div;
  },

  createMarkupElements: function() {
    var elms = $A();
    this.markupTiles = $A();
    for (var i = 0; i < 4; i++) {
      var t = new Tile(this.r, this.c, true, this, i);
      t.reset();
      var e = t.createElement();
      e.innerHTML = '<span></span>';
      elms.push(e);
      this.markupTiles.push(t);
    }
    return elms;
  },

  deleteMarkupElements: function() {
    this.markupTiles = null;
  },

  flash: function() {
    if (this.flashes == 0) this.flashes = 5;
    else --this.flashes;
    var on = this.flashes % 2 == 1;
    this.div.setStyle({backgroundColor: (on ? "red" : "transparent")});
    if (this.flashes > 0) setTimeout(this.flash.bind(this), 500);
  },

  setBorderColor: function(col) {
    if (this.markup) {
      if (col == "red")
      	this.div.setStyle({opacity: 0.9, backgroundColor: "#ff6666"});
      else
	this.div.setStyle({opacity: 0.5, background: "transparent"});
      //      this.div.setStyle({border: "1px solid " + col});
      return;
    }
    var top = this.r == 0 || this.r == 3 || this.r == 6;
    var left = this.c == 0 || this.c == 3 || this.c == 6;
    this.div.setStyle({
      borderRight: "1px solid " + col,
	  borderBottom: "1px solid " + col,
	  borderTop: (top ? "1px solid " + col : "none"),
	  borderLeft: (left ? "1px solid " + col : "none")
      });
    if (!top)
      field.get(this.r - 1, this.c).div.setStyle({
	borderBottom: "1px solid " + col
	    });
    if (!left)
      field.get(this.r, this.c - 1).div.setStyle({
	borderRight: "1px solid " + col
	    });
  },

  assign: function(n) {
    if (this.given) return;
    if (this.assigned && this.n == n) return;
    if (!this.markup) {
      var t1 = field.findTileInRow(this.r, n);
      if (t1) t1.flash();
      var t2 = field.findTileInCol(this.c, n);
      if (t2) t2.flash();
      var t3 = field.findTileInRegion(this.region, n);
      if (t3 && t3 != t1 && t3 != t2) t3.flash();
      if (t1 || t2 || t3) return;
    }
    this.n = n;
    this.assigned = true;
    this.display(n);
    if (!this.markup)
      field.onAssign(this);
  },

  unassign: function() {
    if (this.given) return;
    this.n = null;
    this.assigned = false;
    this.display(0);
    if (!this.markup)
      field.onAssign(this);
  },

  onMouseOver: function(evt) {
    field.activateTile(this);
  },

  onMouseOut: function(evt) {
    field.deactivateTile(this);
  },

  onClick: function(evt) {
    if (game.stopped) return;
    if (this.given) return;
    field.showSelector(this, evt);
  },

  give: function(n) {
    this.n = n;
    this.given = true;
    this.assigned = true;
    this.display(n, true);
    this.div.addClassName("given");
  },

  display: function(n, given) {
    if (this.markup)
      this.div.innerHTML = n ? "" + '<span>' + n + '</span>': "";
    else if (!n)
      this.div.style.background = "transparent";
    else
      this.div.style.backgroundImage = "url(img/" + (given ? "clue" : "hand") + "-" + n + ".gif)";
  }
};