// Keep track of which classes we have highlighted
highlighted_classes=[];

// Highlight all the elements with the given class.  Skips the button class.
function highlight(classes) {
	$(classes).each(function(index, value) {
			if (value != 'button') {
				$('.'+value+"[data-highlighted!='1']").animate({backgroundColor: '#8F8'}, {duration: 400, queue: false});
			}
	})
};

// Stops highlight animation all the elements with the given class.  Reverts to regular color.  Skips the button class.
function unhighlight(classes) {
	$(classes).each(function(index, value) {
			$('.'+value+"[data-highlighted!='1']").stop(true).animate({backgroundColor: 'white'}, 400);
	})
};

function identical_arrays(a, b) {
	if (a.length != b.length) {
		return false;
	}
	for (i = 0; i < a.length; i++) {
		if (a.indexOf(b[i]) < 0) {
			return false;
		}
	}
	return true;
};

// Stops highlight animation all the elements with the given class.  Reverts to regular color.  Skips the button class.
function toggle_highlight(classes) {
	$("[data-highlighted='1']").attr('data-highlighted', 0);
	if ((highlighted_classes.length > 0) && (identical_arrays(highlighted_classes, classes) == true)) {
		highlighted_classes = [];
		return highlight(classes);
	} else {
		//$("[data-highlighted='1']").css('backgroundColor', 'white');
		unhighlight(highlighted_classes);
	}
	highlighted_classes = classes.slice(0);
	$(highlighted_classes).each(function(index, value) {
			if (value != 'button') {
				$('.'+value).stop(true).css('backgroundColor', '#0F0');
				$('.'+value).attr('data-highlighted', 1);
			}
	})
};

// Once the document is loaded
$(document).ready(function() {
		// add highlight event to mouseovers for button class objects
		$(".button").mouseover(function() {
				highlight($(this).attr('class').split(' '));
		});
		
		// add unhighlight event to mouseovers for button class objects
		$(".button").mouseout(function() {
				unhighlight($(this).attr('class').split(' '));
		});
		
		// add click event so that the user can select a particular item
		$(".button").click(function() {
				toggle_highlight($(this).attr('class').split(' '));
		});
		
		$(".skills, .accomplishments").mouseover(function() {
				$("#highlight_instructions").removeClass("hidden_instructions").addClass("displayed_instructions");
		});
		$(".skills, .accomplishments").mouseout(function() {
				$("#highlight_instructions").removeClass("displayed_instructions").addClass("hidden_instructions");
		});
});