var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var self = require("sdk/self").data;
var pageMod = require("sdk/page-mod");
var state = false;

var button = ToggleButton({
	id: "my-button",
	label: "mirror",
	icon: {
		"16": "./icon-16.png",
		"32": "./icon-32.png",
		"64": "./icon-64.png"
	},
	onChange: handleChange
});

var panel = panels.Panel({
	width: 500,
	height: 180,
	contentURL: self.url("panel.html"),
	contentScriptFile: self.url("onoff.js"),
	onHide: handleHide
});

function handleChange(state) {
	if (state.checked) {
		panel.show({
			position: button
		});
	}
}

function handleHide() {
	button.state('window', {checked: false});
}

panel.port.on("lrmirror", function (text) {
	if(text == "on"){
		state = true;
		pageMod.PageMod({
			include: "*",
			attachTo: ["existing", "top"],
			contentScript: 'document.getElementsByTagName("body")[0].style = "transform: rotateY(180deg)"'
		});
	} else if (text == "off"){
		state == false;
		pageMod.PageMod({
			include: "*",
			attachTo: ["existing", "top"],
			contentScript: 'document.getElementsByTagName("body")[0].style = "transform: rotateY(0deg)"'
		});
	}
});

panel.port.on("udmirror", function (text) {
	if(text == "on"){
		state = true;
		pageMod.PageMod({
			include: "*",
			attachTo: ["existing", "top"],
			contentScript: 'document.getElementsByTagName("body")[0].style = "transform: rotateX(180deg)"'
		});
	} else if (text == "off"){
		state == false;
		pageMod.PageMod({
			include: "*",
			attachTo: ["existing", "top"],
			contentScript: 'document.getElementsByTagName("body")[0].style = "transform: rotateX(0deg)"'
		});
	}
});