proc/show_HTML(var/mob/user)
		if(stat & (NOPOWER|BROKEN))
			return
		user.machine = src
		var/HTML = {"<style type="text/css">
		.tiptop {
			position: absolute;
			z-index: 9999;
			max-width: 300px;
			padding: 5px;
			font: 12px/1.4em "Helvetica Neue", Helvetica, Arial, sans-serif;
			color: #fff;
			background: #222;
			border: 2px solid #379abe
		}

		::-ms-clear {
			display: none;
		}

		input:focus {
			outline: none;
			border-bottom: 1px solid #379abe;
		}

		.input {
			background: none;
			width: 100%;
			text-align: center;
			padding: 7px 0 7px 0;
			font-size: 16px;
			font-weight: bold;
			border: none;
			display: inline-block;
			color: #ffffff;
			border-bottom: 1px solid transparent;
		}

		.coord {
			width: 50%;
			display: inline-block;
		}

		.output {
			margin: 0 1px;
			background: #21272C;
		}

		.coordn {
			text-align: center;
			padding: 3px 0 0 0;
			font-size: 11px;
			font-weight: bold;
		}

		.coordn a {
			text-align: center;
			color: #ffffff;
			text-decoration: none;
			font-weight: bold;
		}

		.temp {
			font-size: 16px;
			text-align: center;
			font-weight: bold;
			padding: 5px 0 5px 0;
			border-bottom: 1px solid transparent;
		}

		.buttons {
			margin: 0 0 1px 0;
		}

		.buttons .act {
			background: #be3737;
		}

		.buttons a {
			width: 100%;
			background: #379ABE;
			text-transform: uppercase;
			padding: 4px 0 4px 5px;
			font-size: 11px;
			text-decoration: none;
			color: #ffffff;
			margin: 0;
			box-sizing: border-box;
		}

		.buttons a:hover {
			background: #6BC7E8;
		}

		.butt {
			width: 50%;
			box-sizing: border-box;
			display: inline-block;
			vertical-align: middle;
		}

		.butt span {
			background: #21272C;
			padding: 4px 0 4px 5px;
			width: 100%;
			box-sizing: border-box;
			display: inline-block;
		}

		.label,
		tr td,
		tr th {
			padding: 3px;
			margin: 0 0 1px 0;
			font-size: 11px;
		}

		.label {
			background: #21272C;
		}

		.label a,
		.head a {
			text-decoration: none;
			color: #ffffff;
		}

		.label a:hover,
		.head a:hover {
			color: #6BC7E8;
		}

		.right {
			float: right;
			font-size: 12px;
			padding: 0 0 0 5px;
			margin-right: 5px;
		}

		.buttons i,
		.head i,
		.coord i {
			padding: 0 5px 0 1px;
			width: 10px;
			text-align: center;
			display: inline-block;
		}

		.buttons,
		.label.head,
		.new {
			margin-top: 5px;
		}

		.head {
			background: #379ABE;
			font-size: 12px;
			font-weight: bold;
			border: none;
			padding: 4px 5px 4px 5px;
		}
		</style>"}

		if(!beaker)
			HTML += "<div class='head'>Please insert beaker</div>"
		else if (!beaker.reagents.total_volume)
			HTML += "<div class='head'>Beaker is empty<A class='right' href='?src=\ref[src];eject=1'><i class='icon-eject'></i>Eject beaker</A></div>"
		else
			var/datum/reagents/R = beaker:reagents
			HTML += "<div class='head'>Heating/Cooling<A class='right' href='?src=\ref[src];eject=1'><i class='icon-eject'></i>Eject beaker</A></div>"

			HTML += "<div class='coord'><div class='output'><div class='coordn'>Current Temperature</div><div class='temp'>[R.total_temperature]</div></div></div>"

			HTML += "<div class='coord'><div class='output'><div class='coordn'>Set Temperature<a class='infotip' title='Use mousewheel to change Shift+mousewheel to change by 100' href='#info'><i class='icon-info-sign'></i></a></div>"

			HTML += "<form class='container'><input type='number' class='input' min='0' max='1000' value='[target_temp]' maxlength='4'></form></div></div>"

			HTML += "<div class='buttons'><div class='butt'><span class='status'>"
			if(active)
				HTML += "Status:Active ([(target_temp > R.total_temperature) ? "Heating" : "Cooling"])</span></div><div class='butt'><A class='right activate' href='?src=\ref[src];stop=1'><i class='icon-power-off'></i>Deactivate</A></div></div><BR>"
			else
				HTML += "Status:Inactive</span></div><div class='butt'><A class='right activate' href='?src=\ref[src];start=1'><i class='icon-power-off'></i>Activate</A></div></div><BR>"

			for(var/reagent_id in R.reagent_list)
				var/datum/reagent/current_reagent = R.reagent_list[reagent_id]
				HTML += "<div class='label'>[current_reagent.name], [current_reagent.volume] Units.</div>"

		HTML += {"
<script type="text/javascript">
function add(input, change) {
	var limit = $(input).attr("max");
	var value = parseInt($(input).val())
	if (value + change <= limit) {
		return $(input).val(value + change)
	}
};
function sub(input, change) {
	var value = parseInt($(input).val())
	if (value - change >= 0) {
		return $(input).val(value - change)
	}
};
$('.input').bind('mousewheel DOMMouseScroll', function(e) {
	e.preventDefault();
	if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
		if (event.shiftKey) {
			add(this, 100);
		} else {
			add(this, 50);
		}
	} else {
		if (event.shiftKey) {
			sub(this, 100);
		} else {
			sub(this, 50);
		}
	}
});</script>"}

		//user << browse(HTML, "window=gps;size=400x540")
		user.Browse(HTML, "window=chem_heater;title=Reagent Heating/Cooling Unit;size=400x540")
		onclose(user, "chem_heater")

	attack_hand(mob/user as mob)
		if ((user.contents.Find(src) || get_dist(src, user) <= 1 && istype(src.loc, /turf)))
			src.show_HTML(user)
		else
			//user << browse(null, "window=gps")
			user.Browse(null, "window=chem_heater")
			user.machine = null
		return