/**
 * prototype.js を先に読む必要がある
 *
 * 書き方:
 * <div onmouseover="TIPS.show()"
 *      onmousemove="TIPS.position()"
 *      onmouseout="TIPS.hide()"
 *      tips.title="見出し"
 *      tips.desc="説明文"
 *      tips.ajax="/foo/bar.html"
 *      tips.iframe="http://outside_com/foo/bar.html"> HELP </div>
 *
 * 'tips.' 属性の優先順位
 * tips.desc ＞ tips.ajax ＞ tips.iframe
 */
var TIPS={};
TIPS.id='tips';
TIPS.margin=20;
TIPS.__cache={};
TIPS.getEvent=function(e){
  var ev = e || window.event;
  if(!ev){
    var c = TIPS.getEvent.caller;
    while(c){
      ev = c.arguments[0];
      if (ev && Event == ev.constructor)
        break;
      c = c.caller;
    }
  }
  return ev;
};
TIPS.getWindowWH=function(){
  return [
    window.innerWidth||
    document.documentElement.clientWidth||
    document.body.clientWidth||
    0,
    window.innerHeight||
    document.documentElement.clientHeight||
    document.body.clientHeight||
    0
  ];
};
TIPS.create=function(){
  if($(TIPS.id))return;
  var el=document.createElement('DIV');
  el.id=TIPS.id;
  el.className='tips';
  el.style.display='none';
  el.innerHTML = 
  '<b class="rtop">'+
    '<b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b>'+
  '</b>'+
  '<dl><dt></dt><dd></dd></dl>'+
  '<b class="rbottom">'+
    '<b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b>'+
  '</b>';
  document.body.appendChild(el);
};
TIPS.position=function(e){
  var el = $(TIPS.id);

  e = TIPS.getEvent(e);
  var mouseXY = [Event.pointerX(e), Event.pointerY(e)];
  Position.prepare();
  var scrollXY = [Position.deltaX, Position.deltaY];
  var windowWH = TIPS.getWindowWH();
  el.style.left = (windowWH[0]/2 > mouseXY[0] - scrollXY[0])?
    mouseXY[0] + TIPS.margin + 'px' :
    mouseXY[0] - TIPS.margin - el.offsetWidth + 'px';

  el.style.top = (windowWH[1]/2 > mouseXY[1] - scrollXY[1])?
    mouseXY[1] + TIPS.margin + 'px' :
    mouseXY[1] - TIPS.margin - el.offsetHeight + 'px';
};
TIPS.show=function(e){
  e = TIPS.getEvent(e);
  var src = Event.element(e);
  var el = $(TIPS.id);
  if(!el)return;

  var title = src.getAttribute('tips.title');
  if(!title)return;

  var desc = src.getAttribute('tips.desc');
  if(!desc){
    var url = src.getAttribute('tips.ajax');
    if(url){
      desc = TIPS.__cache[url];
      if(!desc){
        var fn=function(res){
          desc = TIPS.__cache[url] = res.responseText;
        };
        new Ajax.Request(url,{method:'get', onComplete:fn, asynchronous:false});
      }
    }
  }
  if(!desc){
    var url = src.getAttribute('tips.iframe');
    if(url){
      desc = '<iframe src="' + url + '" width="100%" height="100%" '+
        'scrolling="no" border="0" frameborder="0"></iframe>';
    }
  }

  // TODO: title, desc が設定されていなければAJAX でリクエスト出すとか
  var dt = el.getElementsByTagName('DT');
  if(dt)dt[0].innerHTML = title || '&nbsp;';
  var dd = el.getElementsByTagName('DD');
  if(dd)dd[0].innerHTML = desc || '&nbsp;';

  el.style.display='block';

  TIPS.position(e);
};
TIPS.hide=function(){
  var el = $(TIPS.id);
  if(el)el.style.display='none';
};

Event.observe(window, 'load', TIPS.create, false)