/* ロード完了時の処理 */
addEvent(window, "load", function() {
	var mainBox = document.getElementById("main");	

	/* 出現・消失アニメーション */
	var theRadicals = new Array();	//描画する部首のリスト。
	var theDate = new Date();
	var theTime = theDate.getTime();
	setInterval(function() {
		theDate = new Date();
		for (var i = 0; i < theRadicals.length; i++) {
			theRadicals[i]["passage"] = theRadicals[i]["passage"] + (theDate.getTime() - theTime) / 1000;
			
			if (theRadicals[i]["passage"] < theRadicals[i]["appear"]) {
				setOpacity(theRadicals[i]["div"], theRadicals[i]["passage"] / theRadicals[i]["appear"] * theRadicals[i]["alpha"]);
				
			} else if ((theRadicals[i]["passage"] >= theRadicals[i]["appear"]) && (theRadicals[i]["passage"] < theRadicals[i]["appear"] + theRadicals[i]["duration"])) {
				setOpacity(theRadicals[i]["div"], theRadicals[i]["alpha"]);
				
			} else if ((theRadicals[i]["passage"] >= theRadicals[i]["appear"] + theRadicals[i]["duration"]) && (theRadicals[i]["passage"] < theRadicals[i]["appear"] + theRadicals[i]["duration"] + theRadicals[i]["vanish"])) {
				setOpacity(theRadicals[i]["div"], (1 - Math.pow((theRadicals[i]["passage"] - theRadicals[i]["appear"] - theRadicals[i]["duration"]) / theRadicals[i]["vanish"], 2)) * theRadicals[i]["alpha"]);
				
			} else {
				theRadicals[i]["div"].style.visibility = "hidden";
				theRadicals.splice(i, 1);
				i--;
			}
		}
		theTime = theDate.getTime();
	}, 100);
	
	
	
	/* 画像の読み込み */
	var imageComplete = false;
	var theImages = new Array();
	setTimeout(function() {
		for (var i = 0; i < 30; i++) {
			theImages[i] = new Image();
			theImages[i].src = "images/radical" + (i + 1)+ ".png";
		}
		var theInterval = setInterval(function() {
			for (var i = 0; i < theImages.length; i++) {
				if (!(theImages[i].complete)) {
					return;
				}
			}
			imageComplete = true;
			mainBox.style.overflow = "hidden";		
			clearInterval(theInterval);
		}, 500);
	}, 1000);

	
	/* 部首追加の関数 */
	function addRadical(theX, theY, theZ, theAlpha, theDuration, appearDuration, vanishDuration) {
		if (imageComplete) {
			var theImage = theImages[Math.floor(Math.random() * theImages.length)];
			var theDiv = mainBox.appendChild(document.createElement("div"));
			if (navigator.appName == "Microsoft Internet Explorer") {	//IEではfilterを使った90°毎の回転。
				var theAngle = Math.floor(Math.random() * 4);
				if (theAngle == 0 || theAngle == 2) {
					var theWidth = theImage.width;
					var theHeight = theImage.height;
				} else {
					var theWidth = theImage.height;
					var theHeight = theImage.width;
				}
				with (theDiv.style) {
					position = "absolute";
					left = theX - theWidth / 2 + "px";
					top = theY - theHeight / 2 + "px";
					width = ((theWidth > theHeight) ? theWidth : theHeight) + "px";
					height = ((theWidth > theHeight) ? theWidth : theHeight) + "px";
					zIndex = theZ;
				}
				var imageDiv = theDiv.appendChild(document.createElement("div"));
				theImg = imageDiv.appendChild(document.createElement("img"));
				theImg.width = ((theWidth > theHeight) ? theWidth : theHeight);
				theImg.height = ((theWidth > theHeight) ? theWidth : theHeight);
				theImg.src = "images/blank.gif";
				theImg.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + theImage.src + "',sizingMethod=image)";
				imageDiv.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=" + theAngle + ")";
				imageDiv.style.width = ((theWidth > theHeight) ? theWidth : theHeight) + "px";
				imageDiv.style.height = ((theWidth > theHeight) ? theWidth : theHeight) + "px";
			} else {	//それ以外
				var theSize = Math.ceil(Math.sqrt(Math.pow(theImage.width, 2) + Math.pow(theImage.height, 2)));
				with (theDiv.style) {
					position = "absolute";
					left = theX - theSize / 2 + "px";
					top = theY - theSize / 2 + "px";
					zIndex = theZ;
				}
				if (typeof(theDiv.style.webkitTransform) != "undefined") {	//-webkit-transformで描画
					with (theDiv.style) {
						width = theSize + "px";
						height = theSize + "px";
						background = "url('" + theImage.src + "') no-repeat center center";
						webkitTransform = "rotate(" + (Math.random() * 360) + "deg)";
					}
				} else {	//Canvasで描画
					var theCanvas = theDiv.appendChild(document.createElement("canvas"));
					theCanvas.width = theSize;
					theCanvas.height = theSize;
					var theContext = theCanvas.getContext("2d");
					if (navigator.appName == "Opera") {	//OperaのCanvasで半透明画像を描画するとなぜか明度が落ちるので、背景色を画像で切り抜く。
						var theColors = new Array("rgb(255, 255, 54)", "rgb(153, 192, 134)", "rgb(189, 240, 54)", "rgb(164, 149, 217)", "rgb(255, 206, 78)", "rgb(54, 109, 143)", "rgb(59, 127, 78)", "rgb(174, 204, 231)", "rgb(226, 60, 81)", "rgb(250, 98, 118)");
						theContext.fillStyle = theColors[Math.floor(Math.random() * theColors.length)];
						with (theContext) {
							fillRect(0, 0, theSize, theSize);
							globalCompositeOperation = "destination-atop";
						}
					}
					with (theContext) {
						translate(theSize / 2, theSize / 2);
						rotate(Math.random() * Math.PI * 2);
						translate(-(theSize / 2), -(theSize / 2));
						drawImage(theImage, (theSize - theImage.width) / 2, (theSize - theImage.height) / 2, theImage.width, theImage.height);
					}
				}
			}
			
			if (appearDuration <= 0) {
				setOpacity(theDiv, theAlpha);
			} else {
				setOpacity(theDiv, 0);
			}

			theRadicals[theRadicals.length] = {"div": theDiv, "alpha": theAlpha, "passage": 0, "duration": theDuration, "appear": appearDuration, "vanish": vanishDuration};
			setTimeout(function() {
				mainBox.removeChild(theDiv);
			}, (theDuration + appearDuration + vanishDuration + 1) * 1000);
		}
	}



	/* クリック時の処理 */
	addEvent(document.getElementById("container"), "mousedown", function(theEvent) {
		if (!theEvent) {	//IE
			theEvent = window.event;
		}
		if (typeof(theEvent.pageX) != "undefined") {
			var mousedownPoint = {"x": theEvent.pageX, "y":theEvent.pageY};
		} else {	//IE
			var mousedownPoint = {"x": theEvent.clientX, "y":theEvent.clientY};
		}
		playmp3.playFile("sounds/sound.mp3");
		addRadical(mousedownPoint["x"], mousedownPoint["y"], 1, 1, Math.floor(Math.random() * 5) + 30,  0.2, 2);
	});
	
	
	
	/* 自動部首出現 */
	function setAuto() {
		var theX = Math.floor(Math.random() * mainBox.offsetWidth);
		var theY = Math.floor(Math.random() * mainBox.offsetHeight);
		addRadical(theX, theY, 1, 1, Math.floor(Math.random() * 5) + 30, 2, 2);
		setTimeout(setAuto, Math.floor(Math.random() * 4000000000 / mainBox.offsetWidth / mainBox.offsetHeight));
	}
	setAuto();	
});