/* =====================================
	control panel
======================================== */

(function(){

window.SVG = function(code){
	var svgDoc = document.getElementById("svg").contentDocument;
	var change = {
		"jacket":function(){
			svgDoc.getElementById("jacket_tail").setAttribute("fill",code);
			svgDoc.getElementById("jacket_arm_right").setAttribute("fill",code);
			svgDoc.getElementById("jacket_arm_left").setAttribute("fill",code);
			svgDoc.getElementById("jacket_body_left").setAttribute("fill",code);
			svgDoc.getElementById("jacket_lapel_left").setAttribute("fill",code);
			svgDoc.getElementById("jacket_body_right_bottom").setAttribute("fill",code);
			svgDoc.getElementById("jacket_body_right_top").setAttribute("fill",code);
			svgDoc.getElementById("jacket_lapel_right").setAttribute("fill",code);
		},
		"pants":function(){
			svgDoc.getElementById("pants").setAttribute("fill",code);
		},
		"jstripe":function(){
			var os = svgDoc.getElementById("stripes_vertical_jacket").getElementsByTagName("path");
			for(var n=0; n<os.length; n++){
				os[n].setAttribute("stroke",code);
			}
		},
		"pstripe":function(){
			var os = svgDoc.getElementById("stripes_vertical_pants").getElementsByTagName("path");
			for(var n=0; n<os.length; n++){
				os[n].setAttribute("stroke",code);
			}
		},
		"shirt":function(){
			svgDoc.getElementById("shirt_body_right").setAttribute("fill",code);
			svgDoc.getElementById("shirt_body_left").setAttribute("fill",code);
			svgDoc.getElementById("shirt_collar_right").setAttribute("fill",code);
			svgDoc.getElementById("shirt_collar_left").setAttribute("fill",code);
			svgDoc.getElementById("shirt_sleeve").setAttribute("fill",code);
		},
		"tie":function(){
			svgDoc.getElementById("tie_top").setAttribute("fill",code);
			svgDoc.getElementById("tie_bottom").setAttribute("fill",code);
		},
		"piping":function(){
			var os = svgDoc.getElementById("piping").getElementsByTagName("path");
			for(var n=0; n<os.length; n++){
				os[n].setAttribute("stroke",code);
			}
		},
		"hair":function(){
			svgDoc.getElementById("hair").setAttribute("fill",code);
		},
		"skin":function(){
			svgDoc.getElementById("neck").setAttribute("fill",code);
			svgDoc.getElementById("face").setAttribute("fill",code);
			svgDoc.getElementById("hand").setAttribute("fill",code);
		}
	}
	var ids = window.SVG.target;
	for(var n=0,l=ids.length; n<l; n++){
		change[ids[n]]();
	}
}
window.SVG.target = new Array();
window.SVG.direct = function(){
	window.SVG.target = ["jacket"]; window.SVG(arguments[0]);
	window.SVG.target = ["pants"]; window.SVG(arguments[1]);
	window.SVG.target = ["jstripe"]; window.SVG(arguments[2]);
	window.SVG.target = ["pstripe"]; window.SVG(arguments[3]);
	window.SVG.target = ["shirt"]; window.SVG(arguments[4]);
	window.SVG.target = ["tie"]; window.SVG(arguments[5]);
	window.SVG.target = ["piping"]; window.SVG(arguments[6]);
	window.SVG.target = ["hair"]; window.SVG(arguments[7]);
	window.SVG.target = ["skin"]; window.SVG(arguments[8]);
}

var clear = function(){
	window.SVG.target = new Array();
	function b(id){
		document.getElementById(id).style.color = "black";
	}
	b("jacket");
	b("pants");
	b("jstripe");
	b("pstripe");
	b("shirt");
	b("tie");
	b("piping");
	b("hair");
	b("skin");
}
var select = function(evt){
	clear();
	window.CPicker216.show(evt.x||evt.pageX,evt.y||evt.pageY);
	
	var o = evt.currentTarget;
	o.style.color = (o.style.color=="red")? "black":"red";
	window.SVG.target.push(o.id);
	var k1 = /unlocked/.test(document.getElementById("su_lock").getElementsByTagName("img")[0].src),
		k2 = /unlocked/.test(document.getElementById("st_lock").getElementsByTagName("img")[0].src);
	if(o.id=="jacket"&&!k1){
		document.getElementById("pants").style.color = o.style.color;
		window.SVG.target.push("pants");
	}
	if(o.id=="pants"&&!k1){
		document.getElementById("jacket").style.color = o.style.color;
		window.SVG.target.push("jacket");
	}
	if(o.id=="jstripe"&&!k2){
		document.getElementById("pstripe").style.color = o.style.color;
		window.SVG.target.push("pstripe");
	}
	if(o.id=="pstripe"&&!k2){
		document.getElementById("jstripe").style.color = o.style.color;
		window.SVG.target.push("jstripe");
	}
}
var roll = function(evt){
	var o = evt.currentTarget;
	if(o.style.color=="red") return null;
	o.style.color = (evt.type=="mouseover")? "brown":"black";
}
var lock = function(evt){
	var o = evt.currentTarget;
	var s1 = "color_generator/panel/key_unlocked.png",
		s2 = "color_generator/panel/key_locked.png";
	var img = o.getElementsByTagName("img")[0];
	var flg = /unlocked/.test(img.src);
	img.src = (flg)? s2:s1;
}

document.ready(function(){
	var addSelectEvent = function(id){
		var o = document.getElementById(id);
		o.addEventListener("click",select,false);
		o.addEventListener("mouseover",roll,false);
		o.addEventListener("mouseout",roll,false);
	}
	var addLockEvent = function(id){
		var o = document.getElementById(id);
		o.addEventListener("click",lock,false);
	}

	// parts buttons
	addSelectEvent("jacket");
	addSelectEvent("pants");
	addSelectEvent("jstripe");
	addSelectEvent("pstripe");
	addSelectEvent("shirt");
	addSelectEvent("tie");
	addSelectEvent("piping");
	addSelectEvent("hair");
	addSelectEvent("skin");
	// lock buttons
	addLockEvent("su_lock");
	addLockEvent("st_lock");
});

})();

/* =====================================
	 make pikker
======================================== */

(function(){
window.CPicker216 = function(){}
window.CPicker216.code = null;
window.CPicker216.hoverCode = null;
window.CPicker216.show = function(x,y){
	var wrap = document.getElementById("CPicker216");
	wrap.style.left = x-x/8+"px";
	wrap.style.top = y+window.scrollY+20+"px";
	wrap.style.display = "block";
}
window.CPicker216.hide = function(){
	var wrap = document.getElementById("CPicker216");
	wrap.style.display = "none";
}
window.CPicker216.callBack = function(){
	window.SVG(this.code);
}
window.CPicker216.callBackHover = function(){
	window.SVG(this.hoverCode);
}

// wrapper
var wrap = document.createElement("div");
wrap.id = "CPicker216";
wrap.style.cssText = "-moz-user-select: none;-webkit-user-select: none; cursor: move";
wrap.style.display = "none";
wrap.style.position = "absolute";
wrap.style.backgroundColor = "#000";
wrap.style.left = 0;
wrap.style.right = 0;
wrap.style.width = "180px";
wrap.style.zIndex = "20";
wrap.style.border = "solid 5px #000";
wrap.style.paddingTop = "15px";

var flg;
wrap.addEventListener("mousedown",function(evt){
	if(evt.target.id!="CPicker216") return null;
	var b = document.getElementsByTagName("body")[0];
	b.style.cssText = "-moz-user-select: none;-webkit-user-select: none; cursor: move";
	wrap.style.left = (evt.x||evt.pageX)-100+"px";
	wrap.style.top = (evt.y||evt.pageY)+window.scrollY-10+"px";
	flg = true;
},false);
window.addEventListener("mousemove",function(evt){
	if(!flg) return null;
	wrap.style.left = (evt.x||evt.pageX)-100+"px";
	wrap.style.top = (evt.y||evt.pageY)+window.scrollY-10+"px";
},false);
window.addEventListener("mouseup",function(){
	var b = document.getElementsByTagName("body")[0];
	b.style.cssText = "-moz-user-select: enabled;-webkit-user-select: enabled; cursor: enabled";
	flg = false;
},false);


// make container
var cont = document.createElement("div");
cont.style.cursor = "default";
wrap.appendChild(cont);

// make 12+216 tiles
var fnTile = function(code){
	var t = document.createElement("div");
	t.style.display = "table-cell";
	t.style.width = "10px";
	t.style.height = "10px";
	t.style.backgroundColor = code;
	t.style.border = "solid 1px "+code;
	t.addEventListener("mouseout",function(evt){
		evt.currentTarget.style.border = "solid 1px "+code;
	},false);
	t.addEventListener("mouseover",function(evt){
		evt.currentTarget.style.border = "solid 1px white";
		window.CPicker216.hoverCode = evt.currentTarget.style.backgroundColor;
		window.CPicker216.callBackHover();
	},false);
	t.addEventListener("click",function(evt){
		window.CPicker216.code = evt.currentTarget.style.backgroundColor;
		window.CPicker216.callBack();
		window.CPicker216.hide();
	},false);
	t.addEventListener("dblclick",function(evt){
		window.CPicker216.callBack();
		window.CPicker216.hide();
	},false);
	return t;
}
var cd = new Array("000","333","666","999","ccc","fff","f00","0f0","00f","ff0","0ff","f0f");
var cs = new Array("0","3","6","9","c","f");
for(var n=0,l=216; n<l; n++){
	var bg;
	if(n%18==0){
		var tr = document.createElement("div");
		bg = "#"+cd[Math.floor(n/18)];
		tr.appendChild(fnTile(bg));
		cont.appendChild(tr);
	}
	bg = "#"+cs[n%6]+cs[Math.floor(n/36)]+cs[Math.floor(n/6%6)];
	tr.appendChild(fnTile(bg));
}

document.ready(function(){
	var b = document.getElementsByTagName("body")[0];
	b.insertBefore(wrap,b.firstChild);
});

})();