var cHeightFrame = 300, cCntGridY = 20, cGridY = cHeightFrame / cCntGridY;
var cWidthFrame = 1160, cCntGridX = 19, cGridX = cWidthFrame / cCntGridX;
var cBtnOfst = 19;
var cColor = new Array("cyan", "white", "coral", "yellow");
var gArrTrend = new Array(), gSigStart;
var gElmtKL = new Array();
var gFlgFirst = true, gFlgDspTrend = true, gFlgDspTag = true, gFlgDspTagnal = true;
var gSerial, gThEth, gThBoom, gFrameId, gFrame, gModel, gStrDesc;


function init(serial, thEth, thBoom, frame, model)
{
	gFrame = frame;
	gFrameId = document.getElementById(frame);	
	gSerial = serial;
	gThEth = thEth;
	gThBoom = thBoom;
	gModel = model;

	if ( (xmlHttp = GetXmlHttpObject()) == null )
	{
		alert ("Browser does not support HTTP Request");
		return;
	}

	var url = "ajax_srv.php?";
	url += "model=" + model + "&serial=" + serial + "&th_eth=" + thEth;
	switch ( model )
	{
		case "Boom":
			url += "&th_boom=" + thBoom;
			gStrDesc = model + ": " + thBoom + "/" + thEth;
			break;
		case "Ether-1m":
		case "Ether-PC":
		case "Pen":
		case "EL":
			gStrDesc = model + ": " + thEth;
			break;
	}

	document.body.style.cursor = 'wait'; 
	xmlHttp.onreadystatechange = stateChanged;
	xmlHttp.open("GET", url, true);
	xmlHttp.send(null);
//	document.body.style.cursor='default'; 
//	gFlgFirst = false;				
}


function stateChanged() 
{	
	var top, x;
	var arrTime = new Array();
	if ( xmlHttp.readyState == 4 || xmlHttp.readyState == "complete" )
	{
		gRspTxt = xmlHttp.responseText;

		var pos = gRspTxt.indexOf("<br>");
		var str = gRspTxt.substr(0, pos);
		gRspTxt = gRspTxt.substr(pos+4);
		var arrHL = str.split(",");
		var maxIdx = Math.round(arrHL[1] / 20 + 1.5) * 20;
		var minIdx = Math.round(arrHL[0] / 20 - 1.5) * 20;
		var diffIdx = maxIdx - minIdx;
		
		pos = gRspTxt.indexOf("<br>");
		gCntMin = gRspTxt.substr(0, pos);
		gRspTxt = gRspTxt.substr(pos+4);

		var str = "<div id='Align'></div><div id='Align2'></div>";		
		// display the K-Line in 1-min

		for (i=0; i<gCntMin; i++)
		{
			pos = gRspTxt.indexOf("<br>");
			arrKL = gRspTxt.substr(0, pos).split(",");
			gRspTxt = gRspTxt.substr(pos+4);

			arrTime[i] = arrKL[0];				// record the time series for later use
			for (j=1; j<arrKL.length; j++)
				arrKL[j] = parseInt(arrKL[j]);

			if ( i == 0 )
			{
				top = 2;
				ofst = cBtnOfst;
				if ( maxIdx - arrKL[1] < arrKL[1] - minIdx )
				{
					top = cHeightFrame - (cBtnOfst - top);
					ofst = -cBtnOfst;
				}
				if ( gFrame == 'FrameKLine2' )		// disp the Hide Frame button
				{
					str += "<div class='LblBtn' onClick='hideFrame()' style='top:" + top + "px'>";
					str += "Hide the chart</div>";
				}
				else								// disp the Back button
				{
					str += "<div class='LblBtn' onClick='javascript:history.back(-1)' style='top:" + top + "px'>";
					str += "Back</div>";
				}
				str += "<div id='BtnSig' class='LblBtn' onClick='dispSig()' style='top:" + (top+ofst) + "px'>";
				str += "Hide the tags</div>";
				if ( gModel == "Boom" )				// disp the Trend button
				{
					str += "<div id='BtnTrend' class='LblBtn' onClick='dispTrend()' style='top:" + (top+ofst*2) + "px'>";
					str += "Show the trend</div>";
				}
				
				str += "<div class='Info' style='top:" + top + "px'>" + gStrDesc + ", ";
				str += gSerial.substr(5) + "</div>";
			}
			yOpen = Math.round(cHeightFrame * (1 - (arrKL[1] - minIdx) / diffIdx));
			yClose = Math.round(cHeightFrame * (1 - (arrKL[2] - minIdx) / diffIdx));
			yHigh = Math.round(cHeightFrame * (1 - (arrKL[3] - minIdx) / diffIdx));
			yHeight = Math.round(cHeightFrame * (arrKL[3] - arrKL[4]) / diffIdx);
			x = i * 4 + 2;
			str += "<span class='KLSide' style='left:" + (x-1) + "px;margin-top:" + yOpen + "px'></span>";
			str += "<span id='Stand" + i + "' class='KLStand' title='" + arrKL[0] + ": ";
			str += arrKL[1] + "/" + arrKL[3] + "/" + arrKL[4] + "/" + arrKL[2];
			str += "' style='left:" + x + "px;margin-top:" + yHigh + "px;height:" + yHeight + "px' ";
			str += "onMouseOver='dispHLine2(" + yHigh + "," + yHeight + "," + arrKL[3] + "," + arrKL[4];
			str += ")' onMouseOut='dispHLine2()'></span>";
			str += "<span class='KLSide' style='left:" + (x+1) + "px;margin-top:" + yClose + "px'></span>";
			
			if ( !(i % 15) || i == gCntMin - 1 )		// the mark on X-axis and the X-grid
			{
				str += "<div class='VMark' style='left:" + (x-18) + "px;'>" + arrKL[0].substring(0,5) + "</div>";
				str += "<div class='VLine' style='left:" + x + "px'></div>";
			}
		}
		idxCls = arrKL[2];
//		document.getElementById("FrameKLine").innerHTML = str;

//		type_trade,trade_at,bench,sn,tm,type_trend,type_open,prft,last_extreme
		var flgStart = true, idxArr = 0;
		while ( (pos = gRspTxt.indexOf("<br>")) > 0 )		// display the signals
		{
			arrSig = gRspTxt.substr(0, pos).split(",");
			gRspTxt = gRspTxt.substr(pos+4);

			if ( arrSig[0] == 0 )												// only for boom
			{
				if ( flgStart )
				{
					gSigStart = parseInt(arrSig[6]);
					flgStart = false;
				}
				gArrTrend.push(parseInt(arrSig[3]));
			}
			else
			{
				sig = arrSig[0] > 0 ? "Long" : "Short";
				lbl = arrSig[7] > 0 ? "LblSig" : "LblSig2";
				yTrade = Math.round(cHeightFrame * (1 - (arrSig[1] - minIdx) / diffIdx));
				x = arrSig[3] * 4;
				while ( arrTime[idxArr] < arrSig[4] )
					idxArr++;
				x = idxArr * 4;
				// display the signal
				str += "<div class='" + sig + "' style='left:" + x + "px;top:" + yTrade + "px'></div>";
				// display the label and the align line as well on mouse-over
				str += "<div name='TagsSig' class='" + lbl + "' title='" + arrSig[1] + "@" + arrSig[4] + " prft: " + arrSig[5] + "' style='left:" + (x-3) + "px;top:" + (yTrade+3);
				str += "px' onMouseMove='dispHLine(" + yTrade + "," + arrSig[0] + "," + arrSig[1] + ")' onMouseOut='dispHLine(0)'>";
				str += sig.charAt(0) + "</div>";
			}
		}
		gArrTrend.push(gCntMin);
		// display the label at market close
		if ( gModel != 'Pen' )
		{
			yTrade = Math.round(cHeightFrame * (1 - (idxCls - minIdx) / diffIdx));
			str += "<div name='TagsSig' class='LblSig' title='CLS: " + idxCls + "' style='left:" + (gCntMin*4-5) + "px;margin-top:" + (yTrade+7) + "px' ";
			str += "onMouseMove='dispHLine(" + yTrade + ",2 ," + idxCls + ")' onMouseOut='dispHLine(0)'>C</div>";
		}
				
		// the Y-grid and the marks along the Y-axis
		for (i = 1; i < cCntGridY; i++)	
		{
			mark = maxIdx - diffIdx / cCntGridY * i;		// should be an integer
			str += "<div class='HLine' style='top:" + i * cGridY + "px'></div>";
			str += "<div class='HMark' style='top:" + i * cGridY + "px'>" + mark + "</div>";
		}
		str += "<div id='Mark'></div>";
		
		gFrameId.innerHTML = str;
		for (i = 0; i < gCntMin; i++)
			gElmtKL[i] = document.getElementById("Stand" + i);
//		document.body.style.cursor='default'; 
//		show();

//		if ( xmlHttp.readyState == "complete"  )
//			alert('abcde');
	}
//alert(gCntMin);

	//if ( gCntMin > 100 )
	{
	gFrameId.style.visibility = "visible";
	//	gFrameId.style.cursor = 'move';
	document.body.style.cursor = 'default'; }
}

function hideFrame()
{
//	gFlgFirst = true;
	gFrameId.style.visibility = "hidden";
}

function dispSig()
{
	var elmts = document.getElementsByName("TagsSig");

	if ( gFlgDspTag )
	{
		for (i=0; i<elmts.length; i++)	
			elmts[i].style.display = "none";
		document.getElementById("BtnSig").innerHTML = "Show the tags";
	}
	else
	{
		for (i=0; i<elmts.length; i++)
			elmts[i].style.display = "block";
		document.getElementById("BtnSig").innerHTML = "hide the tags";
	}

	gFlgDspTag = !gFlgDspTag;
}

function dispTrend()
{	//document.getElementById("Stand7").style.borderLeft = "1px solid orange";
	if ( gFlgDspTrend )
	{
		var sig = gSigStart;
		for (i=0; i<gArrTrend.length; i++)
		{
			for (j=gArrTrend[i]; j<gArrTrend[i+1]; j++)
				gElmtKL[j].style.borderLeftColor = cColor[sig+1];
			sig = -sig;
		}
		document.getElementById("BtnTrend").innerHTML = "Hide the trend";
	}
	else
	{
		for (i=0; i<gCntMin; i++)
			gElmtKL[i].style.borderLeft = "1px solid white";
//			document.getElementById("Stand" + i).style.borderLeft = "1px solid white";
		document.getElementById("BtnTrend").innerHTML = "Show the trend";
	}
	gFlgDspTrend = !gFlgDspTrend;
}

function dispHLine(y, idxColor, price)
{
	var element = document.getElementById("Align");
	var elmt2 = document.getElementById("Mark");
	if ( y > 0 )
	{
		document.getElementById("Align2").style.visibility = "hidden";
		element.style.visibility = "visible";
		element.style.top = y + "px";
		element.style.backgroundColor = cColor[idxColor+1];
		elmt2.style.top = y + "px";
		elmt2.innerHTML = price;
		elmt2.style.visibility = "visible";
	}
	else
	{
		element.style.visibility = "hidden";
		elmt2.style.visibility = "hidden";
	}
}

function dispHLine2(y1, y2, high, low)
{
	var element = document.getElementById("Align2");
	var elmt2 = document.getElementById("Mark");
	if ( y1 > 0 )
	{
		element.style.visibility = "visible";		
		element.style.top = ((event.offsetY > y2 / 2) ? (y1+y2) : y1) + "px";
		if ( event.offsetY > y2 / 2 )
		{
			y = y1 + y2;
			elmt2.innerHTML = low;
		}
		else
		{
			y = y1;
			elmt2.innerHTML = high;
		}
		element.style.top = y + "px";
		elmt2.style.top = y + "px";
		elmt2.style.visibility = "visible";
	}
	else
	{
		element.style.visibility = "hidden";
		elmt2.style.visibility = "hidden";
	}
}

function GetXmlHttpObject()
{
	var xmlHttp = null;
	try					// Firefox, Opera 8.0+, Safari
	 {	xmlHttp = new XMLHttpRequest(); }
	catch (e)			//Internet Explorer
	{
		try
		{	xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");	}
		catch (e)
		{	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");	}
 	}
	return xmlHttp;
}



//Drag and Drop script - http://www.btinternet.com/~kurt.grigg/javascript

if  (document.getElementById){

(function(){

//Stop Opera selecting anything whilst dragging.
if (window.opera)
	document.write("<input type='hidden' id='Q' value=' '>");


var n = 500;
var dragok = false;
var y,x,d,dy,dx;

function move(e)
{
	if (!e) e = window.event;
	if (dragok)
	{
		d.style.left = dx + e.clientX - x + "px";
		d.style.top  = dy + e.clientY - y + "px";
		return false;
	}
}

function down(e)
{
	if (!e) e = window.event;
	var temp = (typeof e.target != "undefined")?e.target:e.srcElement;
/*	if (temp.tagName != "HTML"|"BODY" && temp.className != "DragClass")
	{
		temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
	}
*/
	if (temp.className == "DragClass")
	{
		if (window.opera) {
			document.getElementById("Q").focus();
		}
		dragok = true;
		temp.style.zIndex = n++;
		d = temp;
		dx = parseInt(temp.style.left+0);
		dy = parseInt(temp.style.top+0);
		x = e.clientX;
		y = e.clientY;
		document.onmousemove = move;
		return false;
	}
}

function up(){
dragok = false;
document.onmousemove = null;
}

document.onmousedown = down;
document.onmouseup = up;

})();
}//End.