// Stadionvisning.
// Copyright 2009 Frank Ronny Larsen
// 
function STADION() {
  var divStadion = document.getElementById("stadion");
  var divHolder = document.getElementById("image-holder");
  var current_image = false;
  var imgbase = "images/";

  var divX = divStadion.offsetLeft;
  var divY = divStadion.offsetTop;
  var holderWidth = divHolder.offsetWidth;

  // Helper variables
  var coop_top = 409;
  var coop_btm = 441;
  var tekko_top = 28;
  var tekko_btm = 127;
  var a_lft = 354;
  var a_rgt = 457;
  var b_lft = 254;
  var b_rgt = 354;
  var c_lft = 162;
  var c_rgt = 254;
  var d_lft = 49;
  var d_rgt = 162;
  var h_lft = 49;
  var h_rgt = 135;
  var i_lft = 135;
  var i_rgt = 214;
  var j_lft = 214;
  var j_rgt = 296;
  var k_lft = 296;
  var k_rgt = 375;
  var l_lft = 375;
  var l_rgt = 457;
  var sta_lft = 0;
  var sta_rgt = 39;
  var sta_top = 127;
  var sta_btm = 332;
  var borte_top = 332;
  var borte_btm = 396;

  // Hot-spot rectangles
  var rectangles = {
    "A": { nw: {y: coop_top, x: a_lft }, se: {y: coop_btm, x: a_rgt }, img: { src: "FeltA.jpg", width: 891, top: 260}},
    "B": { nw: {y: coop_top, x: b_lft }, se: {y: coop_btm, x: b_rgt }, img: { src: "b-m.jpg", width: 404, top: 520 }},
    "C": { nw: {y: coop_top, x: c_lft }, se: {y: coop_btm, x: c_rgt }, img: { src: "c-m.jpg", width: 404, top: 780 }},
    "D": { nw: {y: coop_top, x: d_lft }, se: {y: coop_btm, x: d_rgt }, img: { src: "FeltD.jpg", width: 861, top: 1040 }},
    "H": { nw: {y: tekko_top, x: h_lft }, se: {y: tekko_btm, x: h_rgt }, img: { src: "FeltH.jpg", width: 978, top: 1300 }},
    "I": { nw: {y: tekko_top, x: i_lft }, se: {y: tekko_btm, x: i_rgt }, img: { src: "i-m.jpg", width: 404, top: 1560 }},
    "J": { nw: {y: tekko_top, x: j_lft }, se: {y: tekko_btm, x: j_rgt }, img: { src: "FeltJ.jpg", width: 1129, top: 1820 }},
    "K": { nw: {y: tekko_top, x: k_lft }, se: {y: tekko_btm, x: k_rgt }, img: { src: "k-m.jpg", width: 404, top: 2080 }},
    "L": { nw: {y: tekko_top, x: l_lft }, se: {y: tekko_btm, x: l_rgt }, img: { src: "FeltL.jpg", width: 876, top: 2340 }},
    "S-W": { nw: {x: sta_lft, y: sta_top }, se: {x: sta_rgt, y: sta_top + ((sta_btm-sta_top)/2) }, img: { src: "s-w.jpg", width: 404, top: 3120 }},
    "S-M": { nw: {x: sta_lft, y: sta_top + ((sta_btm-sta_top)/2) }, se: {x: sta_rgt, y: sta_btm }, img: { src: "s-m.jpg", width: 404, top: 2860 }},
    "S-E": { nw: {x: sta_lft, y: borte_top }, se: {x: sta_rgt, y: borte_btm }, img: { src: "s-e.jpg", width: 404, top: 2600 }}
  };

  var checkposition = function (x, y) {
    var posstr = "0px 0px";
    x = x-divX;
    y = y-divY;

    for (var rect in rectangles) {
      var r = rectangles[rect];
      if ((x >= r.nw.x) && (x < r.se.x) && (y >= r.nw.y) && (y < r.se.y)) {
        var pos;
        if (true) {
          pos = ((x-r.nw.x)/(r.se.x-r.nw.x))*(r.img.width-holderWidth);
        } else {
          pos = (r.img.width-holderWidth)*0.5;
        }
        posstr = "-" + pos + "px -" + r.img.top + "px";
        break;
      }
    }

    divHolder.style.backgroundPosition = posstr;
  };

  var mousemove = function(ev) {
    ev = (ev) ? ev : ((event) ? event : null);
    if (ev) {
      var res;
      if (ev.pageX) {
        res = checkposition(ev.pageX, ev.pageY);
      } else if (ev.clientX) { // IE piece of shit
	var d = document.documentElement;
//	alert(d.scrollTop);
        res = checkposition(ev.clientX+d.scrollLeft, ev.clientY+d.scrollTop);
      } else {
        return false;
      }
    }
  };


  divStadion.onmouseover = function() {
    divStadion.onmousemove = mousemove;
  };
  divStadion.onmouseout = function() {
    divStadion.onmousemove = null;
  };
};
STADION();