var DATA_HEAD_TBODY_ID = "data-head-tbody";
var DATA_BODY_TBODY_ID = "data-body-tbody";
var DATA_BODY_TABLE_ID = "data-body-table";
var GRAPH_DATA_FORM = "graph_data_form";

var HOVER_TH = null;


String.uniqid = function() {
    var time = (new Date()).getTime();
    var rand = Math.random();
   	return time + rand;
}

function getDateTable(_target) {
	return document.getElementById("data-head-" + _target);
	
}


function eventStop(event) {
		if (event.preventDefault) {
      event.preventDefault();
      event.stopPropagation();
    } else {
      event.returnValue = false;
      event.cancelBubble = true;
    }
    return false;
}

function toggleCell(cell,type) {
	
	return false;
	var input = cell.getElementsByTagName("input")[0];
	var div = cell.getElementsByTagName("div")[0];
	
	if (type) {
		input.style.display = "block";
		input.value = div.innerHTML;
		div.style.display = "none";
		input.focus();
	} else {
		div.style.display = "block";
		input.style.display = "none";
		div.innerHTML = input.value;
	}
		
}


function setData(input) {
	var div = input.parentNode.getElementsByTagName("div")[0];
	div.innerHTML = input.value;
}



function addPlot(id) {
	var uniqid = String.uniqid();
	var data_head_tbody = document.getElementById(DATA_HEAD_TBODY_ID);
	var row = data_head_tbody.insertRow(-1);
	row.id = "tr"+ uniqid;
	var index = data_head_tbody.getElementsByTagName("tr").length - 1;
	row.insertCell(-1).innerHTML = [
			'<div id="popEdit'+uniqid+'" class="data_pop" style="display:none;">',
				'<div><a href="javascript:void(0);"><img src="/images/user/dtpop01_d.gif" alt="EDIT" title="EDIT" border="0" /></a></div>',
				'<div><a href="javascript:deletePlot(\''+index+'\');hideEditConsole(\''+index+'\');void(0);"><img src="/images/user/dtpop04_delete.gif" alt="DELETE" border="0" /></a></div>',
				//'<div><a href="javascript:movePlot(\''+uniqid+'\', -1);void(0);"><img src="/images/user/dtpop03.gif" alt="UP" border="0" /></a></div>',
				//'<div><a href="javascript:movePlot(\''+uniqid+'\', 1);void(0);"><img src="/images/user/dtpop04.gif" alt="DOWN" border="0" /></a></div>',
			'</div>',
		' <a href="javascript:showEditConsole(\'popEdit'+uniqid+'\', \''+uniqid+'\');"><img src="/images/user/btn09.gif" alt="DELETE" /></a>'
	].join("");
	
	var rowlen = data_head_tbody.rows.length;	
	row.insertCell(-1).innerHTML = '<input type="text" class="textbox-data-readwrite" size="3" name="plot_name[q' + uniqid +']" value="DATA'+rowlen+'" onkeyup="refresh(\'' + GRAPH_DATA_FORM +'\')" onfocus="inputFocus(this);" onmouseover="inputOver(this)" onmouseout="inputOut(this)" onblur="inputBlur(this)" />';
	var option_html = "";
	for (var i in PLOT_TYPE_LIST) {
		option_html += '<option value="' + i + '">' + PLOT_TYPE_LIST[i] + '</option>';
	}	
	
	row.insertCell(-1).innerHTML = '<select name="plot_type[q' + uniqid +']"  onchange="refresh(\'' + GRAPH_DATA_FORM +'\')">' + option_html + '</select>';
	
	var data_body_tbody = document.getElementById(DATA_BODY_TBODY_ID);
	var row = data_body_tbody.insertRow(-1);
	var len = document.getElementById(DATA_BODY_TABLE_ID).getElementsByTagName("th").length;
	for (var i = 0; i < len; i++) {
		row.insertCell(-1).innerHTML = '<input type="text" class="textbox-data-readwrite" size="3" name="data[]" value="" onkeyup="refresh(\'' +GRAPH_DATA_FORM + '\')" onfocus="inputFocus(this);" onmouseover="inputOver(this)" onmouseout="inputOut(this)" onblur="inputBlur(this)" />';
	}
	return false;
}


function deleteColumn(th) {
	var index = th.cellIndex;	
	th.parentNode.removeChild(th);
	var data_body_tbody = document.getElementById(DATA_BODY_TBODY_ID);
	var tr = data_body_tbody.getElementsByTagName("tr");
	var len = tr.length;
	for (var i = 0; i < len; i++){
		var td = tr[i].getElementsByTagName("td")[index];
		td.parentNode.removeChild(td);
	}
	refresh(GRAPH_DATA_FORM);
}


function insertColumn(obj) {
	var th = obj;
	var new_th = document.createElement("th");
	new_th.innerHTML = [
		'<div class="data-head-top">',
		'<input  type="text" class="textbox-data-readwrite" size="3" name="x_labels[]" value="" onkeyup="refresh(\''+ GRAPH_DATA_FORM +'\')" onfocus="inputFocus(this);" onmouseover="inputOver(this)" onmouseout="inputOut(this)" onblur="inputBlur(this)" />',
		'</div>',
		'<img src="/css/images/common/pix.gif" width="40"/><br />'
	].join("");
	
	th.parentNode.insertBefore(new_th, th.nextSibling);	
	var index = new_th.cellIndex;	
	var data_body_tbody = document.getElementById(DATA_BODY_TBODY_ID);
	var len = data_body_tbody.rows.length;
	for (var i = 0; i < len; i++){
		data_body_tbody.rows[i].insertCell(index).innerHTML = [
			'<input type="text" class="textbox-data-readwrite" size="3" name="data[]" value="" onkeyup="refresh(\''+ GRAPH_DATA_FORM +'\')" onfocus="inputFocus(this);" onmouseover="inputOver(this)" onmouseout="inputOut(this)" onblur="inputBlur(this)" />'].join("");
	}
	refresh(GRAPH_DATA_FORM);
}

function deletePlot(index) {
	var data_head_tbody = document.getElementById(DATA_HEAD_TBODY_ID);
	var tr = data_head_tbody.getElementsByTagName("tr");
	try {
		data_head_tbody.removeChild(tr[index]);
		var data_body_tbody = document.getElementById(DATA_BODY_TBODY_ID);
		var _tr = data_body_tbody.getElementsByTagName("tr");
		data_body_tbody.removeChild(_tr[index]);
	} catch(e) {
		deletePlot(index-1);
	}
	refresh(GRAPH_DATA_FORM);
}

function getTypeOfGraphData(id) {
	var data_type_desc_box = document.getElementById("data-type-desc-box");
	desc_list = data_type_desc_box.getElementsByTagName("div");
	for (var i = 0, len = desc_list.length; i < len; i++) {
		desc_list[i].style.display = "none";
	}
	document.getElementById(id).style.display = "block";
}

/**
 * ToolBox
 */
function moveToolBox(input) {
	var element = input.parentNode;
	if (element.tagName.toLowerCase() != "div") {
		return false;
	}
	var _left = element.parentNode.offsetLeft;
	var toolbox = document.getElementById("data-edit-tool");
	toolbox.style.display = "block";
	var _w = element.offsetWidth;
	var _img_w = toolbox.offsetWidth;
	
	var box = document.getElementById("data-body-box");
	var _scroll = box.scrollLeft;
	if (_w > _img_w) {
		_left += _w - _img_w;
	}
	
	toolbox.style.left = _left + "px";
	var th = input.parentNode.parentNode;
	var a = toolbox.getElementsByTagName("a");
	
	//this is think
	a[0].onclick = function() {
		insertColumn(th);
		toolbox.style.display = "none";
	}
	a[1].onclick = function() {
		deleteColumn(th);
		toolbox.style.display = "none";
	}
	a = null;
}


function hideToolBox() {
	var toolbox = document.getElementById("data-edit-tool");
	toolbox.style.display = "none";
}


/**
 * data-table's input event
 */
function inputOver(input, isParent) {
	if (isParent) {
		input.style.backgroundColor = "#d6e7a0";
	} else {
		input.style.backgroundColor = "#ffffcc";
	}
	moveToolBox(input);
}

function inputOut(input, isParent) {	
	input.style.backgroundColor = "";
	var pNode = input.parentNode;
	if (isParent) {
		pNode = pNode.parentNode;
	}
	pNode.style.backgroundColor = "";
}


function inputFocus(input, isParent) {
	if (isParent) {
		input.style.backgroundColor = "#d6e7a0";
	} else {
		input.style.backgroundColor = "#ffffcc";
	}
}


function inputBlur(input) {
	input.style.backgroundColor = "transparent";
	var len = input.value.length;
	input.style.width = len / 1.2 + "em";
	if (input.offsetWidth < 40) {
		input.style.width = 30 + "px";
	}
}


function refresh(formName) {

}

/**
 * /index.php
 */
function checkPlotType(id) {
	var demoDataArea = document.getElementById(id);
	var pList = demoDataArea.getElementsByTagName("p");
	var gt = document.getElementById("gt").value;
	if (gt == 1 || gt == "1d") {
		if (pList.length > 1) {
			for (var i = pList.length-1; i > 0; i--) {
				pList[i].parentNode.removeChild(pList[i]);
			}
			document.getElementById("remove-button").style.display = "none";
		}
		return false;
	}
	return true;
}


function addDemoPlot(id) {
	var demoDataArea = document.getElementById(id);
	
	if (!checkPlotType(id)) {
		return false;
	}
	var uniqid = String.uniqid();
	var html = '<input type="text" class="text-input" name="plot_title['+uniqid+']" id="plot_title'+uniqid+'" size="12" /><input type="text" class="text-input" name="data['+uniqid+']" size="30" />';
	
	var p = document.createElement("p");
	p.innerHTML = html;	
	demoDataArea.appendChild(p);
	var pList = demoDataArea.getElementsByTagName("p");
	if (pList.length > 1) {
		document.getElementById("remove-button").style.display = "";
	}
	document.getElementById("plot_title" + uniqid).value= "DATA" + pList.length;
}

function removeDemoPlot(id) {
	var demoDataArea = document.getElementById(id);
	var pList = demoDataArea.getElementsByTagName("p");
	if (pList.length > 1) {
		pList[pList.length-1].parentNode.removeChild(pList[pList.length-1]);
	}
	if (pList.length <= 1) {
		document.getElementById("remove-button").style.display = "none";
	}
}

function changeTab(formId) {
	var input = document[formId].register_type;
	var className = "";
	for (var i = 0, l = input.length; i < l; i++) {
		var selected = (input[i].checked)? true: false;
		var num = input[i].value;
		document.getElementById("sel" + num).className = (selected)? "select-tab" :"nonselect-tab";
		document.getElementById("sel" + num + "-body").style.display = (selected)? "block": "none";
	}
}


/**
 * for data.php
 */
var SELECTED_PLOT_ID = null;


function showEditConsole(id, key) {
	SELECTED_PLOT_ID = key;
	var popElem = document.getElementById(id);
	var disp = popElem.style.display;
	popElem.style.display = (disp == "none")? "block": "none";
}
function hideEditConsole(id) {
	var popElem = document.getElementById(id);
	var disp = popElem.style.display;
	popElem.style.display = "none";
}


function locationPlotEditPage(plot_id) {
	var url = "plot.php";
	location.href = url + "?pid=" + plot_id;
}

function movePlot(key, direction) {
	
	var thead = document.getElementById(DATA_HEAD_TBODY_ID);
	var tbody = document.getElementById(DATA_BODY_TBODY_ID);
	
	var _trList = thead.getElementsByTagName("tr");
	var orgTr = document.getElementById("tr" + key);
	var index = orgTr.rowIndex;	
}