function getId() {
	return document.getElementById("style-id").innerHTML;
}
function toggleCode() {
	var showButton = document.getElementById("show-button");
	if (showButton.innerHTML == "Show code") {
		loadCode();
		document.getElementById("view-code").style.display = "block";
		showButton.innerHTML = "Hide code";
	} else {
		document.getElementById("view-code").style.display = "none";
		showButton.innerHTML = "Show code";
	}
}
function initShowCode() {
	var showButton = document.getElementById("show-button");
	addEvent(showButton, "click", toggleCode);
	showButton.style.display = "inline";

}
function initEditCode() {
	var controlPanel = document.getElementById("control-panel");
	var userIdStart = document.cookie.indexOf("user_id");
	if (userIdStart > -1) {
		var userId = document.cookie.substring(userIdStart + 8, document.cookie.indexOf(";", userIdStart));
		var styleUserId = document.getElementById("user-id").innerHTML;
		if (userId == styleUserId) {
			controlPanel.style.display = "block";
		}
	}
}
function init() {
	initInstall();
	initShowCode();
	initEditCode();
}

if (window.addEventListener)
	window.addEventListener("DOMContentLoaded", init, false);
else
	window.onload = init;

function loadCode(callback) {
	var codeElement = document.getElementById('stylish-code');
	var text;
	if ("textContent" in codeElement)
		text = codeElement.textContent;
	else
		text = codeElement.innerText;
	if (text.length > 0) {
		if (callback) {
			callback();
		}
		return;
	}
	var xhr = new XMLHttpRequest();
	xhr.open('GET', '/styles/' + getId() + '.css', true);
	xhr.onreadystatechange = function(event) {
		if (xhr.readyState == 4) {
			if (xhr.status == 200) {
				if ("textContent" in codeElement)
					codeElement.textContent = xhr.responseText;
				else
					codeElement.innerText = xhr.responseText;
				if (callback)
					callback();
			} else {
				alert('Sorry, an error occurred loading the code.');
			}
			document.body.style.cursor = "";
		}
	}
	document.body.style.cursor = "wait";
	xhr.send(null);
}

//we fire these to tell stylish what to do
function stylishInstall(event) {
	loadCode(stylishInstall2);
}
function stylishInstall2() {
	fireCustomEvent("stylishInstall");
}
function stylishInstallIE(event) {
	fireCustomEvent("stylishInstall");
}
function stylishInstallChrome(event) {
	fireCustomEvent("stylishInstallChrome");
}
function stylishUpdate() {
	loadCode(stylishUpdate2);
}
function stylishUpdate2() {
	var stylishEvent = document.createEvent("Events");
	stylishEvent.initEvent("stylishUpdate", false, false, window, null);
	document.dispatchEvent(stylishEvent);
}

function fireCustomEvent(name) {
	if (document.createEvent) {
		var stylishEvent = document.createEvent("Events");
		stylishEvent.initEvent(name, false, false, window, null);
		document.dispatchEvent(stylishEvent);
	} else {
		var communicationElement = document.getElementById("stylish-event-element");
		communicationElement.setAttribute("stylish-data", name);
		communicationElement.click();
	}
};

var currentPanel = "style-install-unknown";
function switchToPanel(panelId) {
	document.getElementById(currentPanel).style.display = "none";
	document.getElementById(panelId).style.display = "";
	currentPanel = panelId;
}

function switchBrowserValue(value) {
	var select = document.getElementById("switch-browser");
	var options = select.getElementsByTagName("option");
	for (var i = 0; i < options.length; i++) {
		if (options[i].value == value) {
			options[i].selected = true;
			return;
		}
	}
}

function hideBrowserSwitcher() {
	document.getElementById("switch-browser").style.display = "none";
}

//stylish will fire this after the user installs or updates
function styleInstalled() {
	if (BrowserDetect.browser == "Explorer") 
		switchToPanel("stylish-installed-style-installed-ie");
	else
		switchToPanel("stylish-installed-style-installed");
	hideBrowserSwitcher();
}
function styleInstalledChrome() {
	switchToPanel("stylish-installed-style-installed-chrome");
	hideBrowserSwitcher();
}

//stylish will fire these on load
function styleCanBeInstalled(event) {
	if (!event && BrowserDetect.browser == "Explorer")
		switchToPanel("stylish-installed-style-not-installed-ie");
	else {
		switchToPanel("stylish-installed-style-not-installed");
	}
	hideBrowserSwitcher();
}
function styleCanBeInstalledChrome(event) {
	switchToPanel("stylish-installed-style-not-installed-chrome");
	hideBrowserSwitcher();
}
function styleAlreadyInstalled() {
	styleInstalled();
}
function styleAlreadyInstalledChrome() {
	styleInstalledChrome();
}
function styleCanBeUpdated() {
	switchToPanel("stylish-installed-style-needs-update");
	hideBrowserSwitcher();
}

//fires on page load
function initInstall() {
	// make sure Stylish didn't already change this
	if (currentPanel != "style-install-unknown") {
		return;
	}
	document.getElementById("switch-browser").style.display = "";
	switch (BrowserDetect.browser) {
		case "Chrome":
			switchToPanel("style-install-chrome");
			switchBrowserValue("chrome");
			break;
		case "Opera":
			switchToPanel("style-install-opera");
			switchBrowserValue("opera");
			break;
		case "Explorer":
			switchToPanel("style-install-ie");
			switchBrowserValue("ie");
			break;
		case "Firefox":
		case "Netscape":
		case "Mozilla":
			switchToPanel("style-install-mozilla-no-stylish");
			switchBrowserValue("mozilla");
			break;
		default:
			switchBrowserValue("other");
	}
}

function addCustomEventListener(name, f) {
	if (document.addEventListener) {
		document.addEventListener(name, f, false);
	} 
	else {
		if (listenerMappings == null) {
			// The right way to do it, but it doesn't work... It will just call this directly
			//document.getElementById("stylish-event-element").attachEvent("onclick", handleCustomEvent);
			listenerMappings = {};
		}
		listenerMappings[name] = f;
	}
}

var listenerMappings = null;
function handleCustomEvent() {
	var communicationElement = document.getElementById("stylish-event-element");
	var f = listenerMappings[communicationElement.getAttribute("stylish-data")];
	if (f)
		f();
}

function addEvent(element, name, f) {
	if (element.addEventListener) {
		element.addEventListener(name, f, false);
	} else {
		element.attachEvent("on" + name, f);
	}
}

addCustomEventListener("styleInstalled", styleInstalled);
addCustomEventListener("styleInstalledChrome", styleInstalledChrome);
addCustomEventListener("styleAlreadyInstalled", styleAlreadyInstalled);
addCustomEventListener("styleAlreadyInstalledChrome", styleAlreadyInstalledChrome);
addCustomEventListener("styleCanBeInstalled", styleCanBeInstalled);
addCustomEventListener("styleCanBeInstalledChrome", styleCanBeInstalledChrome);
addCustomEventListener("styleCanBeUpdated", styleCanBeUpdated);
addCustomEventListener("styleLoadCode", function(){loadCode(codeLoaded)});

function codeLoaded() {
	var stylishEvent = document.createEvent("Events");
	stylishEvent.initEvent("stylishCodeLoaded", false, false, window, null);
	document.dispatchEvent(stylishEvent);
}

function switchBrowser(select) {
	switch (select.value) {
		case "ie":
			switchToPanel("style-install-ie");
			break;
		case "mozilla":
			switchToPanel("style-install-mozilla-no-stylish");
			break;
		case "opera":
			switchToPanel("style-install-opera");
			break;
		case "chrome":
			switchToPanel("style-install-chrome");
			break;
		case "other":
			switchToPanel("style-install-unknown");
			break;
	}
}