// JavaScript Document

var theTableId = 0;


function setBackground( node , bgColor, color)
{
	if( typeof node == "string" ) node = document.getElementById( node );
	
	//alert( node.parentNode );
	var bg = new background( node.parentNode, bgColor, color );
	bg.appendChild( node );
}


function background( parent, bgColor , color )
{
	var _this = this;
	var outerBgColor = bgColor || "#FFFFFF";
	var color = color || "#EEEEEE";

	this.parent = parent;
	if( typeof parent == "string" ) this.parent = document.getElementById( parent );
	
//	var IMG_LEFT_TOP = "../treeview/img/eLeftTop.png";
//	var IMG_RIGHT_TOP = "../treeview/img/eRightTop.png";
//	var IMG_LEFT_BOTTOM = "../treeview/img/eLeftBottom.png";
//	var IMG_RIGHT_BOTTOM = "../treeview/img/eRightBottom.png";
	
	this.thebody = document.createElement("TABLE");
	this.parent.appendChild( this.thebody );
	this.thebody.width = "100%";
	
	this.thebody.style.borderStyle="none";
	this.thebody.style.borderWidth="0px";
	this.thebody.border = 0;
	this.thebody.cellPadding  = 0;
	this.thebody.cellSpacing = 0;
	if( document.all )
	{
		this.thebody.style.backgroundColor = color;
	}
	this.thebody.style.marginTop = "5px";
	
	
	var tbody = document.createElement("TBODY");
	this.thebody.appendChild( tbody );
	var toptr = tbody.insertRow(-1);
	var topTdLeft = toptr.insertCell( -1 );
	topTdLeft.width="10";
	topTdLeft.height="10";
		topTdLeft.valign="top";
		topTdLeft.align="left";
	if( document.all )
	{
		//IE do nothing		
	}
	else
	{
		topTdLeft.innerHTML = "<canvas id='topTdLeft"+theTableId+"' height='"+topTdLeft.height+"' width='"+topTdLeft.width+"' ></canvas>";
		var context = document.getElementById( "topTdLeft"+theTableId ).getContext("2d");
		
		context.fillStyle = color;
		context.beginPath();
		context.arc(10,10,10,0, Math.PI*2 ,true); // Outer circle
		context.closePath();
		context.fill();
	}
	
	//top td
	toptr.insertCell( -1 ).style.backgroundColor = color;
	
	var topTdRight = toptr.insertCell( -1 );
	topTdRight.width="10";
	topTdRight.height="10";
	topTdRight.valign="top";
	topTdRight.align="right";
	
	if( document.all )
	{
		//IE do nothing
	}
	else
	{

		topTdRight.innerHTML = "<canvas id='topTdRight"+theTableId+"' height='"+topTdLeft.height+"' width='"+topTdLeft.width+"' ></canvas>";
		var context = document.getElementById( "topTdRight"+theTableId ).getContext("2d");
	
		context.fillStyle = color;
		context.beginPath();
		context.arc(0,10,10,0, Math.PI*2 ,true); // Outer circle
		context.closePath();
		context.fill();
	}
	
	
	var midtr = tbody.insertRow(-1);
	midtr.style.backgroundColor = color;
	
	midtr.insertCell( -1 );
	this.midcell = midtr.insertCell( -1 );
	this.midcell.style.verticalAlign = "top";
	
	midtr.insertCell( -1 );

	var bottomtr = tbody.insertRow(-1);
	var bottomTdLeft = bottomtr.insertCell( -1 );
	bottomTdLeft.width="10";
	bottomTdLeft.height="10";
	bottomTdLeft.valign="bottom";
	bottomTdLeft.align="left";

	if( document.all )
	{
		//IE do nothing
	}
	else
	{

		bottomTdLeft.innerHTML = "<canvas id='bottomTdLeft"+theTableId+"' height='"+topTdLeft.height+"' width='"+topTdLeft.width+"' ></canvas>";
		var context = document.getElementById( "bottomTdLeft"+theTableId ).getContext("2d");
	
		context.fillStyle = color;
		context.beginPath();
		context.arc(10,0,10,0, Math.PI*2 ,true); // Outer circle
		context.closePath();
		context.fill();
	}
	
	
	bottomtr.insertCell( -1 ).style.backgroundColor = color;;
	
	var bottomTdright = bottomtr.insertCell( -1 );
	bottomTdright.width="10";
	bottomTdright.height="10";
		bottomTdright.valign="bottom";
		bottomTdright.align="right";
	
	if( document.all )
	{
		//IE do nothing
	}
	else
	{

		bottomTdright.innerHTML = "<canvas id='bottomTdright"+theTableId+"' height='"+topTdLeft.height+"' width='"+topTdLeft.width+"' ></canvas>";
		var context = document.getElementById( "bottomTdright"+theTableId ).getContext("2d");
	
		context.fillStyle = color;
		context.beginPath();
		context.arc(0,0,10,0, Math.PI*2 ,true); // Outer circle
		context.closePath();
		context.fill();
	}	
	
	
	this.appendChild = function( obj )
	{
		this.midcell.appendChild(obj);
		return obj;
	};
	
	this.hide = function()
	{
		_this.thebody.style.display = "none";
		//this.isShow = false;
		return true;
	};
		
	this.show = function()
	{
		_this.thebody.style.display = "";
		//this.isShow = true;
		return true;
	};
	
	this.disable = function( bool )
	{
		
		//_this.thebody.style.display = "";
		//this.isShow = true;
		return true;
	};
	
	
	this.style =  this.thebody.style;
	
	theTableId++;
	
}

/* pre	getNodeData()
			getTop()
			
 	style cotext
*/

function treeitem(  parent,  theItem )
{
	var _this = this;
	var IMG_ARROW = "../img/arrow.png";
	var IMG_ARROW_DOWN = "../img/arrowdown.png";
	
	var title, des, enclosure, pubDate,theLink;
	
	this.isShow = false;
	
	if( theItem )
	{
		
		/*
		 title = getNodeData ( theItem.getElementsByTagName('title').item(0).childNodes );
		 des = getNodeData ( theItem.getElementsByTagName('description').item(0).childNodes );
		 enclosure = theItem.getElementsByTagName('enclosure').item(0);
		 
		 pubDate = theItem.getElementsByTagName('pubDate').item(0); 
		 if( pubDate ) pubDate = pubDate.firstChild.data; else pubDate = "";
		 
		 theLink = theItem.getElementsByTagName('link').item(0);
		 if( theLink ) theLink = theLink.firstChild.data; else theLink = "";
		 
		 */
		 
		 
		 title = getXmlText( theItem ,'title');
		 des = getXmlText( theItem ,'description');
		 enclosure = getXmlText( theItem ,'enclosure');
		 
		 pubDate = getXmlText( theItem ,'pubDate');
		 
		 
		 theLink = getXmlText( theItem ,'link');

	
	}
	
	


	if( typeof parent == "object" ) this.parent = parent;
	else if( typeof parent == "string" )this.parent = document.getElementById( parent );
	
	
	this.thebody = document.createElement("DIV");
	this.parent.appendChild( this.thebody );
	//this.thebody.style.display = "none";

	
	var theImg = document.createElement("IMG");
	this.thebody.appendChild( theImg );
	theImg.src = IMG_ARROW;
	theImg.alt = "&gt;";
	theImg.width = "10";
	theImg.height = "10";
	theImg.style.paddingRight = "4px";

	//var mainDiv = document.createElement("DIV");
	//this.parent.appendChild( this.thebody );

// the title
	this.theTitle = document.createElement("SPAN");
	this.thebody.appendChild( this.theTitle );
	this.theTitle.innerHTML = "<strong>"+title+"</strong>";
	this.theTitle.style.cursor="pointer";
	//this.theTitle.href="javascript:;";
	
	this.theTitle.onclick = function()
	{
		//alert(  getTop( subbody ) + subbody.offsetTop ); 
		if( subbody.style.display == "none" )
		{
			_this.bodyVisiable( true );
			//window.scrollTo( 0 , getTop( _this.parent.thebody ) );
		}
		else
		{
			_this.bodyVisiable( false );
		}
	};
	
	
	
//the title end

	var subbody = document.createElement("DIV");
	this.thebody.appendChild( subbody );
	subbody.style.paddingLeft = "12px";
	subbody.style.display = "none";

// the pub date
		if( pubDate != "" )
		{
			this.thePubDate = document.createElement("DIV");
			subbody.appendChild( this.thePubDate );
			this.thePubDate.className= "cotext";
			this.thePubDate.innerHTML = pubDate;
		}
		
		
		if(  enclosure  )
		{
			//"<div align=\"center\" ><img src='"+ items[i].getElementsByTagName('enclosure').item(0).getAttribute("url") +"' border='0'  /></div>"
			var theDiv = document.createElement("DIV");
			subbody.appendChild( theDiv );
			theDiv.align = "center";
			var type = enclosure.getAttribute("type").toLowerCase();
			
			if(  type == "image/jpeg" || "image/gif"  == type  || type == "image/tiff" )
			{
				this.theEnclosure = document.createElement("IMG");
				theDiv.appendChild( this.theEnclosure );
				this.theEnclosure.src = enclosure.getAttribute("url");
				this.theEnclosure.border = "0";
			}
			else
			{
				this.theEnclosure = document.createElement("A");
				theDiv.appendChild( this.theEnclosure );
				this.theEnclosure.innerHTML = "Download the Document"
				this.theEnclosure.href = enclosure.getAttribute("url");
			}
		}

	
	// the Des
	this.theDes = document.createElement("DIV");
	subbody.appendChild( this.theDes );
	this.theDes.style.paddingTop = "5px";
	this.theDes.style.paddingLeft = "5px";
	this.theDes.style.paddingBottom = "5px";
	this.theDes.innerHTML = des;
	
		
	if(  theLink != "" )
	{
		this.theLinkTag = document.createElement("A");
		subbody.appendChild( this.theLinkTag );
		this.theLinkTag.className = "cotext";
		this.theLinkTag.innerHTML = theLink;
		this.theLinkTag.href = theLink ;
	}

	//METHOD	
	this.bodyVisiable = function( bool )
	{
		if( bool )
		{
			subbody.style.display = "block";
			theImg.src = IMG_ARROW_DOWN;
		}
		else
		{
			subbody.style.display = "none";
			theImg.src = IMG_ARROW;
		}
	};
	

		
	this.hide = function ()
	{
		_this.parent.style.display = "none";
//		_this.parent.style.visibility = "hidden";
		this.isShow = false;
		return true;
	};
		
	this.show = function()
	{
		_this.parent.style.display = "";
		this.isShow = true;
//		_this.parent.style.visibility = "visible"; 
		return true;
	};
}


//----Atom
function treeitemAtom(  parent,  theItem )
{
	var _this = this;
	var IMG_ARROW = "../img/arrow.png";
	var IMG_ARROW_DOWN = "../img/arrowdown.png";
	
	this.isShow = false;
	
	if( typeof parent == "object" ) this.parent = parent;
	else if( typeof parent == "string" )this.parent = document.getElementById( parent );
	
	
	this.thebody = document.createElement("DIV");
	this.parent.appendChild( this.thebody );
	//this.thebody.style.display = "none";

	
	var theImg = document.createElement("IMG");
	this.thebody.appendChild( theImg );
	theImg.src = IMG_ARROW;
	theImg.alt = "&gt;";
	theImg.width = "10";
	theImg.height = "10";
	theImg.style.paddingRight = "4px";

	//var mainDiv = document.createElement("DIV");
	//this.parent.appendChild( this.thebody );

// the title
	this.theTitle = document.createElement("SPAN");
	this.thebody.appendChild( this.theTitle );
	this.theTitle.innerHTML = "<strong>"+theItem.title+"</strong>";
	this.theTitle.style.cursor="pointer";
	//this.theTitle.href="javascript:;";
	
	this.theTitle.onclick = function()
	{
		//alert(  getTop( subbody ) + subbody.offsetTop ); 
		if( subbody.style.display == "none" )
		{
			_this.bodyVisiable( true );
			//window.scrollTo( 0 , getTop( _this.parent.thebody ) );
		}
		else
		{
			_this.bodyVisiable( false );
		}
	};
	
	
	theImg.onclick = function()
	{
		if( subbody.style.display == "none" )
		{
			_this.bodyVisiable( true );
			//window.scrollTo( 0 , getTop( _this.parent.thebody ) );
		}
		else
		{
			_this.bodyVisiable( false );
		}
	};
	
	
//the title end

	var subbody = document.createElement("DIV");
	this.thebody.appendChild( subbody );
	subbody.style.paddingLeft = "12px";
	subbody.style.display = "none";

// the pub date
	this.thePubDate = document.createElement("DIV");
	subbody.appendChild( this.thePubDate );
	this.thePubDate.className= "cotext";
	this.thePubDate.innerHTML = theItem.pubDate;

// the Des
	this.theDes = document.createElement("DIV");
	subbody.appendChild( this.theDes );
	this.theDes.style.padding = "5px";
	this.theDes.innerHTML = theItem.des;
	
		
	if(  theItem.link != "" )
	{
		this.theLinkTag = document.createElement("A");
		subbody.appendChild( this.theLinkTag );
		this.theLinkTag.className = "cotext";
		this.theLinkTag.innerHTML = theItem.link ;
		this.theLinkTag.href = theItem.link ;
	}

	//METHOD	
	this.bodyVisiable = function( bool )
	{
		if( bool )
		{
			subbody.style.display = "block";
			theImg.src = IMG_ARROW_DOWN;
		}
		else
		{
			subbody.style.display = "none";
			theImg.src = IMG_ARROW;
		}
	};
	
		
	this.hide = function ()
	{
		_this.parent.style.display = "none";
//		_this.parent.style.visibility = "hidden";
		this.isShow = false;
		return true;
	};
		
	this.show = function()
	{
		_this.parent.style.display = "";
		this.isShow = true;
//		_this.parent.style.visibility = "visible"; 
		return true;
	};
	
	this.ComparTo = function( obj, comparwith  )
	{
//		if(  obj instanceof treeitemAtom )
//		{
//			if( comparwith == "title" )
//			{
//				if( this.getTitle < obj.getTitle ) return -1;
//				if( this.getTitle == obj.getTitle ) return 0;
//			}
//			else  if( comparwith == "date" )
//			{
//				if( Date.parse( this.getPubDate ) < Date.parse( obj.getPubDate ) ) return -1;
//				if( Date.parse( this.getPubDate ) == Date.parse( obj.getPubDate ) )  return 0;
//			}
//			
//		}
//		
//		return 1;
	};
	
	
	this.getTitle = function()
	{
		return 	title;
	};
	
	this.getPubDate = function()
	{
		return pubDate;
	};
	
}


//----RSS
function treeitemRSS(  parent,  theItem , iseditable, xmlfile )
{
	var _this = this;
	var IMG_ARROW = "../img/arrow.png";
	var IMG_ARROW_DOWN = "../img/arrowdown.png";
	var iseditable = iseditable || false;
	this.isShow = false;
	this.isFoldable = true;
	
	
	if( typeof parent == "object" ) this.parent = parent;
	else if( typeof parent == "string" )this.parent = document.getElementById( parent );
	
	//this.parent.align="left";
	
	this.thebody = document.createElement("DIV");
	this.parent.appendChild( this.thebody );
	this.thebody.align ="left";
	//this.thebody.style.display = "none";
	this.theDes = null;

if( iseditable )
{
	var categoryDIV = this.thebody.appendChild( document.createElement("div") );
	categoryDIV.innerHTML =  "Category: ";
	categoryDIV.style.paddingBottom = "5px";
	var category = categoryDIV.appendChild( document.createElement("span") );
	category.innerHTML = theItem.category;
}
	
	var theImg = document.createElement("IMG");
	this.thebody.appendChild( theImg );
		theImg.src = IMG_ARROW;
		theImg.alt = ">";
		theImg.width = "10";
		theImg.height = "10";
		theImg.style.paddingRight = "4px";
		theImg.style.cursor="pointer";


// the title
	this.theTitle = this.thebody.appendChild( document.createElement("span") );
	this.theTitle.innerHTML = theItem.title;
	//this.theTitle.style.height = "25px";
	
	
	theImg.onclick = function()
	{
		if( _this.isFoldable )
		{
			if( subbody.style.display == "none" )
			{
				_this.bodyVisiable( true );
				//window.scrollTo( 0 , getTop( _this.parent.thebody ) );
			}
			else
			{
				_this.bodyVisiable( false );
			}
		}
	};

	//var subbody = document.createElement("DIV");
	var subbody = document.createElement("TABLE");
	subbody.width = "100%";
	//subbody.border = "1";
	this.thebody.appendChild( subbody );
	var tbody = document.createElement("tbody");
	subbody.appendChild( tbody );
	var theRow = tbody.insertRow(-1);
	
	var leftsubbody = theRow.insertCell(-1);
	leftsubbody.style.verticalAlign = "top";

	this.theDes = theRow.insertCell(-1);
	this.theDes.style.verticalAlign = "top";
	this.theDes.style.align = "left";
	this.theDes.style.padding ="5px";
	this.theDes.innerHTML = theItem.des;
	
	subbody.style.padding = "10px";
	subbody.style.display = "none";

// the Des
/*
	this.theDes = document.createElement("DIV");
	subbody.appendChild( this.theDes );
	this.theDes.style.padding = "5px";
	this.theDes.innerHTML = theItem.des;
*/

		if(  theItem.enclosure  )
		{
			leftsubbody.style.width = "200px";
			//"<div align=\"center\" ><img src='"+ items[i].getElementsByTagName('enclosure').item(0).getAttribute("url") +"' border='0'  /></div>"
			var theDiv = leftsubbody.appendChild( document.createElement("DIV") );
			var type = theItem.enclosure.getAttribute("type").toLowerCase();
			var theEnclosure = null;
			
			if(  type == "image/jpeg" || "image/gif"  == type  || type == "image/tiff" )
			{
				theDiv.align = "center";
				theDiv.style.overflow = "hidden";
				theDiv.style.height = "135px";
				theDiv.style.width = "180px";
				
				theDiv.style.border = "#FFFFFF 1px solid";
				//theDiv.style.padding = "5px";
				
				theEnclosure = theDiv.appendChild( document.createElement("A") );
				theEnclosure.href = theItem.link;
				theEnclosure.innerHTML = "<img class='framedpic' src='"+theItem.enclosure.getAttribute("url")+"' border ='0'  />"
			}
			else
			{
				theEnclosure = document.createElement("A");
				theDiv.appendChild( theEnclosure );
				theEnclosure.innerHTML = "Download the Attachment"
				theEnclosure.href =  theItem.enclosure.getAttribute("url");
			}
		}
		else
		{
			
			
		}
	

	if(  theItem.link != "" && ! document.all )
	{
		var linktheRow = tbody.insertRow(-1);
		var linkcell = linktheRow.insertCell(-1);
		//linktheRow.insertCell(-1);
		linkcell.setAttribute( "colspan","2" )
		
		this.theLinkTag = document.createElement("A");
		linkcell.appendChild( this.theLinkTag );
		this.theLinkTag.className = "cotext";
		this.theLinkTag.innerHTML = theItem.link;
		this.theLinkTag.href = theItem.link;
	}
	
	
	//event
	
	//Des editable 
	if( iseditable ) 
	{
		this.theDes.ondblclick = function()
		{
			//alert(_this.theDes.childNodes[0].tagName);
			if( this.childNodes[0].tagName != "INPUT" && this.childNodes[0].tagName != "TEXTAREA" )
			{
				var editbox = new EditBox( this, true,  "100%", theItem.guid , "description", xmlfile );
			}
		};	
		
		this.theTitle.ondblclick = function()
		{
				if( this.childNodes[0].tagName != "INPUT" && this.childNodes[0].tagName != "TEXTAREA" )
				{
					var ed = new EditBox( this, false,  "100%", theItem.guid , "title" , xmlfile );
				}
		};
		
		
		category.ondblclick = function()
		{
			//alert(  getTop( subbody ) + subbody.offsetTop ); 

				if( this.childNodes[0].tagName != "INPUT" && this.childNodes[0].tagName != "TEXTAREA" )
				{
					var ed = new EditBox( this, false,  "100%", theItem.guid , "category" , xmlfile );
				}
			
		};
		
		
		this.theTitle.onmouseover = function()
		{
			//this.style.backgroundColor = "#DDDDDD";
		};
		
		this.theTitle.onmouseout = function()
		{
			//this.style.backgroundColor = "";
		};
			
	}
	else
	{
		this.theTitle.onclick = theImg.onclick;
		this.theTitle.style.cursor="pointer";
	}
	

	//METHOD	
	this.bodyVisiable = function( bool )
	{
		if( bool )
		{
			subbody.style.display = "";
			theImg.src = IMG_ARROW_DOWN;
		}
		else
		{
			subbody.style.display = "none";
			theImg.src = IMG_ARROW;
		}
		//alert( theImg.src );
	};
	
		
	this.hide = function ()
	{
		_this.parent.style.display = "none";
//		_this.parent.style.visibility = "hidden";
		this.isShow = false;
		return true;
	};
		
	this.show = function()
	{
		_this.parent.style.display = "";
		this.isShow = true;
//		_this.parent.style.visibility = "visible"; 
		return true;
	};
	
	this.ComparTo = function( obj, comparwith  )
	{
//		if(  obj instanceof treeitemAtom )
//		{
//			if( comparwith == "title" )
//			{
//				if( this.getTitle < obj.getTitle ) return -1;
//				if( this.getTitle == obj.getTitle ) return 0;
//			}
//			else  if( comparwith == "date" )
//			{
//				if( Date.parse( this.getPubDate ) < Date.parse( obj.getPubDate ) ) return -1;
//				if( Date.parse( this.getPubDate ) == Date.parse( obj.getPubDate ) )  return 0;
//			}
//			
//		}
//		
//		return 1;
	};
	
	
	this.getTitle = function()
	{
		return title;
	};
	
	this.getPubDate = function()
	{
		return pubDate;
	};
	
}



//class item
function item( title, pubDate, des, link, enclosure, category, guid )
{
	
	this.title = title || "";
	this.pubDate = pubDate || "";
	this.des = des || "";
	this.link = link || "";
	this.enclosure = enclosure || null;
	this.category = category || "";
	this.guid = guid || "";
	
	
	this.comparTo = function( another, str  )
	{
		if( another == null ) return 1;

		if( !(another instanceof item)  ) return 1;
			 
		//alert( obj1 );
	 	var obj1data, obj2data;
		var str = str || "date";
	
		if( "title" == str )
		{
			if( this.title < another.title ) return -1;
			if( this.title == another.title ) return 0;
		}
		else if( "date" ==  str )
		{
			//alert( obj1.pubDate  )
			obj1data = parseInt( takeoutthelet( this.pubDate )  );
			obj2data = parseInt( takeoutthelet( another.pubDate )  );
				
			if( obj1data < obj2data ) return -1;
			if( obj1data == obj2data ) return 0;
		}
			
		return 1;
	};
	
}

function itemRSS( rssItem )
{
	//alert( rssItem.getElementsByTagName('pubDate').item(0).firstChild.data )
	var title = getNodeData ( rssItem.getElementsByTagName('title').item(0).childNodes ).toString().trim();
	var pubDate = rssItem.getElementsByTagName('pubDate').item(0); 
	if( pubDate ) pubDate = pubDate.firstChild.data; else pubDate = "";
	var des =  getNodeData ( rssItem.getElementsByTagName('description').item(0).childNodes );
	var link = ""; 
	if( rssItem.getElementsByTagName('link').item(0) ) link = getNodeData ( rssItem.getElementsByTagName('link').item(0).childNodes );
	var enclosure = rssItem.getElementsByTagName('enclosure').item(0);
	var category =  getNodeData( rssItem.getElementsByTagName('category').item(0).childNodes );
	var guid =  rssItem.getElementsByTagName('guid').item(0).firstChild.data;	
	
	itemRSS.baseConstructor.call( this, title, pubDate, des, link, enclosure, category, guid);
}

Class.extend( itemRSS, item );

//class
function EditBox( data, multiline, height, guid, tag, file )
{
	var _this = this;
	
	var box;
	var parent = data;
	var html = data.innerHTML;
	var height = height || "100%";

	if( multiline )
	{
		box = document.createElement("textarea");
		box.style.width = "100%";
		//box.style.height = (parent.offsetHeight - 30 )+"px";
		box.style.height = "200px";
	}
	else
	{
		box = document.createElement("input");
		box.type = "text";
		box.className = "textbox";
		box.style.width = parent.offsetWidth+"px";
		box.style.height = parent.offsetHeight -2+"px";	
	}
		
		parent.innerHTML = "";
		parent.appendChild( box );
		
		box.style.padding = "0px";
		box.style.margin = "0px";
		box.style.borderStyle = "dashed";
		box.style.fontFamily = "Arial, Helvetica, sans-serif";
		box.style.backgroundColor = "#FFFFFF";
		box.style.fontSize = "11px";
		box.value = html;
		
		//parent.appendChild( document.createElement("span") ).innerHTML ="&nbsp;";
				
		var applybutton = parent.appendChild(document.createElement("a"));
		applybutton.innerHTML ='<img src="../img/yes.png" alt="Yes" border="0" align="absmiddle"  />';
		applybutton.href = "javascript:;";
		applybutton.style.margin = "3px";
		//applybutton.style.position = "relative";
		
		//parent.appendChild( document.createElement("span") ).innerHTML ="&nbsp;";
		
		var cancelbutton = parent.appendChild(document.createElement("a"));
		cancelbutton.innerHTML = '<img src="../img/no.png" alt="No" border="0" align="absmiddle"  />';
		cancelbutton.href = "javascript:;";
		cancelbutton.style.margin = "3px";
		//cancelbutton.style.position = "relative";
		
		//event
		box.onkeypress = function( event )
		{
			var key = "";
			if (window.event)
	   		{
				key = window.event.keyCode;
			}
			else
			{
				key = event.which;
			}
			
			//box.style.width = (getTextWidth( box.value ) +10) +"px";
			if( key == 13 ) 
			{
				
			}
		};
		
		
		cancelbutton.onclick = function( event )
		{
			if (window.event) event = window.event;
			parent.innerHTML = html;
			event.cancelBubble = true;
		};
		
		
		applybutton.onclick = function( event )
		{
			if ( window.event ) event = window.event;
			
			box.disabled = true;
			parent.removeChild(applybutton);
			
			applybutton = document.createElement("span");
			parent.appendChild(applybutton);
			applybutton.style.background = "#CCCCCC";
			applybutton.style.height = "10px";
			applybutton.style.margin = "1px";
			applybutton.style.padding = "1px";
			applybutton.style.border = "1px dashed #FFFFFF";
			applybutton.style.color = "#000000";
			applybutton.innerHTML = '<img src="../img/syc.gif" alt="syc" border="0" align="absmiddle"  />&nbsp;<span class="cotext">Synchronizing...</span>';
			cancelbutton.onclick = function(){};
			cancelbutton.innerHTML = "";

			if( box.value == "" || box.value == html  )
			{
				parent.innerHTML = html;
			}
			else
			{
				var url = "../script/updatexml.php";
				//the file path need to be given 
				var data = "guid="+guid+"&file="+ file +"&tag="+tag+"&data="+ escape( box.value );
				//alert( data );
				_this.sendRequest( url, data  );	
			}

			event.cancelBubble = true;
		};
		
	
		this.sendRequest = function( url , data )
		{ 
			url = url + "?timeStamp=" + new Date().getTime();
			var xmlhttp = httpRequest();//getXMLDoc();
			//alert( data );
			xmlhttp.onreadystatechange = function () 
			{
				if (xmlhttp.readyState == 4)
				{
					if(xmlhttp.status == 200)
					{
						
						var theXML = xmlhttp.responseXML;
						//var msg = theXML.documentElement;
						
						var status = theXML.getElementsByTagName( "status" );
						//alert( status.length );
						
						if( status.item(0) )
						{
							if(  status.item(0).childNodes.item(0).nodeValue == "ok" )
							{
								parent.innerHTML = box.value;
								return true;
							}
							else
							{
								//cancelbutton.onclick();
							}
						}
						
					}
					else if( xmlhttp.status == 404 )
					{
						cancelbutton.onclick();
						alert( "web service is not available." )
					}
				}
			};
	
			xmlhttp.open("POST", url, true );
			xmlhttp.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );
			xmlhttp.send(data);
		};	
		
}