var identityMatrix={m11:1 , m12:0 , m21:0, m22:1, dx:0, dy:0}
 
function setTransform(c, m){
	c.setTransform( m.m11, m.m12, m.m21, m.m22, m.dx, m.dy )
}
 
function matrixMultiply(a, b){
	return {m11: a.m11*b.m11 + a.m21*b.m12,
			m21: a.m11*b.m21 + a.m21*b.m22,
			dx: a.m11*b.dx + a.m21*b.dy + a.dx,
			m12: a.m12*b.m11 + a.m22*b.m12,
			m22: a.m12*b.m21 + a.m22*b.m22,
			dy: a.m12*b.dx + a.m22*b.dy + a.dy,
			}
}
 
function matrixTranslate(m, x, y){
	return matrixMultiply(m, {m11: 1, m21:0, m12:0, m22: 1, dx: x, dy: y})
}
 
function matrixRotate(m, a){
	return matrixMultiply(m, {m11: Math.cos(a), m21:Math.sin(a), m12:-Math.sin(a), m22: Math.cos(a), dx: 0, dy: 0})
}

fill = [255,255,255,0.018]
color = [255,255,255,0.15]

$(document).ready(function start(){
	var canvas = document.createElement('canvas')
	if (!canvas.getContext) return
	canvas.id = 'spinrect_canvas'
	document.body.insertBefore(canvas, document.body.firstChild)
	var c = canvas.getContext('2d');
	
	function resize(){
		canvas.width = window.innerWidth
   		canvas.height = window.innerHeight
   		draw()
	}
	
	function drawSpin(c, a, x, y, rw, ratio, cx, cy, sx, sy, sa, max_x){
		setTransform(c, identityMatrix)
		
		var rh=rw*ratio
		
		c.fillStyle='rgba('+fill[0]+','+fill[1]+','+fill[2]+','+fill[3]+')'
		c.strokeStyle='rgba('+color[0]+','+color[1]+','+color[2]+','+color[3]+')'
		
		var orig = {m11:1 , m12:0 , m21:0, m22:1, dx:0, dy:100}
		var tm = matrixTranslate(orig, x, y)
		tm = matrixRotate(tm, a)
		
  		var i = 0
		while (tm.dx<max_x+Math.abs(rh)){
			setTransform(c, tm)
			c.beginPath()
			c.rect(0, 0, rw, rh)
			c.fill()
			c.stroke()
			
			// Translate relative to surface
			tm.dx += sx*rw
			tm.dy += sy*rh
				
			var step = matrixTranslate(identityMatrix, cx*rw, cy*rh)
			step = matrixRotate(step, -sa)
			step = matrixTranslate(step, -cx*rw, -cy*rh)
			tm = matrixMultiply(tm, step)
			i++;	
		}
	}
	
	var lastheight = $(document).height()
	
	function draw(){
		setTransform(c, identityMatrix)
		c.clearRect(0, 0, canvas.width, canvas.height)
		
		lastheight = 0.9*lastheight + 0.1*$(document).height()
		var start_angle = -0.6 + ($(window).scrollTop() / lastheight) * 0.25
		drawSpin(c, start_angle, -20, window.innerHeight - 540, 50,  3.8, -1.5, 1.2, 0.305, 0,  0.085, 275)
		drawSpin(c, start_angle, 900, window.innerHeight - 400, 50, -3.8, -1.5, 1.2, 0.305, 0, -0.075, window.innerWidth)
	}
	
	resize()
	$(window).resize(resize)
	$(window).scroll(draw)
})

//$('#main').css('opacity', 0.2)