(function ( w , d ) {
	var width = win.width(),
		height = win.height(),
		btnsize = 65;
	var canvasresize;
	function cavases () {
		(function () {
			var max_particles = 1500;
			var tela = d.getelementbyid( 'canvas' );
			canvasresize = function () {
				tela.width = width;
				tela.height = height;
			};
			canvasresize();
			var canvas = tela.getcontext('2d');
			events.add( w , 'resize' , canvasresize );
			var particle = function () {
				function particle(canvas, progress) {
					var random = math.random();
					this.progress = 0;
					this.canvas = canvas;
					this.x = width / 2 + (math.random() * 400 - math.random() * 400);
					this.y = height / 2 + (math.random() * 400 - math.random() * 400);
					this.w = width;
					this.h = height;
					this.radius = random > .2 ? math.random() * 1 : math.random() * 3;
					this.color = random > .2 ? "#d8002c" : "#f9314c";
					this.radius = random > .8 ? math.random() * 2 : this.radius;
					this.color = random > .8 ? "#7dfff2" : this.color;
					this.variantx1 = math.random() * 300;
					this.variantx2 = math.random() * 400;
					this.varianty1 = math.random() * 100;
					this.varianty2 = math.random() * 120;
				}
				particle.prototype.render = function render() {
					this.canvas.beginpath();
					this.canvas.arc(this.x, this.y, this.radius, 0, 2 * math.pi);
					this.canvas.linewidth = 2;
					this.canvas.fillstyle = this.color;
					this.canvas.fill();
					this.canvas.closepath();
				};
				particle.prototype.move = function move() {
					this.x += math.sin(this.progress / this.variantx1) * math.cos(this.progress / this.variantx2);
					this.y += math.cos(this.progress / this.varianty2);
					if (this.x < 0 || this.x > this.w - this.radius) return false;
					if (this.y < 0 || this.y > this.h - this.radius) return false;
					this.render();
					this.progress++;
					return true;
				};
				return particle;
			}();
			var particles = [];
			var init_num = popolate(max_particles);
			function popolate(num) {
				for (var i = 0; i < num; i++) {
					settimeout(function () {
						particles.push(new particle(canvas, i));
					}.bind(this), i * 20);
				}
				return particles.length;
			}
			function clear() {
				canvas.globalalpha = 0.05;
				canvas.fillstyle = '#000';
				canvas.fillrect(0, 0, tela.width, tela.height);
				canvas.globalalpha = 1;
			}
			function update() {
				particles = particles.filter(function (p) {
					return p.move();
				});
				if (particles.length < init_num) {
					popolate(1);
				}
				clear();
				requestanimationframe(update.bind(this));
			}
			update();
		} ());
		(function () {
			var cvs,ctx;
			var waves = [];
			var waveheight = 30;
			function randomcolour() {
				var h = math.round(math.random()*360);
				return "hsl("+h+",100%,50%)";
			}
			function init() {
				cvs = document.getelementbyid("contentcanvas");
				ctx = cvs.getcontext("2d");
				resizecanvas(cvs);
				for (var i = 0; i < 5; i++) {
					var temp = new wave(randomcolour(),1,5);
				}
				setinterval(update,16);
			}
			function update(array) {
			var fill = '#215';
				ctx.fillstyle = fill;
				ctx.globalcompositeoperation = "source-over";
				ctx.fillrect(0,0,cvs.width,cvs.height);
				ctx.globalcompositeoperation = "screen";
				for (var i = 0; i < waves.length; i++) {
					for (var j = 0; j < waves[i].nodes.length; j++) {
						bounce(waves[i].nodes[j]);
					}
					drawwave(waves[i]);
				}
				ctx.globalcompositeoperation = "hue";
				ctx.fillstyle = fill;
			}
			function wave(colour,lambda,nodes) {
				this.colour = colour;
				this.lambda = lambda;
				this.nodes = [];
				for (var i = 0; i <= nodes+2; i++) {
					var temp = [(i-1)*cvs.width/nodes,0,math.random()*200,.3];//this.speed*plusorminus
					this.nodes.push(temp);
				}
				waves.push(this);
			}
			function bounce(node) {
				node[1] = waveheight/2*math.sin(node[2]/20)+cvs.height/2;
				node[2] = node[2] + node[3];
			}
			function drawwave (obj) {
				var diff = function(a,b) {
					return (b - a)/2 + a;
				}
				ctx.fillstyle = obj.colour;
				ctx.beginpath();
				ctx.moveto(0,cvs.height);
				ctx.lineto(obj.nodes[0][0],obj.nodes[0][1]);
				for (var i = 0; i < obj.nodes.length; i++) {
					if (obj.nodes[i+1]) {
						ctx.quadraticcurveto(
							obj.nodes[i][0],obj.nodes[i][1],
							diff(obj.nodes[i][0],obj.nodes[i+1][0]),diff(obj.nodes[i][1],obj.nodes[i+1][1])
						);
					}else{
						ctx.lineto(obj.nodes[i][0],obj.nodes[i][1]);
						ctx.lineto(cvs.width,cvs.height);
					}
				}
				ctx.closepath();
				ctx.fill();
			}
			function resizecanvas(canvas,width,height) {
				if (width && height) {
					canvas.width = width;
					canvas.height = height;
				} else {
					if (window.innerheight > 1920) canvas.width = window.innerwidth;
					else canvas.width = 1920;
					canvas.height = waveheight;
				}
			}
			init();
		} ());
	};
	var timer;
	var basic = {
		load : function () {
			cavases ();
		},
		move: function ( e ) {
			e = e || w.event;
			var x = e.pagex,
				y = e.pagey;
			if ( data.ruler.moveleftorright ) {
				if ( x <= width * .4 ) data.teamnavclass = 'left';
				else if ( x >= width * .6 ) data.teamnavclass = 'right';
				else data.teamnavclass = '';
			};
			if ( y <= 110 ) data.classes.btnact = 'act';
			else data.classes.btnact = '';
			if ( width >= 1024 ) data.style.button = 'top: ' + (y - btnsize / 2) + 'px;left: ' + (x - btnsize / 2) + 'px';
		},
		resize : function () {
			width = win.width();height = win.height();canvasresize();
		},
		hrefchange : function ( href ) {
			if ( href == 'team' ) {
				team.contentclose();
				if ( data.style.content ) {
					team.contentclose();
					data.style.content = false;
				};
			} else {
				data.ruler.name = href;
				team.contentclose( function () {
					team.teamopen( href );
				} );
			}
		},
		down : function () {
			team.$refs.teamcontent.scrolltop += 30;
		},
		up: function () {
			team.$refs.teamcontent.scrolltop -= 30;
		},
		wheel : function ( e ) {
			if ( data.contentexi ) return;
			if ( e.wheeldelta > 0 ) basic.up();
			else basic.down();
		},
		leave: function () {
			data.teamnavclass = '';
		},
		ajax: function ( id ) {
			var ajax = new xmlhttprequest();
			ajax.onreadystatechange = function () {
				if ( this.readystate == 4 && this.status == 200 ) {
					data.content.main = this.responsetext;
				};
			};
			ajax.open( 'post' , 'getdata.asp' , true );
			ajax.setrequestheader( 'content-type' , 'application/x-www-form-urlencoded' );
			ajax.send( 'id='+id +'&m=team' );
		}
	};

	var data = {
		teamnavclass: '',
		basic : basic,
		style: {
			cust: '',
			tech:'',
			end: 'width:200%',
			content: false,
			button: '',
			teamcontentarticle: ''
		},
		classes: {
			btnact : '',
			linkact: '',
			btnactcontent: ''
		},
		ruler: {
			moveleftorright: true,
			name : '',
			href : win.href().split( '#' ).pop(),
			hrefru: false
		},
		name : [ 'tech' , 'cust' ],
		contentexi: false,
		content: {
			header: '',
			main: ''
		}
	};

	var team = new vue({
		el: '#pageteam',
		data : data,
		created : function () {
			// console.log(history);
		},
		mounted: function () {
			events.add( this.$el , 'mousemove' , this.basic.move );
			events.add( this.$el , 'mouseleave' , this.basic.leave );
			events.add( w , 'resize' , this.basic.resize );
			this.basic.load();
		},
		methods : {
			teamopen : function ( e ) {
				var _this = this;
				_this.ruler.name = e;
				_this.style[ _this.ruler.name ] = _this.style.end;
				_this.ruler.moveleftorright = false;
				_this.ruler.hrefru = false;
				history.pushstate( {} , '' , 'team.asp#' + e );
				_this.ruler.href = win.href().split( '#' ).pop();
				team.$refs.teamcontent.scrolltop = 0;
				settimeout(function () {
					_this.style.content = true;
					css( _this.$refs[ _this.ruler.name ] , {
						'opacity' : '1',
						'visibility' : 'visible'
					} );
					if (d.addeventlistener) { 
						d.body.addeventlistener('dommousescroll', basic.wheel , false); 
					};
					w.onmousewheel = d.body.onmousewheel = basic.wheel;
					events.add( w , 'touchstart' , basic.touchmove );
				} , 300);
				d.body.style.csstext = 'cursor:url(images/cur/content.cur) 1 1 , default;overflow:hidden;';
			},
			contentclose : function ( fn ) {
				this.style.teamcontentarticle = '';
				if ( this.contentexi ) {
					this.contentexi = false;
					return;
				};
				if ( fn == w.event ) {
					this.ruler.hrefru = false;
					history.pushstate( {} , '' , 'team.asp' + '#team' );
					this.ruler.href = win.href().split( '#' ).pop();
				}
				this.ruler.moveleftorright = true;
				this.style.content = false;
				for( var i = 0 ; i < 2 ; i++ ) {
					css( this.$refs[ this.name[ i ] ] , {
						'opacity' : '0',
						'visibility' : 'hidden'
					} );
					this.style[ this.name[ i ] ] = '';
				};
				if (d.addeventlistener) { 
					d.body.removeeventlistener('dommousescroll', basic.wheel , false); 
				};
				w.onmousewheel = d.body.onmousewheel = null;
				events.remove( w , 'touchstart' , basic.touchmove );
				d.body.style.csstext = '';
				cleartimeout( timer );
				timer = settimeout(function () {
					fn && fn()
				} , 300);
			},
			linkenter : function ( e ) {
				this.classes.linkact = 'act';
				e.currenttarget.classname = '';
				d.body.style.cursor = 'url(images/cur/watch.cur) 1 1 , default';
			},
			linkleave : function () {
				this.classes.linkact = '';
				d.body.style.cursor = 'url(images/cur/content.cur) 1 1 , default';
			},
			linkclick : function ( e ) {
				this.contentexi = !this.contentexi;
				this.content.header = e.currenttarget.innerhtml;
				this.basic.ajax( attr.add( e.currenttarget , 'l-href' )[ 0 ] );
				this.$refs.content.getelementsbytagname( 'div' )[ 0 ].scrolltop = 0;
			},
			linkcontententer: function ( e ) {
				this.classes.btnactcontent = 'cont';
				d.body.style.cursor = 'url(images/cur/contents.cur) 1 1 , default';
			},
			linkcontentleave: function () {
				this.classes.btnactcontent = '';
				d.body.style.cursor = 'url(images/cur/content.cur) 1 1 , default';
			}
		},
		watch : {
			'ruler.href' : function ( now , old ) {
				if ( this.ruler.hrefru ) {
					basic.hrefchange( now );
				};
				data.ruler.hrefru = false;
			}
		}
	});
	basic.hrefchange( data.ruler.href );
	
	
	events.add( w , 'popstate' , function () {
		data.ruler.hrefru = true;
		team.ruler.href = win.href().split( '#' ).pop();
	} );

}( window , document ));