/* Each ring of the cylinder contains 12 posters */
const CUBE_SIDES = 4;


function setup_cube(cube)
{  
	var sideAngle = 360 / CUBE_SIDES;
	var rotateX =0;
	var rotateXtemp =0;
	var rotateY =0;
	var rotateYtemp =0;
	
	for (var index = 0; index < CUBE_SIDES; index ++) 
	{
		/* Each poster is a div element */
		var poster = document.createElement('div');
		
	
	    /* Applies the CSS "poster" class to the poster */
		poster.className = 'poster';
		
		/* Compute and assign a transform to the poster */
		var transform = ['rotate3d(0,1,0,', (sideAngle * index), 'deg) translateZ(150px)'].join('');
		poster.style.webkitTransform = transform;
		poster.textContent = '  This is side ' + index + ' of the TouchCube';
		var newimg=document.createElement('img');
		        newimg.src=(index+1) + '.png';
		        newimg.alt='image';
		        poster.appendChild(newimg);
		
		
		/* Create a placeholder for the number on each number */
		var content = poster.appendChild(document.createElement('p'));
		
		/* Add a number to the poster */
		
		/* Add the poster to this ring */
		cube.appendChild(poster);
		poster.ontouchstart = function(e){
			if(e.touches.length == 1){ // Only deal with one finger
			var touch = e.touches[0]; // Get the information for finger #1
			e.preventDefault();
			rotateY = (touch.pageX - rotateYtemp);
			//rotateX = rotateXtemp;
			}
		}
		poster.ontouchmove = function(e){
			
		  if(e.touches.length == 1){ // Only deal with one finger
		    var touch = e.touches[0]; // Get the information for finger #1
			e.preventDefault();
		    var node = touch.target; // Find the node the drag started from
		    cube.style.position = "absolute";
		//var yibble = ['rotateY(', (rotateY + (touch.pageX * 1)), 'deg) rotateX(', (rotateX - (touch.pageY * 0.05)), 'deg)'].join('');
			var yibble = ['rotate3d(0,1,0,', ((touch.pageX * 1) -rotateY), 'deg)'].join('');
			cube.style.webkitTransform = yibble;
		    //ring.style.left = touch.pageX + "px";
		    //ring.style.top = touch.pageY + "px";
			rotateYtemp = ((touch.pageX * 1) -rotateY);
			rotateXtemp = (rotateX + (touch.pageY * 0.05));
		  }
		}
		poster.ontouchend = function(e){ //not used
			if(e.touches.length == 1){ // Only deal with one finger
			var touch = e.touches[0]; // Get the information for finger #1
			e.preventDefault();
			rotateY = (touch.pageX -rotateY);
			}
		}

		poster.ongesturechange = function(e){
		  var node = e.target;
		  // scale and rotation are relative values,
		  // so we wait to change our variables until the gesture ends
		  cube.style.webkitTransform = "translateZ(" + (-1000 * e.scale) + "px)";
		  cube.style.webkitTransform = "rotate(" + ((rotation + e.rotation) % 360) + "deg)";
		}
		
	}
	
}

function hideURLbar() {
        window.scrollTo(0, 1);
}


function init()
{
	
	setup_cube(document.getElementById('cube-1'));
	//if (navigator.userAgent.indexOf('iPhone') != -1) {
	setTimeout(hideURLbar, 2000);
	//}
}




window.addEventListener('load', init, false);