function badge_code_init() {
	$("#badgecodeform").find(":input").bind("change keyup", function() { //add action listeners to form elements
		update_badge();
		if ($("[name=badgecolorscheme]").val() == "custom") {
			$("#badgecustomcolors").show(500);
		}
		else {
			$("#badgecustomcolors").hide(500);
		}
	});
	$(".customcolor").wheelColorPicker({dir:'/js/jq_wheelcolorpicker/'});
	$("#jQWheelColorPickerDlgWheel, #jQWheelColorPickerDlgSlider").live("mouseup", function() {
		update_badge();
	});
	update_badge(); //draw the badge to start
}

function update_badge() {
	color = $("[name=badgecolorscheme]").val();
	type = $("[name=badgecodetype]:checked").val();
	user = $(".username").html();
	switch (color) {
		case "standard":
			bc = "fff"; tc = "000"; hc = "00f";
			break;
		case "dark":
			bc = "000"; tc = "fff"; hc = "66f";
			break;
		case "ocean":
			bc = "036"; tc = "fff"; hc = "ace";
			break;
		case "inferno":
			bc = "f80"; tc = "000"; hc = "f00";
			break;
		case "monochrome":
			bc = "fff"; tc = "000"; hc = "666";
			break;
		case "custom":
			bc = $("[name=customcolorbc]").val(); tc = $("[name=customcolortc]").val(); hc = $("[name=customcolorhc]").val();
			break;
	}
	$("#badgepreview").html("<img src='/images/badge.php?u="+user+"&bc="+bc+"&tc="+tc+"&hc="+hc+"' alt='Badge Preview' />");
	if (type != null) {
		if (type == "html") {
			$("[name=badgecode]").val("<a href = 'http://obscurometer.com/user/"+user+"?s=badge' target='_blank'><img src='http://obscurometer.com/images/badge.php?u="+user+"&bc="+bc+"&tc="+tc+"&hc="+hc+"' alt='Check out my musical obscurity rating on The Obscurometer.com!' /></a>");
		}
		else if (type == "bbcode") {
			$("[name=badgecode]").val("[url=http://obscurometer.com/user/"+user+"?s=badge][img]http://obscurometer.com/images/badge.php?u="+user+"&bc="+bc+"&tc="+tc+"&hc="+hc+"[/img][/url]");
		}
	}
}

function histogram_init() {
	$(".histogram").each(function() {
		data = $.parseJSON(unescape($(this).attr("data"))); //turn data string (which was json encoded php array) into a js object
		baseimg = "<img src='/images/quickhistogramlog.php?"+$.param(data)+"&width="+$(this).css("width")+"&height="+$(this).css("height");
		linearimg = baseimg+"&scale=linear' class='linear_histogram' />";
		logimg = baseimg+"&scale=log' class='log_histogram' />";
		$(this).append(linearimg+"\n"+logimg); //create two histograms, one for each scale
		$(this).append("<div class='histogram_button_holder'></div>"); //make container for the buttons
		$(this).children(".histogram_button_holder").each(function() { //in this histogram's button holder...
			$(this).append("<div class='histogram_button' value='linear'>Linear</div>"); //make a linear button
			$(this).append("<div class='histogram_button' value='log'>Log</div>"); //and a log button
			$(this).children().each(function() { //for each of the buttons...
				$(this).bind("click", function() { //add a click listener
					histogram_switch($(this).attr("value"), $(this).parent());
				});
			});
			histogram_switch(data["default_scale"], $(this)); //set to display the default one
		});
	});
}

function histogram_switch(newscale, button_holder) {
	$(button_holder).parent().children("img").each(function() { //and for each image in the histogram...
		if (!$(this).hasClass(newscale+"_histogram")) { //hides the non-selected ones
			$(this).css("display", "none");
		}
		else { //and shows the selected one
			$(this).css("display", "inline");
		}
	});
	$(button_holder).children().each(function() { //and for each button in the button holder...
		if ($(this).attr("value") != newscale) { //set to non-selected style
			$(this).attr("selected", null);
		}
		else { //set to selected style
			$(this).attr("selected", "selected");
		}
	});
}

function html_encode(value){
    if (value) {
        return $('<div />').text(value).html();
    } else {
        return '';
    }
}