function moveListener(e){
  var rect = document.querySelector("#wrapper").getBoundingClientRect();
  mouseX = e.clientX - rect.left;
  mouseY = e.clientY - rect.top;
}
function downListener(e){
	//mouseDown = true;
	move = !move;
	if(move)	clear = !clear;
	//state = !state;
	if(state<2)	state++;
	else{
		state=0;
		fnum = 0.05 + Math.random() * 10 * 0.01;
	}
}
function upListener(e){
	mouseDown = false;
}

window.onload = function()
{
	
	getSize();
	init();
};

var lis = document.getElementsByTagName("li");
var NUM;// = lis.length;	
var minDist = 230;
var springAmount = 0.0001;
var width, height;
var objChar = new Array(NUM);
var speedX = new Array(NUM);
var speedY = new Array(NUM);
var locX = new Array(NUM);
var locY = new Array(NUM);
var ctx;
var follow = true;
var move = true;
var clear = true;
var state = 2; //0:blur,1:free,2:follow stop
var mouseX, mouseY, mouseDown;
var fnum = 0.1;


function init(){
	NUM = lis.length;	
	var canvas = document.getElementById('canv');
	canvas.addEventListener("mousemove", moveListener,false);
	canvas.addEventListener("mousedown", downListener, false);
	canvas.addEventListener("mouseup", upListener, false);
	//var x = width;
	mouseX = 0;//width/2;
	mouseY = 0;//hegiht/2;
    if (canvas.getContext){
	    ctx = canvas.getContext('2d');
	    for(var i = 0; i < NUM; i++){
			objChar[i] = lis[i].getAttribute("id");
	    	speedX[i] = Math.random() * 0.6 - 0.3;
		    speedY[i] = Math.random() * 0.6 - 0.3;
		    locX[i] = Math.random() * width;
		    locY[i] = Math.random() * height;
		    //r[i] = Math.floor(Math.random() * 64);
	    }
	    setInterval("draw()", 30);
		//setTimeout("draw()", 30);
    }
	
}

function draw(){
    ctx.globalCompositeOperation = "source-over";
	if(clear)
		ctx.clearRect(0, 0, width, height);
    ctx.globalCompositeOperation = "lighter";
	
	for(var i=0; i<NUM; i++){	
		//-------------------------------------
		if(move){
			locX[i] += speedX[i];
       		locY[i] += speedY[i];
		}
		if(locX[i] < 0)			locX[i] = width;
		if(locX[i] > width)		locX[i] = 0;
		if(locY[i] < 0)			locY[i] = height;
		if(locY[i] > height)	locY[i] = 0;
      	
		lis[i].style.left = locX[i] + "px";
        lis[i].style.top = locY[i] + "px";
		//-------------------------------------
		
		for(var j=i+1; j<NUM; j++){
			var dx = locX[j] - locX[i];
			var dy = locY[j] - locY[i];
			var dist = Math.sqrt(dx * dx + dy * dy);
			
			if(dist < minDist){
				var ax = dx * springAmount;
				var ay = dy * springAmount;
				speedX[i] += ax;
				speedY[i] += ay;
				speedX[j] -= ax;
				speedY[j] -= ay;
			}
			var alpha;
			var d = false;
			if(dist>3 && dist<20){	
				alpha = (1 - dist/30) + 0.01;
				d = true;
			}
			if(dist>50 && dist<80){	
				alpha = (1 - dist/100) + 0.01;
				d = true;
			}
			if(dist>120 && dist<140){	
				alpha = 1 - dist/140.0;
				d = true;
			}
			if(dist>200 && dist<340){
				alpha = 0.01;
				d = true;
			}
			if(dist>600 && dist<700){
				alpha = 0.001;
				d = true;
			}
				
			if(d){
				ctx.globalAlpha = alpha;
				ctx.beginPath();
				ctx.strokeStyle = '#000';
				ctx.moveTo(locX[i],locY[i]);
				ctx.lineTo(locX[j],locY[j]);
				ctx.closePath();
				ctx.stroke();	
			}
		}
		if(follow && move){
			if(i==0){
				locX[i] += (mouseX - locX[i]) * fnum;//0.05;
				locY[i] += (mouseY - locY[i]) * fnum;//0.05;
			}else{
				locX[i] += (locX[i-1] - locX[i]) * fnum;//0.05;
				locY[i] += (locY[i-1] - locY[i]) * fnum;//0.05;
			}
		}
		//alert(locX[0]);
	}
	var mx = mouseX - locX[0];
	var my = mouseY - locY[0];
	var mouseDist = Math.sqrt(mx * mx + my * my);
	if(state==2 && mouseDist < 150)
		follow = false;
	if(state==1)
		follow = true;
	if(state==0)
		follow = false;
		
	//setTimeout("draw()", 30);
	
}





function getSize(){
    var ua = navigator.userAgent;
    var nHit = ua.indexOf("MSIE");
    var bIE = (nHit >=  0);	//if-IE
    var bVer6 = (bIE && ua.substr(nHit+5, 1) == "6");  //if-IE.ver6
    var bStd = (document.compatMode && document.compatMode=="CSS1Compat");
	
    if (bIE) {
    	if (bVer6 && bStd) {
        	width = document.documentElement.clientWidth;
        	height = document.documentElement.clientHeight;
        } else {
            width = document.body.clientWidth;
            height = document.body.clientHeight;
        }
   	} else {
        width = window.innerWidth;
        height = window.innerHeight;
    }

}




/*
var currX = -30;   // 現在のx座標（値は最初の位置）
var currY = -30;   // 現在のy座標（値は最初の位置）
var destX = 500;   // 静止位置のx座標
var destY = 500;   // 静止位置のy座標
var stepX = 1;      // 一度に動く距離（x方向）
var stepY = 1;      // 一度に動く距離（y方向）
var nSpeed = 20;  	// 移動の間隔（ミリ秒単位）
var objChar;        // 動かすオブジェクト

function SetSlideChar(idChar) 
{
      if (!document.getElementById) return;
      objChar = document.getElementById(idChar);
      objChar.style.left = currX + "px";
      objChar.style.top = currY + "px";
      SetTimer();
}

function SetTimer() 
{
      if (currX < destX || currY < destY) {
            currX += stepX;
            currY += stepY;
            if (currX >= destX) currX = destX;
            if (currY >= destY) currY = destY;
            objChar.style.left = currX + "px";
            objChar.style.top = currY + "px";
            setTimeout("SetTimer()", nSpeed);
      }
}

function draw(){
    var canvas = document.getElementById('canv');
	if (canvas.getContext){
	    var ctx = canvas.getContext('2d');
	    ctx.globalAlpha = 0.5;
	
		ctx.beginPath();
		ctx.strokeStyle = '#3399FF';
		ctx.moveTo(50,50);
		ctx.lineTo(360,200);
		ctx.lineTo(140,250);
		ctx.closePath();
		ctx.stroke();

		//塗り潰しによる描画
		ctx.beginPath();
		ctx.moveTo(50,250);
		ctx.lineTo(160,20);
		ctx.lineTo(340,50);
		ctx.closePath();
		ctx.fill();
	}
}
*/
//arrayobj[]
//if(i=n) arrayobj[i]=tag;
//else arrayobj[i]=void;
/*
function btn(X, Y) {
    this.X = X;
    this.Y = Y;
    //this.showPrice = function() {
    //    alert(this.price);
    //};
}
*/