#NoEnv
SetBatchLines, -1
CoordMode, Mouse, Screen

; Include the Neutron library
#Include ../Neutron.ahk

html =
( ; html
	<h1>Welcome to Neutron!</h1>

	<h2>Example Button</h2>
	<button onclick="ahk.Clicked(event)">Click Me!</button> 
	<button onclick="ahk.Clicked(event)">Click Me!</button> 
    <button onclick="ahk.Clicked(event)">Click Me!</button>
    <button onclick="ahk.Clicked(event)">Click Me!</button>

	<h2>Example Form</h2>
	<form onsubmit="ahk.Submitted(event)">
		<label for="firstName">First Name:</label>
		<input type="text" id="firstName" placeholder="John" required>
		<br>
		<label for="lastName">Last Name:</label>
		<input type="text" id="lastName" placeholder="Smith" required>
		<br>
		<button type="submit">Click Me!</button>
	</form>
)

css =
( ; css
	/* Make the title bar dark with light text */
	header {
		background: #333333;
		color: white;
	}

	/* Make the content area dark with light text */
	body {
		background: #444;
		color: white;
	}

	/* Make input boxes follow the dark theme */
	input {
		margin: 1.25em;
		padding: 0.5em;
		border: none;
		background: #333;
		color: white;
		border-radius: 0.25em;
	}
	:-ms-input-placeholder {
		color: silver;
	}
	button {
         width: 116px;
         height: 41px;
		 background: url(../button/normal.png);
		 border: none;
      }
      button:hover {
         width: 116px;
         height: 41px;
		 background: url(../button/hover.png);
		 border: none;
      }
      .clicked {
         background: url("../button/selected.png");
		 border: none;
      }

js =
( ; js
	// Write some JavaScript here
)

title = Neutron Template Example
neutron := new NeutronWindow(html, css, js, title)

neutron.Gui("+LabelNeutron")

neutron.Show("w640 h480")

SetTimer, DynamicContent, 100
return

NeutronClose:
ExitApp
return


Clicked(neutron, event)
{
	MsgBox, % "You clicked: " event.target.innerText
}

Submitted(neutron, event)
{
	event.preventDefault()
	
	neutron.hide()
	
	formData := neutron.GetFormData(event.target)
	MsgBox, % "Hello " formData.firstName " " formData.lastName "!"
	
	; Re-show the GUI
	neutron.Show()
}

DynamicContent()
{
	global neutron
	
	MouseGetPos, x, y
	
	neutron.doc.getElementById("ahk_x").innerText := x
	neutron.doc.getElementById("ahk_y").innerText := y
}