LogicNode = Object.subClass({
	
	init: function(config) {
		this.level = config.level || 0;
		this.type = config.type;
		this.expression = config.expression;
		this.condition = config.condition;
		this.valuation = config.valuation;
		this.parent = config.parent;
		this.children = [];
	},
	
	toString: function(content) {
		var result = "";
		
		if (!this.condition) {
			this.expression = this.valuation.expression = this.valuation.editor.val();
		}
		else {
			this.condition.expression = this.condition.editor.val();
			this.valuation.expression = this.valuation.editor.val();
			
			this.expression = this.condition.expression + "?" + this.valuation.expression;
		}
		
		result = result + this.expression;
		var flag = this.level == 0 ? ";" : ",";
		
		var max = this.children.length;
		for (var i = 0; i < max; i++) {
			var child = this.children[i];
			result = result + flag + child.toString();
		}
	},
	
	show: function() {
		if (!this.condition) {
			this.valuation.editor.val(this.valuation.expression);
		}
		else {
			this.condition.editor.val(this.condition.expression);
			this.valuation.editor.val(this.valuation.expression);
		}
	},
	
	clear: function() {
		if (!this.condition) {
			if (this.valuation.el) {
				this.valuation.el.remove();
			}
		}
		else {
			if (this.condition.el) {
				this.condition.el.remove();
			}
			if (this.valuation.el) {
				this.valuation.el.remove();
			}			
		}	
			
		if (this.el) {
			this.el.remove();
		}
	}
});

LogicTree = Object.subClass({
	
	init: function(config) {
		this.type;
		this.condition = null;
		this.valuation = null;
		this.eidtor = null;
		this.children = [];
	},
	
	parse: function(content, flag) {
		this.clear();
		
		if (!content) {
			return;
		}
		
		flag = flag || ";";
		
		if (content.indexOf(";") < 0) {
			this.parseMathValue(this, content, 0);
			return;
		}
		
		var sequences = content.split(";");
		var max = sequences.length;
			
		for (var i = 0; i < max; i++) {
			sequence = sequences[i];
			var node = this.parseIFValue(this, sequence, 0);
		}
	},
		
	parseMathValue: function(parent, value, level) {
		var node = new LogicNode({
			parent: parent,
			level: level,
			type: "Math",
			valuation: {
				expression: value,
				el: null
			}
		});
		
		parent.children.push(node);
		return node;
	},
		
	parseIFValue: function(parent, content, level) {
		var pos = content.indexOf("?");
		
		//1. else if 
		if (pos < 0) {
			var node = new LogicNode({
				parent: parent,
				level: level,
				type: "ELSE",
				expression: content,
				valuation: {
					expression: content,
					el: null
				}
			});	
					
			parent.children.push(node);		
			return;
		}
		
		//2. if condition
		var node = new LogicNode({
			parent: parent,
			level: level,
			type: "IF",
			condition: {
				expression: content.substring(0, pos),
				el: null
			}
		});
		node.expression = content;
		parent.children.push(node);

		//3. if valuation
		var pos_subflag = content.indexOf(",");
		if (pos_subflag < 0) {
			var math = content.substring(pos + 1);
			
			node.valuation = {
				expression: math,
				el: null
			}			
			return;
		}
		
		//4. children
		this.parse(node, ",", 1);
	},
	
	getString: function() {
		var result = "";
		
		var max = this.children.length;
		for (var i = 0; i < max; i++) {
			var child = this.children[i];
			result = result + child.toString();
		}
		
		return result;
	},
	
	show: function() {
		var max = this.children.length;
		for (var i = 0; i < max; i++) {
			var child = this.children[i];
			child.show();
		}
	},
	
	clear: function() {
		var max = this.children.length;
		for (var i = 0; i < max; i++) {
			var child = this.children[i];
			child.clear();
		}
		
		this.children = [];
	}
});

FormulaDesigner = Control.subClass({
	
	items: true,
	
	init: function(config) {
		config.css = util.combine(config.css, {
			container: null
		});
		
		this.logicTree = new LogicTree({});
		this.mathLine = {};
		this.selected = null;
		
		Control.call(this, config);
	},
	
	getContainerTemplate: function() {
		return $(Formula_Template.container.join(""));
	},
	
	createContent: function() {
		this.logicTree.el = this.container;
		
		//1. body
		this.logicTree.el.body = $("#formula_body", this.container);
		
		//2. header
		this.header = $("#formula_header", this.container);
		this.header.nameEditor = $("#editor_name", this.header);
		this.header.alignEditor = $("#editor_align", this.header);
		this.header.formaterEditor = $("#editor_formatter", this.header);
		this.header.widthEditor = $("#width_editor", this.header);
	},
	
	loadSetting: function(setting) {
		this.setVariantName(setting.name);
		this.setVariantAlign(setting.align);
		this.setVariantFormatter(setting.formatter);
		this.setVariantWidth(setting.width);
	},
	
	loadExpression: function(expression) {
		this.logicTree.parse(expression);
		this.createLines();
		this.logicTree.show();
	},
	
	createLines: function() {
		var lines = this.logicTree.children;
		var max = lines.length;
		
		for (var i = 0; i < max; i++) {
			this.createOneLine(lines[i]);
		}
	},
	
	createOneLine: function(logic) {
		if ("Math" == logic.type) {
			this.createMathLine(logic);
		}
		else if ("IF" == logic.type) {
			this.createIFLine(logic);
		}
		else if ("ELSE" == logic.type) {
			this.createElseLine(logic);
		}
	},
	
	createMathLine: function(logic) {
		//1. element
		var el = logic.valuation.el = $(Formula_Template.mathLine.join(""));
		logic.valuation.editor = $("#mathEditor", el);
		
		//2. append to parent
		logic.parent.el.body.append(el);
		return result;		
	},
	
	createIFLogic: function(parentLogic) {
		//1. clear math line
		if (this.mathLine.el) {
			this.mathLine.el.remove();
			this.mathLine = {};
		}
		
		//2. login tree
		this.createIFLine(parentLogic);
		this.createElseLine(parentLogic);
	},
	
	createIFLine: function(logic) {
		this.createLogicLine(logic, "IF");
	},
	
	createElseIFLine: function(logic, priorLogic) {
		this.createLogicLine(logic, "ELSE-IF", priorLogic);
	},
	
	createElseLine: function(logic) {
		this.createLogicLine(logic, "ELSE");
	},
	
	createLogicLine: function(logic, type, priorLogic) {
		//1. create element
		var el; var existsButtons;
		
		if ("IF" == type || "ELSE-IF" == type) {
			el = $(Formula_Template.logicIF.join(""));
			logic.condition.editor = $("#conditionEditor", el);
			logic.valuation.editor = $("#valuationEditor", el);
			existsButtons = true;
		}
		else {
			el = logic.valuation.el = $(Formula_Template.logicELSE.join(""));
			logic.valuation.editor = $("#valuationEditor", el);
			existsButtons = false;
		}
		
		logic.el = el;
		el.body = $("#logic_body", el);
		
		//2. caption 
		var caption = $("#conditionCaption", el);
		caption.html(this.getLogicLabel(type));
		
		//4. event
		if (existsButtons) {
			var me = this;
			el.bntAddOne = $("#btn_addOne", el);
			el.bntAddOne.click(function() {
				me.createElseIFLine(parentLogic, result);
			});
			
			el.bntAddChild = $("#btn_addChild", el);
			el.bntAddChild.click(function() {
				me.createIFLogic(result);
			});
			
			el.bntDeleteOne = $("#btn_deleteOne", el); 
			el.bntDeleteOne.click(function() {
				me.deleteLogic(result);
			});			
		}
		
		//5. append to parent
		var parentLogic = logic.parent;
		
		if (priorLogic) {
			result.el.insertBefore(priorLogic.el);
		}
		else {
			var parentEl = parentLogic.el.body;
			parentEl.append(el);
		}
		
		//6. animate
		return result;
	},
	
	deleteLogic: function(logic) {
		var parent = logic.parent;
		var logicList = parent.children;
		
		//1. 只有if和else
		if (logicList.length <= 2) {
			this.initLogicBody(parent);
		}
		else {
			//1. delete from parent
			var index = logicList.indexOf(logic);
			logicList.splice(index, 1);	
			
			//2. delete el
			logic.el.remove();
		}
	},
	
	initLogicBody: function(logic) {
		//1. empty parent children
		logic.children = [];
		
		//2. empty body
		logic.el.body.empty();
		
		//3. append valuation
		var valuation = $(Formula_Template.valuation.join(""));
		logic.el.body.append(valuation);
	},
	
	removeLogicValuation: function(logic) {
		if (!logic.el.valuation) {
			return;
		}
		
		logic.el.valuation.remove();
		logic.el.valuation = null;
	},
	
	getExpressionString: function() {
		if (logicLine) {
			var result = logicLine.expression.getString();
			return result;
		}
		
		var result = "";
		var logicTree = this.logicTree;
		var max = logicTree.length;
		
		for (var i = 0; i < max; i++) {
			var logicLine = logicTree[i];
			result = result + logicLine.expression.getString();
		}
		
		return result;
	},
	
	getLogicLabel: function(type) {
		if ("IF" == type) {
			return "如果：";
		}
		else if ("ELSE-IF" == type) {
			return "如果：";
		}
		else if ("ELSE" == type) {
			return "否则：";
		}
	},
	
	clear: function() {
		//1. math
		if (this.mathLine.el)  {
			this.mathLine.el.remove();
		}
		this.mathLine = {};
		
		//2. 
		var children = this.logicTree.children;
		var max = children.length;
		
		for (var i = 0; i < max; i++) {
			var logic = children[i];
			logic.el.remove();
		}
		
		this.logicTree.children = [];
	},
	
	setVariantName: function(name) {
		this.header.nameEditor.val(name);
	},
	
	setVariantAlign: function(align) {
		var filter = "[value='" + align + "']";
		var option = $(filter, this.header.alignEditor);
		if (option) {
			option.attr("selected", "selected");
		}
	},
	
	setVariantFormatter: function(formatter) {
		var filter = "[value='" + formatter + "']";
		var option = $(filter, this.header.formaterEditor);
		if (option) {
			option.attr("selected", "selected");
		}
	},
	
	setVariantWidth: function(width) {
		width = width || 1;
		var filter = "[value='" + width + "']";
		var option = $(filter, this.header.widthEditor);
		if (option) {
			option.attr("selected", "selected");
		}
	}
	
});


//*************************************
Formula_Template = {};

Formula_Template.container = [
	'<div class="formula">',
		'<div id="formula_header" class="formula-header">',
			'<span>列名：</span>',
			'<input id="editor_name" type="text" value="达成率"/>',
			'<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>',
			'<span>显示格式：</span>',
			'<select id="editor_formatter">',
				'<option value="text">文本</option>',
				'<option value="percent">百分比</option>',
				'<option value="money">金额</option>',
				'<option value="decimal">数值</option>',
			'</select>',
			'<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>',
			'<span>对齐方式：</span>',
			'<select id="editor_align">',
				'<option value="left">左对齐</option>',
				'<option value="center">居中对齐</option>',
				'<option value="right">右对齐</option>',
			'</select>',
			'<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>',
			'<span>列宽度：</span>',
			'<select id="width_editor">',
				'<option value="0.6">0.6</option>',
				'<option value="1">1</option>',
				'<option value="1.5">1.5</option>',
				'<option value="2.5">2.5</option>',
			'</select>',						
		'</div>',
		'<div class="formula-body">',
			'<div id="formula_body" class="formula-body-inner">',
			'</div>',
		'</div>',
	'</div>'
];

Formula_Template.mathLine = [
    '<div id="math_body" class="math-body">',
		'<span id="mathCaption" class="math-caption">=</span>',
		'<input id="mathEditor" class="math-input" type="text" placeholder="请编辑公式"/>',
    '</div>'   
];

Formula_Template.logicIF = [
	'<div class="logic">',
		'<div class="logic-condition">',
			'<div class="indicator-line"></div>',
			'<div class="indicator-if"></div>',
			'<span id="conditionCaption" class="condition-caption"></span>',
			'<input id="conditionEditor" class="logic-input-condition" type="text"/>',
			'<div class="logic-btn-group">',
				'<div id="btn_addOne" class="logic-btn">+&nbsp;同级</div>',
				'<div id="btn_addChild" class="logic-btn">+&nbsp;下级</div>',
				'<div id="btn_deleteOne" class="logic-btn">-&nbsp;删除</div>',				
			'</div>',
		'</div>',				
		'<div id="logic_body" class="logic-body">',
			'<div class="indicator-line"></div>',
			'<div id="valuation_body" class="valuation-body">',
				'<input id="valuationEditor" class="logic-input-valuation" type="text"/>',
			'</div>', 
		'</div>',
    '</div>'   
];

Formula_Template.logicELSE = [
	'<div class="logic">',
		'<div id="logic_body" class="logic-condition">',
			'<div class="indicator-else"></div>',
			'<span id="conditionCaption" class="condition-caption"></span>',
			'<input id="valuationEditor" class="logic-input-valuation" type="text"/>',
		'</div>',
    '</div>'   
];

Formula_Template.valuation = [
	'<div class="indicator-line"></div>',
	'<div id="valuation_body" class="valuation-body">',
		'<input id="valuationEditor" type="text"/>',
	'</div>', 
];