htdoc/htdocs/course2/function4.js

function FingerComponent(obj_list,sync_obj){
	this.TRANSFORM_PREFIXED = this.getVendorPrefixed(["transform", "msTransform", "MozTransform", "webkitTransform", "OTransform"]);
	
	this.boxList = [];
	this.flag=false;
	
	var temp = this.assignBox(sync_obj);
	this.boxList.push(temp);
  
	for(var i = 0,objId;objId=obj_list[i];i++){
		temp = this.assignBox(objId);
		this.boxList.push(temp);
		this.listen(temp);
	}
	var _this=this;
	var loop=function(){

		for(var i=0; i<_this.boxList.length; i++) {
			_this.transform(_this.boxList[i]);
		}
		requestAnimationFrame(loop);
	};
	loop();
}
function nextPage(code,num){
	saveRecord(code);
	setTimeout(1500,location.replace(num+'.php'));	
}
function dragPic(){
	dragTime = Math.floor(Date.now() / 1000);
}
FingerComponent.prototype.checkRes=function() {
	
	check.style.display = "inline";
	check.style.top = 200;
	check.style.left = 800;
	var arrow=this.boxList[0];
	var degx=Math.abs(arrow.degx);
	var degy=Math.abs(arrow.degy);
	var x=degx>=0 && degx<=40
	var y=degy>=160 && degy<=200;
	return x && y;
	
}
FingerComponent.prototype.assignBox=function(picS) {
	var pic = document.getElementById(picS);
	//console.log(pic);
	return {
		element: pic,
		isUpdated: true,
		x: 0,
		y: 0,
		rad: 0,
		scale: 1,
		rafId: 0,
		zIndex: 0,
		degx: 0,
		degy: 0
	}
}
FingerComponent.prototype.listen=function(pBoxO) {
	var finger = new Fingers(pBoxO.element);
	var flag=false;
	var _this=this;
	/*finger.addGesture(Fingers.gesture.Drag, null).addHandler(function(pEventType, pData, pFingers) {
			if(pEventType === Fingers.Gesture.EVENT_TYPE.move) {
				//pBoxO.x += pFingers[0].getDeltaX();
				//pBoxO.y += pFingers[0].getDeltaY();
				
				var x=pFingers[0].getDeltaX();
				var y=pFingers[0].getDeltaY();
				//console.log("X:"+x+" Y:"+y);
				var temp=pBoxO.rad+y/3;
				if(temp>=-73 && temp<=17)
					pBoxO.rad = temp;//(y/100);	
				pBoxO.isUpdated = true;
			}
			else if(pEventType === Fingers.Gesture.EVENT_TYPE.start) {
				//topZIndex++;
				//pBoxO.zIndex = topZIndex;
				//pBoxO.isUpdated = true;
			}
	});*/
	/*finger.addGesture(Fingers.gesture.Hold, { nbFingers: 1}).addHandler(function(pEventType,pData){
		if(pEventType === Fingers.Gesture.EVENT_TYPE.instant)
			flag = true ;                   
	});*/
	finger.addGesture(Fingers.gesture.Drag, null).addHandler(function(pEventType, pData, pFingers) {              
		if(pEventType === Fingers.Gesture.EVENT_TYPE.move) {
			for(var i=0,obj; obj=_this.boxList[i]; i++) {
				obj.degx += pFingers[0].getDeltaY() ;
				if(obj.degx>=360)
					obj.degx-=360;
				else if(obj.degx<=-360)
					obj.degx+=360;
				obj.degy += pFingers[0].getDeltaX() ;
				if(obj.degy>=360)
					obj.degy-=360;
				else if(obj.degy<=-360)
					obj.degy+=360;
				
				//pBoxO.isUpdated = true;
                //obj.zIndex = -1;
				//obj.rad += pData.deltaRotation;
				//obj.scale += pData.deltaScale;
				obj.isUpdated = true;
			}
			
		}
		
	});
	finger.addGesture(Fingers.gesture.Transform, null).addHandler(function(pEventType, pData, pFingers) {              
		if(pEventType === Fingers.Gesture.EVENT_TYPE.move) {
			for(var i=0,obj; obj=_this.boxList[i]; i++) {
				obj.rad += pData.deltaRotation;
				//obj.scale += pData.deltaScale;
				obj.scale = Math.max(0.5, Math.min(2, obj.scale * pData.deltaScale));
			
				obj.isUpdated = true;
			
				
			}
		}
	});
	pBoxO.fingers = finger ;
}
FingerComponent.prototype.transform=function(pBoxO) {
	
	if(pBoxO.isUpdated) {
		pBoxO.element.style[this.TRANSFORM_PREFIXED] = "translateZ(0) " +
						"translate(" + pBoxO.x + "px, " + pBoxO.y + "px) " +
						"scale(" + pBoxO.scale + ") " +//+ "rotate3d(0,0,0," + pBoxO.rad + "rad) ";
						"rotate(" + pBoxO.rad + "rad) "+
						"rotateY("+pBoxO.degy+"deg)" +
						"rotateX("+pBoxO.degx+"deg)";
		
		pBoxO.element.style.zIndex = pBoxO.zIndex;
		pBoxO.isUpdated = false;
	}
}  
FingerComponent.prototype.loop=function(){
	var x=this.loop();
	for(var i=0; i<this.boxList.length; i++) {
		this.transform(this.boxList[i]);
	}
  requestAnimationFrame(x);
}
FingerComponent.prototype.getVendorPrefixed=function(pArrayOfPrefixes) {
	var result = null;
	for (var i=0; i<pArrayOfPrefixes.length; i++) {
		if (document.body.style[pArrayOfPrefixes[i]] !== undefined) {
			result = pArrayOfPrefixes[i];
			break;
		}
	}
	return result;
}
function saveRecord(code){
	xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState==4) {
			if(xmlhttp.status==200) {
				xmlhttp.abort();
			}
		}
	};
	xmlhttp.open("POST","saveRecord.php",true);
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlhttp.send("codenum=" + code + "&time=" + Math.floor(Date.now() / 1000));
}

function saveRecords(code,time){
	xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState==4) {
			if(xmlhttp.status==200) {
				xmlhttp.abort();
			}
		}
	};
	xmlhttp.open("POST","saveRecord.php",true);
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlhttp.send("codenum=" + code + "&dragtime=" + time);
}

function saveRecordr(code,rotX,rotY,rotZ,rotS){
	xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState==4) {
			if(xmlhttp.status==200) {
				xmlhttp.abort();
			}
		}
	};
	xmlhttp.open("POST","saveRecord.php",true);
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlhttp.send("codenum=" + code + "&time=" + Math.floor(Date.now() / 1000) + "&rotx="+rotX+"&roty="+rotY+"&rotz="+rotZ+"&scale="+rotS);