var RENDERER={POINT_INTERVAL:5,FISH_COUNT:3,MAX_INTERVAL_COUNT:50,INIT_HEIGHT_RATE:.5,THRESHOLD:50,init:function(){this.setParameters();this.reconstructMethods();this.setup();this.bindEvent();this.render()},setParameters:function(){this.$window=$(window);this.$container=$(".fi");this.$canvas=$("<canvas />");this.context=this.$canvas.appendTo(this.$container).get(0).getContext("2d");this.points=[];this.fishes=[];this.watchIds=[]},createSurfacePoints:function(){var gQa=Math.round(this.width/this.POINT_INTERVAL);this.pointInterval=this.width/(gQa-1);this.points.push(new SURFACE_POINT(this,0));for(var HgF=1;HgF<gQa;HgF++){var dJb=new SURFACE_POINT(this,HgF*this.pointInterval),OdO=this.points[HgF-1];dJb.setPreviousPoint(OdO);OdO.setNextPoint(dJb);this.points.push(dJb)}},reconstructMethods:function(){this.watchWindowSize=this.watchWindowSize.bind(this);this.jdugeToStopResize=this.jdugeToStopResize.bind(this);this.startEpicenter=this.startEpicenter.bind(this);this.moveEpicenter=this.moveEpicenter.bind(this);this.reverseVertical=this.reverseVertical.bind(this);this.render=this.render.bind(this)},setup:function(){this.points.length=0;this.fishes.length=0;this.watchIds.length=0;this.intervalCount=this.MAX_INTERVAL_COUNT;this.width=this.$container.width();this.height=this.$container.height();this.fishCount=this.FISH_COUNT*this.width/500*this.height/500;this.$canvas.attr({width:this.width,height:this.height});this.reverse=false;this.fishes.push(new FISH(this));this.createSurfacePoints()},watchWindowSize:function(){this.clearTimer();this.tmpWidth=this.$window.width();this.tmpHeight=this.$window.height();this.watchIds.push(setTimeout(this.jdugeToStopResize,this.WATCH_INTERVAL))},clearTimer:function(){while(this.watchIds.length>0){clearTimeout(this.watchIds.pop())}},jdugeToStopResize:function(){var gQa=this.$window.width(),HgF=this.$window.height(),dJb=gQa==this.tmpWidth&&HgF==this.tmpHeight;this.tmpWidth=gQa;this.tmpHeight=HgF;if(dJb){this.setup()}},bindEvent:function(){this.$window.on("resize",this.watchWindowSize);this.$container.on("mouseenter",this.startEpicenter);this.$container.on("mousemove",this.moveEpicenter);this.$container.on("click",this.reverseVertical)},getAxis:function(gQa){var HgF=this.$container.offset();return{x:gQa.clientX-HgF.left+this.$window.scrollLeft(),y:gQa.clientY-HgF.top+this.$window.scrollTop()}},startEpicenter:function(gQa){this.axis=this.getAxis(gQa)},moveEpicenter:function(gQa){var HgF=this.getAxis(gQa);if(!this.axis){this.axis=HgF}this.generateEpicenter(HgF.x,HgF.y,HgF.y-this.axis.y);this.axis=HgF},generateEpicenter:function(gQa,HgF,dJb){if(HgF<this.height/2-this.THRESHOLD||HgF>this.height/2+this.THRESHOLD){return}var OdO=Math.round(gQa/this.pointInterval);if(OdO<0||OdO>=this.points.length){return}this.points[OdO].interfere(HgF,dJb)},reverseVertical:function(){this.reverse=!this.reverse;for(var gQa=0,HgF=this.fishes.length;gQa<HgF;gQa++){this.fishes[gQa].reverseVertical()}},controlStatus:function(){for(var gQa=0,HgF=this.points.length;gQa<HgF;gQa++){this.points[gQa].updateSelf()}for(var gQa=0,HgF=this.points.length;gQa<HgF;gQa++){this.points[gQa].updateNeighbors()}if(this.fishes.length<this.fishCount){if(--this.intervalCount==0){this.intervalCount=this.MAX_INTERVAL_COUNT;this.fishes.push(new FISH(this))}}},render:function(){requestAnimationFrame(this.render);this.controlStatus();this.context.clearRect(0,0,this.width,this.height);this.context.fillStyle=jzfscolor;for(var gQa=0,HgF=this.fishes.length;gQa<HgF;gQa++){this.fishes[gQa].render(this.context)}this.context.save();this.context.globalCompositeOperation="xor";this.context.beginPath();this.context.moveTo(0,this.reverse?0:this.height);for(var gQa=0,HgF=this.points.length;gQa<HgF;gQa++){this.points[gQa].render(this.context)}this.context.lineTo(this.width,this.reverse?0:this.height);this.context.closePath();this.context.fill();this.context.restore()}};var SURFACE_POINT=function(gQa,HgF){this.renderer=gQa;this.x=HgF;this.init()};SURFACE_POINT.prototype={SPRING_CONSTANT:.03,SPRING_FRICTION:.9,WAVE_SPREAD:.3,ACCELARATION_RATE:.01,init:function(){this.initHeight=this.renderer.height*this.renderer.INIT_HEIGHT_RATE;this.height=this.initHeight;this.fy=0;this.force={previous:0,next:0}},setPreviousPoint:function(gQa){this.previous=gQa},setNextPoint:function(gQa){this.next=gQa},interfere:function(gQa,HgF){this.fy=this.renderer.height*this.ACCELARATION_RATE*(this.renderer.height-this.height-gQa>=0?-1:1)*Math.abs(HgF)},updateSelf:function(){this.fy+=this.SPRING_CONSTANT*(this.initHeight-this.height);this.fy*=this.SPRING_FRICTION;this.height+=this.fy},updateNeighbors:function(){if(this.previous){this.force.previous=this.WAVE_SPREAD*(this.height-this.previous.height)}if(this.next){this.force.next=this.WAVE_SPREAD*(this.height-this.next.height)}},render:function(gQa){if(this.previous){this.previous.height+=this.force.previous;this.previous.fy+=this.force.previous}if(this.next){this.next.height+=this.force.next;this.next.fy+=this.force.next}gQa.lineTo(this.x,this.renderer.height-this.height)}};var FISH=function(gQa){this.renderer=gQa;this.init()};FISH.prototype={GRAVITY:.4,init:function(){this.direction=Math.random()<.5;this.x=this.direction?this.renderer.width+this.renderer.THRESHOLD:-this.renderer.THRESHOLD;this.previousY=this.y;this.vx=this.getRandomValue(4,10)*(this.direction?-1:1);if(this.renderer.reverse){this.y=this.getRandomValue(this.renderer.height*1/10,this.renderer.height*4/10);this.vy=this.getRandomValue(2,5);this.ay=this.getRandomValue(.05,.2)}else{this.y=this.getRandomValue(this.renderer.height*6/10,this.renderer.height*9/10);this.vy=this.getRandomValue(-5,-2);this.ay=this.getRandomValue(-.2,-.05)}this.isOut=false;this.theta=0;this.phi=0},getRandomValue:function(gQa,HgF){return gQa+(HgF-gQa)*Math.random()},reverseVertical:function(){this.isOut=!this.isOut;this.ay*=-1},controlStatus:function(gQa){this.previousY=this.y;this.x+=this.vx;this.y+=this.vy;this.vy+=this.ay;if(this.renderer.reverse){if(this.y>this.renderer.height*this.renderer.INIT_HEIGHT_RATE){this.vy-=this.GRAVITY;this.isOut=true}else{if(this.isOut){this.ay=this.getRandomValue(.05,.2)}this.isOut=false}}else{if(this.y<this.renderer.height*this.renderer.INIT_HEIGHT_RATE){this.vy+=this.GRAVITY;this.isOut=true}else{if(this.isOut){this.ay=this.getRandomValue(-.2,-.05)}this.isOut=false}}if(!this.isOut){this.theta+=Math.PI/20;this.theta%=Math.PI*2;this.phi+=Math.PI/30;this.phi%=Math.PI*2}this.renderer.generateEpicenter(this.x+(this.direction?-1:1)*this.renderer.THRESHOLD,this.y,this.y-this.previousY);if(this.vx>0&&this.x>this.renderer.width+this.renderer.THRESHOLD||this.vx<0&&this.x<-this.renderer.THRESHOLD){this.init()}},render:function(gQa){gQa.save();gQa.translate(this.x,this.y);gQa.rotate(Math.PI+Math.atan2(this.vy,this.vx));gQa.scale(1,this.direction?1:-1);gQa.beginPath();gQa.moveTo(-30,0);gQa.bezierCurveTo(-20,15,15,10,40,0);gQa.bezierCurveTo(15,-10,-20,-15,-30,0);gQa.fill();gQa.save();gQa.translate(40,0);gQa.scale(.9+.2*Math.sin(this.theta),1);gQa.beginPath();gQa.moveTo(0,0);gQa.quadraticCurveTo(5,10,20,8);gQa.quadraticCurveTo(12,5,10,0);gQa.quadraticCurveTo(12,-5,20,-8);gQa.quadraticCurveTo(5,-10,0,0);gQa.fill();gQa.restore();gQa.save();gQa.translate(-3,0);gQa.rotate((Math.PI/3+Math.PI/10*Math.sin(this.phi))*(this.renderer.reverse?-1:1));gQa.beginPath();if(this.renderer.reverse){gQa.moveTo(5,0);gQa.bezierCurveTo(10,10,10,30,0,40);gQa.bezierCurveTo(-12,25,-8,10,0,0)}else{gQa.moveTo(-5,0);gQa.bezierCurveTo(-10,-10,-10,-30,0,-40);gQa.bezierCurveTo(12,-25,8,-10,0,0)}gQa.closePath();gQa.fill();gQa.restore();gQa.restore();this.controlStatus(gQa)}};$(function(){RENDERER.init()});