// JavaScript Document
function addLoadEvent(func) {
	var oldonLoad = window.onload;
	if (typeof window.onload != 'function') {
			window.onload = func;
	}else {
		window.onload = function(){
			oldonLoad();
			func();
		}
	}
}

addLoadEvent(imageBox);
function imageBox(){
	var a_el=document.getElementsByTagName("a");
	for (i=0;i<a_el.length;i++){
		a_el[i].parentNode.expand = false;
		a_el[i].onclick=function(){
			var href=this.getAttribute("href");
			var str = href.substring(href.length-3,href.length);
			if (str=="PNG" | str=="png" | str=="jpg" | str=="JPG"){
				if(this.parentNode.expand==false){
					this.parentNode.expand=true;
					popupImage(this.parentNode,href);
					return false;
				}else {
					if(this.parentNode.childNodes[1].nodeName=="DIV") var div_el = this.parentNode.childNodes[1];
					else if(this.parentNode.childNodes[2].nodeName=="DIV") var div_el = this.parentNode.childNodes[2];
					this.parentNode.expand=false;
					if(div_el.timeout){
						if (div_el.timeout["opacity"])clearTimeout(div_el.timeout["opacity"]);
						if (div_el.timeout["height"])clearTimeout(div_el.timeout["height"]);	
					}
					animateElement(div_el,true,300,0,"height",5);
					animateElement(div_el,false,100,0,"opacity",5);
					return false;
				}
			return false;
			}
		}
	}
}
function popupImage(target,src){
	var div_el = makeTag("div","imageBox");
	var img_el = makeTag("img",null,src,src);
	img_el.setAttribute("height","300");
	var br_el1 = makeTag("br");
	var a_el1 = makeTag("a","expand","확대",src);
	a_el1._ex = false;
	a_el1.onclick = function(){
		if(this._ex==false){
			var a_el = makeTag("a","expandImageBox",null,"#");
			var img_el = makeTag("img",null,"expandImage",this.getAttribute("href"));																			
			a_el.onclick = function(){
				if (this.timeout)clearTimeout(this.timeout["opacity"]);
				a_el1.focus();
				animateElement(this,true,100,0,"opacity",5);
//				this.parentNode.removeChild(this);
				a_el1._ex=false;
				return false;
			}
			a_el.style.top = this.parentNode.offsetTop+50+"px";
			a_el.style.left = this.parentNode.offsetLeft+10+"px";
			a_el.appendChild(img_el);
			this.parentNode.parentNode.appendChild(a_el);
			a_el.focus();
			if (a_el.timeout)clearTimeout(a_el.timeout["opacity"]);
			animateElement(a_el,false,0,100,"opacity",5);
			this._ex=true;
		}
		return false;
	}
	var br_el2 = makeTag("br");
	var a_el2 = makeTag("a","close","닫기","#");
	a_el2.onclick = function(){
		this.parentNode.parentNode.expand=false;
		if(this.parentNode.timeout){
			if(this.parentNode.timeout["opacity"])clearTimeout(this.parentNode.timeout["opacity"]);
			if(this.parentNode.timeout["height"])clearTimeout(this.parentNode.timeout["height"]);
		}
		animateElement(this.parentNode,true,300,0,"height",5);
		animateElement(this.parentNode,true,100,0,"opacity",5);
		return false;
	}
	div_el.appendChild(img_el);
	div_el.appendChild(br_el1);
	div_el.appendChild(a_el1);
	div_el.appendChild(br_el2);
	div_el.appendChild(a_el2);
	target.appendChild(div_el);
	if(div_el.timeout){
		if (div_el.timeout["opacity"])clearTimeout(div_el.timeout["opacity"]);
		if (div_el.timeout["height"])clearTimeout(div_el.timeout["height"]);
	}
	animateElement(div_el,false,0,100,"opacity",20);
	animateElement(div_el,false,0,310,"height");
}

addLoadEvent(effectControl);
function effectControl(){
	var content = document.getElementById("content");
	var div_el = makeTag("div","control");
	var a_el = makeTag("a","on","effect ON","#");
	a_el.setAttribute("title","클릭하면 애니메이션 효과를 제거합니다.");
	a_el.onclick=function(){
		this.removeChild(this.childNodes[0]);
		if (document.body._effect==true){
			var text = document.createTextNode("effect OFF");
			this.setAttribute("title","클릭하면 애니메이션 효과를 사용합니다..");
			this.className="off";
			this.appendChild(text);
			document.body._effect=false;
			return false;
		} else {
			var text = document.createTextNode("effect ON");
			this.setAttribute("title","클릭하면 애니메이션 효과를 제거합니다.");
			this.className = "on";
			this.appendChild(text);
			document.body._effect=true;
			return false;
		}
		return false;
	}
	document.body._effect = true;
	div_el.appendChild(a_el);
	content.appendChild(div_el);
}
function makeTag(type,Class,text,src){
	var tag_el = document.createElement(type);
	if(Class)tag_el.className = Class;
	if(text && type!="img"){
		var txt = document.createTextNode(text);
		tag_el.appendChild(txt);
	}
	if(type=="img"){
		tag_el.setAttribute("src",src);
		tag_el.setAttribute("alt",text);
		tag_el.setAttribute("title",text);
	}
	if(type=="a"){
		tag_el.setAttribute("href",src);
		tag_el.setAttribute("title",text);
	}
	return tag_el;
}
function makeLink(href,text,Class){
	var a_el = document.createElement("a");
	a_el.setAttribute("href",href);
	if(Class)a_el.className = Class;
	var text = document.createTextNode(text);
	a_el.appendChild(text);
	return a_el;
}


function animateElement(node,deleteNode,oldValue,newValue,type,smooth,speed) {
	if(document.body._effect==false){
		if(deleteNode==false)return false;
		else {
			if(node.parentNode)node.parentNode.removeChild(node);
		}
	}
/*
node = 움직일 노드 입력  노드로 입력.
oldValue = 크기를 변경하기 전으 수치.애니메이션의 시작 값, 숫자로 입력.
newValue = 애니메이션의 목표값. 숫자로 입력.
type = 변경할 속성의 타입을 정의. 문자로 입력.
    -> "width" ->Element 의 너비를 변경.
    -> "height" ->Element 의 높이를 변경..
    -> "top","left","right","bottom" -> Element 의 위치를 변경.
smooth = 움직임을 제어하는 수치. 많을수록 부드럽게 움직인다. 숫자로 입력.
speed = 애니메이션으 속도 제어. 숫자로 입력.
deleteNode = 노드제거기능. null 이거나 false면 작동안함. 
*/ 
	if (!node.style) return false;
	node.style.display = "block";
    if (!smooth) smooth = 10;
    if (!speed) speed = 30;
    if (!node._value) node._value = new Array();
    if (!node._value[type]) node._value[type] = oldValue;
	
    node._value[type] = node._value[type] + ((newValue-node._value[type])/smooth);
	var AAA = Math.floor(node._value[type]);
    if (type=="width"){ node.style.width = AAA + "px";}
    else if (type == "height"){ node.style.height = AAA + "px";}
    else if (type == "top"){ node.style.top = AAA + "px";}
    else if (type == "left"){ node.style.left = AAA + "px";}
    else if (type == "right"){ node.style.right = AAA + "px";}
    else if (type == "bottom"){ node.style.bottom = AAA + "px";}
	else if (type == "opacity"){ node.style.opacity = AAA / 100 ;}
	if (navigator.appName == "Microsoft Internet Explorer" & type == "opacity") {
		node.style.filter = "alpha(opacity="+AAA+");";
	}
	if(node._value["opacity"]<1) node.style.display = "none";
    if (oldValue < newValue && node._value[type] <= newValue-1) {
        var Action = true;
    } else if (oldValue > newValue && node._value[type] > newValue+1) {
        var Action = true;
    } else {
        var Action = false;
		if(deleteNode==true){
			if(node.parentNode)	node.parentNode.removeChild(node);
			return false;
		}
    }
    if (Action == true) {
        if (!node.timeout) node.timeout = new Array();
        node.timeout[type] = setTimeout (function () { animateElement(node,deleteNode,oldValue,newValue,type,smooth,speed) }, speed);
    }
}