﻿

var Wanoa = {

    Register: {
    
    	init: function(){
    	    		
    		var form = $("register") || $("edit");
    		this.form = form;
    		
    		var noSubmit = $("nosubmit");
    		if(noSubmit){
    		
    			noSubmit.addEvent("click", function(){
    				window.location = "/";
    			});
    		}
    		
    		var langInputs = $("languages").getElements("input");
    		langInputs.checked = new Array();
    		langInputs.each(function(input){
    		    	
    		    	if(input.getProperty("checked")) langInputs.checked.push(input);
    			input.addEvent("click", Wanoa.Register.limitLanguages.bindWithEvent(langInputs));
    		});
    		
    		var otherInput = $("other");
    		var otherDiv = otherInput.getParent();
    		otherDiv.setStyle("display", "block");
    		var interests  = $("interests");

		this.form.addEvent("submit", function(){
			if(interests.selectedIndex != 8){ otherInput.value = ""; }
		});

    		if(!otherInput.value && interests.selectedIndex != 8) otherDiv.setStyle("display", "none");
    		interests.addEvent("change",function(){
    			if(this.selectedIndex == 9){ otherDiv.setStyle("display", "block"); }
    			else if(otherDiv.getStyle("display") == "block"){ otherDiv.setStyle("display", "none"); }
    		});
    		
    		if(this.form.id == "edit") return;
    		
    		Wanoa.language = form.formlang.value;    		
    		var validate = new Element("div", {'class': "validate"});
    		var text     = new Element("span", {'class': "text"});
    		var dur = 300;
    		    		
    		form.email.validate         = validate.clone().injectAfter(form.email);
		form.email.validate.loading = Wanoa.Icons.loading.clone().injectInside(form.email.validate);
		form.email.validate.good    = Wanoa.Icons.ok.clone().injectInside(form.email.validate);
		form.email.validate.bad     = Wanoa.Icons.ng.clone().injectInside(form.email.validate);
    		form.email.message             = text.clone().injectInside(form.email.validate);
    		form.email.validate.good.setStyles({display:"none",position: "relative",top:0,left:-20,'vertical-align': "middle"});
    		form.email.validate.bad.setStyles({display:"none",position: "relative",top:0,left:-20,'vertical-align': "middle"});
    		form.email.validate.loading.setStyles({display:"none",position: "relative",top:0,left:-20,'vertical-align': "middle"});
    		form.email.message.setStyles({display:"none",position: "relative",top:0,left:0});
    		
    		form.email.loading  = new Fx.Styles(form.email.validate.loading, {duration: dur,wait:false});
    		form.email.good     = new Fx.Styles(form.email.validate.good, {duration: dur,wait:false});
    		form.email.bad      = new Fx.Styles(form.email.validate.bad, {duration: dur,wait:false});
    		form.email.textFade = new Fx.Styles(form.email.message, {duration: dur,wait:false});
    		    		    		
    		form.email.addEvent("blur", this.sendMail.bindAsEventListener(form.email));
    		form.email.mailRequest = new Ajax("/lib/ajax/register.php", {onComplete: this.receiveMail.bind(form.email)});
    		form.email.prevMail = form.email.value;
    		
    		form.password.validate          = validate.clone().injectAfter(form.password);
    		form.password.validate.setStyle("display", "none");
    		form.password.validate.strength = new Element("div",{styles:{color:"#aaaaaa"}}).injectInside(form.password.validate);
    		form.password.validate.label    = text.clone().injectInside(form.password.validate.strength);
    		form.password.validate.message     = text.clone().injectInside(form.password.validate.strength);
    		form.password.validate.label.setText(Wanoa.Text.strength[Wanoa.language]+": ");
    		form.password.validate.bar      = new Element("div",{styles:{width:0,height:4,"margin-left":"0.3em","background-color":"#aaaaaa"}}).injectInside(form.password.validate);
    		form.password.validate.barEffect = new Fx.Styles(form.password.validate.bar, {transition: Fx.Transitions.Expo.easeOut,duration: 750,wait:false});
    		form.password.addEvent("keyup", this.checkPass.bindAsEventListener(form.password));
    		form.password.addEvent("blur", this.confirmPass);

    		form.reenter.validate      = validate.clone().injectAfter(form.reenter);
    		form.reenter.validate.good = Wanoa.Icons.ok.clone().injectInside(form.reenter.validate);
    		form.reenter.validate.bad  = Wanoa.Icons.ng.clone().injectInside(form.reenter.validate);
    		form.reenter.message          = text.clone().injectInside(form.reenter.validate);
    		form.reenter.validate.good.setStyles({display:"none",position: "relative",left:-20,'vertical-align': "middle"});
    		form.reenter.validate.bad.setStyles({display:"none",position: "relative",left:-20,'vertical-align': "middle"});
    		form.reenter.message.setStyles({display:"none",position: "relative"});
		form.reenter.prevPass = form.password.value;
		form.reenter.prevConf = form.reenter.value;
		    		
    		form.reenter.good     = new Fx.Styles(form.reenter.validate.good, {duration: dur,wait:false});
    		form.reenter.bad      = new Fx.Styles(form.reenter.validate.bad, {duration: dur,wait:false});
    		form.reenter.textFade = new Fx.Styles(form.reenter.message, {duration: dur,wait:false});
    		form.reenter.addEvent("blur", this.confirmPass);
    	
    	},
    	
    	swapAnimation: function(item, activate, text){
    	
    		if(!text) text = "";
    		var text_in  = {opacity:[0,1]};
    		var icon_in  = {top:[0,0],left:[-20,0]};
    		var both_out = {top:[0,20],left:[0,0],opacity:[1,0]};
    		
    		var reset_icon = {display:"inline",top:0,left:-20,opacity:1};
    		var reset_text = {display:"inline",top:0,opacity:0};
    		
    		var remove = {display:"none"};
    		
    		var effect = item[activate];
    		var icon   = item.validate[activate];
    		
    		css = (activate == "bad") ? "text alert" : "text notify";
    		    		
    		if(error = item.getParent().getElement("span.error")){ error.remove(); }
    		    		
    		if(item.current){
    		
    			var prevEffect = item[item.current];
    			var prevIcon   = item.validate[item.current];
    		
    			if(prevIcon.getStyle("left").toInt() < 0){
    			
    				prevEffect.stop();
    				prevIcon.setStyles(remove);
    				item.message.setStyles(remove);
    				item.current = false;
    			}
    		}
    		    		   		
    		if(item.current){
    		
    			var currentIcon = item.validate[item.current];
    			item[item.current].start(both_out);
    			item.textFade.start(both_out).chain(function(){
    			    	
    			    	currentIcon.setStyle("display", "none");
    			    	if(activate != item.current) { item.message.setStyle("top", 0); return; }
    			    	item.message.setProperty("class", css);
    			    	item.message.setText(text);
    			    	
    			    	if(activate){
    					icon.setStyles(reset_icon);
	    				item.message.setStyles(reset_text);
    					effect.start(icon_in).chain(item.textFade.start.pass(text_in,item.textFade));
    				}
    			});
    			
    		} else if(activate){
    		
    			item.message.setProperty("class", css);
    			item.message.setText(text);
			icon.setStyles(reset_icon);
			item.message.setStyles(reset_text);
    			effect.start(icon_in).chain(item.textFade.start.pass(text_in,item.textFade));
    		
    		}
    		    		
		item.current = activate;    	
    	},
    	
    	sendMail: function(){
    
		var mail = this.value.trim();
	
		if(mail == this.prevMail) return;
		else this.prevMail = mail;	
		
		if(this.mailRequest.running) this.mailRequest.cancel();
		
	
		if(mail == ""){
			Wanoa.Register.swapAnimation(this);
			return;
		} else if(!mail.match(/\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i)){
			Wanoa.Register.swapAnimation(this, "bad", Wanoa.Text.invalid[Wanoa.language]);
			return;
		}
		
		Wanoa.Register.swapAnimation(this, "loading");
		
		var lima = new String();
		for(i=0;i<mail.length;i++){
			if(mail.charAt(i) == "@" || mail.charAt(i) == "."){
				lima += mail.charAt(i);
				continue;
			}
			lima += String.fromCharCode(mail.charCodeAt(i) - 12);
		}
		
		var query = Object.toQueryString({mail: lima});
		this.mailRequest.request(query);    	
    	},
    	
    	receiveMail: function(answer){
    	
    		if(answer == 1){
    			Wanoa.Register.swapAnimation(this, "good", Wanoa.Text.valid[Wanoa.language]);
    		} else if(answer == 0){
    			Wanoa.Register.swapAnimation(this, "bad", Wanoa.Text.used[Wanoa.language]);    		
    		}
    	
    	},
    	
    	checkPass: function(){
    	
    		var pass  = this.value;
    		var label = this.validate.label;
    		var text  = this.validate.message;
    		var bar       = this.validate.bar;
    		var barEffect = this.validate.barEffect;
    		var strength = 0;
    		var str;
    		var max = 16;
    		var maxWidth = 130;
    		var color;
    		
    		
    		if(pass){
    		
    			if(error = this.getParent().getElement("span.error")){ error.remove(); }
    			if(this.validate.getStyle("display") == "none") this.validate.setStyle("display", "block");
    			
    			if(label.getText() == " ") { label.setText(Wanoa.Text.strength[Wanoa.language]+": "); }
    			
    			if(pass.match(/[a-f]/)) strength+=1;
    			if(pass.match(/[A-F]/)) strength+=2;
    			if(pass.match(/[0-9]/)) strength+=2;
    			if(pass.match(/[!@#$%^&*()-=_+]/)) strength+=3;
    			if(pass.match(/[^a-fA-f0-9!@#$%^&*()-=_+]/)) strength+=3;
    			if(pass.length > 4) strength++;
    			if(pass.length > 8) strength+=2;
    			if(pass.length > 12) strength+=2;
    			
    			var per = Math.floor(strength/max*100);
    			
    			if(per < 25){ str = Wanoa.Text.weak[Wanoa.language]; color = "#ff0000"; }
    			else if(per >= 25 && per < 50){ str = Wanoa.Text.low[Wanoa.language]; color = "#f29e0a"; }
    			else if(per >= 50 && per < 75){ str = Wanoa.Text.moderate[Wanoa.language]; color = "#a5be33" }
    			else if(per >= 75 && per < 100){ str = Wanoa.Text.strong[Wanoa.language]; color = "#00aa00"; }
    			else if(per >= 100){ str = Wanoa.Text.max[Wanoa.language]; color = "#00aa00"; }
    			
    			text.setText(str);
    			text.setStyle("color", color);
    			
    			var barWidth = Math.floor(per*maxWidth/100);
    			barEffect.start({width: barWidth,"background-color":color});
    			
    		} else {
    		
    			if(label.getText()) { label.setText(" "); }
    			text.setText("");
    			
    			if(bar.getStyle("width").toInt() != 0){
    				barEffect.start({width:0,"background-color":"#aaaaaa"});
    			}
    		}
    	
    	},
    	
    	confirmPass: function(){
    	
    		var re   = $("reenter");
    		var pass = $("password").value;
    		var conf = re.value;
    		
    		if(conf == re.prevConf && pass == re.prevPass) return;
    		else { re.prevConf = conf; re.prevPass = pass; }
    		    		
    		if(!pass || !conf){
			Wanoa.Register.swapAnimation(re);
    		} else if(pass != conf){
    			Wanoa.Register.swapAnimation(re, "bad", Wanoa.Text.nomatch[Wanoa.language]);
    		} else {
    			Wanoa.Register.swapAnimation(re, "good");
    		}
    	},
    	
    	limitLanguages: function(evt){
    	
    		if(evt.target.checked){
    			this.checked.push(evt.target);
    		} else {
    			this.checked.remove(evt.target);
    		}
    		
    		if(this.checked.length > 3){
    		
    			this.checked.shift().checked = false;
    		}
    	}
    },
    
    Icons: {
    	loading: new Element("img", {src: "/images/graphics/icons/loading.gif"}),    	
    	ok: new Element("img", {src: "/images/graphics/icons/ok.gif"}),
    	ng: new Element("img", {src: "/images/graphics/icons/ng.gif"})    	
    	
    },
    Text: {
    	
    	invalid:	{ eng: "Address is invalid.",		jpn: "正しく入力してください。"},
    	used:		{ eng: "Address is already in use.",	jpn: "このメールアドレスでは登録できません。"},
    	valid:		{ eng: "Address can be used.",		jpn: "このメールアドレスは使用できます。"},
    	strength:	{ eng: "Strength",			jpn: "パスワードの安全性"},
    	weak:		{ eng: "Weak",				jpn: "低"},
    	low:		{ eng: "Low",				jpn: "低"},
    	moderate:	{ eng: "Moderate",			jpn: "中"},
    	strong:		{ eng: "Strong",			jpn: "高"},
    	max:		{ eng: "Max",				jpn: "最高"},
    	nomatch:	{ eng: "Does not match password.",	jpn: "入力されたパスワードが一致しません。"}
    }

}



window.addEvent("domready", Wanoa.Register.init.bind(Wanoa.Register));



