(()=>{
	var root = document.body;
	
	const cdata = {
		thing: { color:"lime" },
		apioform: { color:"yellow" },
		violetstar: { color:"#8050FF" },
		undefinedium: { color:"#FF00FF" },
		four: { color:"#3040FF" },
	}
	
	let sdata;
	
	try {
		sdata = JSON.parse(localStorage.savedata);
	} catch(e) {
		sdata = {
			unlocks: {thingbutton:1},
			currencies:{thing:{amount:0,visible:true}},
		};
	}
	
	let am = sdata.currencies;
	
	for (let i in cdata){
		if (!am[i]){
			am[i]={amount:0,visible:false};
		}
	}
	
	
	var ThingButton = {
		view: ()=>{
			return m("button",{
				onclick:()=>{if (!sdata.autothing) am.thing.amount+=1}
			},sdata.autothing?get_msg('unavailable'):get_msg('attain_a_thing'));
		}
	}
	
	var AutoThing = {
		view: ()=>{
			return m("button",{onclick:()=>sdata.autothing = !sdata.autothing},[
				get_msg('autothing'),
				m("span",{
					style:"color:"+(sdata.autothing?"lime":"grey")+";"},
					sdata.autothing?get_msg('on'):get_msg('off')),
			]);
		}
	}
	let autothing_timeout = "none";
	
	setInterval(()=>{localStorage.savedata = JSON.stringify(sdata)},1000);
	
	var MainComponent = {
		view: ()=>{
			let res = [
				m("h1",{style:"text-align:center;"},"Incremental"),
				m("hr"),
				m(CBar,{data:am}),
			];
			
			if (am.thing.amount >= 50) {
				am.apioform.visible = true;
				sdata.unlocks.autothing = 1;
			}
			
			if (sdata.unlocks.thingbutton) res.push(m(ThingButton));
			if (sdata.unlocks.autothing) res.push(m(AutoThing));
			
			if (!sdata.autothing && autothing_timeout != "none"){
				clearInterval(autothing_timeout);
				autothing_timeout = "none";
			}
			
			if (sdata.autothing && autothing_timeout == "none"){
				autothing_timeout = setInterval(()=>{am.thing.amount++;m.redraw()},500);
			}
			
			return m("main",res);
		}
	}
	
	var CIcon = {
		view: vnode => {
			let a = vnode.attrs.currency || "undefinedium";
			a = "sprites/"+a+".png";
			return m("img",{title:cdata[vnode.attrs.currency].plural,src:a,width:32,height:32});
		}
	}
	
	var CDisp = {
		view: vnode => {
			let a = vnode.attrs;
			return m(".currencydisplay",[
				m(CIcon,{currency:a.currency}),
				m(".currencycount",{
					style:"color:"+cdata[a.currency].color},
					a.amount==undefined?get_msg('something_broke'):a.amount),
			]);
		}
	}
	
	var CBar = {
		view: vnode => {
			let a = vnode.attrs;
			let res = [];
			
			for (let i in a.data||{}){
				if (a.data[i].visible){
					res.push(m(CDisp,{currency:i,amount:a.data[i].amount}));
				}
			}
			
			return m(".currencybar",res);
		}
	}
	
	m.mount(root,MainComponent);
})();