var stopsCount=1; //increment or decrement this to keep track of stops editors

function transformIt() {
	//alert();
	demoDiv=document.getElementById("demo");
	codeDiv=document.getElementById("code");
	
	theScale=document.getElementById("scale").value;
	theZScale=document.getElementById("scaleZ").value;

	theRotation=document.getElementById("rotate").value + "deg";
	theZRotation=document.getElementById("rotateZ").value + "deg";

	theXTranslation=document.getElementById("translateX").value + "px";
	theYTranslation=document.getElementById("translateY").value + "px";
	theZTranslation=document.getElementById("translateZ").value + "px";

	theXSkew=document.getElementById("skewX").value + "deg";
	theYSkew=document.getElementById("skewY").value + "deg";
	theZSkew=document.getElementById("skewZ").value + "deg";

	thePerspective=document.getElementById("perspective").value + "deg";
	
	theXOrigin=document.getElementById("originX").value + "%";
	theYOrigin=document.getElementById("originY").value + "%";
	
	theTimingFunction=document.getElementById("timing-function").value;
	theDuration=document.getElementById("duration").value;
	
	
	if (demoDiv) {
		theOrigin=theXOrigin + " " + theYOrigin;
		theTransform="scale("+theScale+")" + " rotate("+theRotation+")" + " translate("+theXTranslation+ ", " +theYTranslation+")";
		theTransform=theTransform + " skew("+theXSkew+ ", " +theYSkew+")";
		
		//do 3D stuff
		
		//theTransform=theTransform + " scaleZ("+theZScale+")" + " rotateZ("+theZRotation+")" + " translateZ("+theZTranslation+ ") " + " perspective("+thePerspective+")";
		
		//theTransform=theTransform + " skewZ("+theZSkew+")";
		
				demoDiv.style.webkitTransition="-webkit-transform " + theTimingFunction + " " + theDuration + "s";
				demoDiv.style.webkitTransformOrigin=theOrigin;
				demoDiv.style.webkitTransform=theTransform;
				demoDiv.style.MozTransformOrigin=theOrigin;
				demoDiv.style.MozTransform=theTransform;
				//demoDiv.style.OTransition="-o-transform " + theTimingFunction + " " + theDuration + "s";
				demoDiv.style.OTransformOrigin=theOrigin;
				demoDiv.style.OTransform=theTransform;
				// demoDiv.style.backgroundColor="red";
				// alert(demoDiv.style.OTransform);
			
			codeDiv.textContent="transform: " +theTransform + ";\n" + "transform-origin: "  + theOrigin;
		}
}

function animateIt() {
	theTimingFunction=document.getElementById("timing-function").value;
	theDuration=document.getElementById("duration").value;
	
	demoDiv=document.getElementById("demo");
	
	// demoDiv.style.webkitTransition="";
	// 	demoDiv.style.webkitTransform="";
	// 	demoDiv.style.webkitTransition="-webkit-transform " + theTimingFunction + " " + theDuration + "s";
		// setTimeout("clearIt()", 50)
		
		clearIt();
		setTimeout("transformIt()", 50)
	
}

function clearIt(){
	demoDiv.style.webkitTransition="";
	demoDiv.style.webkitTransition=""; 
 	demoDiv.style.webkitTransform="";
	demoDiv=document.getElementById("demo");
	
}


window.onload=transformIt;