(function(window){

if (window.addEventListener) window.addEventListener("load", init, false);
else if (window.attachEvent) window.attachEvent("onload", init);
else window.onload = init;

var particleStage;
var scrollContents;
var position;
var paperGallery;
var navigation;
var ballAry = [];
var navigationPos = [0,1000,2300,3200,3850,4900,99999];
var wave;
var logo;
var marker;
var mapcopyright;
var accessMap;
var ropeCanvas;
var isSetTop = true;
var particleHide = false;
var loopHeight = 0;

function init(){
	var pnum = location.toString().replace("http://www.contents.ne.jp/contents/?","");
	if(isNaN(pnum)) particleStage = new ParticleStage(document.getElementById('particleStage'),100);
	else particleStage = new ParticleStage(document.getElementById('particleStage'),pnum);

	if (typeof document.documentElement.style.maxHeight == "undefined") document.getElementById('attention').innerHTML ='<div style="margin:70px 0 0 -100px;padding-left:20%;font-weight:bold;width:65%;">お使いのブラウザは現在サポートされていません。<br />最新のブラウザにアップグレードしてください。<br /><br /><a href="http://www.apple.com/safari/"><img src="img/bnr01.jpg" width="145" height="50" alt=""></a>　<a href="http://www.opera.com/browser/"><img src="img/bnr02.jpg" width="145" height="50" alt=""></a>　<a href="http://www.mozilla.com/"><img src="img/bnr03.jpg" width="145" height="50" alt=""></a>　<a href="http://www.google.com/chrome/index.html"><img src="img/bnr04.jpg" width="145" height="50" alt=""></a>　<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx"><img src="img/bnr05.jpg" width="145" height="50" alt=""></a></div>';

	var loopHeightTarget = document.getElementById('top2');
	while(true){
		loopHeight += loopHeightTarget.offsetTop;
		if(loopHeightTarget.parentNode.tagName != "BODY") loopHeightTarget = loopHeightTarget.parentNode;
		else break;
	}
	scrollContents = new ScrollContents(document.getElementById('contents'),document.getElementById('container'),document,loopHeight);
	scrollContents.addCallBack("SCROLL",onScroll,this);

	position = new Position();
	position.add(document.getElementById('works'),-0.7,[-1100,0]);
	position.add(document.getElementById('flow'),-0.3,[-755,0]);
	position.scroll(0);

	logo = new DOMTween(document.getElementById('logo'));
	marker = new DOMTween(document.getElementById('marker'));
	mapcopyright = new DOMTween(document.getElementById('mapcopyright'));

	var flickPaper = new FlickPaper();
	flickPaper.add(document.getElementById('paper1'),{x:0,y:190},{x:410,y:205});
	flickPaper.add(document.getElementById('paper2'),{x:45,y:160},{x:450,y:200});
	flickPaper.add(document.getElementById('paper3'),{x:110,y:225},{x:523,y:195});
	flickPaper.add(document.getElementById('paper4'),{x:155,y:190},{x:550,y:238});
	flickPaper.add(document.getElementById('paper5'),{x:200,y:195},{x:595,y:210});
	flickPaper.add(document.getElementById('paper6'),{x:225,y:250},{x:610,y:300});

	navigation = new Navigation(navigationPos);
	navigation.add(document.getElementById('navi1_1'),document.getElementById('navi2_1'),500,function(){ scrollContents.move(0); });
	navigation.add(document.getElementById('navi1_2'),document.getElementById('navi2_2'),600,function(){ scrollContents.move(1420); });
	navigation.add(document.getElementById('navi1_3'),document.getElementById('navi2_3'),700,function(){ scrollContents.move(2550); });
	navigation.add(document.getElementById('navi1_4'),document.getElementById('navi2_4'),800,function(){ scrollContents.move(3490); });
	navigation.add(document.getElementById('navi1_5'),document.getElementById('navi2_5'),900,function(){ scrollContents.move(4300); });
	navigation.add(document.getElementById('navi1_6'),document.getElementById('navi2_6'),1000,function(){ scrollContents.move(5300); });

	ballAry.push( new RopeBall(document.getElementById('ball1'),380,0));
	ballAry.push( new RopeBall(document.getElementById('ball2'),80,0));
	ballAry.push( new RopeBall(document.getElementById('ball3'),250,0));
	ballAry.push(new RopeBall(document.getElementById('ball4'),400,0));
	ballAry.push( new RopeBall(document.getElementById('ball5'),100,0));
	ballAry.push( new RopeBall(document.getElementById('ball6'),175,0));
	ballAry.push(new RopeBall(document.getElementById('ball7'),300,0));
	ballAry.push(new RopeBall(document.getElementById('ball8'),90,0));
	ballAry.push( new RopeBall(document.getElementById('ball9'),180,0));
	ballAry.push( new RopeBall(document.getElementById('ball10'),330,0));
	ballAry.push(new RopeBall(document.getElementById('ball11'),120,0));
	ballAry.push(new RopeBall(document.getElementById('ball12'),200,0));

	ballAry[1].setParent(ballAry[0]);
	ballAry[2].setParent(ballAry[1]);
	ballAry[4].setParent(ballAry[3]);
	ballAry[5].setParent(ballAry[4]);
	ballAry[7].setParent(ballAry[6]);
	ballAry[8].setParent(ballAry[7]);
	ballAry[10].setParent(ballAry[9]);
	ballAry[11].setParent(ballAry[10]);

	ropeCanvas = new RopeCanvas(document.getElementById('ropecanvas'),'img/works_bg.png');

	var ropepos = [200,370,530,710];

	ropeCanvas.add(new BlankBall(0,0),{x:ropepos[0] + 66,y:-20},ballAry[0],{x:ropepos[0] + 66,y:0});
	ropeCanvas.add(ballAry[0],{x:ropepos[0] + 66,y:0},ballAry[1],{x:ropepos[0] + 66,y:0});
	ropeCanvas.add(ballAry[1],{x:ropepos[0] + 66,y:66},ballAry[2],{x:ropepos[0] + 66,y:66});

	ropeCanvas.add(new BlankBall(0,82),{x:ropepos[1] + 66,y:-20},ballAry[3],{x:ropepos[1] + 66,y:0});
	ropeCanvas.add(ballAry[3],{x:ropepos[1] + 66,y:0},ballAry[4],{x:ropepos[1] + 66,y:0});
	ropeCanvas.add(ballAry[4],{x:ropepos[1] + 66,y:66},ballAry[5],{x:ropepos[1] + 66,y:66});

	ropeCanvas.add(new BlankBall(0,140),{x:ropepos[2] + 66,y:-20},ballAry[6],{x:ropepos[2] + 66,y:0});
	ropeCanvas.add(ballAry[6],{x:ropepos[2] + 66,y:0},ballAry[7],{x:ropepos[2] + 66,y:0});
	ropeCanvas.add(ballAry[7],{x:ropepos[2] + 66,y:66},ballAry[8],{x:ropepos[2] + 66,y:66});

	ropeCanvas.add(new BlankBall(0,205),{x:ropepos[3] + 66,y:-20},ballAry[9],{x:ropepos[3] + 66,y:0});
	ropeCanvas.add(ballAry[9],{x:ropepos[3] + 66,y:0},ballAry[10],{x:ropepos[3] + 66,y:0});
	ropeCanvas.add(ballAry[10],{x:ropepos[3] + 66,y:66},ballAry[11],{x:ropepos[3] + 66,y:66});

	wave = new Wave('wavecanvas',100,200,'img/about_img.png');
	wave.addBall(document.getElementById('aboutball1'));
	wave.addBall(document.getElementById('aboutball2'));
	wave.addBall(document.getElementById('aboutball3'));
	wave.addBall(document.getElementById('aboutball4'));

	accessMap = new AccessMap(document.getElementById("map_canvas"),"http://maps.google.com/maps/api/staticmap?center=35.632856,139.714404&zoom=17&size=525x525&maptype=roadmap&sensor=false",'img/access_map.jpg');

	if(!!document.createElement("canvas").getContext){
		setTimeout( function(){ particleStage.changeMode("SHOW");},300);
		setTimeout( function(){ logo.set({visible:true}).to({alpha:1},3).play(); },2000);

		if(Browser == "iPhone" || Browser == "iPad" ) {
			setTimeout( function(){ particleStage.changeMode("BREAK"); },6000);
			setTimeout( function(){ particleStage.changeMode("GRAVITY"); },7000);
		}
		else{
			setTimeout( function(){ particleStage.changeMode("FREE",150); },6000);
		}
		setTimeout( function(){ scrollContents.active(true); },7000);
		setTimeout( function(){ navigation.show(0); },7000);
		setTimeout( function(){ navigation.show(1); },7100);
		setTimeout( function(){ navigation.show(2); },7200);
		setTimeout( function(){ navigation.show(3); },7300);
		setTimeout( function(){ navigation.show(4); },7400);
		setTimeout( function(){ navigation.show(5); },7500);
	}
	else {
		setTimeout( function(){ logo.set({visible:true}).play(); },300);
		setTimeout( function(){ scrollContents.active(true); },300);
		setTimeout( function(){ navigation.show(0); },300);
		setTimeout( function(){ navigation.show(1); },400);
		setTimeout( function(){ navigation.show(2); },500);
		setTimeout( function(){ navigation.show(3); },600);
		setTimeout( function(){ navigation.show(4); },700);
		setTimeout( function(){ navigation.show(5); },800);
	}
}

function onScroll(e){
	var scrollTop = e.scrollTop;
	var scrollTopDelta = e.scrollTopDelta;
	var windowHeight = 0;
	if ( window.innerWidth ) windowHeight = window.innerHeight;
	else if ( document.documentElement && document.documentElement.clientWidth != 0 ) windowHeight = document.documentElement.clientHeight;
	else if ( document.body ) windowHeight = document.body.clientHeight;

	position.scroll(scrollTop);
	if(scrollTopDelta > 1000) scrollTopDelta -=loopHeight;
	else if(scrollTopDelta < -1000) scrollTopDelta +=loopHeight;
	if(particleStage.isActive) particleStage.onScroll(scrollTop,scrollTopDelta);
	navigation.onScroll(scrollTop);
	
	if(scrollTop < 3200 && scrollTop > 2300){
		ballAry[2].move(0.5*Math.random() - 0.25);
		ballAry[5].move(0.5*Math.random() - 0.25);
		ballAry[8].move(0.5*Math.random() - 0.25);
		ballAry[11].move(0.5*Math.random() - 0.25);
	}


	if(scrollTop < 100 || scrollTop > loopHeight-1200){
		 if(!isSetTop){
			isSetTop = true;
			if(Browser != "iPhone" && Browser != "iPad") particleStage.changeMode("FREE",30);
			else particleStage.changeMode("GRAVITY",30);
		 }
	}
	else {
		if(isSetTop){
			isSetTop = false;
			if(Browser != "iPhone" && Browser != "iPad") particleStage.changeMode("GRAVITY");
		}
	}

	if(scrollTop > loopHeight-1000 && scrollTop < loopHeight-500 && !particleHide){
		particleHide = true;
		particleStage.changeMode("DOWNOUT");
	}
	if(scrollTop >= loopHeight-500 && particleHide){
		particleHide = false;
		if(Browser != "iPhone" && Browser != "iPad"){
			particleStage.changeMode("UPIN");
			 particleStage.changeMode("FREE",10);
		}
		else {
			particleStage.changeMode("GRAVITY");
		}
	}

	if(scrollTop > 1800 && scrollTop < loopHeight-700) particleStage.active(false);
	else particleStage.active(true);
	
	if(scrollTop < 2000 && scrollTop+windowHeight > 1600 ) wave.active(true);
	else wave.active(false);

	if(scrollTop < 3500 && scrollTop+windowHeight > 1300 ) ropeCanvas.active(true);
	else ropeCanvas.active(false);

	if(scrollTop > 5100) showMap();
}

function showMap(){
	marker.set({x:155,y:310,alpha:0}).play();
	var mask1 = accessMap.createMask();
	mask1.tween(170,405,null,0);
	var mask2 = accessMap.createMask();
	mask2.tween(355,230,null,0);
	var mask3 = accessMap.createMask();
	mask3.tween(365,125,null,0);
	var mask4 = accessMap.createMask();
	mask4.tween(325,183,null,0);
	var mask5 = accessMap.createMask();
	mask5.tween(275,203,null,0);
	var mask6 = accessMap.createMask();
	mask6.tween(225,220,null,0);
	var mask7 = accessMap.createMask();
	mask7.tween(178,248,null,0);
	var mask8 = accessMap.createMask();
	mask8.tween(150,295,null,0);
	var mask9 = accessMap.createMask();
	mask9.tween(263,263,null,0);
	setTimeout(function(){mask1.tween(null,null,90,1);},100);
	setTimeout(function(){marker.set({visible:true}).to({y:330,alpha:1},0.5).play();},1100);
	setTimeout(function(){mask2.tween(null,null,50,0.8);},1900);
	setTimeout(function(){mask3.tween(null,null,50,0.8);},2100);
	setTimeout(function(){mask4.tween(null,null,30,0.5);},3100);
	setTimeout(function(){mask5.tween(null,null,30,0.5);},3200);
	setTimeout(function(){mask6.tween(null,null,30,0.5);},3300);
	setTimeout(function(){mask7.tween(null,null,30,0.5);},3400);
	setTimeout(function(){mask8.tween(null,null,30,0.5);},3500);
	setTimeout(function(){mask1.tween(null,null,0,1.5);},5000);
	setTimeout(function(){mask2.tween(null,null,0,1.5);},5000);
	setTimeout(function(){mask3.tween(null,null,0,1.5);},5000);
	setTimeout(function(){mask4.tween(null,null,0,1.5);},5000);
	setTimeout(function(){mask5.tween(null,null,0,1.5);},5000);
	setTimeout(function(){mask6.tween(null,null,0,1.5);},5000);
	setTimeout(function(){mask7.tween(null,null,0,1.5);},5000);
	setTimeout(function(){mask8.tween(null,null,0,1.5);},5000);
	setTimeout(function(){mask9.tween(null,null,237,1.5);},5000);
	setTimeout(function(){mapcopyright.set({alpha:0,visible:true}).to({alpha:1},0.5).play();},6500);

	showMap = function(){}
}

}(window))