var insertSelector, insertSeparador;
var sumando = false;
var dibujo, capaDibujo, tirador, postal, colores, capaTexto, _texto;
var preCargaDibujo;
var sumados = 0;
var elementoInsertado;
var soy = "";

function elementoTexto(texto, x, y, ancho, alto, z, colorFondo, colorLetras)	{
	this.elemento = "texto";
	this.texto = texto;
	this.x = x;
	this.y = y;
	this.ancho = ancho;
	this.alto = alto;
	this.z = z;
	this.colorFondo = colorFondo;
	this.colorLetras = colorLetras;
}

String.prototype.resumen = function(n)	{
	if (this.length > n)
		return this.substr(0, n) + "...";
	else
		return this;
}

elementoTexto.prototype.toString = function()	{
	return this.elemento + "::" +
		this.texto + "," +
		this.x + "," +
		this.y + "," +
		this.ancho + "," +
		this.alto + "," +
		this.z + "," +
		this.colorFondo + "," +
		this.colorLetras;
}

function elementoPostal(ancho, alto, colorFondo, sonidoFondo)	{
	this.elemento = "postal";
	this.ancho = ancho;
	this.alto = alto;
	this.colorFondo = colorFondo;
	this.sonidoFondo = sonidoFondo;
}

elementoPostal.prototype.toString = function()	{
	return this.elemento + "::" +
		this.ancho + "," +
		this.alto + "," +
		this.colorFondo + "," +
		this.sonidoFondo;
}

var laPostal = new elementoPostal(480, 360, "ffffff", "");

function elementoImagen(imagen, x, y, ancho, alto, z)	{
	this.elemento = "imagen";
	this.imagen = imagen;
	this.x = x;
	this.y = y;
	this.ancho = ancho;
	this.alto = alto;
	this.z = z;
}

elementoImagen.prototype.toString = function()	{
	return this.elemento + "::" +
		this.imagen + "," +
		this.x + "," +
		this.y + "," +
		this.ancho + "," +
		this.alto + "," +
		this.z;
}

var elementos = new Array();

function desmarcarTodo()	{
	if (soy != "")	with (soy.style)	{
		border = "0 none transparent";
		zIndex = "0";
		margin = "0";
		padding = "1px";
	}
	tirador.style.display = "none";
	soy = "";
}

function remarcar(quien)	{
	desmarcarTodo();
	soy = document.getElementById(quien);
	with (soy.style)	{
		border = "1px dashed gray";
		zIndex = "1";
		margin = "0";
		padding = "0";
	}
	with (tirador.style)	{
		top = (soy.offsetTop + soy.offsetHeight) + "px";
		left = (soy.offsetLeft + soy.offsetWidth) + "px";
		display = "block";
	}
}

function remarcarCapa(quien)	{
	remarcar("capaN" + quien.split("N")[1]);
}

function proporciones(anchoActual, altoActual, ancho, alto)	{
	var devolver = new Array(4);

	if (anchoActual > ancho)	{
		devolver["ancho"] = ancho;
		devolver["alto"] = altoActual * (ancho / anchoActual);
	}
	else	{
		devolver["ancho"] = anchoActual;
		devolver["alto"] = altoActual;
	}
	if (devolver["alto"] > alto)	{
		devolver["ancho"] = devolver["ancho"] * (alto / devolver["alto"]);
		devolver["alto"] = devolver["alto"] / ancho * devolver["ancho"];
	}
	else	{
	}
//	devolver[1] = 1;
	devolver["x"] = 0;
	devolver["y"] = 0;
	return devolver;
}

function intercambiar(a, b)	{
/*
	datos para info
*/
	var info = "Intercambiando elemento " + a + " por elemento " + b + "<br />";
	info += "elementos[" + a + "] = " + elementos[a].toString() + "<br />";
	info += "elementos[" + b + "] = " + elementos[b].toString() + "<br />";

	desmarcarTodo();
	// realizar cambios en el array elementos
	var temporal = elementos[a];
	elementos[a] = elementos[b];
	elementos[b] = temporal;
	elementos[a].z = a;
	elementos[b].z = b;

/*
	más datos
*/

	info += "Intercambiado: <br />";
	info += "elementos[" + a + "] = " + elementos[a] + "<br />";
	info += "elementos[" + b + "] = " + elementos[b] + "<br />";


//	document.getElementById("cuerpoPropiedades").innerHTML = info;



	// realizar cambios en tabla de capas
	with(document.getElementById("tablaCapas"))	{
		rows[a].parentNode.insertBefore(rows[b], rows[a]);

		rows[a].setAttribute("id", "temp" + a);
//		rows[a].id = "item" + a;
		rows[b].setAttribute("id", "item" + b);
		rows[a].setAttribute("id", "item" + a);

	info += "filas de tablaCapas: " + rows.length + "<br />";

	}

	with (insertSelector)	{
		var elems = getElementsByTagName("a");
		insertBefore(elems[b], elems[a]);

		elems[a].firstChild.setAttribute("id", elems[a].firstChild.getAttribute("id").split(b).join("temp" + a));
		elems[b].firstChild.setAttribute("id", elems[b].firstChild.getAttribute("id").split(a).join(b));
		elems[a].firstChild.setAttribute("id", elems[a].firstChild.getAttribute("id").split("temp").join(""));
		
		with	(elems[a].getElementsByTagName("span")[1])	{
			innerHTML = innerHTML.split(b.toString()).join(a.toString());
		}
		with	(elems[b].getElementsByTagName("span")[1])	innerHTML = innerHTML.split(a.toString()).join(b.toString());

		info += "elementos del menú: " + elems.length + "<br />";
	}

	with	(capaEditable.parentNode)	{
		elems = getElementsByTagName("div");

		elems[a].setAttribute("id", "capaNtemp" + b);
		elems[b].setAttribute("id", "capaN" + a);
		elems[a].setAttribute("id", "capaN" + b);

		insertBefore(elems[b], elems[a]);
//		elems[a].id = elems[a].id.split(a).join(b);
//		elems[b].id = elems[b].id.split(b).join(a);

		info += "Capas: " + elems.length + "<br />";

	}


	document.getElementById("cuerpoPropiedades").innerHTML = info;


}

function bajarItem()	{
	var item = parseInt(this.parentNode.id.substr(4));
	if (item < elementos.length - 1)
		intercambiar(item, item + 1);
}

function subirItem()	{
	var item = parseInt(this.parentNode.id.substr(4));
	if (item > 0)
		intercambiar(item - 1, item);
}

function sumarItem(n)	{
	var item = elementos[n].toString();
	var desgloseItem = item.split("::")
	var tipoItem = desgloseItem[0];
	var datosItem = desgloseItem[1].split(",");
	var nuevoItem = document.createElement("tr");
	
	var celdaObjeto = document.createElement("td");
	if (tipoItem == "imagen")	{
		var contenidoCeldaObjeto = document.createElement("img");
		var variablesImagen = proporciones(parseInt(datosItem[3]),parseInt(datosItem[4]), 48, 38)
		with	(contenidoCeldaObjeto)	{
			src = datosItem[0];
			width = variablesImagen["ancho"];
			height = variablesImagen["alto"];
			title = variablesImagen;
			with	(style)	{
				position: "absolute";
				left = variablesImagen["x"] + "px";
				top = variablesImagen["y"] + "px";
				width = variablesImagen["ancho"] + "px";
				height = variablesImagen["alto"] + "px";

			}
		}
	
	}
	else	{
		var contenidoCeldaObjeto = document.createTextNode(tipoItem);
	}
	celdaObjeto.appendChild(contenidoCeldaObjeto);
	celdaObjeto.className = "itemCapa itemCapaObjeto";

	var celdaTipo = document.createElement("td");
	var textoCeldaTipo = document.createTextNode(tipoItem);
	celdaTipo.appendChild(textoCeldaTipo);
	celdaTipo.className = "itemCapa itemCapaTipo";

	var celdaVer = document.createElement("td");
	var textoCeldaVer = document.createTextNode("x");
	celdaVer.appendChild(textoCeldaVer);
	celdaVer.className = "itemCapa itemCapaVer";

	var celdaSubir = document.createElement("td");
	var textoCeldaSubir = document.createTextNode(document.getElementById("contenidoSubirCapas").innerHTML);

	with	(celdaSubir)	{
		appendChild(textoCeldaSubir);
		className = "itemCapa itemCapaSubir";
		style.cursor = "pointer";
		if (!document.all)
			addEventListener("click", subirItem, true);
		else
			onclick = subirItem;
	}

	var celdaBajar = document.createElement("td");
	var textoCeldaBajar = document.createTextNode(document.getElementById("contenidoBajarCapas").innerHTML);
	with	(celdaBajar)	{
		appendChild(textoCeldaBajar);
		className = "itemCapa itemCapaBajar";
		style.cursor = "pointer";
		if (!document.all)
			addEventListener("click", bajarItem, true);
		else
			onclick = bajarItem;
	}
	with (nuevoItem)	{
		appendChild(celdaObjeto);
		appendChild(celdaTipo);
		appendChild(celdaVer);
		appendChild(celdaBajar);
		appendChild(celdaSubir);
		id = "item" + n;
	}

	if (n == 0)
		with(document.getElementById("tablaCapas"))
			deleteRow(0);
	document.getElementById("itemsCapas").appendChild(nuevoItem);
}

function anclar()	{
	elementos[sumados] = (elementoInsertado == "imagen")
		?new elementoImagen(
			dibujo.src,
			parseInt(capaEditable.style.left),
			parseInt(capaEditable.style.top),
			parseInt(capaEditable.style.width),
			parseInt(capaEditable.style.height),
			sumados)
		:(elementoInsertado == "texto")
		?new elementoTexto(
			_texto,
			parseInt(capaEditable.style.left),
			parseInt(capaEditable.style.top),
			parseInt(capaEditable.style.width),
			parseInt(capaEditable.style.height),
			sumados,
			"transparent",
			"#000000")
		:"";
	nuevaCapa = capaEditable.cloneNode(true);
	sumarItem(sumados);
	nuevaCapa.id = "capaN" + sumados ++;
	with (nuevaCapa)	{
		style.borderWidth = "0px";
		style.position = "absolute";
	}
	switch	(elementoInsertado)	{
	case "imagen":
		capaEditable.removeChild(dibujo);
		break;
	case "texto":
		capaEditable.removeChild(capaTexto);
		break;
	}
	postal.insertBefore(nuevaCapa, capaEditable);
	nuevaCapa.onclick = function(x)	{
		remarcar(this.id);
	};
	capaEditable.style.display = "none";
	remarcar(nuevaCapa.id);
}

function mostrarTexto()	{
	document.getElementById("texto").style.visibility = "visible";
}

function cargandoTexto()	{
	capaEditable.style.width = (capaTexto.offsetWidth + 2) + "px";
	capaEditable.style.height = (capaTexto.offsetHeight + 2) + "px";
	capaEditable.style.left = parseInt((postal.offsetWidth - capaTexto.offsetWidth) / 2);
	capaEditable.style.top = parseInt((postal.offsetHeight - capaTexto.offsetHeight) / 2);
	insertarTextoEnSelector(_texto);
	anclar();
}

function insertarTexto(cual)	{
	elementoInsertado = "texto";
	_texto = cual;
	capaTexto = document.createElement("span");
//	unTexto = document.createTextNode(_texto);
	capaTexto.innerHTML = cual.split("\n").join("<br />");
	capaEditable.appendChild(capaTexto);
	with (capaEditable)	{
		appendChild(capaTexto);
		with (style)	{
			left = "0px";
			top = "0px";
			display = "block";
		}
	}
	setTimeout("cargandoTexto()", 200);
	setTimeout("document.getElementById('texto').style.visibility = 'hidden'", 200);
}

function insertarTextoEnSelector(texto)	{
	var nuevoItem = document.createElement("a");
	nuevoItem.href = "#";
	nuevoSpan = document.createElement("span");
	nuevoSpan.id = "textoN" + sumados;
	nuevoSpan.className = "menuInActivo";
	nuevoSpan.onmouseout = function()	{
		this.className = 'menuInActivo';
		menuActivo = '';
	};
	nuevoSpan.onmouseover = function()	{
		this.className = 'menuActivo';
		menuActivo = 'subMenuSeleccion';
	};
	nuevoSpan.onclick = function()	{
		remarcarCapa(this.id);
	};
	nuevaImagen = document.createElement("img");
	nuevaImagen.className = "imagenMenu";
	nuevaImagen.height = 15;
	nuevaImagen.width = 15;

	nuevoTexto = document.createElement("span");
	nuevoTexto.appendChild(document.createTextNode(" elemento" + sumados + "(" + texto.resumen(10) + ") "));

	nuevoSpan.appendChild(nuevaImagen);
	nuevoSpan.appendChild(nuevoTexto);
	nuevoSpan.style.display = "block";
	nuevoItem.appendChild(nuevoSpan);
	insertSelector.insertBefore(nuevoItem, insertSeparador);
	nuevoItem.onclick = function()	{
		return false;
	};
	insertSeparador.style.display = "block";
}

function insertarDibujoEnSelector(dibujo)	{
	var nuevoItem = document.createElement("a");
	nuevoItem.href = "#";
	nuevoSpan = document.createElement("span");
	nuevoSpan.id = "imagenN" + sumados;
	nuevoSpan.className = "menuInActivo";
	nuevoSpan.onmouseout = function()	{
		this.className = 'menuInActivo';
		menuActivo = '';
	};
	nuevoSpan.onmouseover = function()	{
		this.className = 'menuActivo';
		menuActivo = 'subMenuSeleccion';
	};
	nuevoSpan.onclick = function(quien)	{
		remarcarCapa(this.id);
	}
	nuevaImagen = document.createElement("img");
//	nuevaImagen.className = "opMenu";
	nuevaImagen.className = "imagenMenu";
	nuevaImagen.src = preCargaDibujo.src;

	var variablesImagen = proporciones(preCargaDibujo.width, preCargaDibujo.height, 20, 15)

//	nuevaImagen.height = 15;
	nuevaImagen.height = variablesImagen["alto"];
//	nuevaImagen.width = (dibujo.height / dibujo.width) * 15;
	nuevaImagen.height = variablesImagen["ancho"];

	info = "ancho: " + nuevaImagen.width + "<br />alto: " + nuevaImagen.height;

	nuevoTexto = document.createElement("span");
	nuevoTexto.appendChild(document.createTextNode(" elemento" + sumados));

//	nuevoTexto = document.createTextNode(" elemento" + sumados);
	nuevoSpan.appendChild(nuevaImagen);
	nuevoSpan.appendChild(nuevoTexto);
	nuevoSpan.style.display = "block";
	nuevoItem.appendChild(nuevoSpan);
	insertSelector.insertBefore(nuevoItem, insertSeparador);
	nuevoItem.onclick = function()	{
		return false;
	};
	insertSeparador.style.display = "block";
	document.getElementById("cuerpoPropiedades").innerHTML = info;
}

function cargandoDibujo()	{
	if (preCargaDibujo.complete)	{
		dibujo = document.createElement("img");
		dibujo.src = preCargaDibujo.src;
//		dibujo.id = "dibujo";
		with (capaEditable)	{
			appendChild(dibujo);
			with (style)	{
				left = parseInt((postal.offsetWidth - preCargaDibujo.width) / 2) + "px";
				top = parseInt((postal.offsetHeight - preCargaDibujo.height) / 2) + "px";
				width = (preCargaDibujo.width) + "px";
				height = (preCargaDibujo.height) + "px";
				display = "block";
			}
		}
		insertarDibujoEnSelector(dibujo);
		anclar();
	}
	else
		setTimeout("cargandoDibujo()", 100);
}

function mostrarDibujo(d)	{
	elementoInsertado = "imagen";
	preCargaDibujo = new Image();
	with (preCargaDibujo)	src = d;
	setTimeout("cargandoDibujo()", 100);
	setTimeout("menuDibujos.style.visibility = 'hidden'", 200);
}