(function(){

/*	toggle menu
------------------------------ */
var toggle_menu = function(){
	// toggle
	var toggle = function(e){
		if(e) e.stop();
		lst.style.display = (lst.style.display=="block")? "none":"block";
	}
	
	// outed
	var outed = function(e){
		e.stop();
		var rel = e.relatedTarget;
		while((rel=rel.parentNode) && rel!=this);
		if(!rel) toggle();
	}
	
	// container
	var ctl = $("jsNaviCtl");
	var lst = $("jsNaviList").set({
		styles:{
			position: "absolute",
			display: "none",
		},
		events:{
			mouseout: outed
		}
	});

	// switch
	var a = new Element("a",{
		text: "最近の一覧",
		href: "#",
		events:{
			click: toggle
		}
	}).inject(new Element("li").inject(ctl,"top"));
};

/*	tumblr
------------------------------ */
var tumblr = function(){
	// options
	var opts = {
		id: "tumblr",
		title: "Tumble Log",
		gateway: "z/gateway_tumblr.php?t=all",
		srcHref: "http://tailor-kasukabe.tumblr.com/archive",
		srcText: "→ tumblr.com/archive"
	}
	
	// elements
	var title = new Element("h2",{ text: opts.title});
	var container = new Element("div",{ id: opts.id});
	
	var logul = new Element("ul",{styles:{
		lineHeight: 0,
		margin:"6px 0", padding: 0
	}});
	var logp = new Element("p",{styles:{
		fontSize: "small", textAlign: "right",
		margin: 0, padding: "0 4px"
	}});
	var loga = new Element("a",{
		href: opts.srcHref,
		text: opts.srcText
	});
	container.adopt([logul,logp]);
	logp.grab(loga);

	// template element
	var tmpLi = new Element("li",{styles:{
		display: "inline",
		margin: 0, padding: 0
	}});
	var tmpA = new Element("a");
	var tmpImg = new Element("img",{
		width: 56, height: 56
	});
	tmpLi.grab(tmpA.grab(tmpImg));


	// make dom after xml is loaded
	var make = function(json){
		eval(json); // tumblr_api_read
		var n=0, post, posts = tumblr_api_read.posts;
		var arr = [];
		while((post=posts[n++])){
			var li = tmpLi.clone(true);
			arr.push(li);
			var photourl = post["photo-url-75"];

			li.getElement("a").set("href",post.url);
			var img = li.getElement("img");
			img.set("src", photourl);
			img.addEvent("load",function(e){
				logul.grab(e.target.parentNode.parentNode);
			});
		}
	};
	
	// load json
	var req = new Request({
		url: opts.gateway,
		onRequest: function(){},
		onSuccess: make,
		onFailur: function(){}
	});
	req.send();

	// control
	var f = function(){}
	f.inplant = function(parentElementId){
		$(parentElementId).adopt([title, container]);
	}
	return f;
}();

/*	photos
------------------------------ */
var busy = function(){
	var f = function(){}
	f.element = new Element("img",{
		src: "/z/images/img_loader.gif",
		width: 16, height: 16
	});
	f.set = function(w,h){
		f.element.setStyle("margin",Math.floor((h-16)/2)+"px "+Math.floor((w-16)/2)+"px");
	}
	f.get = function(){
		return f.element.cloneNode(true);
	}
	return f;
}();
function LOADER(){
	// objects
	var up, down, selector;

	// construct objects
	up = function(){
		var f = function(){}
		f.disabled = true;
		f.hover = function(e){
			if(f.disabled) return;
			if(e.type=="mouseout") this.setStyle("backgroundImage","url(/images/js_arrow_ub.png)");
			if(e.type=="mouseover") this.setStyle("backgroundImage","url(/images/js_arrow_ur.png)");
		}
		f.toggle = function(){
			f.disabled = (f.disabled)? false:true;
			var bgSrc = (f.disabled)? "url(/images/js_arrow_ug.png)":"url(/images/js_arrow_ub.png)";
			f.element.setStyle("backgroundImage",bgSrc);
		}
		f.element = new Element("div",{
			id: "jsImagesCtlU",
			text: " ",
			styles: { backgroundImage: "url(/images/js_arrow_ug.png)"},
			events: {
				mouseover: f.hover,
				mouseout: f.hover,
				click: function(){
					if(f.disabled) return;
					selector.slide(+1);
				}
			}
		});
		return f;
	}();

	down = function(){
		var f = function(){}
		f.disabled = false;
		f.hover = function(e){
			if(f.disabled) return;
			if(e.type=="mouseout") this.setStyle("backgroundImage","url(/images/js_arrow_db.png)");
			if(e.type=="mouseover") this.setStyle("backgroundImage","url(/images/js_arrow_dr.png)");
		}
		f.toggle = function(){
			f.disabled = (f.disabled)? false:true;
			var bgSrc = (f.disabled)? "url(/images/js_arrow_dg.png)":"url(/images/js_arrow_db.png)";
			f.element.setStyle("backgroundImage",bgSrc);
		}
		f.element = new Element("div",{
			id: "jsImagesCtlD",
			text: " ",
			styles: { backgroundImage: "url(/images/js_arrow_db.png)"},
			events: {
				mouseover: f.hover,
				mouseout: f.hover,
				click: function(){
					if(f.disabled) return;
					selector.slide(-1);
				}
			}
		});
		return f;
	}();

	selector = function(){
		var f = function(){}
		f.xml = {};
		f.element = new Element("ul");
		f.construct = function(xml){
			f.xml = xml.getElementsByTagName("item");
			var n=0, item, items = f.xml;
			while((item=items[n++])){
				var date = item.getAttribute("date");
				var img = new Element("img");
				img.set("src","/articles/clothes/images/"+date+"t.jpg");
				img.set("id",date);
				img.set("events",{
					mouseover: function(){ this.setStyle("borderColor","#f66")},
					mouseout: function(){ this.setStyle("borderColor","#fff")},
					click: f.show
				});
				var li = new Element("li");
				li.grab(img);
				f.element.grab(li);
			}
		}
		f.show = function(e){
			var n=0, item, items = f.xml;
			while((item=items[n++])) if(item.get("date")==e.target.id) break;

			// message area
			var a = new Element("a",{text: "→詳細", href: "/articles/clothes/index.html#"+e.target.id});
			var ps = item.getElementsByTagName("p");
			var p0 = new Element("p",{text:ps[0].firstChild.nodeValue});
			var p1 = (ps[1])? new Element("p",{text:ps[1].firstChild.nodeValue}):"";

			if(item.get("hasNoDetail")=="no"){
				if(p1) p1.grab(a);
				else p0.grab(a);
			}
			var mes = $("jsImageMessage");
			mes.empty();
			mes.grab(p0);
			if(p1) mes.grab(p1);

			// image area
			var container = $("jsImagesTgt");
			busy.set(192,260);
			container.empty();
			container.grab(busy.get());

			var img = new Element("img",{
				src: "/articles/clothes/images/"+e.target.id+".jpg?"+ new Date().getTime(),
				width: 195,
				height: 260,
				alt: e.target.id
			})
			img.addEvent("load",function(){
				container.empty();
				container.grab(img);
			});
		}
		f.slide = function(direction){
			var range = (direction>0)? 0:-235;
			var fx = new Fx.Morph(f.element.getFirst(),{
				duration: "normal",
				transition: Fx.Transitions.Sine.easeOut
			});
			fx.start({
				marginTop: range
			});
			up.toggle();
			down.toggle();
		}

		return f;
	}();

	// load xml
	var req = new Request({
		url: "/articles/clothes/index.xml",
		method: "GET",
		onRequest: function(){},
		onSuccess: function(text,responseXml){
			selector.construct(responseXml);
			window.addEvent("domready",function(){
				var container = $("jsImagesCtl").empty();
				container.adopt([
					up.element,
					selector.element,
					down.element
				]);
			});
		},
		onFailur: function(){}
	});
	req.send();
}


/*	main process
------------------------------ */
var loader = LOADER();
window.addEvent("domready",function(){
	toggle_menu();
	tumblr.inplant("clothes");
});

})();