window.onload = function () {
	
  (function(){ 

  	// Representation of the drivetrain modules
		var crankset = Crankset(); 
		var chain = Chain ();
		var wheel = Wheel();

		crankset.init(1);
		chain.init( crankset.getChainspeed() );
		wheel.init( crankset.getChainspeed() );

		// Update/control functions. Perhaps this is just a overcomplicated way to
		// define event handlers 
		var shiftFrontSprocket = function ( d ) {
			var r = crankset.chainring.getRadius ( ) + d;
			if ( r <= 0 || r > 200 ) return;
			crankset.chainring.setRadius ( r );

			chain.updateFrontSprocket( r );
			wheel.update ( crankset.getChainspeed() );
			meter.update ( Math.PI / wheel.getAngVel() );
		};

		var shiftBackSprocket = function ( d ) {
			var r = wheel.sprocket.getRadius ( ) + d;
			if ( r <= 0 || r > 200 ) return;
			wheel.sprocket.setRadius ( r );

			chain.updateBackSprocket( r );
			wheel.update ( crankset.getChainspeed() );
			meter.update ( Math.PI / wheel.getAngVel() );
		};

		Shifter ( 'shiftFront', shiftFrontSprocket, 15 );
		Shifter ( 'shiftFrontDown', shiftFrontSprocket, -15 );
		Shifter ( 'shiftBackUp', shiftBackSprocket, 10 );
		Shifter ( 'shiftBackDown', shiftBackSprocket, -10 );

		// The terrain
		var meter = Meter();
		// How long should the pan take? Just as long as it takes for the wheel to do a half loop,
		// also PI/ang_vel
		meter.init( Math.PI / wheel.getAngVel() );
	})();
}

var Meter = function() {
	var sprite = document.getElementById( 'meter' );
	var tween = null;
	var orig_dur;
	
	return {
		init: function ( dur ) {
			orig_dur = dur;

			// Start pan:
			tween = new TweenMax( sprite, dur, {
				x: Math.PI*200, 
				ease: 'Linear.easeNone', 
				repeat: -1
			});	
		},
		update: function ( dur ) {
			tween.timeScale ( orig_dur / dur );
		}
	};
};

var Crankset = function(  ){
	var sprite = document.getElementById( 'crankset' );
	var tween = null;
	var ang_vel; // Constant after initialization
	var chainspeed;

	// As a reminder, to show what's the difference with the modular pattern
	// here a normal literal object: observe the use of 'this'
	var chainring = {
		sprite: document.getElementById( 'chainring' ),
		setRadius: function ( r ) {
			this.sprite.setAttribute('r', r);
			chainspeed = r * ang_vel;
		},
		getRadius: function ( ) {
			return parseInt(this.sprite.getAttribute('r'));
		}
	}; 

	return {
		chainring: chainring,
		init: function ( w ) {
			ang_vel = w;
			chainspeed = ang_vel * chainring.getRadius();
			tween = new TweenMax(sprite, 2*Math.PI/w, {
				rotation: -360, 
				ease: 'Linear.easeNone', 
				repeat: -1
			});			
		},
		getChainspeed: function () {
			return chainspeed;
		}
	}
};

var Chain = function ( ) {
	var sprite = document.getElementById( 'chain' );

	// Deriving the chain from the svg is hard because getClientRect and getBBox
	// do not give the result in svg screen coordinates. (How about snap's getBBox()?)
	// (Or how about extracting the coordinates from the transform property?)
	// Just type in the numbers then

	var sprocket0 = { m: { x: 210, y: 220}, r: 70};
	var sprocket1 = { m: { x: 510, y: 220}, r: 40};

	// Define the shape of the chain by calculating the 2 lines tangent to both sprockets
	var tangentLines = [];

	calcTangents = function () {
		// Calculate angle between the line through the centers of the circles and 1 of the 2 lines tangent to both circles
		var dx = sprocket0.m.x-sprocket1.m.x;
		var dy = sprocket0.m.y-sprocket1.m.y;
		var d = Math.sqrt(dx*dx + dy*dy);
		var angle = Math.asin ( (sprocket0.r - sprocket1.r) / d );

		// Now do some math to get the actual tangent lines
		angle -= Math.PI/2;
		var ca = Math.cos( angle );
		var sa = Math.sin( angle );

		tangentLines[0] =[
			sprocket1.m.x + sprocket1.r * ca,
			sprocket1.m.y + sprocket1.r * sa,
			sprocket0.m.x + sprocket0.r * ca,
			sprocket0.m.y + sprocket0.r * sa,
		];
		tangentLines[1] = [
			sprocket0.m.x + sprocket0.r * ca,
			sprocket0.m.y - sprocket0.r * sa,
			sprocket1.m.x + sprocket1.r * ca,
			sprocket1.m.y - sprocket1.r * sa,
		];
 	};
	
	/*
	 * Draw the convex hull around the two circles
	 */
	getChainPathData = function ( ) {
		var sweep = sprocket1.r > sprocket0.r ? 1 : 0;

		var d = "M" + tangentLines[0][0] + " " + tangentLines[0][1] + " L" + tangentLines[0][2] + " " + tangentLines[0][3];
		// add arc sprocket1
		d += " A " + sprocket0.r + " " + sprocket0.r + ", 0, " + parseInt(1-sweep) + ", 0, " + tangentLines[1][0] + " " + tangentLines[1][1]
		d += " L " + tangentLines[1][2] + " " + tangentLines[1][3];
		// add arc voorblad
		d += " A " + sprocket1.r + " " + sprocket1.r + ", 0, " + sweep + ", 0, " + tangentLines[0][0] + " " + tangentLines[0][1];

		return d;
	};
	var update = function() {
		calcTangents();

		// draw new calculated chain shape
		sprite.setAttribute('d', getChainPathData() );	

		// timescale tween
		tween.timeScale(sprocket0.r/sprocket0.orig_r);
		
	};

	return {
		init: function( speed ) {
			// remember original radius, to alter tween afterwards
			sprocket0.orig_r = sprocket0.r; 

			tween = new TweenMax( sprite, 30/speed, {
				'strokeDashoffset': -30, 
				ease: 'Linear.easeNone', 
				repeat: -1
			});			
			update();
		},
		updateFrontSprocket: function ( r ) {
			sprocket0.r = r;
			update();
		},
		updateBackSprocket: function ( r ) {
			sprocket1.r = r;
			update();
		}
	}
}

var Wheel = function ( ) {
	var sprite = document.getElementById( 'wheelset' );
	var tween = null;
	var ang_vel,
			orig_ang_vel;

	var sprocket = {
		sprite: document.getElementById( 'sprocket' ),
		setRadius: function ( r ) {
			this.sprite.setAttribute('r', r);
		},
		getRadius: function ( ) {
			return parseInt(this.sprite.getAttribute('r'));
		}
	}; 

	return {
		sprocket: sprocket,
		init: function ( chainspeed ) {

 			ang_vel = chainspeed / sprocket.getRadius();
			tween = new TweenMax(sprite, 2*Math.PI/ang_vel, {
				rotation: -360, 
				ease: 'Linear.easeNone', 
				repeat: -1
			});			

			orig_ang_vel = ang_vel;
		},
		update: function( chainspeed ) {
			// timescale tween
 			ang_vel = chainspeed / sprocket.getRadius();
			tween.timeScale(ang_vel/orig_ang_vel);
		},
		getAngVel: function() {
			return ang_vel;
		}
	}
};	

var Shifter = function( spriteId, callback, d ) {
	var sprite = document.getElementById ( spriteId );

	sprite.onclick = function() {
		callback( d );
	};
};