var canvasButtons = new Object;

$(document).ready(function() {
	prepCircles();
	hideInputValues();
});

function hideInputValues() {
	// should make this a loop
	// should gather default values from initial state
	$(".comment_name input").blur(function() {
		if ($(this).attr("value") == "") {
			$(this).attr("value", "Who are you?");
			$(this).addClass("default");
		}
	});
	$(".comment_name input").focus(function() {
		if ($(this).attr("value") == "Who are you?") {
			$(this).attr("value", "");
			$(this).removeClass("default");
		}
	});
	$(".comment_email input").blur(function() {
		if ($(this).attr("value") == "") {
			$(this).attr("value", "So we can spam you.");
			$(this).addClass("default");
		}
	});
	$(".comment_email input").focus(function() {
		if ($(this).attr("value") == "So we can spam you.") {
			$(this).attr("value", "");
			$(this).removeClass("default");
		}
	});
	$(".comment_website input").blur(function() {
		if ($(this).attr("value") == "") {
			$(this).attr("value", "What do you want to pimp?");
			$(this).addClass("default");
		}
	});
	$(".comment_website input").focus(function() {
		if ($(this).attr("value") == "What do you want to pimp?") {
			$(this).attr("value", "");
			$(this).removeClass("default");
		}
	});
	$(".comment_comment textarea").blur(function() {
		if ($(this).attr("value") == "") {
			$(this).attr("value", "What do you have to say?");
			$(this).addClass("default");
		}
	});
	$(".comment_comment textarea").focus(function() {
		if ($(this).attr("value") == "What do you have to say?") {
			$(this).attr("value", "");
			$(this).removeClass("default");
		}
	});
	$('form#commentform').submit(function() {
		if ($(".comment_website input").attr("value") == "What do you want to pimp?") {
			$(".comment_website input").attr("value", "");
		}
	});
}

/* CANVAS BUTTONS *********************************************************************/
function prepCircles() {
	// set up default # circles drawn 
	canvasButtons.settings = new Object;
	canvasButtons.settings.steps = 20;
		
	// set up default color values
	var darkgray = [29,29,29];
	var gray = [51,51,51];
	var pink = [234,0,120];
	var blue = [0,158,231];

	// determine which arrays need to be created
	
	// create appropriate arrays
	canvasButtons.colorSequences = new Object;
	canvasButtons.colorSequences.pink = makeIntStates(gray, pink);	
	canvasButtons.colorSequences.blue = makeIntStates(gray, blue);	
	canvasButtons.colorSequences.darkgraypink = makeIntStates(darkgray, pink);	
	canvasButtons.colorSequences.darkgrayblue = makeIntStates(darkgray, blue);	
	
	$(".canvasButton").each(function() {
		var id = $(this).find("canvas").attr("id");										

		// remove the background image
		$(this).css("background-image", "none");

		// draw initial state
		if ($(this).parent(".home-nav")) {
			var startColor = darkgray;
		}
		else {
			var startColor = gray;
		}
			drawCircle(startColor, id);		
	});
	
	// prepare hover actions
	// all normal (gray) pink buttons
	$(".full-exposure .list-of-posts-footer .canvasButton, .full-exposure .post-footer .canvasButton, .full-disclosure .title .canvasButton").each(function() {
		doCircleHover(this, "pink", $(this).find("canvas").attr("id"));
	});
	// special (dark gray) pink button
	$(".full-exposure .home-nav .canvasButton").each(function() {
		doCircleHover(this, "darkgraypink", $(this).find("canvas").attr("id"));
	});
	// all normal (gray) blue buttons
	$(".full-disclosure .list-of-posts-footer .canvasButton, .full-disclosure .post-footer .canvasButton, .full-exposure .title .canvasButton, .author .canvasButton").each(function() {
		doCircleHover(this, "blue", $(this).find("canvas").attr("id"));
	});
	// special (dark gray) blue button
	$(".full-disclosure .home-nav .canvasButton").each(function() {
		doCircleHover(this, "darkgrayblue", $(this).find("canvas").attr("id"));
	});	
	
}
function doCircleHover(el, style, id) {
		// set hover actions
		$(el).hover(
			function() {
				prepCircleAnimation(style, id, "normal");
			},
			function() {
				prepCircleAnimation(style, id, "reverse");
			}
		);
}
function prepCircleAnimation(style, id, direction) {
	// set style, id, iterator
	canvasButtons.settings.style = style;
	canvasButtons.settings.id = id;
	canvasButtons.settings.i = 0;
	canvasButtons.RGB = [];
	
	if (direction == "normal") {
		canvasButtons.RGB = canvasButtons.colorSequences[style];
	}
	else {
		// reverse array
		canvasButtons.RGB = canvasButtons.colorSequences[style].reverse();
	}
	
	// run animation
	doCircleAnimation();
}
function doCircleAnimation() {
		if (canvasButtons.settings.i < canvasButtons.settings.steps) {
			drawCircle(
				canvasButtons.RGB[canvasButtons.settings.i],
				canvasButtons.settings.id
			);
			canvasButtons.settings.i++;
			setTimeout("doCircleAnimation()", 5);
		}
		else {
			canvasButtons.settings.i = 0;
			canvasButtons.settings.id = "";
			canvasButtons.settings.style = "";
			canvasButtons.RGB = [];
		}
}
function makeIntStates(color1, color2) {
	var RGB = [];
	for (i=0;i<3;i++) {
		var difference = color1[i] - color2[i];		
		var interval = difference / (canvasButtons.settings.steps - 1);
		var single_color_values = [];
		for (j=0;j<canvasButtons.settings.steps;j++) {
			single_color_values[j] = Math.floor(color1[i]-(j*interval));			
		}
		RGB[i] = single_color_values;
	}
	// merge arrays
	var shades = [];
	for (i=0;i<20;i++) {
		shades[i] = [RGB[0][i], RGB[1][i], RGB[2][i]];
	}
	return shades;
}
function drawCircle(color, id) {
	var canvas = document.getElementById(id);
	if (canvas) {
		if (canvas.getContext) {
			var ctx = canvas.getContext('2d');	
			ctx.clearRect(0,0,52,52);
			ctx.beginPath();
			ctx.arc(26,26,26,0,Math.PI*2,true); // outer circle
			ctx.fillStyle = "rgb(" + color[0] + "," + color[1] + ", " + color[2] + ")";
			ctx.fill();
		}
	}
}
/***********************************************************************************/


// HELPER
Array.prototype.clone = function(){
	return Array.apply(null,this)
};
Array.prototype.sortIt    = Array.prototype.sort;
Array.prototype.reverseIt = Array.prototype.reverse;
Array.prototype.sort = function(){
	var tmp = this.clone();
	return tmp.sortIt.apply(tmp,arguments)
}
Array.prototype.reverse = function(){
	var tmp = this.clone();
	return tmp.reverseIt.apply(tmp,arguments)
}


function exists(el) {
	if (el.length > 0) {
		return true;
	}
	else {
		return false;
	}
}