function init() {
	addStyles();
	addHelpEvents();
}

function addStyles() {
	var dataTable = document.getElementById("namevaluepairs");
	if (dataTable != null) {
		var showMoveAll = false;
		var rows = dataTable.getElementsByTagName("tr");
		for (i=0; i<rows.length; i++) {
			var row = rows.item(i);
			var imgs = row.getElementsByTagName("img");
	
			var rowHeight = 0;
			for (j=0; j<imgs.length; j++) {
				var img = imgs.item(j);
				var imgWidth = (img.getAttribute("width") * 1) + 4;
				var imgHeight = img.getAttribute("height");
				
				if (imgHeight > rowHeight) {
					rowHeight = imgHeight;
				}
				
				showMoveAll = true;
				updateDivTitle(img.parentNode, j);
				if ( imgHeight <= 49 || imgWidth < 200 ) {
					img.parentNode.setAttribute("style", "height: " + imgHeight + "px; width: " + imgWidth + "px;");
				} else if ( imgWidth > 200 ) {
					img.parentNode.setAttribute("style", "position: static;");
					img.setAttribute("style", "position: static; width: 200px;");
				}
			}
			
			if (rowHeight <= 49) {
				row.setAttribute("style", "height: " + rowHeight + "px;");
			}
		}
		
		if (showMoveAll) {
			var moveAll = document.getElementById("moveAllAnchor");
			if (moveAll != null) {
				moveAll.setAttribute("style", "visibility: visible");
			}
		}
	}
}

function updateDivTitle(div, index) {
	if (index == 0) {
		div.setAttribute("title", "Click to insert the active clipboard image (or copy if clipboard is empty)");
	} else if (index == 1) {
		div.setAttribute("title", "Click to copy this image to the Skin Editor clipboard");
	}
}

function view(key, section) {
	var imgs = key.parentNode.getElementsByTagName("img");
	if (imgs != null && imgs.length > 0) {
		var url = "imageview.php?key=" + key.innerHTML + "&section=" + section;
		var s = "height=" + window.innerHeight / 2 + ", width=" + window.innerWidth / 2;
		window.open(url, "imageviewer", "toolbar=yes, location=yes, menubar=yes, scrollbars=yes, " + s);
	}
}

function addHelpEvents() {
	var allNodes = document.getElementsByTagName("*");
	for (i=0; i<allNodes.length; i++) {
		var node = allNodes.item(i);

		if (node.getAttribute("title") != null && node.getAttribute("title") != "") {
			node.setAttribute("onmouseover", "showHelpText(this)");
			node.setAttribute("onmouseout", "clearHelpText()");
		}
	}
	
	if (!document.cookie) {
		var footer = document.getElementById("footer");
		footer.innerHTML = "Cookies must be enabled to use the skin editor";
	}
}

function showHelpText(currElement) {
	var helpTextContainer = document.getElementById("helptext");
	helpTextContainer.innerHTML = currElement.getAttribute("title");
}

function toggleValueInputs() {
	var parentTable = document.getElementById("namevaluepairs");
	var inputs = parentTable.getElementsByTagName("input");
	for (i=0; i<inputs.length; i++) {
		currInput = inputs[i];
		if (currInput.getAttribute("type") == "text") {
			currInput.setAttribute("type", "hidden");
		} else if (currInput.getAttribute("type") == "hidden" && currInput.getAttribute("name") != "pageNumber") {
			currInput.setAttribute("type", "text");
		}
	}
}

function updateColor(input) {
	var target = document.getElementById(input.getAttribute("id") + "ColorDisplay");
	if (target != null) {
		var newStyle = "background: " + input.getAttribute("value");
		target.setAttribute("style", newStyle);
		target.setAttribute("title", "That's right, it's the color '" + input.getAttribute("value") + "'");
	}
}

function clearHelpText() {
	var helpTextContainer = document.getElementById("helptext");
	var randNumber = Math.round(Math.random() * 10);
	var tips = new Array(10);
	tips[0] = "Remember, help is always near...";
	tips[1] = "Almost all images (back, home, etc) are found in the 'Images' section";
	tips[2] = "Remember to save before changing section if you want to keep your changes";
	tips[3] = "This is an online skin editor for the Opera browser";
	tips[4] = "The skin editor only works with Opera versions 7.X";
	tips[5] = "You can hover almost everything to get a short description right here";
	tips[6] = "Push F11 for that groovy local application feeling :)";
	tips[7] = "You can customize the Skin Editor GUI if you click on the [?]";
	tips[8] = "Missing your favorite skin? Then please let me know...";
	tips[9] = "Please report any problems you encounter using this skin editor";
	tips[10] = "This is the end. My only friend, the end - Jim Morrison";
	
	helpTextContainer.innerHTML = tips[randNumber];
}

function cpy(element) {
	if (element.hasChildNodes && element.lastChild != null) {
		var img = element.lastChild;
		var clipboard = document.getElementById("clipboard");
		
		if (clipboard.childNodes.length < 20) {
			var clips = clipboard.getElementsByTagName("img");
			for (i=0; i<clips.length; i++) {
				tmpImg = clips[i];
				tmpImg.setAttribute("class", "inactive");
				tmpImg.setAttribute("title", "Doubleclick to remove this image. Click to make active");
			}
			
			var cookieObj = new CookieObject("clipboard_images", 7);
			var cookieActiveImg = new CookieObject("active_clipboard_img", 7);
			
			img2 = img.cloneNode(true);
			img2.setAttribute("class", "active");
			img2.setAttribute("onclick", "foc(this);");
			img2.setAttribute("ondblclick", "del(this);");
			img2.setAttribute("title", "Doubleclick to remove this (active) image");
			img2.setAttribute("onmouseover", "showHelpText(this)");
			img2.setAttribute("onmouseout", "clearHelpText()");
			img2.removeAttribute("style");
			cookieActiveImg.setValue("ActiveImg", img2.getAttribute("src"));
			
			clipboard.appendChild(img2);
			clipboard.setAttribute("class", "shown");
			cookieObj.addValue(img2.getAttribute("src"));
		}
	}
}

function ins(element) {
	var clipboard = document.getElementById("clipboard");
	if (clipboard.hasChildNodes && clipboard.lastChild != null) {
		var img = element.lastChild;
		var newImg;
		var clips = clipboard.getElementsByTagName("img");
		for (i=0; i<clips.length; i++) {
			var tmpImg = clips[i];
			if (tmpImg.getAttribute("class") == "active") {
				newImg = tmpImg;
				break;
			}
		}
		
		if (newImg == null) {
			newImg = clipboard.lastChild;
		}
		
		var formId = img.getAttribute("id").replace("_Image","");
		var form = document.getElementById(formId);
		var move = document.getElementById(formId + "_Move");
		
		var newImgSrc = newImg.getAttribute("src"); // Opera 7.23 and Mozilla 1.6 returns different strings!
		var newImgSrcArr = newImgSrc.split("?");
		
		var tmpRootPath = document.URL.split("?");
		var rootPath = tmpRootPath[0];
		rootPath = rootPath.replace("index.php", "");
		
		newImgSrcArr[0] = newImgSrcArr[0].replace(rootPath, "");
		newImgSrcArr[0] = newImgSrcArr[0].replace("skins/7.2X/", "");
		
		if (form != null) {
			if (newImgSrcArr.length > 1) {
				form.setAttribute("value", unescape(newImgSrcArr[0]) + unescape(newImgSrcArr[1]));
			} else {
				if (form.getAttribute("type") == "hidden") {
					form.setAttribute("type", "text");
					form.setAttribute("value", unescape(newImgSrcArr[0]));
					form.setAttribute("type", "hidden");
				} else {
					form.setAttribute("value", unescape(newImgSrcArr[0]));
				}
			}
		}

		if (move != null) {
			move.setAttribute("href", updParam(formId, 1, unescape(newImgSrcArr[0])));
			if (newImgSrcArr.length > 1) {
				move.setAttribute("href", updParam(formId, 3, unescape(newImgSrcArr[1])));
			}
		}
		
		img.setAttribute("src", newImgSrc);
		
		if (!event.shiftKey) {
			clipboard.removeChild(newImg);
			var cookieObj = new CookieObject("clipboard_images", 7);
			cookieObj.removeValue(newImgSrc);
		}
		
		img.setAttribute("style", "");
		var imgWidth = (img.getAttribute("width") * 1) + 4;
		var imgHeight = img.getAttribute("height");
		
		if ( imgHeight <= 49 || imgWidth < 200 ) {
			img.parentNode.setAttribute("style", "height: " + imgHeight + "px; width: " + imgWidth + "px;");
		} else if ( imgWidth > 200 ) {
			img.parentNode.setAttribute("style", "position: static;");
			img.setAttribute("style", "position: static; width: 200px;");
		}
		highlightSave();
		
		if (!clipboard.hasChildNodes || clipboard.lastChild == null) {
			clipboard.setAttribute("class", "hidden");
		} else {
			clipboard.lastChild.setAttribute("class", "active");
		}
	} else {
		cpy(element);
	}
}

function del(element) {
	var cookieObj = new CookieObject("clipboard_images", 7);
	cookieObj.removeValue(element.getAttribute("src"));
	element.parentNode.removeChild(element);
	var clipboard = document.getElementById("clipboard");
	
	if (!clipboard.hasChildNodes || clipboard.lastChild == null) {
		clipboard.setAttribute("class", "hidden");
	} else {
		clipboard.lastChild.setAttribute("class", "active");
		clipboard.lastChild.setAttribute("title", "Doubleclick to remove this (active) image");
	}
}

function foc(element) {
	var clipboard = document.getElementById("clipboard");
	var clips = clipboard.getElementsByTagName("img");
	
	for (i=0; i<clips.length; i++) {
		tmpImg = clips[i];
		tmpImg.setAttribute("class", "inactive");
		tmpImg.setAttribute("title", "Doubleclick to remove this image. Click to make active");
	}
	
	var cookieActiveImg = new CookieObject("active_clipboard_img", 7);
	cookieActiveImg.setValue("ActiveImg", element.getAttribute("src"));
	element.setAttribute("class", "active");
	element.setAttribute("title", "Doubleclick to remove this (active) image");
}

function submitSelectChanged(formId) {
	var changedForm = document.getElementById(formId);
	changedForm.submit();
}

function promptForKey(input) {
	var name = prompt("Enter name of key to add", "");
	if (name != null && name != "")
	{
		var addkeyanchor = document.getElementById("addkeyanchor");
		addkeyanchor.setAttribute("href", addkeyanchor.getAttribute("href") + "&addkey=" + name);
	}
	
}

function promptForSection() {
	var name = prompt("Enter name of section to add", "");
	if (name != null && name != "")
	{
		var addsectionanchor = document.getElementById("addsectionanchor");
		addsectionanchor.setAttribute("href", addsectionanchor.getAttribute("href") + "&addsection=" + name);
	}
}

function promptForNewName(oldSectionName) {
	var name = prompt("Enter the new name of this section", oldSectionName);
	if (name != null && name != "")
	{
		var rensectionanchor = document.getElementById("rensectionanchor");
		var hrefOld = rensectionanchor.getAttribute("href");
		rensectionanchor.setAttribute("href", hrefOld + "&amp;newsectionname=" + name);
	}
}

function moveImg(formId, formValue, formValue2, pathrest, pathrest2) {
	var image  = document.getElementById(formId + "_Image");
	var image2 = document.getElementById(formId + "_Image2");
	
	if (image != null && image2 != null) {
		var form = document.getElementById(formId);
		var move = document.getElementById(formId + "_Move");
		var oldSrc = image.getAttribute("src");
		var newSrc = image2.getAttribute("src");
		
		if (move.innerHTML == "&lt;&lt;") {
			move.innerHTML = "&gt;&gt;";
			if (oldSrc != newSrc) {
				form.setAttribute("value", formValue2 + pathrest2);
			}
		} else {
			move.innerHTML = "&lt;&lt;";
			if (oldSrc != newSrc) {
				form.setAttribute("value", formValue + pathrest);
			}
		}
		
		image.setAttribute("src", newSrc);
		image2.setAttribute("src", oldSrc);
		highlightSave();
	} else if (image2 != null) {
		var form = document.getElementById(formId);
		var move = document.getElementById(formId + "_Move");
		var imageDiv = document.getElementById(formId + "_Image_Empty");
		
		move.innerHTML = "&gt;&gt;";
		form.setAttribute("value", formValue2 + pathrest2);
		
		var newImg = document.createElement("img");
		newImg.setAttribute("src", image2.getAttribute("src"));
		newImg.setAttribute("id", imageDiv.getAttribute("id").replace("_Empty", ""));
		newImg.setAttribute("alt", "");
		imageDiv.appendChild(newImg);
		imageDiv.removeAttribute("id");
		
		highlightSave();
	}
}

function moveAllImages() {
	var mainpanel = document.getElementById("mainpanel");
	mainpanel.setAttribute("class", "buzzy");
	
	var valuekeytable = document.getElementById("namevaluepairs");
	var moveAnchors = valuekeytable.getElementsByTagName("a");
	var moveAll = document.getElementById("moveAllAnchor");
	
	if (moveAll.innerHTML == "&lt;&lt;") {
		moveAll.innerHTML = "&gt;&gt;";
	} else {
		moveAll.innerHTML = "&lt;&lt;";
	}

	for (i=0; i<moveAnchors.length; i++) {
		var id = moveAnchors[i].getAttribute("id");
		
		if (id != null && id.search("_Move$")) {
			var href = moveAnchors.item(i).getAttribute("href");
			
			href = href.replace("javascript:moveImg('","");
			href = href.replace("');","");
			href = unescape(href);
			
			arr = href.split("','");
			moveImg(arr[0],arr[1],arr[2],arr[3],arr[4]);
		}
	}
	
	mainpanel.setAttribute("class", "");
}

function highlightSave() {
	var save = document.getElementById("SaveSkin");
	if (save.getAttribute("class") == "button") {
		save.setAttribute("class", "button highlighted");
		save.setAttribute("title", "Remember to save before changing section or downloading if you want to keep your changes");
	}
}

function sParam(formId, paramNumber) {
	var move = document.getElementById(formId + "_Move");
	if (move == null) { return ""; }
	var href = move.getAttribute("href");
	
	href = href.replace("javascript:moveImg('","");
	href = href.replace("');","");
	href = unescape(href);

	arr = href.split("','");
	return arr[paramNumber];
}

function updParam(formId, paramNumber, newValue) {
	var move = document.getElementById(formId + "_Move");
	if (move == null) { return ""; }

	return move.getAttribute("href").replace(sParam(formId, paramNumber), newValue);
}