var xmlString = "";
var xmlStringToEmbed = "";
var windowList = new Array(); 
var currentid="Chart";
var childrenFound = 0;

function MM_openBrWindow(theURL,winName,features) 
{ 
    window.open(theURL,winName,features);
    return false;
}

function hideWindow()
{
    var obj1 = document.getElementById('WindowChart');
    obj1.style.visibility = "hidden";

    var obj2 = document.getElementById('WindowTitle');
    obj2.style.visibility = "hidden";

    var obj3 = document.getElementById('WindowPlotArea');
    obj3.style.visibility = "hidden";

    var obj4 = document.getElementById('WindowData');
    obj4.style.visibility = "hidden";

    var obj6 = document.getElementById('WindowImage');
    obj6.style.visibility = "hidden";

    var obj7 = document.getElementById('WindowLegend');
    obj7.style.visibility = "hidden";

    var obj8 = document.getElementById('WindowToolTip');
    obj8.style.visibility = "hidden";

    var obj9 = document.getElementById('WindowTrendLine');
    obj9.style.visibility = "hidden";

    var obj10 = document.getElementById('WindowAxisX');
    obj10.style.visibility = "hidden";

    var obj11 = document.getElementById('WindowAxisY');
    obj11.style.visibility = "hidden";
    
    var obj12 = document.getElementById('WindowAxisLabels');
    obj12.style.visibility = "hidden";
    
    var obj13 = document.getElementById('WindowMajorGrids');
    obj13.style.visibility = "hidden";
    
    var obj14 = document.getElementById('WindowMajorTicks');
    obj14.style.visibility = "hidden";
    
    var obj15 = document.getElementById('WindowEvents');
    obj15.style.visibility = "hidden";
    
    var zValue1 = document.getElementsByName('zvalue1');
    var zValue2 = document.getElementsByName('zvalue2');
    
    for(i=0;i<zValue1.length;i++)
    {
        zValue1[i].style.visibility = "hidden";
        zValue1[i].style.display = "none";
    }

    for(i=0;i<zValue2.length;i++)
    {
        zValue2[i].style.visibility = "hidden";
        zValue2[i].style.display = "none";
    }
}

function defaultwindow()
{
    hideWindow();
    
    var obj1 = document.getElementById('WindowChart');
    obj1.style.visibility = "visible";

    var obj20 = document.getElementById('WindowDraw');
    obj20.style.visibility = "visible";
    
    drawChart();
}

function show(id)
{
    hideWindow();

    var obj = document.getElementById("Window"+id);
    obj.style.visibility = "visible";
    
    document.getElementById("Window"+currentid).style.visibility = "hidden";
    document.getElementById("Window"+id).style.visibility = "visible";
    
    document.getElementById(currentid).className = "buttonoff";
    document.getElementById(id).className = "buttonon";
    
    currentid = id;
}

function generateXML()
{
	var nameSpace = "vc";   
	var start = "<";
	var end = ">";
	var sEnd = "/>";
    
    var mainDiv = document.getElementById('windows');
    var div = mainDiv.getElementsByTagName('div');
    var divLength = div.length - 1;
    
    
    for(d=0; d <= divLength; d++)
    {
        var input = div[d].getElementsByTagName('input');
        var select = div[d].getElementsByTagName('select');
        var counter = 0;
        var windowName = div[d].id;
        
        for(i=0;i<input.length;i++)
        {
        	if(input[i].value != "")
        	{
        		counter++ ;
        	}
        }
        
        for(i=0;i<select.length;i++)
        {
        	if(select[i].value != "")
        	{
        		counter++ ;
        	}
        }
        
        windowList[windowName] = counter;
    }

    if((windowList["WindowAxisLabels"] != 0)&&(windowList["WindowMajorGrids"] != 0)&&(windowList["WindowMajorTicks"] != 0) )
    {
        childrenFound = 1;
    }

    if(childrenFound == 1 )
    {
        windowList["WindowAxisX"] = 1;
        windowList["WindowAxisY"] = 1;
    }

    for (var windowId in windowList)
    {
        if(((windowList[windowId] != 0)||(windowId == "WindowChart"))&&((windowId != "WindowData")&&(windowId != "WindowAxisLabels")&&(windowId != "WindowMajorGrids")&&(windowId != "WindowMajorTicks")&&(windowId != "WindowEvents")))
        {
					
        	var nameOfWindow = windowId;
        	nameOfWindow = nameOfWindow.substring(6);
        	
        	if(windowId != "WindowChart")
        	{
        	    xmlString += '\t';
        	    xmlStringToEmbed += '\t';
        	}
        	
        	xmlString += start + nameSpace + ":" + nameOfWindow;
        	xmlStringToEmbed += "\t" + "+" + "'" + start + nameSpace + ":" + nameOfWindow;
        	
        	var lengthOfName = nameOfWindow.length;
        	
        	if(windowId == "WindowChart")
        	{
        		xmlString += " xmlns:vc=\"clr-namespace:Visifire.Charts;assembly=Visifire.Charts\" " + '\n' + '\t';
        		xmlStringToEmbed += " xmlns:vc=\"clr-namespace:Visifire.Charts;assembly=Visifire.Charts\" '" + '\n' + '\t+\'';
        	}
        	
        	var tempDiv = document.getElementById(windowId);
	        var input = tempDiv.getElementsByTagName('input');
	        var select = tempDiv.getElementsByTagName('select');
	        var max = select.length;
            
	        for(i=0;i<input.length;i++)
	        {
		        if(input[i].value != "")
		        {
		        	var attribute = input[i].id;
		        	var attribute = attribute.substring(lengthOfName);
		        	xmlString += " " + attribute + "=\"" + xmlEncode(input[i].value) + "\"";
		        	xmlStringToEmbed += " " + attribute + "=\"" + xmlEncode(input[i].value) + "\"";
		        }
	        }
	
	        for(i=0;i<select.length;i++)
	        {
	           
		        if(select[i].value != "")
		        {
		        	var attribute = select[i].id;
		        	var attribute = attribute.substring(lengthOfName);
		        	xmlString += " " + attribute + "=\"" + select[i].value + "\"";
		        	xmlStringToEmbed += " " + attribute + "=\"" + select[i].value + "\"";
		        }
	        }
	        
	        if((windowId == "WindowChart")||(windowId == "WindowAxisX")||(windowId == "WindowAxisY"))
	        {
	            xmlString += end + '\n';
	            xmlStringToEmbed += end + "'" + '\n';
	        }
	        else
	        {
	            xmlString += sEnd + '\n';
	            xmlStringToEmbed += sEnd + "'" + '\n';
	        }
	        
	        if(windowId == "WindowAxisX")
	        {
	            var childWindows = new Array();
	            
	            childWindows["WindowAxisLabels"] = windowList["WindowAxisLabels"]; 
                childWindows["WindowMajorGrids"] = windowList["WindowMajorGrids"];
                childWindows["WindowMajorTicks"] = windowList["WindowMajorTicks"];
    		            
	            for(var word in childWindows)
	            {
	                if(childWindows[word] != 0)
	                {          
	                    var innerDiv = document.getElementById(word);
	                    var input = innerDiv.getElementsByTagName('input');
	                    var select = innerDiv.getElementsByTagName('select');
	                    var max = select.length;
        		        
        		        var nameOfChildWindow = innerDiv.id;
        		        
        	            nameOfChildWindow = nameOfChildWindow.substring(6);
    	        	    var lengthOfName = nameOfChildWindow.length;
    	        	    
    	        	            	        	    
        	            xmlString += '\t' + '\t' + start + nameSpace + ":" + nameOfChildWindow;
        	            xmlStringToEmbed += '\t' + '\t' + "+'" + start + nameSpace + ":" + nameOfChildWindow;
        		        
	                    for(i=0;i<input.length;i++)
	                    {
		                    if(input[i].value != "")
		                    {
		        	            var attribute = input[i].id;
		        	            var axis = attribute.charAt(lengthOfName);
		        	            if(axis=='X')
		        	            {
		        	                var attribute = attribute.substring(lengthOfName+1);
		        	                xmlString += " " + attribute + "=\"" + xmlEncode(input[i].value) + "\"";
		        	                xmlStringToEmbed += " " + attribute + "=\"" + xmlEncode(input[i].value) + "\"";
		        	            }
		                    }
	                    }
        		
	                    for(i=0;i<select.length;i++)
	                    {
		                    if(select[i].value != "")
		                    {
		        	            var attribute = select[i].id;
		        	            var axis = attribute.charAt(lengthOfName);
		        	            if(axis=='X')
		        	            {
		        	                var attribute = attribute.substring(lengthOfName+1);
		        	                xmlString += " " + attribute + "=\"" + select[i].value + "\"";
		        	                xmlStringToEmbed += " " + attribute + "=\"" + select[i].value + "\"";
		        	            }
		                    }
	                    }
	                    xmlString += sEnd + '\n';    
	                    xmlStringToEmbed += sEnd + "'" + '\n';    
		            }
		        }
	            xmlString += '\t' + "</" + nameSpace + ":"+ nameOfWindow + end + '\n';
	            xmlStringToEmbed += '\t' + "+'" + "</" + nameSpace + ":"+ nameOfWindow + end + "'" + '\n';
	        }
	        
	        if(windowId == "WindowAxisY")
	        {
	            var childWindows = new Array();
	            childWindows["WindowAxisLabels"] = windowList["WindowAxisLabels"]; 
                childWindows["WindowMajorGrids"] = windowList["WindowMajorGrids"];
                childWindows["WindowMajorTicks"] = windowList["WindowMajorTicks"];

	            for(var word in childWindows)
	            {
	                if(childWindows[word] != 0)
	                {           
	                    var innerDiv = document.getElementById(word);
	                    var input = innerDiv.getElementsByTagName('input');
	                    var select = innerDiv.getElementsByTagName('select');
	                    var max = select.length;
        		        
        		        var nameOfChildWindow = innerDiv.id;
        		        
        	            nameOfChildWindow = nameOfChildWindow.substring(6);
    	        	    var lengthOfName = nameOfChildWindow.length;
    	        	    
        	            xmlString += '\t' + '\t' + start + nameSpace + ":" + nameOfChildWindow;
        	            xmlStringToEmbed += '\t' + '\t' + "+\'" + start + nameSpace + ":" + nameOfChildWindow;

	                    for(i=0;i<input.length;i++)
	                    {
		                    if(input[i].value != "")
		                    {
		        	            var attribute = input[i].id;
		        	            var axis = attribute.charAt(lengthOfName);
		        	            if(axis=='Y')
		        	            {
		        	                var attribute = attribute.substring(lengthOfName+1);
		        	                xmlString += " " + attribute + "=\"" + xmlEncode(input[i].value) + "\"";
		        	                xmlStringToEmbed += " " + attribute + "=\"" + xmlEncode(input[i].value) + "\"";
		        	            }
		                    }
	                    }
        		
	                    for(i=0;i<select.length;i++)
	                    {
		                    if(select[i].value != "")
		                    {
		        	            var attribute = select[i].id;
		        	            var axis = attribute.charAt(lengthOfName);
		        	            if(axis=='Y')
		        	            {
		        	                var attribute = attribute.substring(lengthOfName+1);
		        	                xmlString += " " + attribute + "=\"" + select[i].value + "\"";
		        	                xmlStringToEmbed += " " + attribute + "=\"" + select[i].value + "\"";
		        	            }
		                    }
	                    }
	                    
	                    xmlString += sEnd + '\n';    
	                    xmlStringToEmbed += sEnd + "\'" + '\n';    
		            }
		        }
		        
	            xmlString += '\t' + "</" + nameSpace + ":"+ nameOfWindow + end + '\n';
	            xmlStringToEmbed += '\t' + "+\'" + "</" + nameSpace + ":"+ nameOfWindow + end + "\'" + '\n';
	        }
        }
    }
    
    if(windowList["WindowData"] != 0)
    {
        var renderAs1 = document.getElementById('DataSeries1RenderAs').value;
        var renderAs2 = document.getElementById('DataSeries2RenderAs').value;
        var noOfDataPoints = 8;
        var bevel = document.getElementById('DataSeriesBevel').value;
        var series1Name = document.getElementById('Series1Name').value;
        var series2Name = document.getElementById('Series2Name').value;
		var dataSeries1AxisYType = document.getElementById('DataSeries1AxisYType').value;
		var dataSeries2AxisYType = document.getElementById('DataSeries2AxisYType').value;
					
        xmlString += '\t' +"<vc:DataSeries Name=\"" + series1Name + "\" RenderAs=\"" + renderAs1 + "\"";
        xmlStringToEmbed += '\t' + "+\'<vc:DataSeries Name=\"" + series1Name + "\" RenderAs=\"" + renderAs1 + "\"";
        
	    if(dataSeries1AxisYType != "")
	    {
	        xmlString += " AxisYType=\"" + dataSeries1AxisYType + "\"";
            xmlStringToEmbed += " AxisYType=\"" + dataSeries1AxisYType + "\"";
	    }
	    	
        if(bevel!="")
        {
            xmlString += " Bevel=\"" + bevel + "\"";
            xmlStringToEmbed += " Bevel=\"" + bevel + "\"";
        }
        
        xmlString += ">" + '\n';
        xmlStringToEmbed += ">\'" + '\n';
    
        // Appending Data Points
        for(i = 1;i <= noOfDataPoints;i++)
        {		
            var axisLabelHtml = "AxisLabel" + i;
            var axisLabel = document.getElementById(axisLabelHtml).value;
            var xValueHtml = "XValue" + i;
            var xValue = document.getElementById(xValueHtml).value;
            var yValueHtml = "Series1YValue" + i;
            var yValue = document.getElementById(yValueHtml).value;
            
            if(yValue != "")
            {
                xmlString += '\t' + '\t' +"<vc:DataPoint";   
                xmlStringToEmbed += '\t' + '\t' + "+\'<vc:DataPoint"; 
                
                if(axisLabel != "")
                {
                    xmlString += " AxisLabel=\"" + xmlEncode(axisLabel) + "\"";
                    xmlStringToEmbed += " AxisLabel=\"" + xmlEncode(axisLabel) + "\"";
                }
                
                if(xValue != "")
                {
                    xmlString += " XValue=\"" + xValue + "\"";
                    xmlStringToEmbed += " XValue=\"" + xValue + "\"";
                }
                
                xmlString += " YValue=\"" + yValue + "\"";
                xmlStringToEmbed += " YValue=\"" + yValue + "\"";
                
                if(renderAs1 == 'Bubble')
                {
                    var zValueHtml = "Series1ZValue" + i;
                    var zValue = document.getElementById(zValueHtml).value;
                    
                    if(zValue != "")
                    {
                        xmlString += " ZValue=\"" + zValue + "\"";
                        xmlStringToEmbed += " ZValue=\"" + zValue + "\"";
                    }
                }
                xmlString += "/>" + '\n';
                xmlStringToEmbed += "/>" + "\'" + '\n';
            }
        }
        
        xmlString += '\t' +"</vc:DataSeries>" + '\n';
        xmlStringToEmbed += '\t' + "+\'" + "</vc:DataSeries>" + "\'" + '\n';
        
        if(document.getElementById('DataSeries2RenderAs').value!="")
        {
            xmlString += '\t' +"<vc:DataSeries Name=\"" + series2Name + "\" RenderAs=\"" + renderAs2 + "\"";
            xmlStringToEmbed += '\t' + "+\'" +"<vc:DataSeries Name=\"" + series2Name + "\" RenderAs=\"" + renderAs2 + "\"";
							
            if(dataSeries2AxisYType != "")
		    {
				    xmlString += " AxisYType=\"" + dataSeries2AxisYType + "\"";
				    xmlStringToEmbed += " AxisYType=\"" + dataSeries2AxisYType + "\"";
		    }
							
            if(bevel!="")
            {
                xmlString += " Bevel=\"" + bevel + "\"";
                xmlStringToEmbed += " Bevel=\"" + bevel + "\"";
            }
            
            xmlString += ">" + '\n';
            xmlStringToEmbed += ">" + "\'" + '\n';
            
            for(i = 1;i <=noOfDataPoints;i++)
            {
                var axisLabelHtml = "AxisLabel" + i;
                var axisLabel = document.getElementById(axisLabelHtml).value;
                var xValueHtml = "XValue" + i;
                var xValue = document.getElementById(xValueHtml).value;
                var yValueHtml = "Series2YValue" + i;
                var yValue = document.getElementById(yValueHtml).value;
                
                if(yValue != "")
                {
                    xmlString += '\t' + '\t' +"<vc:DataPoint";   
                    xmlStringToEmbed += '\t' + '\t' + "+\'" + "<vc:DataPoint";   
                    
                    if(axisLabel != "")
                    {
                        xmlString += " AxisLabel=\"" + xmlEncode(axisLabel) + "\"";
                        xmlStringToEmbed += " AxisLabel=\"" + xmlEncode(axisLabel) + "\"";
                    }
                    
                    if(xValue != "")
                    {
                        xmlString += " XValue=\"" + xValue + "\"";
                        xmlStringToEmbed += " XValue=\"" + xValue + "\"";
                    }
                    
                    xmlString += " YValue=\"" + yValue + "\"";
                    xmlStringToEmbed += " YValue=\"" + yValue + "\"";
                    
                    if(renderAs2 == 'Bubble')
                    {
                        var zValueHtml = "Series2ZValue" + i;
                        var zValue = document.getElementById(zValueHtml).value;
                        
                        if(zValue != "")
                        {
                            xmlString += " ZValue=\"" + zValue + "\"";
                            xmlStringToEmbed += " ZValue=\"" + zValue + "\"";
                        }
                    }
                    
                    xmlString += "/>" + '\n';
                    xmlStringToEmbed += "/>" + "\'" + '\n';
                }
            }
            
            xmlString += '\t' +"</vc:DataSeries>" + '\n';
            xmlStringToEmbed += '\t' + "+\'" + "</vc:DataSeries>" + "\'" + '\n';
        }
        
     }
        
    xmlString += "</vc:Chart>";
    xmlStringToEmbed += "\t+\'" + "</vc:Chart>" + "\';";
}

function colorCoder(str)
{
    // Turn < and > into &LT; and &GT; (case matters)
    str = str.replace(/\<([^!])/g, '&LT;$1');
    str = str.replace(/([^-])\>/g, '$1&GT;');
    // Handle attribute="value" - make the attribute red and value blue
    str = str.replace(/([a-zA-Z0-9:]+)\=\"([^"]*)"/g, '<font color="red">$1</font><font color="blue">="$2"</font>');
    // Color tag openers and closers brown                
    str = str.replace(/\&LT\;([a-zA-Z0-9:]+)/g, '&LT;<font color="brown">$1</font>');
    str = str.replace(/\&LT\;\/([a-zA-Z0-9:]+)/g, '&LT;/<font color="brown">$1</font>');
    // Comments are green
    str = str.replace(/\<\!--/g, '<font color="green">&lt;!--');
    str = str.replace(/--\>/g, '--&gt;</font>');
    // The < and > characters are black
    str = str.replace(/\&LT\;/g, '<font color="black">&lt;</font>');
    str = str.replace(/\/\&GT\;/g, '<font color="black">/&gt;</font>');
    str = str.replace(/\&GT\;/g, '<font color="black">&gt;</font>');
    // Turn hard tabs into four spaces
    str = str.replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;');
    str = str.replace(/\n/g, '<br/>');
    return str;
}

function viewXML()
{
    generateXML();
            
    var winName = 'Window1' + Math.ceil((Math.random((new Date).getMilliseconds))*1000).toString();
    var colorCodedXml = colorCoder(xmlString);

    win= window.open('',winName,"scrollbars=yes,resizable=yes,width=1024,height=500,location=no,directories=no,status=no,menubar=no,toolbar=no");

    win.document.body.innerHTML = '<div  style="padding:10px 10px 10px 10px;border:solid 1px gray;border-width:1px 1px 0px 1px;font-family:Lucida Grande,Geneva,Arial,Verdana,sans-serif">'
                            + '<div style="font-size:16px">Instructions:</div>'
                            + '<ol style="font-size:14px">'
                            + '<li>Save the code below in an XML file and name it "Data.xml"</li>'
                            + '<li>Uncheck the "Embed XML" checkbox and click on the "View HTML" button to get the HTML</li>'
                            + '<li>Save the HTML page in the same directory on the server</li>'
                            + '<li>Now you can open the HTML page in any browser to see the chart</li>'
                            + '<ol>'
                            + '</div>';

    win.document.body.innerHTML += '<div  style="border:solid 1px gray;padding:10px 10px 10px 10px;font-family:Courier,Lucida Grande,Geneva,Arial,Verdana,sans-serif;font-size:12px;">' + colorCodedXml + '</div>';

    xmlString = "";
    xmlStringToEmbed = "";
}
	
function trimString(sString)
{
	if(sString == null)
		return '';
		
	while (sString.substring(0,1) == ' ')
	{
		sString = sString.substring(1, sString.length);
	}
	
	while (sString.substring(sString.length-1, sString.length) == ' ')
	{
		sString = sString.substring(0,sString.length-1);
	}
	
	return sString;
}

function formatString4InLineFunction(str)
{		
    var strTemp = trimString(str);
	var strLines = strTemp.split('\n');
	var newString = '';
	
	for(var i = 0; i < strLines.length; i++)
	{
	  strLines[i] = trimString(strLines[i]);
		
		if(strLines[i].substring(0,2) == '//')
		{
			strLines[i] = "/* " + strLines[i].substring(2, strLines[i].length) + "*/";
		}
		
		newString += strLines[i] + " ";
	}

	return newString;
}

function viewHTML()
{
    generateXML();
    
    var embed = document.getElementById('Embed').checked;
    var htmlString = ""; 
	  var htmlString1 = ""; 
	  var htmlString2 = '\n<script language=\"javascript\" type=\"text/javascript\" >'; 
	  var htmlString3 = "";
    
    htmlString1 =  "\n<html xmlns=\"http://www.w3.org/1999/xhtml\">";
    htmlString1 += "\n<head>";
    htmlString1 += "\n\t<title>Visifire Charts</title>";
		
    htmlString3 += "\n</head>";
    htmlString3 += "\n<body>";
    htmlString3 += "\n\t<!-- To embed in existing html copy the code below -->";
    htmlString3 += "\n\t<script type=\"text/javascript\" src=\"Visifire.js\"></script>";
    htmlString3 += "\n\t<div id=\"VisifireChart\">";
    htmlString3 += "\n\t<script language=\"javascript\" type=\"text/javascript\">";
    
    if( embed == true )
    {
    	htmlString3 += "\n\t\tvar chartXmlString = ''" + '\n';
    	htmlString3 += xmlStringToEmbed;
    }
    
    htmlString3 += "\n\t\tvar vChart = new Visifire(\"Visifire.xap\"," + document.getElementById('ChartWidth').value + "," + document.getElementById('ChartHeight').value + ");";
    
    if( embed == true )
    {
        htmlString3 += "\n\t\tvChart.setDataXml(chartXmlString);";
    }
    else
    {
        htmlString3 += "\n\t\tvChart.setDataUri(\"Data.xml\");//xml file name goes in the place of Data.xml"; 
    }
    
    if(windowList["WindowEvents"] != 0)
    {
        for(i=1;i<=5;i++)
        {
            var element = document.getElementById("EventsElement" + i).value;
            var eventName = document.getElementById("EventsEvent" + i).value;
            var callbackFunction = trimString(document.getElementById("EventsCallbackFunction" + i).value);
            if((element!="")&&(eventName!="")&&(callbackFunction!=""))
            {
			    // callbackFunction = formatString4InLineFunction(callbackFunction);
			    if ( callbackFunction.substring(0,8) == "function")
    		    {
        		    callbackFunction = "function on" + element + eventName + callbackFunction.substring(9,callbackFunction.length);
    		    }
    		    
		        htmlString2 +=  '\n' + callbackFunction + '\n';
                htmlString3 += "\n\t\tvChart.attachEvent(\"" + element + "\",\"" + eventName + "\", on" + element + eventName + ");" ;
            }
        }
    }
			
    htmlString3 += "\n\t\tvChart.render(\"VisifireChart\");";
    htmlString3 += "\n\t</script>";
    htmlString3 += "\n\t</div>";
    htmlString3 += "\n\t<!-- Copy till here -->";
    htmlString3 += "\n</body>";
    htmlString3 += "\n</html>";
    
	htmlString = htmlString1 + htmlString2 + "\n</script>" + htmlString3;
    
    var winName = 'Window1' + Math.ceil((Math.random((new Date).getMilliseconds))*1000).toString();
    var colorCodedXml = colorCoder(xmlString);
    
    win = window.open('',winName,'scrollbars=yes,resizable=yes,width=1024,height=500,location=no,directories=no,status=no,menubar=no,toolbar=no');
    
    win.document.body.innerHTML = '<div  style="padding:10px 10px 10px 10px;border:solid 1px gray;border-width:1px 1px 0px 1px;font-family:Lucida Grande,Geneva,Arial,Verdana,sans-serif">'
                            + '<div style="font-size:16px">Instructions:</div>'
                            + '<ol style="font-size:14px">'
                            + '<li>Save the code below in an HTML page</li>'
                            + '<li>Make sure that you have Visifire.xap and Visifire.js is in the same folder.' 
                            + '<br>If required download from <a href="download_silverlight_wpf_controls.php">http://www.visifire.com/download_silverlight_wpf_controls.php</a></li>'
                            + '<li>Now you can open the HTML  page in any browser to see the chart</li>'
                            + '<ol>'
                            + '</div>';
                        

    win.document.body.innerHTML += '<div  style="border:solid 1px gray;padding:10px 10px 10px 10px;font-family:Courier,Lucida Grande,Geneva,Arial,Verdana,sans-serif;font-size:12px;">' + colorCoder(htmlString) + '</div>';
    
    xmlString = "";
    xmlStringToEmbed = "";
}

function onMouseMove(e)
{
	var position;
	position = "Mouse Position: ";
	position += " X  = " + e.MouseX;
	position += " Y = " + e.MouseY ;
    alert(position);
}

function drawChart()
{
    generateXML();
    // divResize();
    var vChart = new Visifire("product/Visifire.xap",document.getElementById('ChartWidth').value,document.getElementById('ChartHeight').value);
    vChart.setDataXml(xmlString);
    
    if(windowList["WindowEvents"]!=0)
    {
        for(i=1;i<=5;i++)
        {
            var element = document.getElementById("EventsElement" + i).value;
            var eventName = document.getElementById("EventsEvent" + i).value;
            var callbackFunction = document.getElementById("EventsCallbackFunction" + i).value;

            if((element != "")&&(eventName != "")&&(callbackFunction != ""))
            {
			    var functionPointer;
			    eval("var functionPointer = " + callbackFunction);
			    vChart.attachEvent(element, eventName, functionPointer);    
            }
        }
        
    }
    
    vChart.render("WindowDraw");
    xmlString = "";
    xmlStringToEmbed = "";
}

function manipulateColumn()
{
    var renderAs1 = document.getElementById('DataSeries1RenderAs').value;
    var renderAs2 = document.getElementById('DataSeries2RenderAs').value;
    
    var obj1 = document.getElementsByName('zvalue1');
    var obj2 = document.getElementsByName('zvalue2');
    
    if(renderAs1 == 'Bubble')
    {
        for(i=0;i<obj1.length;i++)
        {
            obj1[i].style.visibility = "visible";
            obj1[i].style.display = "inline";
        }
    }
    else
    {
        for(i=0;i<obj1.length;i++)
        {
            obj1[i].style.visibility = "hidden";
            obj1[i].style.display = "none";
        }
    }
    
     if(renderAs2 == 'Bubble')
    {
        for(i=0;i<obj2.length;i++)
        {
            obj2[i].style.visibility = "visible";
            obj2[i].style.display = "inline";
        }
    }
    else
    {
        for(i=0;i<obj2.length;i++)
        {
            obj2[i].style.visibility = "hidden";
            obj2[i].style.display = "none";
        }
    }
}

function emptyXValue()
{
    document.getElementById('TrendLineXValue').value = "";
}

function emptyYValue()
{
    document.getElementById('TrendLineYValue').value = "";
}

function changeLabel()
{
	if(document.getElementById('DataSeries1RenderAs').value != "Bubble")
    	{
    		document.getElementById('s1').innerHTML="YValue";
    		document.getElementById('s2').innerHTML="YValue";
    		document.getElementById('s1').colspan="2";
    		document.getElementById('s2').colspan="2";
    		document.getElementById('s1z').innerHTML="";
    	}
    	else
    	{
    	    document.getElementById('s1').colspan="1";
    		document.getElementById('s2').colspan="1";
    		document.getElementById('s1z').innerHTML="ZValue";
    	}
    if(document.getElementById('DataSeries2RenderAs').value != "Bubble")
    	{
    		document.getElementById('s1').innerHTML="YValue";
    		document.getElementById('s2').innerHTML="YValue";
    		document.getElementById('s1').colspan="2";
    		document.getElementById('s2').colspan="2";
    		document.getElementById('s2z').innerHTML="";
    	}
    	else
    	{
    	    document.getElementById('s1').colspan="1";
    		document.getElementById('s2').colspan="1";
    		document.getElementById('s2z').innerHTML="ZValue";
    	}
}

function singleSeries()
{
    if((document.getElementById('DataSeries1RenderAs').value == "Pie")||(document.getElementById('DataSeries1RenderAs').value == "Doughnut"))
    {
        document.getElementById('Series2YValue1').value = "";
    }
}

function isNumeric(sText)
{
    var ValidChars = "-0123456789.";
    var IsNumber=true;
    var Char;

    for (i = 0; i < sText.length && IsNumber == true; i++) 
    { 
        Char = sText.charAt(i); 
        if (ValidChars.indexOf(Char) == -1) 
        {
            IsNumber = false;
        }
    }
    
    return IsNumber;
}

function check(id)
{
    if (!isNumeric(document.getElementById(id).value)) 
    { 
        alert('Please enter only numerals') ;
        document.getElementById(id).focus();
        return false; 
    } 
} 

function xmlEncode(string) 
{
    return string.replace('&','&amp;').replace('<','&lt;').replace('>','&gt;').replace('\'','&apos;').replace('"','&quot;');
}

function clearForm()
{
    var input = document.getElementsByTagName('input');
    var select = document.getElementsByTagName('select');
    
    for(i=0;i<input.length;i++)
    {
        if((input[i].value!="Reset")&&(input[i].value!="Clear"))
            input[i].value = "";
    }
    
    for(i=0;i<select.length;i++)
    {
        select[i].value = "";
    }
    
    changeLabel();
}

function formReset()
{
    document.getElementById("form").reset();
}

function divResize()
{
    if((document.getElementById('ChartWidth').value>500)||(document.getElementById('ChartHeight').value>350))
    {
        var div = document.getElementById('WindowDraw');
        div.style="z-index:97; width:510px; height:310px; overflow:auto;"
       
    }
}