/*=======================================
// jsTooltip
// 
// 작성일 : 2008-08-19
// 수정일 : 2008-08-23
// 공대여자는 이쁘다를 나타내야만 쓸 수 있습니다.
// 이 파일은 수정해서 재배포 할 수 없습니다!
// 내가 사용하지 못하도록한 사람,것,들은 사용할 수 없습니다.
// 만든이 : mins,공대여자 
// 홈페이지  : www.mins01.com


#동작 
Tooltip(도움말풍선)을 만들다

#사용법 

	@1 : 수동으로 적용
	<span id='targetId' >내용입니다.</span>
	<script type='text/javascript'>
		var config = {	'gapLeft':5 //커서와의 왼쪽 거리(기본값 : 5)
						,'className':'tooltip' //CSS의 class 이름(기본값 : jsTooltip)
					 }
		var tooltip1 = new jsTooltip(null,document.getElementById('targetId'),'내용',config);
		//주의 : event가 없기 때문에 null로 설정해야함
		//주의 : 브라우저에 따라 오류가 발생할 수 있음 이럴경우 windoe.onload = function(){~~~~} 안에서 처리
	</script>

	@2 : 대상의 이벤트에 적용되도록
	<span onmouseover="new jsTooltip(event,this,'내용')" >내용입니다.</span>
		//주의 : event가 설정안될 경우 FF등에서는 올바르게 동작을 안함

#예
jsTooltip.html 참고


#설정
	없음

#메소드
	없음


#주의
	config 설정잘못해서 질문하면 당신의 발바닥에 메테오스트라이크~
	config의 style설정의 인덱스값은 fontSize 처럼 - 가 없는 형식이어햐합니다.

#제한사항
1. "공대여자는 예쁘다"를 표현할 것.
2. 저작자표시  
3. 비영리  
4. 변경금지 

#연계파일
	없음

# 브라우저 실험결과
IE6 : OK
IE7 : OK
FF2 : OK
FF3 : OK
Opera9 : OK
Sfari3(WIN) : OK


//=======================================*/
/* //설정
var config = {
				,'gapLeft':5 //커서와의 왼쪽 거리(기본값 : 5)
				,'gapTop':5 //커서와의 오른쪽 거리(기본값 : 5)
				,'style':{'fontSize':'30px','width:100px'} //스타일설정(기본값 : 설정안함)
				,'className':'tooltip' //CSS의 class 이름(기본값 : jsTooltip)
			 }
*/

var jsTooltip =  function(evt,target,url,configSetting){
	//==체크
	var str = getHttprequest(url);

	if(str==null || str==''){return false;}
	var config = {'gapLeft':5 ,'gapTop':5 , 'className':'jsTooltip','style':{} };
	if(configSetting){
		for(x in configSetting){
			if(config[x] != null){
				config[x] = configSetting[x];
			}
		}
	}
	//== 변수값 설정

	

	this.target = target
	this.str = str
	this.gapLeft = config['gapLeft'];
	this.gapTop = config['gapTop'];
	divTooltip = document.createElement('div');
	divTooltip.className = config['className']; 
	divTooltip.innerHTML = this.str;
	//divTooltip.appendChild(document.createTextNode(this.str));
	this.target.divTooltip = divTooltip;
	//== 스타일 설정
	if(config['style'] != null){
		for(x in config['style']){
			divTooltip.style[x] = config['style'][x];
		}
	}	
	divTooltip.style.display = 'none';
	divTooltip.style.left = 0;
	divTooltip.style.right = 0;	
	divTooltip.style.position = 'absolute'; 
	
	document.body.appendChild(divTooltip);
	var thisC = this;
	this.target.onmouseover = function(evt){ thisC.show(evt,thisC.target); }
	this.target.onmousemove = function(evt){ thisC.show(evt,thisC.target); }
	this.target	.onmouseout = function(evt){ thisC.hide(evt,thisC.target); }
	if(evt && evt.type == 'mouseover'){
		thisC.show(evt,thisC.target);
	}
}
jsTooltip.prototype.show = function(evt,target){
	if(window.event){ evt = window.event ;}
	if(target.divTooltip){
		var scrollLeft = Math.max(document.documentElement.scrollLeft,document.body.scrollLeft);
		var scrollTop = Math.max(document.documentElement.scrollTop,document.body.scrollTop);
		var scrollWdith = Math.max(document.documentElement.scrollWidth,document.body.scrollWidth);
		var scrollHeight = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);

		var divRight = parseInt(target.divTooltip.style.left) + target.divTooltip.offsetWidth;
		var divBottom = target.divTooltip.offsetTop+target.divTooltip.offsetHeight;
		var x = evt.clientX+this.gapLeft+scrollLeft;
		var y = evt.clientY+this.gapTop+scrollTop;
		
		if( evt.clientX <= target.divTooltip.offsetWidth ){ //왼쪽치우침 방지
		}else if(scrollWdith -  evt.clientX <=   target.divTooltip.offsetWidth ){ //왼쪽치우침 방지
		}else if(x + target.divTooltip.offsetWidth >= scrollWdith){ //왼쪽치우침 방지
			x = x - target.divTooltip.offsetWidth - (this.gapLeft*2);
			
		}
		target.divTooltip.style.left = x+'px';
		target.divTooltip.style.top = y+'px';
		target.divTooltip.style.display = 'block';		
	}
}
jsTooltip.prototype.hide = function(evt,target){
	if(target.divTooltip){
		target.divTooltip.style.display = 'none';
	}
}