var container;
var camera, scene, renderer;
var mouse, raycaster, controls, hemiLight;

function init(containerID) {
    // Will setup all needed variables
	container = document.getElementById(containerID);
	camera = new THREE.PerspectiveCamera(1, window.innerWidth / window.innerHeight, 1, 2000);
	camera.position.z = 400;

	// Scene
	scene = new THREE.Scene();
	hemiLight = new THREE.HemisphereLight(0xCC9966, 0xCC9966, 1);
	hemiLight.position.set(0, 500, 0);
	scene.add(hemiLight);

	// Camera behaviour
	controls = new THREE.TrackballControls(camera);
	controls.rotateSpeed = 5.0;
	controls.zoomSpeed = 5;
	controls.panSpeed = 2;
	controls.noZoom = false;
	controls.noPan = false;
	controls.staticMoving = true;
	controls.dynamicDampingFactor = 0.3;
    controls.enabled = false;

	// Model
	var onProgress = function ( xhr ) {
		// Only necessary if the obj-file-size is very large
	};
	var onError = function ( xhr ) {
		// Something went wrong during loading obj-file
		console.log("Error, please report to the devs");
	};

	THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
	var loader = new THREE.OBJMTLLoader();

	// Load the 3D Files
	loader.load( 'objects/head.obj', 'images/head.mtl', function ( object ) {
		prepareObj( object, "head" );
	}, onProgress, onError );
	loader.load( 'objects/torso.obj', 'images/torso.mtl', function ( object ) {
		prepareObj( object, "torso" );
	}, onProgress, onError );
	loader.load( 'objects/arm_left.obj', 'images/arm_left.mtl', function ( object ) {
		prepareObj( object, "arm_left" );
	}, onProgress, onError );
	loader.load( 'objects/arm_right.obj', 'images/arm_right.mtl', function ( object ) {
		prepareObj( object, "arm_right" );
	}, onProgress, onError );
	loader.load( 'objects/leg_right.obj', 'images/leg_right.mtl', function ( object ) {
		prepareObj( object, "leg_right" );
	}, onProgress, onError );
	loader.load( 'objects/leg_left.obj', 'images/leg_left.mtl', function ( object ) {
		prepareObj( object, "leg_left" );
	}, onProgress, onError );

	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(500, 500);
	renderer.setClearColor(0xffffff, 1);
	container.appendChild(renderer.domElement);

    document.addEventListener("mouseover", function(e) {
        checkBodyActive(e);
    }, false);
	document.addEventListener("click", onClick, false);
	window.addEventListener("resize", onWindowResize, false);

	raycaster = new THREE.Raycaster();
	mouse = new THREE.Vector2();

	camera.aspect = 1;
	camera.updateProjectionMatrix();
    renderer.render(scene, camera);
    animate();
}

function checkBodyActive(event) {
    // Checks, if the current body is active
    if(document.elementFromPoint(event.clientX, event.clientY) == renderer.domElement) {
        controls.enabled = true;
        animate();
        return true;
    }
    else {
        controls.enabled = false;
        return false;
    }
}

function changeTexture(part) {
    // Will change the texture of the selected body part
	scene.children[part].traverse( function ( child ) {
		if (child instanceof THREE.Mesh) {
			// Texture must be changed
			if(scene.children[part].children[0].children[0].material.map.sourceFile=="images/texture2.jpg") {
				// Texture2 is already equipped, unequip it
				child.material.map = THREE.ImageUtils.loadTexture("images/texture.jpg");
			} else {
				// Equip texture2
				child.material.map = THREE.ImageUtils.loadTexture("images/texture2.jpg");
			}
			child.material.needsUpdate = true;
		}
	});
}

function onWindowResize() {
    // This function will make sure that all proportions are correct after resizing the window
	windowHalfX = window.innerWidth / 2;
	windowHalfY = window.innerHeight / 2;
	camera.aspect = 1;
	camera.updateProjectionMatrix();
}

function onClick(event) {
    // Mouse-Click-Event, used to check if intersects where hit
    mouse.x = (getOffset(event).x / renderer.domElement.width) * 2 - 1;
    mouse.y = -(getOffset(event).y / renderer.domElement.height) * 2 + 1;

    // Create intersect raycasting
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(scene.children, true);
    if (intersects.length) {
        var name = intersects[0].object.parent.parent.name;
        for (var j = 0; j < scene.children.length; j++) {
            if (scene.children[j].name == name) {
                // Found same model as the intersects, change texture
                changeTexture(j);
            }
        }
    }
}

function getOffset(event) {
    // Calcs layerX / layerY for the clicked element
    var el = event.target,
        x = 0,
        y = 0;

    while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
        x += el.offsetLeft - el.scrollLeft;
        y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }

    x = event.clientX - x;
    y = event.clientY - y;

    return { x: x, y: y };
}

function prepareObj(object, name){
    // General configuration of the .obj files while loading
	object.position.y = -3;
	object.traverse(function(child) {
		if(child instanceof THREE.Mesh) {
			child.material.map = THREE.ImageUtils.loadTexture("images/texture.jpg");
			child.material.needsUpdate = true;
		}
	});
	object.name = name;
	scene.add(object);
}

function animate() {
    // On every frame we need to calculate the new camera position
    // and have it look exactly at the center of our scene.
    requestAnimationFrame(animate);
    controls.update();
    camera.lookAt(scene.position);
    renderer.render(scene, camera);
}