Implement expression in skin editor.

Http/SkinEditor/app.css

@@ -155,15 +155,32 @@ input {
 
 .t-exp {
 	border-top: solid 1px gray;
+	vertical-align: top;
 }
 
 	.t-exp.t-inline {
-		padding: 2px 4px;
+		margin: 0 2px;
+		padding: 2px;
 	}
-
+	
+	.t-exp .t-inline {
+		margin: 0 2px 2px 2px;
+	}
+	
+	.t-exp .t-statement {
+		margin: 0;
+		border: 0;
+		border-left: solid 1px red;
+		padding: 0;
+	}
+	
 	.t-exp:hover {
 		border-top: solid 3px gray;
 	}
+	
+	.t-exp .btn-add:not(:only-child) {
+		display: none;
+	}
 
 .t-input {
 	display: inline-block;

Http/SkinEditor/app.js

@@ -40,11 +40,22 @@ var statementlists = {
 	"statement.filter.exp": ["exp"],
 	"statement.filter.type": ["input.type"],
 	"statement.obj": ["block.object"],
+	"statement.exp.literal.ident": ["input.ident"],
+	"statement.exp.literal.number": ["input.number"],
+	"statement.exp.op.add": ["exp.number", "exp.number"],
+	"statement.exp.op.substract": ["exp.number", "exp.number"],
+	"statement.exp.op.multiply": ["exp.number", "exp.number"],
+	"statement.exp.op.divide": ["exp.number", "exp.number"],
 	"statement.prop": ["input.prop", "exp"],
 	"statement.select": ["block.select", "block.element"],
 	"statement.select.exp": ["exp"],
 	"statement.select.type": ["input.type"],
-}
+};
+
+var explists = {
+	"exp": ["#exp.array", "#exp.error", "#exp.identifier", "#exp.null", "#exp.number", "#exp.string", "#exp.vector"],
+	"exp.number": ["statement.exp.literal.number", "statement.exp.op.add", "statement.exp.op.substract", "statement.exp.op.multiply", "statement.exp.op.divide", "statement.exp.literal.ident"],
+};
 
 window.onload = function () {
 	lang = navigator.language.replace("-", "_");
@@ -95,7 +106,7 @@ function onAddButtonClick(event) {
 
 function onAddExpButtonClick(event) {
 	cel = el = event.data;
-	generateAddExpList(event);
+	generateAddExpList(event, el.attr("key"));
 }
 
 function onAddButtonLiteralClick(event) {
@@ -216,14 +227,20 @@ function generateAddList(event, items) {
 	popup(event, ul);
 }
 
-function generateAddExpList(event, items) {
+function generateAddExpList(event, item) {
 	event.stopPropagation();
 	if (clist) clist.remove();
 	var ul = $("<ul></ul>").addClass("t-list t-exp-list");
-	for (var i in items) {
+	(function addExpRecursive(it) {
-		var item = items[i];
+		var items = explists[it];
-		ul.append($("<li></li>").addClass("t-li").attr("key", item).text(msg("list." + item)).on("click", null, item, onAddItemClick));
+		for (var i in items) {
-	}
+			var item = items[i];
+			if (item[0] == "#")
+				addExpRecursive(item.substring(1));
+			else
+				ul.append($("<li></li>").addClass("t-li").attr("key", item).text(msg("list." + item)).on("click", null, item, onAddItemClick));
+		}
+	})(item);
 	popup(event, ul);
 }
 
@@ -349,10 +366,11 @@ function createExp(key) {
 }
 
 function createInput(key, target) {
-	var el = $("<input />").attr({
+	var el = $("<input />").attr("placeholder", msg(key + ".default"));
-		"type": "text",
+	switch (key) {
-		"placeholder": msg(key + ".default")
+		case "input.number": el.attr("type", "number"); break;
-	});
+		default: el.attr("type", "text"); break;
+	}
 	var r = $("<span></span>").attr({
 		"key": key,
 		"target": target.index()