var layer1;
var	layer2;
var	layer3;
var	ctx1;
var	ctx2;
var	ctx3;

var	WIDTH = 475;
var	HEIGHT = 475;
var scale = 1.0;
var roll = 0.0,
	pitch = 0.0;
var MINIMUM_ANGLE = -180.0,
	MAXIMUM_ANGLE = 180.0; 
var MINIMUM_SCALE = 1.0,
	MAXIMUM_SCALE = 3.0;
var PITCH_FACTOR = 2.15;//0.46153;


var back = new Image();
var	wing = new Image();
var	ring = new Image();
var	frame = new Image();

// Functions .............................................................

function init() {
	back.src="images/vers_1/back.png";
	layer1 = document.getElementById("layer1");
	ctx1 = layer1.getContext("2d");

	wing.src="images/vers_1/wing.png";
	layer2 = document.getElementById("layer2");
	ctx2 = layer2.getContext("2d");

	ring.src="images/vers_1/ring.png"
	layer3 = document.getElementById("layer3");
	ctx3 = layer3.getContext("2d");
        
	frame.src="images/vers_1/frame.png"
	layer4 = document.getElementById("layer4");
	ctx4 = layer4.getContext("2d");


	//setInterval(drawAll, 20);
}

function drawAll() {
	draw1();
	draw2();
	draw3();
	draw4();
}

function draw1() {      
	var w = layer1.width,
		h = layer1.height,
		sw = w ;//* scale,
		sh = h ;//* scale;

	ctx1.clearRect(0, 0, layer1.width, layer1.height);
	ctx1.drawImage(back, -sw/2 + w/2, -sh/2 + h/2, sw, sh);
}

function draw2() {
    var w = layer2.width,
        h = layer2.height,
        sw = w ;//* scale,
        sh = h ;//* scale;

    ctx2.clearRect(0, 0, layer2.width, layer2.height);
    ctx2.drawImage(wing, -sw/2 + w/2, -sh/2 + h/2, sw, sh);
}

function draw3() {
    var w = layer3.width,
        h = layer3.height,
        sw = w ;//* scale,
        sh = h ;//* scale;

    ctx3.clearRect(0, 0, layer3.width, layer3.height);
    ctx3.drawImage(ring, -sw/2 + w/2, -sh/2 + h/2, sw, sh);
}

function draw4() {
    var w = layer4.width,
        h = layer4.height,
        sw = w ;//* scale,
        sh = h ;//* scale;

    ctx4.clearRect(0, 0, layer4.width, layer4.height);
    ctx4.drawImage(frame, -sw/2 + w/2, -sh/2 + h/2, sw, sh);
}

function scaleAll() {
    var w = layer2.width,
        h = layer2.height,
        sw = w * scale,
        sh = h * scale;

    ctx1.clearRect(0, 0, layer1.width, layer1.height);
    ctx1.drawImage(back, -sw/2 + w/2, -sh/2 + h/2, sw, sh);

    ctx2.clearRect(0, 0, layer2.width, layer2.height);
    ctx2.drawImage(wing, -sw/2 + w/2, -sh/2 + h/2, sw, sh);

    ctx3.clearRect(0, 0, layer3.width, layer3.height);
    ctx3.drawImage(ring, -sw/2 + w/2, -sh/2 + h/2, sw, sh);

    ctx4.clearRect(0, 0, layer4.width, layer4.height);
    ctx4.drawImage(frame, -sw/2 + w/2, -sh/2 + h/2, sw, sh);

}

function rotate(roll, pitch) {	
    var pitch_lift;

	if (pitch > 37) pitch = 37;
	else if (pitch < -37) pitch = -37;

	pitch_lift = pitch*PITCH_FACTOR;	

	ctx1.clearRect(0, 0, layer1.width, layer1.height);
	ctx1.drawImage(back, 0, 0);

    ctx2.save();
    ctx2.clearRect(0, 0, layer2.width, layer2.height);
    ctx2.translate(wing.width/2, wing.height/2);
    ctx2.rotate(Math.PI/180 * roll);
    ctx2.drawImage(wing, wing.width/-2, wing.height/-2 - pitch_lift);
    ctx2.restore();

	ctx3.save();
	ctx3.clearRect(0, 0, layer3.width, layer3.height);
	ctx3.translate(ring.width/2, ring.height/2);
	ctx3.rotate(Math.PI/180 * roll);
	ctx3.drawImage(ring, ring.width/-2, ring.height/-2);
	ctx3.restore();

	ctx4.clearRect(0, 0, layer4.width, layer4.height);
	ctx4.drawImage(frame, 0, 0);
}

// Event handlers ........................................................

scaleSlider.onchange = function(e) {
    scale = e.target.value;

    if (scale < MINIMUM_SCALE) scale = MINIMUM_SCALE;
    else if (scale > MAXIMUM_SCALE) scale = MAXIMUM_SCALE;

	// Show value of slider
	scaleOutput.innerText = parseFloat(scale).toFixed(2);

    drawAll();
    scaleAll();
}

rollSlider.onchange = function(e) {
	roll = e.target.value;

    if (roll < MINIMUM_ANGLE) roll = MINIMUM_ANGLE;
    else if (roll > MAXIMUM_ANGLE) roll = MAXIMUM_ANGLE;

    // Show value of slider
    rollOutput.innerText = parseFloat(roll).toFixed(2);

    //drawAll();	
	//rotateRoll();
	rotate(roll, pitch);
}

pitchSlider.onchange = function(e) {
	pitch = e.target.value;
	
	if (pitch < MINIMUM_ANGLE) pitch = MINIMUM_ANGLE;
	else if (pitch > MAXIMUM_ANGLE) pitch = MAXIMUM_ANGLE;

    // Show value of slider
    pitchOutput.innerText = parseFloat(pitch).toFixed(2);
	
	rotate(roll, pitch);
}

document.getElementById('mouse_area').onmousemove = function(evt) {

	if ( (evt.clientX > 20) && (evt.clientX < 190) ) {
		roll =  ( (evt.clientX-20.0)  * 2.1176 ) - 180.0;
	}
	if ( (evt.clientY > 600) && (evt.clientY < 770) ) {
		pitch = ( (evt.clientY-600.0) * 2.1176 ) - 180.0;
	}
	rotate(roll, pitch);

	mouseX.innerText = parseFloat(roll).toFixed(2);
	mouseY.innerText = parseFloat(pitch).toFixed(2);

	//pitchSlider.set_value(15);
	document.getElementById("pitchSlider").value = pitch;
	document.getElementById("rollSlider").value = roll;

	pitchOutput.innerText = parseFloat(pitch).toFixed(2);
	rollOutput.innerText = parseFloat(roll).toFixed(2);
}

// Initialization ........................................................

init();
