// JavaScript Document

$(document).ready(function() {


  
  var currentURL = document.location.href;
  
  var currentPage = "";
  
  if(currentURL.indexOf("index") != -1)
  {
	
	  currentPage = "index";
  }
  else if(currentURL.indexOf("portfolio") != -1)
  {
	
	  currentPage = "portfolio";
  }
  else if(currentURL.indexOf("about") != -1)
  {
	
	  currentPage = "about";
  }
  else if(currentURL.indexOf("contact") != -1)
  {
	
	  currentPage = "contact";
  }
  else
  {
	  currentPage = "index";
  }
  
  

  
  


//************************************
//************************************
//************************************
//************************************CHANGE DESIGN FUNCTIONS 
//************************************
//************************************
//************************************

var color = '#2F3540';//'random';
var lineColor = '#CCC';


   
 $(".colorChange").change(function(){
	 var targetid = $(this).attr("id");
	  
	  var newColor = "";
	  var colorChoice = $(this).val() ;
	  
	  for(var i = 0; i < colorArray.length; i ++)
	  {
		  if(colorChoice == colorArray[i][0])
		  {
			  newColor = colorArray[i][1];
			  break;
		  }
	  };
	
	if(targetid == 'change')
	{
		 $(this).val('ball color');
	}
	else if(targetid == 'changeLines')
	{
		 $(this).val('line color');
	}
	else if(targetid == 'changeBackground')
	{
		 $(this).val('background');
	}
	 
	 if(targetid == 'change'){color = newColor;}else if(targetid == "changeLines"){lineColor = newColor;}else if(targetid == "changeBackground"){$("body").css("background-color", newColor);};
	  
  });
  
$("#reset").click(function(){
	   color = '#2F3540';//'random';
    lineColor = '#CCC';//'#8ED6FF';
	  ballDiameter = 15;
	$("body").css("background-color", "#FFF");
	//grad('rgba(153,0,255,.75)');
	grad(gradColor);
});

   var ballDiameter = 15;

$("#ballSize").change(function(){

	var newSize = 15;
	for(var i = 0; i < sizes.length; i ++)
	{
		if($(this).val() == sizes[i][0])
		{
			ballDiameter = sizes[i][1];	
		}
		
	};
	$(this).val("ball size");
	
});

$("#changeGrad").change(function(){
	
	  var colorChoice = $(this).val() ;

	  for(var i = 0; i < colorArray2.length; i ++)
	  {
		 
		  if(colorChoice == colorArray2[i][0])
		  {
			 
			  canvas2.fadeTo('fast', 0, function()
			  {
				  grad(colorArray2[i][1]);
				  canvas2.fadeTo('fast',1);
				
			  });
			    break;
		  };
		 
	  };
	   $(this).val("gradient")
	});
	
	
	
var canvas2 = $("#contentBackground");
var context2 = canvas2.get(0).getContext("2d");


var gradColor = new Array(47,53,64);
function grad(gradColor)
{
	context2.clearRect(0,0,canvas2.width(),  canvas2.height());
	var grd = context2.createLinearGradient(0,0,0,150);
	
	grd.addColorStop(0,'rgba(' + gradColor[0] + ',' + gradColor[1] + ',' +gradColor[2] + ',1)'); 
	grd.addColorStop(1,'rgba(' + gradColor[0] + ',' + gradColor[1] + ',' +gradColor[2] + ',.75)'); 
	context2.fillStyle = grd;
	context2.fill();
	context2.fillRect(0, 0,canvas2.width(), canvas2.height());
};
grad(gradColor);

	
var uiHeight =  $("#ui").height();
var uiWidth =  $("#ui").width()*-1;

$("#uiClose").css('height',uiHeight);
$("#uiGlow").css('height',uiHeight);
  $("#ui").css('right', uiWidth);
  var ui = 'closed';
  $("#uiClose").click(function()
  {
	 if(ui == 'closed')
	 {
		 ui = 'open';
		   $("#ui").animate({right:0}, 300);
		   $("#uiCloseClick").css("display", "block");
		  $("#uiOpen").css("display", "none");
	 }
	 else
	 {
		  ui = 'closed';
		   $("#ui").animate({right:uiWidth}, 300);
		   $("#uiCloseClick").css("display", "none");
		   $("#uiOpen").css("display", "block");
	 }
	  
	  
	  
  });
  
  	$("#uiClose").mouseenter(function(){
							
								$("#uiGlow").fadeIn("fast");
							});
		$("#uiClose").mouseleave(function(){
							
								$("#uiGlow").fadeOut("fast");
							});					
							
  
	
//************************************
//************************************
//************************************
//************************************  END CHANGE DESIGN FUNCTIONS 
//************************************
//************************************
//************************************















 var x = 0;
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");


var canvasWidth = canvas.width();
var canvasHeight = canvas.height();


$(window).resize(resizeCanvas);

function resizeCanvas(){
	
	
	
	if(currentPage == 'contact')
	{
		lineQ = canvasHeight/lineInterval;
	}
	else
	{
		lineQ = canvasWidth/lineInterval;
	}
	newLineQ = 2*lineQ;
	loadLineArray();
	makeLines(newLineQ);
	$("#wrapper").css("width", canvasWidth);
	canvasWidth = document.body.offsetWidth;
	canvasHeight = document.body.offsetHeight;	
	canvas.attr("width", canvasWidth);
	canvas.attr("height", canvasHeight);
	context.clearRect(0,0, canvasWidth, canvasHeight);
	makeLines(newLineQ);
	
};
resizeCanvas();


var lines = Array();
var lines2 = Array();
var lines3 = Array();
var line = function(startX, startY,endX, endY, thickness, color)
{
	this.startX = startX;
	this.startY = startY;
	
	this.endX = endX;
	this.endY = endY;
	
	this.thickness = thickness;
	this.color = color;
};

if(currentPage == 'index' || currentPage == 'about')
{
	var lineInterval = 25;
}
else
{
	var lineInterval = 50;
}

if(currentPage == 'contact')
	{
		lineQ = canvasHeight/lineInterval;
	}
	else
	{
		lineQ = canvasWidth/lineInterval;
	}
	
var newLineQ = lineQ *2;

function loadLineArray()
{
	lines = Array();
	lines2 = Array();
	lines3 = Array();
	angle = 0;
	range = 50;
	speed = .25;
	for(var i =0; i < lineQ;i++)
	{
		//vertical lines
		if(currentPage == 'index')
		{
			var startX = i * lineInterval;
			var startY = 0;
			var endX = i * lineInterval;
			var endY = canvasHeight;
			var thickness = .75;
			var color = '#CCC';
			lines.push(new line(startX, startY, endX,  endY, thickness, color));	
			
			
			//horizontal-ish lines
			var startX2 = 0;
			var startY2 =i*lineInterval;
			var endX2 = i * lineInterval;
			var endY2 = canvasHeight;
			var thickness2 = 1;
			var color2 = '#999';
			lines.push(new line(startX2, startY2, endX2,  endY2, thickness2, color2));	
			lines2.push(new line(startX2, startY2, endX2,  endY2, thickness2, color2));	
		}
		else if(currentPage == 'portfolio')
		{
					/*
				var startX = i * lineInterval;
				var startY = canvasHeight;
				var endX = i*lineInterval;
				var endY =  (canvasHeight-200) + Math.sin(angle)*range;
				angle += speed; //canvasHeight/3;
				var thickness = 5;
				var color = '#'+Math.floor(Math.random()*16777215).toString(16);;
				*/
				
				
				//vertical lines
				var startX = 0;
				var startY = canvasHeight;
				var endX = canvasWidth;
				var endY = i*lineInterval;
				var thickness = 1;
				var color = '#CCC';
				lines.push(new line(startX, startY, endX,  endY, thickness, color));	
				if(i ==0)
				{
					lines3.push(new line(startX, startY, endX,  endY, thickness, color));
				};
				
				
				var startX2 = 0;
				var startY2 =i*lineInterval;
				var endX2 =canvasWidth;
				var endY2 = canvasHeight;
				var thickness2 = 1;
				var color2 = '#999';
				lines.push(new line(startX2, startY2, endX2,  endY2, thickness2, color2));	
				if(i ==0)
				{
					lines2.push(new line(startX2, startY2, endX2,  endY2, thickness2, color2));	
				};
			
		}
		else if(currentPage == 'about')
		{
			//vertical lines
				var startX = canvasWidth - (canvasWidth - (i*lineQ)) - 1;
				var startY = 0;//i * lineInterval;
				var endX = canvasWidth - (canvasWidth - (i*lineQ))- 1;
				var endY = (i * lineInterval);//+lineInterval;
				var thickness = 1;
				var color = '#'+Math.floor(Math.random()*16777215).toString(16);//lines[i].color;'#CCC';
				lines.push(new line(startX, startY, endX,  endY, thickness, color));	
				
				
				//horizontal-ish lines
				var startX2 = 0;
				var startY2 =i * lineInterval;
				var endX2 =canvasWidth - (canvasWidth - (i*lineQ));
				var endY2 = i * lineInterval;
				var thickness2 = 1;
				var color2 = '#'+Math.floor(Math.random()*16777215).toString(16);//lines[i].color;'#999';
				lines.push(new line(startX2, startY2, endX2,  endY2, thickness2, color2));	
				lines2.push(new line(startX2, startY2, endX2,  endY2, thickness2, color2));	
		}
		else if(currentPage == 'contact')
		{
			//vertical lines
	
			var startX = canvasWidth*.9;
			var startY =0;
			var endX =i*lineInterval;
			var endY = canvasHeight;
			var thickness = 2;
			var color = '#CCC';
			
			lines.push(new line(startX, startY, endX,  endY, thickness, color));	
			
			
			//horizontal-ish lines
			var startX2 = 0
			var startY2 =canvasHeight*.25;
			var endX2 =canvasWidth - (i*lineInterval);
			var endY2 = canvasHeight;
			var thickness2 = 2;
			var color2 = '#CCC';
			lines.push(new line(startX2, startY2, endX2,  endY2, thickness2, color2));	
			lines2.push(new line(startX2, startY2, endX2,  endY2, thickness2, color2));	
		}
		
		
	};
};
loadLineArray();

function makeLines(newLineQ)
{
	
	for(var i =0; i < newLineQ;i++){
	
		context.lineWidth   = lines[i].thickness;
		if(lineColor == 'random')
		{
		context.strokeStyle = lines[i].color;
		}
		else
		{
			context.strokeStyle = lineColor;
		};
		context.beginPath();
		context.globalAlpha = 0.5;
	//	context.shadowColor = "#CCC";
	//	context.shadowOffsetX = 10;
		context.moveTo(lines[i].startX, lines[i].startY);
		context.lineTo(lines[i].endX, lines[i].endY);
		context.closePath();
		context.stroke();
		
		};
		

};



//$("#portfolio").slideDown(2000);
 //$("#portfolio").effect("bounce", {times:3 }, 300);

  

var shapes = Array();



var playAnimation = true;
var startButton = $("#startButton");
var stopButton = $("#stopButton");

var Shape = function(x, y, width, height, xMov, yMov, color){
	this.x = x;
	this.y = y;
	this.width = width;
	this.height = height;
	this.radius = Math.random()*30;
	this.xMov = xMov;
	this.yMov = yMov;
	this.angle = 0;
	this.yMax = canvasHeight;
	this.color = color;
};

var Point = function(x, y){
this.x = x;
this.y = y;	
}


if(currentPage == 'portfolio')
{
	var ballQ  = 5;
}
else
{
	var ballQ  = 10;
}


for(var i = 0; i < ballQ; i++){
var x = 10+(i*(Math.random()*25));
var y = - (i*20);
var width = height = 15;
var xMov =6;
var yMov = 3;
var color2 = '#'+Math.floor(Math.random()*16777215).toString(16);
shapes.push(new Shape(x,y,width,height, xMov, yMov, color2));	
}


if(currentPage == 'portfolio'){
	var shapes2 = Array();
	for(var i = 0; i < 3; i++)
	{
		var x = 10+(i*(Math.random()*25));
		var y = - (i*20);
		var width = height = 10;
		var xMov = -4;
		var yMov = .5;
		var color2 = '#'+Math.floor(Math.random()*16777215).toString(16);
		shapes2.push(new Shape(x,y,width,height, xMov, yMov, color2));	
	}
}





var counter = 0;


resized = false;








function animate(){

	context.clearRect(0,0, canvasWidth, canvasHeight);
	makeLines(newLineQ);
	for(var i = 0; i < shapes.length; i ++)
	{
			shapes[i].x += shapes[i].xMov;
			if(shapes[i].x > (canvasWidth + (shapes[i].width)) ) 
			{
				shapes[i].x = 30;
				shapes[i].y = -30;
			};
			
			
			shapes[i].y += shapes[i].yMov;
			shapes[i].yMov += .35;
			
			var C = new Point(shapes[i].x, shapes[i].y);
		
			for(var j = 0; j < lines2.length; j ++)
			{
				
				var A = new Point(lines2[j].startX, lines2[j].startY);
				var B = new Point(lines2[j].endX, lines2[j].endY);
				
				var returnResult = new lineIntersectCircle(A ,B, C, ballDiameter/2);
			
				if(returnResult.intersects == true)
				{
					shapes[i].y -= 5;
					shapes[i].yMov *= -.8;
					returnResult.intersects = false;
					break;
				}
				
			};
			if(shapes[i].y > (canvasHeight - (ballDiameter/2)) ) 
			{
				shapes[i].y -= 5;
				shapes[i].yMov *= -.7;
			};
			
			
			
			
			
			
			context.beginPath();
			context.arc(shapes[i].x,  shapes[i].y, ballDiameter/2, 0, 2 * Math.PI, false);
		 	if(color != 'random')
			{
				context.fillStyle = color;
			}
			else
			{
				context.fillStyle = shapes[i].color;
			}
			context.fill();
			context.lineWidth = 1;
			context.globalAlpha = 0.5;
			context.strokeStyle = "#333";
			context.closePath();
			context.stroke();
	};
			
			
			if(currentPage == 'portfolio')
			{
				
								for(var i = 0; i < shapes2.length; i ++)
								{
										shapes2[i].x += shapes2[i].xMov;
										if(shapes2[i].x < (- (shapes[i].width)) ) 
										{
											shapes2[i].x = canvasWidth;
											shapes2[i].y = -30;
										};
										
										
										shapes2[i].y += shapes2[i].yMov;
										shapes2[i].yMov += .35;
										
										var C = new Point(shapes2[i].x, shapes2[i].y);
									
										for(var j = 0; j < lines3.length; j ++)
										{
											
											var A = new Point(lines3[j].startX, lines3[j].startY);
											var B = new Point(lines3[j].endX, lines3[j].endY);
											
											var returnResult = new lineIntersectCircle(A ,B, C, ballDiameter/2);
										
											if(returnResult.intersects == true)
											{
												shapes2[i].y -= 5;
												shapes2[i].yMov *= -.8;
												returnResult.intersects = false;
											}
											
										};
										
										if(shapes2[i].y > (canvasHeight - (ballDiameter/2)) ) 
										{
											shapes2[i].y -= 5;
											shapes2[i].yMov *= -.8;
											
										};
										
										
										
										
										context.beginPath();
										context.arc(shapes2[i].x,  shapes2[i].y, ballDiameter/2, 0, 2 * Math.PI, false);
										if(color != 'random')
										{
											context.fillStyle = color;
										}
										else
										{
											context.fillStyle = shapes2[i].color;
										}
										context.fill();
										context.lineWidth = .5;
										context.globalAlpha = 0.5;
										context.strokeStyle = "#333";
										context.closePath();
										context.stroke();
											
								
								}
								
			}
				
	
	
	
	if(resized == false)
	{
		resizeCanvas();
		resized = true;
	}
	
	if(playAnimation){
		
		setTimeout(animate, 33);
	}

}

animate();
makeLines(newLineQ);

/*
var logoCanvas = $("#logoCanvas");
var logoContext = logoCanvas.get(0).getContext("2d");
var logo = "waltherDesign";
logoContext.font = "bold 40px Verdana";
logoContext.strokeStyle = "#000";
logoContext.strokeStyle = "#000";
logoContext.strokeText(logo, 0, 45);
	

var canvas2 = $("#contentBackground");
var context2 = canvas2.get(0).getContext("2d");
var gradColor2 = new Array(47,53,64);
function grad(gradColor)
{
	context2.clearRect(0,0,canvas2.width(),  canvas2.height());
	var grd = context2.createLinearGradient(0,0,0,150);
	
	grd.addColorStop(0,'rgba(' + gradColor[0] + ',' + gradColor[1] + ',' +gradColor[2] + ',1)'); 
	grd.addColorStop(1,'rgba(' + gradColor[0] + ',' + gradColor[1] + ',' +gradColor[2] + ',.5)'); 
	context2.fillStyle = grd;
	context2.fill();
	context2.fillRect(0, 0,canvas2.width(), canvas2.height());
};
grad(gradColor);


 
function grad(gradColor)
{
		
	context2.clearRect(0,0,canvas2.width(), canvas2.height());
	var grd = context2.createRadialGradient(325, 200, 10, 338, 200, 300);
	grd.addColorStop(0,'rgba(255,255,255,0)'); 
	
	grd.addColorStop(1, gradColor); 
	context2.fillStyle = grd;
	context2.fill();
	
	context2.fillRect(0, 0,canvas2.width(), canvas2.height());
};
grad(gradColor);

*/
	
	
	if(currentPage == 'portfolio')
	{
		
						$(".toggleButton").mouseenter(function(){
							//alert($(this).attr('id'));
							var idVal = $(this).attr('id');
							if(idVal == 'applications')
							{
								$("#appGlow").fadeIn("fast");
							}
							else if(idVal == 'elements')
							{
								$("#elemGlow").fadeIn("fast");
							}
							else if(idVal == 'games')
							{
								$("#gamesGlow").fadeIn("fast");
							}
							else if(idVal == 'portfolioToggle')
							{
								$("#portGlow").fadeIn("fast");
							}
						});
						
						$(".toggleButton").mouseleave(function(){
							$(".glow").fadeOut("slow");
						});
						
						var portScene = 'intro';
						
						$('#applications').click(function() {
							portScene = 'applications';
							 $(".portContent").fadeOut(300);
						  $('#applications').animate({ left: '32px' }, 500, function() { $("#appContent").fadeIn("slow"); });
							$('#elements').animate({ left: '586px' }, 500, function() {  });
							 $('#games').animate({ left: '618px' }, 500, function() {  });
							  $(".buttonText").css("color", "#FFF");
						//	$("#appText").css("color", "#F00");
							 
						});
						
						
						$('#elements').click(function() {
							portScene = 'elements';
							$(".portContent").fadeOut(300);
						  $('#applications').animate({ left: '32px' }, 500, function() {  });
						   $('#elements').animate({ left: '64px' }, 500, function() { $("#elemContent").fadeIn("slow"); });
							$('#games').animate({ left: '618px' }, 500, function() {  });
							 $(".buttonText").css("color", "#FFF");
							// $("#elemText").css("color", "#F00");
						});
						
						
						$('#games').click(function() {
							portScene = 'games';
							$(".portContent").fadeOut(300);
						  $('#applications').animate({ left: '32px' }, 500, function() {  });
						   $('#elements').animate({ left: '64px' }, 500, function() {  });
							$('#games').animate({ left: '96px' }, 500, function() { $("#gameContent").fadeIn("slow"); });
							 $(".buttonText").css("color", "#FFF");
							// $("#gameText").css("color", "#F00");
						});
						
						$('#portfolioToggle').click(function() {
							portScene = 'intro';
							$(".portContent").fadeOut(300);
						  $('#applications').animate({ left: '554px' }, 500, function() { $("#portIntro").fadeIn("slow"); });
						   $('#elements').animate({ left: '586px' }, 500, function() {  });
							$('#games').animate({ left: '618px' }, 500, function() {   });
							 $(".buttonText").css("color", "#FFF");
							//$("#portText").css("color", "#F00");
						});
						var appPage = 1;
						
						$("#appNext").click(function(){
							
							
							$("#appPrevious").fadeIn("slow");
							$("#appPage"+appPage).fadeTo("fast", 0, function(){
								$("#appPage"+appPage).css("z-index", "0");
								appPage ++;
								$("#appPage"+appPage).fadeTo("fast", 1);
								$("#appPage"+appPage).css("z-index", "1000");
								if(appPage == 4)
								{
									$("#appNext").css("display", "none");
								};
								});
							
							
						});
						
						$("#appPrevious").click(function(){
							
							$("#appNext").fadeIn("slow");
							$("#appPage"+appPage).fadeTo("fast", 0, function(){
								$("#appPage"+appPage).css("z-index", "0");
								$("#appPage"+appPage).css("display", "none");
								appPage --;
								$("#appPage"+appPage).fadeTo("fast", 1);
								$("#appPage"+appPage).css("z-index", "1000");
								if(appPage == 1)
								{
									$("#appPrevious").css("display", "none");
								};
								});
							
							
						});
						
						var elemPage = 1;
						$("#elemNext").click(function(){
							
							
							$("#elemPrevious").fadeIn("slow");
							$("#elemPage"+elemPage).fadeTo("fast", 0, function(){
								$("#elemPage"+elemPage).css("z-index", "0");
								$("#elemPage"+elemPage).css("display", "none");
								elemPage ++;
								$("#elemPage"+elemPage).css("z-index", "1000");
								$("#elemPage"+elemPage).fadeTo("fast", 1);
								if(elemPage == 3)
								{
									$("#elemNext").css("display", "none");
								};
								});
							
							
						});
						
						$("#elemPrevious").click(function(){
							
							$("#elemNext").fadeIn("slow");
							$("#elemPage"+elemPage).fadeTo("fast", 0, function(){
								$("#elemPage"+elemPage).css("z-index", "0");
								$("#elemPage"+elemPage).css("display", "none");
								elemPage --;
										$("#elemPage"+elemPage).css("z-index", "1000");
								$("#elemPage"+elemPage).fadeTo("fast", 1);
								
								if(elemPage == 1)
								{
									$("#elemPrevious").css("display", "none");
								};
								});
							
							
						});

	}; // end if portfolio
	
	
	
	if(currentPage == 'contact')
	{
		
						$(this).keydown(function(){
							var maxlength = 200;
							var text = $("#textarea").val();
							if(text.length > maxlength)
							{
								$("#textarea").val($("#textarea").val().substr(0, maxlength));
								//alert("too long")};
						};
						});
						
						$("#send").click(function(){
							var name = $.trim($("#name").val());
							var email = $.trim($("#email").val());
							var message = $.trim($("#textarea").val());
							if(name == "" || message == "" || email == "")
							{
								$("#alert").text("please fill out all three fields");
								
							}
							else
							{
								//validate
								ord=Math.random()*10000000000000000;
								$.post("/assets/contactForm.php?cb="+ord, { name: name, email: email, message:message }, function(data){
									
									if(data.substr(data.length-5, data.length) == "false")
									{
										$("#alert").text("invalid email address");
									}
									else
									{
							
										$("#alert").text("message sent!");
										$("#name").val("")
										$("#email").val("")
										$("#textarea").val("");
									}
								});
							}
							
							
						});



		}; //end if contact


});