new webkit_draggable($('dragger'), {revert : false, scroll : false, onEnd : function(){ invis('hidden') }, onMove : function(){ rotateDiv() }, onStart : function(){ invis('visible') }});  
new webkit_draggable($('draggerSec'), {revert : true, scroll : false});
new webkit_draggable($('emptyDiv'), {revert : true, scroll : false});



function invis(val){
	
	dragger.style.visibility = 'hidden';

	arrow.style.visibility = val;
	
	arrowDiv.style[property] = 'scale(' + 0.05 + ',' + 0.05 +  ')';
	entf = -70;
	
	// release touchscreen
	if(val == 'hidden'){
		//arrow.style.visibility = val;
		
		scrollTo(0, 0);
		window.clearInterval(rotateDiv);
		dragger.style[property] = 'scale(' + 1 + ',' + 1 +  ')';
		initBallAni();
	}else{
		//window.setInterval(rotateDiv, 10);
	}
}

var shadowDiv = document.getElementById('shadow');
var hitDiv = document.getElementById('hitDiv')

var bsx;
var bsy;
var xs;
var ys;
var ballInt;
var scy; // scale factor 4 ball
var brot = 0;

var ballStop = false;

var bSpeed = 0;

var start_bsx = 125;

var bxDiff;

var ballsLeft = 6;

var totalScore = 0;

var endTween = false;

var ballEnd = false;

var ballOpa = 0;

var bd = 0;	 // ball difference > ball / last ball
var obx = 0; // last x of ball

function initBallAni(){
	
	endTween = false;
	ballEnd = false;
	ballStop = false;
	ball.style.top = "200px";
	bsx = ball.offsetLeft;
	bsy = ball.offsetTop;
	ballOpa = 0;
	
	if(yPos < -90) yPos = -90;
	
	bSpeed = Math.abs(yPos/7);
	
	bxDiff = -(startXpos - dragger.offsetLeft)/5;
	if(bxDiff < -9) bxDiff = -9;
	if(bxDiff > 9) bxDiff = 9;
	
	xs = 2;
	ys = 12 + bSpeed;
	if(ys < 19) ys = 19;
	if(ys > 26) ys = 26;

	shadowDiv.style.opacity = 0;
	
	ballInt = window.setInterval(ballAni, 35);
}

var xBall;
var yBall;

function ballAni(){
	
	//document.Show.MouseX.value = bSpeed;
	
	xBall = ball.offsetLeft;
	yBall = ball.offsetTop;
	
	if(!ballStop){
		
		if(yBall > 200){
			
			ball.style.top = "210px";
			ballStop = true;
			ys = -ys/2;
			
		}else{
			ball.style[property] = 'rotate(' + (brot += 7) + 'deg) scale(' + scy + ',' + scy +  ')';	
		}
	
		// ball-wall collision and check if goal
		if(ys < 8 && ys > 0){ 
		
			ys = 0;
			
			var gx = xBall + 25;
			var gy = yBall + 25;
			
			hitDiv.style.left = (gx - 21) + "px";
			hitDiv.style.top = (gy - 21) + "px";
			hitDiv.style.visibility = "visible";

			// goal count buttom hole
			if(ballsLeft > 3){
				if(gx > 216 && gx < 266 && gy > 84 && gy < 134){
					goalNum++;
					totalScore++;
					goalAni(goalNum);
				}
			}else{
			// goal count top hole					
				if(gx > 50 && gx < 100 && gy > 26 && gy < 76){
					goalNum++;
					totalScore++;
					goalAni(goalNum);
				}	
			}
			
			document.getElementById("goalDiv").innerHTML = goalNum;
			document.getElementById("totalScoreDiv").innerHTML = totalScore;
		}
	}
	
	if(ys < 0){
		ys -= 2.2;
	}else{
		ys -= 1.5;	
	}
	
	bsy -= ys;
	ball.style.top = bsy + 'px';
	scy = bsy/220 + 0.2;
	
	if(!ballStop){
		if(scy > 1){
			scy = 1;
		}else if(scy < 0.6){
			scy = 0.6;
		}
	}else{
		scy = 1;
	}				

	if(xBall < 13){
		bxDiff = -bxDiff*0.85;
	}else if(xBall > 270){
		bxDiff = -bxDiff*0.85;
	}
	
	if(!endTween){
		bsx -= bxDiff;
		ball.style.left = bsx + 'px';
	}
	
	if(yBall > 225 && ballStop){
		
		shadowDiv.style.left = (xBall - 4) + "px";
		shadowDiv.style.top = "225px";
		
		endTween = true;
		
		if(ballsLeft == 6){
			newPos = 220;
		}else if(ballsLeft == 5){
			newPos = 190;
		}else if(ballsLeft == 4){
			newPos = 150;
		}else if(ballsLeft == 3){
			newPos = 120;
		}else if(ballsLeft == 2){
			newPos = 90;
		}else if(ballsLeft == 1){
			newPos = 250;
		}

		if(xBall > (newPos - 15) && xBall < (newPos + 15)) ballEnd = true;
		
		var newPos;
		
		if(!ballEnd){
					
			bsy = "226px";
			ball.style.top = bsy;
			
			var nx = xBall - (xBall - newPos)/15;
			ball.style.left = nx + "px";
			
			shadowDiv.style.opacity = ballOpa;
			if(ballOpa < 0.3) ballOpa += 0.02; 
			
			bsx = xBall;

			brot -= (xBall - newPos)/7;

			ball.style[property] = 'rotate(' + brot + 'deg) scale(' + scy + ',' + scy +  ')';	

		}else{
			
			// ball count
			ballsLeft--;
			document.getElementById("ballsLeftDiv").innerHTML = ballsLeft;
			
			var arrowDirDiv = document.getElementById("arrowDownDiv");
			
			if(ballsLeft > 3){
				arrowDirDiv.style[property] = 'rotate(0deg)';
				arrowDirDiv.style.left = "170px";
				arrowDirDiv.style.top = "72px";
				document.getElementById("countDiv").innerHTML = (ballsLeft - 3);
			}else{
				arrowDirDiv.style[property] = 'rotate(180deg)';
				arrowDirDiv.style.left = "100px";
				arrowDirDiv.style.top = "30px";
				document.getElementById("countDiv").innerHTML = ballsLeft;
			}
			
			dragger.style.left = bsx + "px";
			dragger.style.top = "225px";
			
			ball.style.left = bsx;
			ball.style.top = "225px";
			ball.style[property] = 'rotate(' + brot + 'deg) scale(1,1)';
			dragger.style.visibility = 'visible';
			
			arrow.style.left = (bsx - 50) + "px";
			
			shadowDiv.style.opacity = 0.3;
			shadowDiv.style.left = (bsx - 4) + "px";
			shadowDiv.style.top = "225px";
			
			if(ballsLeft == 0){
				if(goalNum == 6){
					resetGame("continue");
				}else{
					resetGame("new_game");
				}
			}
			
			initVars();

			window.clearInterval(ballInt);
			
			gt.style.visibility = "hidden";
		
		}

	}
}

var gt = document.getElementById('goalTxtDiv');
function goalAni(goalNum){
	if(goalNum == 1){
		gt.innerHTML = 'Goal';
	}else if(goalNum == 2){
		gt.innerHTML = 'Nice Shot';
	}else if(goalNum == 3){
		gt.innerHTML = 'Great';
	}else if(goalNum == 4){
		gt.innerHTML = 'Impressive';
	}else if(goalNum == 5){
		gt.innerHTML = 'Excellent';
	}else if(goalNum == 6){
		gt.innerHTML = 'Perfect!';
	}
	gt.style.visibility = "visible";
}


function getTransformProperty(element) {
	var properties = ['transform', 'WebkitTransform', 'MozTransform'];
	var p;
	while (p = properties.shift()) {
		if (typeof element.style[p] != 'undefined') {
			return p;
		}
	}
	return false;
}

var arrowDiv = document.getElementById('arrow');
var draggerDiv = document.getElementById('dragger');
//var ball = document.getElementById('ball');

var property = getTransformProperty(arrowDiv);

if (property) {
	
	var d = 0;
	var s = 1;
	
	var ifade = -0.4;
	//var fadeDiv = document.getElementById('introDiv');

}

var startXpos;
var startYpos;

var ballX;
var ballY;

var goalNum = 0;

var ps;
var popUp;

var popInterval;

var resetVar = false;

function resetGame(param){
	
	resetVar = false;
	
	popUp = document.getElementById('popupDiv');
	popUp.style.visibility = "visible";
	
	document.getElementById('scoreInPopup').innerHTML = totalScore;
	
	var arrowDirDiv = document.getElementById("arrowDownDiv");
	
	arrowDirDiv.style[property] = 'rotate(0deg)';
	arrowDirDiv.style.left = "170px";
	arrowDirDiv.style.top = "72px";
	
	if(param == "new_game"){
		resetVar = true;
		document.getElementById('newGame').innerHTML = '<a href="#" onClick="hidePopup(); return false"><img src="img/newgame.png" width="110" height="27"/></a>';
	}else{
		document.getElementById('newGame').innerHTML = '<a href="#" onClick="hidePopup(); return false"><img src="img/continue.png" width="110" height="27"/></a>';
	}
	
}

function showPopup(){
	
	ps += 0.1;
	popUp.style[property] = 'scale(' + ps + ',' + ps +  ')';
	if(ps == 1) popInterval.clearInterval(showPopup);
	
}

function hidePopup(){
	
	document.getElementById('popupDiv').style.visibility = "hidden";
	if(resetVar == true){
		totalScore = 0;	
		document.getElementById("totalScoreDiv").innerHTML = totalScore;
	}
	
	ballsLeft = 6;
	goalNum = 0;
	
	document.getElementById("goalDiv").innerHTML = goalNum;
	document.getElementById('ballsLeftDiv').innerHTML = ballsLeft;
	document.getElementById('countDiv').innerHTML = 3;
}

// body call onLoad
function initGame(){

	initVars();
	
	document.getElementById("countDiv").innerHTML = "3";
	document.getElementById('titleDiv').style.visibility = "visible";
	
	//window.setInterval(iconFader, 10);
	
}

function initVars(){
	
	startXpos = document.getElementById('dragger').offsetLeft;	
	startYpos = document.getElementById('dragger').offsetTop;
	
	ballX = document.getElementById('ball').offsetLeft;
	ballY = document.getElementById('ball').offsetTop;
	
}

var xPos;
var yPos;

var xent;
var yent;

var entf = 0;
var rot = 0;

var dragX;
var dragY;

function rotateDiv(){

	//arrowDiv.style.visibility = "visible";

	arrowDiv.style[property] = 'rotate(' + rot + 'deg) scale(' + (entf/140 + 0.5) + ',' + 1 +  ')';

	dragX = dragger.offsetLeft;
	dragY = dragger.offsetTop;
	
	xPos = dragX - startXpos;
	yPos = dragY - startYpos;

	rot = -90-(Math.atan2(xPos, yPos)*(180/Math.PI));
	
	if(xPos < 0){
		if(rot > -50) rot = -50;
	}else{
		if(rot < -134) rot = -134;
	}
	
	// distance between ball and mousefinger
	xent = (startXpos - dragX)*(startXpos - dragX);
	yent = (startYpos - dragY)*(startYpos - dragY);
	entf = Math.sqrt(xent + yent);
	
	if(yPos < 0) entf = -50;
	
}

/*
function iconFader(){
	
	ifade += 0.075;
	if(ifade >= 0){
		fadeDiv.style.visibility = "visible";
		
		if(ifade >= 1){
			window.clearInterval(iconFader);
			ifade = 1;
		}	
	}
	fadeDiv.style[property] = 'scale(' + ifade + ',' + ifade + ')';
}
*/

var inGame = false;

function hideIntro(){
	
	inGame = true;
	
	showHide("visible");
	
	dragger.style.visibility = 'visible';
	
	document.getElementById('startDiv').parentNode.removeChild(document.getElementById('startDiv'));
	
}

function orient(rot){

	if(rot == -90 || rot == 90 ){
		if(inGame){
			showHide("hidden");
			document.getElementById('bg').style.visibility = "hidden";
		}else{
			document.getElementById('startDiv').style.visibility = "hidden";
		}
		
		document.getElementById('modeDiv').style.visibility = "visible";
	}
	
	if(rot == 0){
		scrollTo(0, 0);
		if(inGame){
			showHide("visible");
			document.getElementById('bg').style.visibility = "visible";
		}
		
		document.getElementById('bg').style.top = "0px";
		document.getElementById('bg').style.left = "0px";
		
		document.getElementById('modeDiv').style.visibility = "hidden";
	}

}

function showHide(val){
	document.getElementById('scoreDiv').style.visibility = val;
	document.getElementById('formDiv').style.visibility = val;
	document.getElementById('goalDiv').style.visibility = val;
	document.getElementById('ballsLeftDiv').style.visibility = val;
	document.getElementById('totalScoreDiv').style.visibility = val;
	document.getElementById('countDiv').style.visibility = val;
	document.getElementById('arrowDownDiv').style.visibility = val;
	document.getElementById('ball').style.visibility = val;	
}