var getEventTarget = function(e) {
  if(e.target) {
    return e.target;
  } else {
    return e.srcElement;
  }
}

var getScrollOfs = function() {
  
  var a = new Array();
  if(document.body.scrollLeft != null) {
    a[0] = document.body.scrollLeft;
    a[1] = document.body.scrollTop;
  } else if(document.documentElement.scrollLeft != null) {
    a[0] = document.documentElement.scrollLeft;
    a[1] = document.documentElement.scrollTop;
  } else {
    a[0] = window.scrollX;
    a[1] = window.scrollY;
  }

  return a;
}

function Area(contentUrl) {

  this.contentUrl = contentUrl;
  this.contentLoaded = false;

  this.div = document.createElement('div');

  this.show = function(x, y) {
    this.loadContent();

    this.setPos(x, y);

    this.div.style.display = 'block';
    this.div.style.zIndex = Area.maxZ++;
  }

  this.setPos = function(x, y) {

    //var x = nearTarget.div.offsetLeft + 32;
    //var y = nearTarget.div.offsetTop + 32;

    if(x == null) {
      x = 8;
    }
    if(y == null) {
      y = 8;
    }

    this.div.style.position = "absolute";
    this.div.style.top = y+"px";
    this.div.style.left = x+"px";
  }

  this.hide = function() {
    this.div.style.display = 'none';
  };

  var instance = this;

  this.loadContent = function() {

    if(this.contentLoaded == true || this.contentLoading == true) {
      return;
    }

    if(!this.contentUrl) {
      return;
    }

    this.contentLoading = true;

    var req = new HttpReq();
    req.onload = function(){

      var workFrame = document.createElement('iframe');
      workFrame.style.display = 'none';
      document.getElementById('root').appendChild(workFrame);
      workFrame.contentWindow.document.open();
      workFrame.contentWindow.document.write(req.getResponseText());
      workFrame.contentWindow.document.close();

      instance.render(workFrame);


      //instance.div.childNodes[1].innerHTML = workFrame.contentWindow.document.getElementById('root');
      instance.contentLoaded = true;
      instance.contentLoading = false;
    }
    req.get(this.contentUrl);
  }

  this.close = function() {
    this.hide();
  }

  this.getParam = function(workFrame, paramName) {

    try {
      return workFrame.contentWindow.document.evaluate('/html/head/meta[@name="'+paramName+'"]/@content', workFrame.contentWindow.document, null, XPathResult.STRING_TYPE, null).stringValue;
    } catch(e) {

      var metas = workFrame.contentWindow.document.getElementsByTagName('meta');
      for(var i=0; i<metas.length; i++) {

	if(metas[i].getAttribute('name') == paramName) {
	  return metas[i].getAttribute('content');
	}
      }
      return null;
    }
  }

  this.render = function(workFrame) {

    var workDoc = workFrame.contentWindow.document;
    var title;

    try {
      title = workDoc.evaluate
	('/html/head/title', workDoc, null, XPathResult.STRING_TYPE, null).stringValue;
    } catch(e) {

      var titles = workDoc.getElementsByTagName('title');
      if(titles.length != 1) {
	alert("unexpected number of title elms");

      } else {
	title = titles[0].innerText;
      }
    }

    var depth = this.getParam(workFrame, "0g_depth");

    //this.width = workFrame.get;
    //this.height = height;

    //this.div.style.width = width;
    //this.div.style.height = height;
    this.div.style.border = '1px solid black';
    this.div.className = "areaLv"+depth+" area";
    this.div.name = "area";
    //this.div.id = id;
    this.div.instance = this;

    addEventListener
    (this.div, 'mouseover',
     function(e) {

      var n = getEventTarget(e);
      while(n.name != "area") {
	n = n.parentNode;
      }
      var titleBarDiv = n.firstChild;
      titleBarDiv.style.color = '#FFFFFF';
      titleBarDiv.style.backgroundColor = '#000';
    }
     );
    addEventListener
    (this.div, 'mouseout',
     function(e) {

      var n = getEventTarget(e);
      while(n.name != "area") {
	n = n.parentNode;
      }
      var titleBarDiv = n.firstChild;
      titleBarDiv.style.color = null;
      titleBarDiv.style.backgroundColor = null;
    }
     );


    var titleBarDiv = document.createElement('div');
    titleBarDiv.className = "titleBar";
    this.div.appendChild(titleBarDiv);

    addEventListener
    (titleBarDiv, 'mousedown',
     function(e) {
	document.movingArea = instance;

	var scr = getScrollOfs();
	document.movingOx = e.clientX + scr[0];
	document.movingOy = e.clientY + scr[1];
	document.body.style.cursor = 'move';
	instance.raiseToTop();
    }
    );

    addEventListener
    (document, 'mouseup',
     function(e) {
	if(document.movingArea == null) {
	    return;
	}
	document.movingArea = null;	
	document.movingOx = document.movingOy = -1;
	document.body.style.cursor = null;
    }
    );

    this.raiseToTop = function() {
	if(this.div.style.zIndex == Area.maxZ - 1) {
	    return; // already top
	}
	this.div.style.zIndex = Area.maxZ++;
    }

    addEventListener
    (document, 'mousemove',
     function(e) {

	if(document.movingArea == null) {
	    return;
	}

	var scr = getScrollOfs();
	var dx = (e.clientX + scr[0]) - document.movingOx;
	var dy = (e.clientY + scr[1]) - document.movingOy;

	document.movingOx = e.clientX + scr[0];
	document.movingOy = e.clientY + scr[1];

	var a = document.movingArea;

	a.setPos(dx + parseInt("0"+a.div.style.left, 10)/* + window.scrollX*/,
		 dy + parseInt("0"+a.div.style.top, 10)/* + window.scrollY*/);
    }
    );


    if(depth > 0) {
      var closeBox = new CloseBox();
      titleBarDiv.appendChild(closeBox.div);
    }

    var titleDiv = document.createElement('div');
    titleBarDiv.appendChild(titleDiv);
    titleDiv.innerHTML = title;

    var contentDiv = document.createElement('div');
    contentDiv.className = "content";
    this.div.appendChild(contentDiv);

    document.getElementById('root').appendChild(this.div);

    var workBodyNode = workDoc.getElementById("contents");
    if(workBodyNode == null) {
      alert("no body!?");
      return;
    }
    //alert(workBodyNode.innerHTML);
    contentDiv.innerHTML = workBodyNode.innerHTML;
    instance.replaceHref(document, contentDiv);
  }

  //this.hresizable = hresizable;
  //this.vresizable = vresizable;
  //this.movable = movable;
  //this.contentLoaded = false;

  this.replaceHref = function(doc, target) {

    // build a list, because the iter will become invalid after removeAttribute.
    var aNodes = new Array();

    try {
      var iter = doc.evaluate
	('//a[@href]', target, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

      var aNode;
      while(aNode = iter.iterateNext()) {
	aNodes.push(aNode);
      }
    } catch(e) {
      var as = target.getElementsByTagName('a');
      for(var i = 0; i < as.length; i++) {
	if(as[i].getAttribute('href')) {
	  aNodes.push(as[i]);
	}
      }
    }

    var instance = this;

    var i;
    for(i = 0; i < aNodes.length; i++) {
      var url = aNodes[i].getAttribute("href");
      //aNodes[i].removeAttribute("href");

      aNodes[i].url = url;
      aNodes[i].instance = this;

      addEventListener
	(aNodes[i], 'click',
	 function(e) {
	  if(e.target) {
	    e.target.instance.clicked(e.target.url, e.pageX, e.pageY);
	    e.preventDefault();
	  } else {
	    e.returnValue = false;
	    e.cancelBubble = true;
	    e.srcElement.instance.clicked(e.srcElement.url,
					  document.body.scrollLeft+e.clientX,
					  document.body.scrollTop+e.clientY);
	  }
	}
	 );
      //aNodes[i].instance = instance;
    }
  }

  this.clicked = function(url, x, y) {

    var external;
    if(document.all) {
      external = url.substring(7).match(/^[^/]+/) != location.host;
    } else {
      external = url.substring(0, 4) == "http";
    }

    if(external) {
      window.open(url, "_blank");
    } else {
      // internal link
      var newArea = Area.getInstance(url);

      newArea.show(x, y);
    }

  }
};

Area.maxZ = 0;

Area.spool = new Object();

Area.getInstance = function(url) {
  var img = new Image();
  img.src = url;
  url = img.src;
  img.src="#";

  var instance = Area.spool[url];
  if(! instance) {
    instance = new Area(url);
    Area.spool[url] = instance;
  }

  return instance;
}

function CloseBox() {

  this.close = function() {
    // this is div
    var p;
    for(p = this.parentNode; p; p = p.parentNode) {
      if(p.instance && p.instance.close) {
	p.instance.close();
	break;
      }
    }
  }

  this.div = document.createElement('div');
  this.div.className = "closeBox";
  this.div.innerHTML = "X";
  this.div.onclick = this.close;
  this.div.instance = this;

};

(function(){
  document.movingArea = null;
  document.movingOx = document.movingOy = -1;
});