var tl = new TimelineMax({paused:true});
var tldot = new TimelineMax({paused:true});
var quantity = 115;
var duration = 10;
var i;
var dot;
function angulo(){
	//POSIÇÕES DOS ELEMENTOS
	var topOrigem = parseInt($("#hive").css("top"))+32;
	var leftOrigem = parseInt($("#hive").css("left"))+32;	
	var topDestinoSun = parseInt($("#sun").css("top"))+32;
	var leftDestinoSun = parseInt($("#sun").css("left"))+32;	
	var topDestinoFlower = parseInt($("#flower").css("top"))+32;
	var leftDestinoFlower = parseInt($("#flower").css("left"))+32;	
	//CÁLCULO PRODUTO INTERNO
	var v1x = leftDestinoSun-leftOrigem;
	var v1y = topDestinoSun-topOrigem;	
	var v2x = leftDestinoFlower-leftOrigem;
	var v2y = topDestinoFlower-topOrigem;	
	var dot = v1x*v2x+v1y*v2y;	
	//CÁLCULO ÂNGULO
	var magv1 = Math.sqrt( Math.pow((leftDestinoSun)-(leftOrigem),2) + Math.pow((-topDestinoSun)-(-topOrigem),2));
	var magv2 = Math.sqrt( Math.pow((leftDestinoFlower)-(leftOrigem),2) + Math.pow((-topDestinoFlower)-(-topOrigem),2));
	var angle = Math.acos(dot/(magv1*magv2)); //RADIANOS	
	return {'x':angle,'y':magv1,'z':magv2};
}
function caminho(){
	var _angle = angulo();	
	var angle = _angle.x;
	updateAngle();
	if ((parseInt($("#sun").css("left"))+32) < (parseInt($("#flower").css("left"))+32))
	{
		a=1;
	}
	else{
		a=-1;
	}	
	//LADO ESQUERDO - INICIO
	//1.º Ponto 
	var X1 = - Math.round((Math.sin(angle)+0.0001)*100)/100*(-100);
	var Y1 = Math.round((Math.cos(angle)+0.0001)*100)/100*(-100);
	//2.º Ponto
	var X2 = Math.cos(angle)*(-100) - Math.round((Math.sin(angle)+0.0001)*100)/100*(-100);
	var Y2 = Math.sin(angle)*(-100) + Math.round((Math.cos(angle)+0.0001)*100)/100*(-100);
	//3.º Ponto
	var X3 = Math.cos(angle)*(-100);
	var Y3 = Math.sin(angle)*(-100);
	//4.º Ponto
	var X4 = Math.cos(angle)*(-100) - Math.round((Math.sin(angle)+0.0001)*100)/100*(100);
	var Y4 = Math.sin(angle)*(-100) + Math.round((Math.cos(angle)+0.0001)*100)/100*(100);
	//5.º Ponto
	var X5 = - Math.round((Math.sin(angle)+0.0001)*100)/100*(100);
	var Y5 = Math.round((Math.cos(angle)+0.0001)*100)/100*(100);
	//LADO ESQUERDO - FINAL
	
	//LADO DIREITO 
	//1.º Ponto
	var X11 = - Math.round((Math.sin(angle)+0.0001)*100)/100*(-100);
	var Y11 = Math.round((Math.cos(angle)+0.0001)*100)/100*(-100);
	//2.º Ponto
	var X21 = Math.cos(angle)*(100) - Math.round((Math.sin(angle)+0.0001)*100)/100*(-100);
	var Y21 = Math.sin(angle)*(100) + Math.round((Math.cos(angle)+0.0001)*100)/100*(-100);
	//3.º Ponto
	var X31 = Math.cos(angle)*(100);
	var Y31 = Math.sin(angle)*(100);
	//4.º Ponto
	var X41 = Math.cos(angle)*(100) - Math.round((Math.sin(angle)+0.0001)*100)/100*(100);
	var Y41 = Math.sin(angle)*(100) + Math.round((Math.cos(angle)+0.0001)*100)/100*(100);
	//5.º Ponto
	var X51 = - Math.round((Math.sin(angle)+0.0001)*100)/100*(100);
	var Y51 = Math.round((Math.cos(angle)+0.0001)*100)/100*(100);
	//LADO DIREITO - FINAL
	//PERCURSO
			var  path = [{x:0, y:0}, {x:X1*a, y:Y1}, {x:X2*a, y:Y2}, {x:X3*a, y:Y3}, {x:X4*a, y:Y4}, {x:X5*a, y:Y5}, {x:0, y:0},{x:0, y:0}, {x:X11*a, y:Y11}, {x:X21*a, y:Y21}, {x:X31*a, y:Y31}, {x:X41*a, y:Y41}, {x:X51*a, y:Y51}, {x:0, y:0}];
			var position = {x:path[0].x, y:[path[0].y]};
			var tween = TweenMax.to(position, quantity, {bezier:path, ease:Linear.easeNone});			
			path.shift();
			for (i = 0; i < quantity; i++) {
				tween.time(i);
				dot = $("<div />").addClass("dot").css({left:(314+Number(position.x))+"px", top:(234+Number(position.y))+"px"}).appendTo("#content"); 
				tldot.set(dot, {visibility:"visible"}, i * (duration / quantity));
			}	
	tl.to("#bee2", 5, {css:{bezier:{values:[{x:0, y:0}, {x:X1*a, y:Y1}, {x:X2*a, y:Y2}, {x:X3*a, y:Y3}, {x:X4*a, y:Y4}, {x:X5*a, y:Y5}, {x:0, y:0}], autoRotate:true}}, ease:Linear.easeNone});
	tl.to("#bee2", 5, {css:{bezier:{values:[{x:0, y:0}, {x:X11*a, y:Y11}, {x:X21*a, y:Y21}, {x:X31*a, y:Y31}, {x:X41*a, y:Y41}, {x:X51*a, y:Y51}, {x:0, y:0}], autoRotate:true}}, ease:Linear.easeNone});	
}
$("#startButton").click(function() {	
		$( ".dot" ).remove();
		tl.pause(0);
		tl.clear();
		tldot.pause(0);
		tldot.clear();					
		caminho();		
		tl.play();
		tldot.play();
	});
$("#pause").click(function() {
		tldot.pause();
		tl.pause();
	});
$("#reverse").click(function() {
		tldot.reverse();
		tl.reverse();
	});		
$("#resume").click(function() {
		tl.resume();
		tldot.resume();	
	});		
$("#restart").click(function() {					
		$( ".dot" ).remove();
		tl.pause(0);
		tldot.clear();		
		tl.clear();		
		caminho();		
		tl.play();
		tldot.play();
	});
$("button").mouseover(function() {
    TweenMax.to(this, .75, { borderRadius:"15px"});
});
$("button").mouseout(function() {
    TweenMax.to(this, .75, { borderRadius:"0px"});
});	
Draggable.create("#flower", {type:"top,left", bounds:"#content",edgeResistance:0.75, onDragEnd:function() {
            $("#flower").css("z-index","10");
			updateAngle();
        }});
Draggable.create("#sun", {type:"top,left", bounds:"#content",edgeResistance:0.75, onDragEnd:function() {
            $("#sun").css("z-index","10");
			updateAngle();
        }});		
function updateAngle(){
	var _ang = angulo();		
	$("#ang").html(Math.round(_ang.x*180/Math.PI));
	$("#mag1").html(Math.round(_ang.y));
	$("#mag2").html(Math.round(_ang.z));
}