 		window.select_facet($("li.vis_button").first())
 	else if vis_type == "winning_facet"
 		window.select_facet($("li.vis_button").last())
+
+window.drawChart = (dataArray,chartColors) ->
+	data = google.visualization.arrayToDataTable(dataArray);
+	options = {
+		legend: {'position':'bottom'}
+		chartArea:{left:0,top:0,width:"99%",height:"50%"}
+		colors: chartColors
+	};
+	window.chart.draw(data, options);

		#g = frequencies[1][i]
		#b = frequencies[2][i]

		$(word).mouseenter( () ->
			current_word = this.textContent 
			$("span.current-word").text(this.textContent)
			$(this).css("text-decoration","underline")

			dataArray = [['Facet', 'Highlights']]
			for facet_num in all_facet_nums
				console.log(facet_num, frequencies[facet_num][i])
				dataArray.push([window.all_facet_names[facet_num], frequencies[facet_num][i]])

			chartColors = [];
			for facetColor in window.all_colors
				chartColors.push($('.'+facetColor+'-vis').css('color'))
		
			data = google.visualization.arrayToDataTable(dataArray);
			options = {
        legend: {'position':'bottom'}
        chartArea:{left:0,top:0,width:"99%",height:"50%"}
        colors: chartColors
      };
			chart.draw(data, options);
		)
		$(word).mouseout( () ->
			$(this).css("text-decoration","none")
		)
	)


# This function selects a facet, gives the box a border, and highlights text
window.select_facet = (facet) ->

	$("span.vis_selection").click ->
		window.select_vis($(this))

	window.chart = new google.visualization.PieChart(document.getElementById('chart_div'));

	#default empty chart for page load
	dataArray = [['Facet', 'Highlights'],['Click a word to see highlight data.',1]]
	chartColors = ["lightgrey"]
	window.drawChart(dataArray,chartColors)


	# moseover shows highlight data
	words = $("span.word")	
