ie = /MSIE/.test(navigator.userAgent);

if(!window.Event) {
    window.Event = {};
}

if(!window.Event.observe) {
    
    window.Event.observe = function(element, event, fn, capture) {
        if(ie) {
            element.attachEvent("on" + event, fn);
        } else {
            element.addEventListener(event, fn, capture);
        }
    }
}

function square_init(square_count) {
  var cnt = square_count || 4;
  window._maxSquareY = (cnt / 2) - 1;
  try {
    for(var i = 1; i <= cnt; i++) {
      var id = "Square"+i;
      var el = document.getElementById(id);
      install_hover(el);
    }
  } catch(ex) {
    if(window.console && window.console.log) window.console.log(ex);
  }
}

function hover_out(el) {
  var pos = el.getAttribute('pos');
  var xy = pos.split('.');
  var x = parseInt(xy[0]);
  var y = parseInt(xy[1]);
  if(x == 0) {
    el.style.borderLeftColor = "white";
  } else {
    el.style.borderRightColor = "white";
  }
  if(y == 0) {
    el.style.borderTopColor = "white";
  } 
  if(y == window._maxSquareY) {
    el.style.borderBottomColor = "white";
  }
  el.style.backgroundColor = "";
}

function hover_in(el) {
    var pos = el.getAttribute('pos');
    var xy = pos.split('.');
    var x = parseInt(xy[0]);
    var y = parseInt(xy[1]);
    if(x == 0) {
      el.style.borderLeftColor = "#8DA8C5";
    } else {
      el.style.borderRightColor = "#8DA8C5";
    }
    if(y == 0) {
      el.style.borderTopColor = "#8DA8C5";
    } 
    if(y == window._maxSquareY) {
      el.style.borderBottomColor = "#8DA8C5";
    }
    el.style.backgroundColor = "#F7F7FF";
}

function install_hover(el) {
  Event.observe(el, 'mouseover', function() {
    hover_in(el);
  });
  Event.observe(el, 'mouseout', function() {
    hover_out(el);
  });
}