(function(){

var base = "/articles/clothes/";

/* =============================
	http request
-------------------------------- */

var http = function(){
	var f = function(method,path,async,data,callback){
		var req = new XMLHttpRequest();
		req.open(method,path,async);
		req.onreadystatechange = function(){
			if(req.readyState==4){
				if(!req.responseXML) return callback.error(1);
				return callback.success(req.responseXML);
			}
		}
		req.send(null);
	}
	return f;
}
var callback = function(){
	var f = function(){}
	f.success = function(){}
	f.error = function(code){
		var message = "";
		switch(code){
			case 0: message = "404 file not found";
			case 1: message = "its response is not xml";
		}
	}
	return f;
}
var busymark = function(){
	var i = document.createElement("img");
	i.src = "/control/images/img_loader.gif";
	var f = function(w,h){
		var i = document.createElement("img");
		i.width= 16;
		i.height = 16;
		i.style.margin = Math.floor((h-16)/2)+"px "+Math.floor((w-16)/2)+"px";
		i.src = "/control/images/img_loader.gif";
		return i;
	}
	return f;
}();

/* =============================
	control hover, clicked
-------------------------------- */

var index = 0;
var hover = function(evt){
	var evt = window.event || evt;
	var target = evt.srcElement || evt.currentTarget;
	bid = target.id;
	
	if(index==0 && bid=="jsImagesCtlU") return;
	if(index==-1 && bid=="jsImagesCtlD") return;
	
	if(evt.type=="mouseover"){
		if(index==0 && bid=="jsImagesCtlD") target.style.backgroundImage = "url(../../images/js_arrow_dr.png)";
		if(index==-1 && bid=="jsImagesCtlU") target.style.backgroundImage = "url(../../images/js_arrow_ur.png)";
	}
	if(evt.type=="mouseout"){
		if(index==0 && bid=="jsImagesCtlD") target.style.backgroundImage = "url(../../images/js_arrow_db.png)";
		if(index==-1 && bid=="jsImagesCtlU") target.style.backgroundImage = "url(../../images/js_arrow_ub.png)";
	}
}
var clicked = function(evt){
	var evt = window.event || evt;
	var target = evt.srcElement || evt.currentTarget;
	bid = target.id;
	var li = document.getElementById("jsImagesCtl");
	li = li.getElementsByTagName("li")[0];
	
	if(index==0 && bid=="jsImagesCtlU") return;
	if(index==-1 && bid=="jsImagesCtlD") return;
	
	var height = 235;
	var dir = (bid=="jsImagesCtlU")? 1:-1;
	var d = 0;
	var f = function(){
		var h = Math.sin(Math.PI/180*d)*height*dir+height*index;
		li.style.marginTop = h+"px";
		d = d+2;
		if(d>90){
			window.clearInterval(timer);
			index = (index==0)? -1:0;
			var ud = document.getElementById("jsImagesCtlU");
			var dd = document.getElementById("jsImagesCtlD");
			if(index==-1){
				ud.style.backgroundImage = "url(../../images/js_arrow_ub.png)";
				dd.style.backgroundImage = "url(../../images/js_arrow_dg.png)";
			}
			if(index==0){
				ud.style.backgroundImage = "url(../../images/js_arrow_ug.png)";
				dd.style.backgroundImage = "url(../../images/js_arrow_db.png)";
			}
		}
	}
	var timer = window.setInterval(f,1);
}

/* =============================
	image hover, clicked
-------------------------------- */

var ihover = function(evt){
	var evt = window.event || evt;
	var target = evt.srcElement || evt.currentTarget;
	target.style.borderColor = (evt.type=="mouseover")? "#f66":"#fff";
}
var iclicked = function(evt){
	/* main message */
	var evt = window.event || evt;
	var tgt = evt.srcElement || evt.currenttgt;
	var items = loadedXML.getElementsByTagName("item");
	var ps = "";
	var hasNoDetail = "";
	for(var n=0,l=items.length; n<l; n++){
		var date = items[n].getAttribute("date");
		if(tgt.id==date){
			ps = items[n].getElementsByTagName("p");
			hasNoDetail = items[n].getAttribute("hasNoDetail");
			break;
		}
	}
	if(!ps) return;
	
	var a = document.createElement("a");
	a.innerHTML = "→詳細";
	a.href = base+"index.html#"+date;
	var mes = document.getElementById("jsImageMessage");
	mes.innerHTML = "";
	for(var n=0,l=ps.length; n<l; n++){
		var p = document.createElement("p");
		p.innerHTML = ps[n].firstChild.nodeValue;
		if(n==l-1 && hasNoDetail=="no") p.appendChild(a);
		mes.appendChild(p);
	}
	
	/* main picture */
	var jsImagesTgt = document.getElementById("jsImagesTgt");
	jsImagesTgt.removeChild(jsImagesTgt.firstChild);
	jsImagesTgt.appendChild(busymark(195,260));
	
	var img = document.createElement("img");
	var iesuffix = (ExObj.browser.ie)? "?"+new Date().getTime():"";
	img.src = base+"images/"+date+".jpg"+iesuffix;
	img.width = 195;
	img.height = 260;
	img.alt = date;
	ExObj.addEvent(img,"load",function(){
		jsImagesTgt.removeChild(jsImagesTgt.firstChild);
		jsImagesTgt.appendChild(img);
	},false);
}

/* =============================
	xml loaded callback
-------------------------------- */

var cb = callback();
cb.success = function(xml){
	loadedXML = xml;
	var items = xml.getElementsByTagName("item");
	
	/* make image list */
	var ul = document.createElement("ul");
	for(var n=0,l=items.length; n<l; n++){
		var date = items[n].getAttribute("date");
		var hasNoDetail = items[n].getAttribute("hasNoDetail");
		var li = document.createElement("li");
		ul.appendChild(li);
		var img = document.createElement("img");
		img.src = base+"images/"+date+"t.jpg";
		img.id = date;
		li.appendChild(img);
		ExObj.addEvent(img,"mouseover",ihover,false);
		ExObj.addEvent(img,"mouseout",ihover,false);
		ExObj.addEvent(img,"click",iclicked,false);
	}
	
	/* control up */
	var up = document.createElement("div");
	up.id = "jsImagesCtlU";
	up.style.backgroundImage = "url(../../images/js_arrow_ug.png)";
	up.innerHTML = "&nbsp;";
	ExObj.addEvent(up,"mouseover",hover,false);
	ExObj.addEvent(up,"mouseout",hover,false);
	ExObj.addEvent(up,"click",clicked,false);
	
	/* control down */
	var down = document.createElement("div");
	down.id = "jsImagesCtlD";
	down.style.backgroundImage = "url(../../images/js_arrow_db.png)";
	down.innerHTML = "&nbsp;";
	ExObj.addEvent(down,"mouseover",hover,false);
	ExObj.addEvent(down,"mouseout",hover,false);
	ExObj.addEvent(down,"click",clicked,false);
	
	/* append child */
	var cont = document.getElementById("jsImagesCtl");
	cont.removeChild(cont.getElementsByTagName("ul")[0]);
	cont.appendChild(up);
	cont.appendChild(ul);
	cont.appendChild(down);
}

/* =============================
	main process
-------------------------------- */

var fn = function(){
	var load = http();
	load("GET",base+"index.xml",true,null,cb);
}
document.ready(fn);

})();



(function(){

/* ===============================
		show as a list
---------------------------------- */

function Button(){
	var o = document.createElement("li");
	o.innerHTML = "最近の更新一覧";
	o.style.color = "#00409a";
	o.style.cursor = "pointer";
	
	var clicked = function(){
		var nv = document.getElementById("jsNaviList");
		var s = nv.style.display;
		var s = (!s || s=="none")? "block":"none";
		nv.style.display = s;
		o.style.color = "red";
	}
	ExObj.addEvent(o,"click",clicked,false);
	ExObj.addEvent(o,"mouseover",function(){
		o.style.color = "red";
		o.style.textDecoration = "underline";
	},false);
	ExObj.addEvent(o,"mouseout",function(){
		nv = document.getElementById("jsNaviList");
		if(nv.style.display=="block") return;
		o.style.color = "#00409a";
		o.style.textDecoration = "none";
	},false);
	ExObj.cancelSelect(o);
	return o;
}
var button = Button();

function menuExpansion(obj){
	ExObj.addEvent(obj,"mouseout",function(e){
		var t = e.target || e.srcElement;
		var r = e.relatedTarget || e.toElement;
		try{
			while(r && r!=obj){
				r = r.parentNode;
			}
			if(!r){
				obj.style.display = "none";
				button.style.color = "#00409a";
				button.style.textDecoration = "none";
			}
		}catch(e){}
	},false);
}

function fn(){
	var nv = document.getElementById("jsNaviList");
	nv.style.position = "absolute";
	nv.style.top = "1.3em";
	nv.style.left = "0";
	menuExpansion(nv);
	var jsc = document.getElementById("jsNaviCtl");
	jsc.insertBefore(button,jsc.firstChild);
}

document.ready(fn);

})();