function menuShow(menu){
	document.getElementById(menu).classList.toggle("slideMenu");
}
var material;


function updateNoseColor(){
	scene.remove(nose);
	var geometry = new THREE.ConeGeometry( .4, 1, 32 );
	var color = new THREE.Color(parseInt(document.getElementById("nosecolor").value, 16))
	material = new THREE.MeshBasicMaterial( {color: color} );
	//three.js cannot take a string as a value, so im not sure what to do
	var nose = new THREE.Mesh( geometry, material );
	scene.add(nose);
}







var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );


var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );


var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.update();
// controls.autoRotate = true;
controls.autoRotateSpeed = 5;
controls.enablePan = false;
controls.minDistance = 6;
controls.maxDistance = 20;
// create head
var head;

var geometry = new THREE.SphereGeometry( 1.5, 32, 32 );
var texture = new THREE.TextureLoader().load('icetexture2.jpg');
var material = new THREE.MeshBasicMaterial( { map: texture } );
head = new THREE.Mesh( geometry, material );
head.position = new THREE.Vector3(0,0,0);
scene.add( head );
head.rotation.y = Math.PI / 3;

//create body
var body;

var geometry = new THREE.SphereGeometry( 1, 32, 32 );
var texture = new THREE.TextureLoader().load('icetexture2.jpg');
var material = new THREE.MeshBasicMaterial( { map: texture } );
body = new THREE.Mesh( geometry, material );
scene.add( body );
body.position.set(0,2,0);

var bottom;

var geometry = new THREE.SphereGeometry( 2, 32, 32 );
var texture = new THREE.TextureLoader().load('icetexture2.jpg');
var material = new THREE.MeshBasicMaterial( { map: texture } );
bottom = new THREE.Mesh( geometry, material );
scene.add( bottom );
bottom.rotation.y = Math.PI / 2;
bottom.position.set(0,-2.5,0);


var nose;
var geometry = new THREE.ConeGeometry( .4, 1, 32 );
var material = new THREE.MeshBasicMaterial( {color:0xffa500} );
var nose = new THREE.Mesh( geometry, material );

scene.add( nose );
nose.rotation.x = Math.PI / 2;
nose.position.set(0,1.75,1);
//Eyes
//eye 1
var geometry = new THREE.CylinderGeometry( .1, .1, .3, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0x000000} );

var eye1 = new THREE.Mesh( geometry, material );
scene.add( eye1 );
eye1.position.set(-.3,2.25,.8);
eye1.rotation.x = Math.PI / 2;
camera.position.z = 10;

var eye2 = new THREE.Mesh( geometry, material );
scene.add( eye2 );
eye2.position.set(.3,2.25,.8);
eye2.rotation.x = Math.PI / 2;
camera.position.z = 10;


//arms
//arm1
var geometry = new THREE.CylinderGeometry( .1, .1, 4, 32 );
var texture = new THREE.TextureLoader().load('branch2.jpeg');
var material = new THREE.MeshBasicMaterial( { map: texture } );


var arm1 = new THREE.Mesh( geometry, material );
scene.add( arm1 );
arm1.position.set(1.25,.6,0);
arm1.rotation.z = Math.PI/4;

//arm2
var arm2 = new THREE.Mesh( geometry, material );
scene.add( arm2 );
arm2.position.set(-1.25,.6,0);
arm2.rotation.z = Math.PI/-4;
//armsegments

var geometry = new THREE.CylinderGeometry( .05, .05, .8, 32 );
var seg1 = new THREE.Mesh( geometry, material );
scene.add( seg1 );
seg1.position.set(2.2,-.34,0);
seg1.rotation.z = Math.PI/-4;

var seg2 = new THREE.Mesh( geometry, material );
scene.add( seg2 );
seg2.position.set(-2.2,-.34,0);
seg2.rotation.z = Math.PI/4;

//hat

var geometry = new THREE.CylinderGeometry( 1, 1, .3, 32 );
var texture = new THREE.TextureLoader().load('felt.jpg');
var material = new THREE.MeshBasicMaterial( {map:texture} );
var brim = new THREE.Mesh( geometry, material );

scene.add( brim );
brim.position.set(0,2.8,0);


var geometry = new THREE.CylinderGeometry( .75, .75, .7, 32 );

var hattop = new THREE.Mesh( geometry, material );

scene.add( hattop );
hattop.position.set(0,3,0);



camera.position.z = 10;


var animate = function () {
	requestAnimationFrame( animate );

	controls.update();
	renderer.render( scene, camera );
};

animate();