/*
 * filename: wgui.class.js
 * Author: Yu Jia
 * 
 * 
 */



SRC_CLOSE_BLACK = IMG_DIR+"close_black.png";


//class Page Bar
function PageBar( parent , parentNode )
{
	var _this = this;
	//--
	this.thebody = document.createElement("div");
	this.parent = parent;
	var BACKGROUND_COLOR = "#000";
	var COLOR = "#666";
	var TEXT_LAST = ">";
	var TEXT_FIRST = "<";
	var TEXT_SHOW_ALL = "Showing All";
	
	var startPageNum = 1;
	var maxpage = 4;
	var page = 0;
	
	this.rowPerPage = 25;
	this.totalrow = 0;
	this.offset = 0;

	//ini
	parentNode.appendChild( _this.thebody );
	
	this.thebody.className = "cotext";
	//this.thebody.style.backgroundColor = BACKGROUND_COLOR;
	this.thebody.style.padding = "2px";
	this.thebody.align = "center";
	this.thebody.style.height = "12px";
	
	this.addButton = function( num, par )
	{
		var parent = par || _this.thebody;
		var pageButton = parent.appendChild( document.createElement("span") );
		
		pageButton.style.paddingLeft = "5px";
		pageButton.style.paddingRight = pageButton.style.paddingLeft;
		pageButton.style.margin = "2px";
		//pageButton.style.border = "1px "+COLOR+" solid";
		pageButton.style.cursor = "pointer";
		pageButton.innerHTML = num;
		pageButton.style.font= "10px Arial, Helvetica, Geneva, sans-serif";
		pageButton.style.color = COLOR;
		
		return pageButton;
	};
	
	var resetpagenum = function()
	{
		pagenumspan.innerHTML = "";
		
		//alert( _this.rowPerPage +"-"+ _this.totalrow +"-"+ _this.offset  );
		
		for( var j=startPageNum; j <= ( startPageNum + maxpage -1 ); j++ )
		{
			if( j <= pages )
			{
				var button = _this.addButton( j , pagenumspan);
				
				if( _this.offset == ( ( j - 1) * _this.rowPerPage ) ) 
				{
					button.style.color = "#333";
					button.style.whiteSpace = "";
				}
				else
				{
					button.style.color = COLOR;
				}
				
				button.onclick = function( event )
				{
					var tempoffset = ( parseInt( this.innerHTML ) -1 ) * _this.rowPerPage;
					
					if( _this.offset != tempoffset  )
					{
						//_this.parent.offset = tempoffset;
						_this.offset = tempoffset;
						resetpagenum();
						_this.parent.submitForm();
					}
				};
				
				button.onmouseover = function( event )
				{
					this.style.backgroundColor = "#fff";
				}
				
				button.onmouseout = function( event )
				{
					if( _this.offset == ( ( this.innerHTML - 1) * _this.rowPerPage ) ) 
					{
						this.style.backgroundColor = "";
					}
					else
					{
						this.style.backgroundColor = "";
					}
				}
			}
		}
			
	};
	
	var buttonFirst = this.addButton( TEXT_FIRST );
	buttonFirst.onmousedown = buttononmousedown;
	buttonFirst.onmouseup = buttononmouseup;
	
	buttonFirst.onclick = function()
	{
		_this.offset = 0;
		startPageNum = 1;
		resetpagenum();
		_this.parent.submitForm();
	};

	var prveTen = this.addButton( "&lt;" );
	prveTen.onmousedown = buttononmousedown;
	prveTen.onmouseup = buttononmouseup;
	
	prveTen.onclick = function()
	{
		startPageNum = startPageNum - maxpage;
		if( startPageNum <1 ) startPageNum = 1;
		resetpagenum();
	};
	
	var pagenumspan = _this.thebody.appendChild( document.createElement("span") );
	
	var nextTen = this.addButton( "&gt;" );
	nextTen.onmousedown = buttononmousedown;
	nextTen.onmouseup = buttononmouseup;
	
	nextTen.onclick = function()
	{
		startPageNum = startPageNum + maxpage;
		if( startPageNum > pages )
		{
			if( pages % maxpage > 0 ) startPageNum = parseInt( pages / maxpage ) * maxpage + 1;
			else startPageNum = pages / maxpage * maxpage - maxpage+1;
		}
		resetpagenum();	
	};
	
	var buttonLast = this.addButton( TEXT_LAST );
	buttonLast.onmousedown = buttononmousedown;
	buttonLast.onmouseup = buttononmouseup;
	
	buttonLast.onclick = function()
	{
		_this.offset = (pages -1) * _this.rowPerPage;
		if( pages % maxpage > 0 ) startPageNum = parseInt( pages / maxpage ) * maxpage+1;
		else startPageNum = pages / maxpage * maxpage - maxpage+1;
		
		resetpagenum();
		_this.parent.submitForm();
	};
	
	function buttononmousedown()
	{
		//this.style.backgroundColor = COLOR;
		//this.style.color = BACKGROUND_COLOR;
	}
	
	function buttononmouseup()
	{
		//this.style.backgroundColor = BACKGROUND_COLOR;
		//this.style.color = COLOR;
	}
	
	var showButtons = function()
	{
		buttonFirst.style.display = "";
		prveTen.style.display = "";
		nextTen.style.display = "";
		buttonLast.style.display = "";
	};
	
	var hideButtons = function()
	{
		buttonFirst.style.display = "none";
		prveTen.style.display = "none";
		nextTen.style.display = "none";
		buttonLast.style.display = "none";
	};
	
	
	var totalBox = this.thebody.appendChild( document.createElement("span")  );
		totalBox.className = "cotext";
		totalBox.style.color = "#eeeeee";
		
	this.setData = function( thetotalrow, therowPerPage, theoffset )
	{
		_this.totalrow = thetotalrow;
		_this.rowPerPage = therowPerPage;
		_this.offset = theoffset;
		
		if( _this.rowPerPage != "all" )
		{
			if( _this.offset > thetotalrow ) _this.offset = 0;
			
			//alert( _this.totalrow + "%" + _this.rowPerPage + "-"+  _this.totalrow % _this.rowPerPage )

			if( _this.totalrow % _this.rowPerPage > 0) {
				pages = parseInt( _this.totalrow / _this.rowPerPage) + 1;
			}
			else 
			{
				pages = _this.totalrow / _this.rowPerPage;				
			}


			if( startPageNum > pages ) startPageNum = 1;
			
			if( pages > maxpage )
			{
				showButtons();	
			}
			else
			{
				hideButtons();
			}
			resetpagenum();
		}
		else
		{
			pagenumspan.innerHTML = TEXT_SHOW_ALL;
		}
		
		//totalBox.innerHTML = " | Total: "+thetotalrow+" item"+( thetotalrow <=1?"":"s" );
	};
	
	this.show = function()
	{
		this.thebody.style.display = "";
		//this.thebody.style.visibility = "visible";
	};
	
	this.hide = function()
	{
		this.thebody.style.display = "none";
		//this.thebody.style.visibility= "hidden"; 
	};
	
	hideButtons();
}




function dataToItem( data )
{
	var theitem = new item(0);
	
	theitem.guid = getNodeData( data.getElementsByTagName('guid').item(0).childNodes );
	theitem.title = getNodeData( data.getElementsByTagName('title').item(0).childNodes );
	theitem.description = getNodeData( data.getElementsByTagName('description').item(0).childNodes );
	theitem.link = getNodeData( data.getElementsByTagName('link').item(0).childNodes );
	theitem.category = getNodeData( data.getElementsByTagName('category').item(0).childNodes );
	
	var images = data.getElementsByTagName('images').item(0).getElementsByTagName( "image" );
	
	for(var i=0;i<images.length;i++  )
	{
		var img = new Image();
		img.src = images.item(0).childNodes[0].data;
		
		theitem.images[theitem.images.length] = img;
	}
	
	theitem.price = getNodeData( data.getElementsByTagName('price').item(0).childNodes );
	theitem.discountRate = getNodeData( data.getElementsByTagName('discountRate').item(0).childNodes );
	theitem.size = getNodeData( data.getElementsByTagName('size').item(0).childNodes );
	theitem.color = getNodeData( data.getElementsByTagName('color').item(0).childNodes );
	
	return theitem;
}



Array.prototype.remove=function(s){
  for(i=0;i<this .length;i++){
    if(s==this[i]) this.splice(i, 1);
  }
}



//class loadingbar
function LoadingBar( parent ,  parentNode ,RES_DIR )
{
	var _this = this;
	this.thebody = document.createElement("div");
	this.parent = parent;
	
	//ini
	parentNode.appendChild( _this.thebody );
	this.thebody.style.display = "none";
	this.thebody.style.width = "300px";
	this.thebody.style.height = "100px";
	
	this.thebody.style.backgroundImage = "url("+RES_DIR+"inprogress.gif)";
	this.thebody.style.backgroundPosition = "center";
	this.thebody.style.backgroundRepeat = "no-repeat";
	this.thebody.style.position = "absolute";
	
	this.show = function()
	{
		var scrollTop = (document.all)?document.body.scrollTop:window.pageYOffset;
		var top = parseInt( (  document.documentElement.clientHeight - 100 ) / 2 ) + scrollTop;
		var left =  parseInt( ( document.documentElement.clientWidth  - 300 ) / 2 );
				
		//if( height ) this.thebody.style.height = height;	
		_this.thebody.style.top = top + "px";
		_this.thebody.style.left = left + "px";
		_this.thebody.style.display = "";
	};
	
	this.hide = function()
	{
		_this.thebody.style.display = "none";
	};
	
	this.resize = function( height )
	{
		this.thebody.style.height = height; 
	};
	
	
}




var theTableId = 0;

function background( parent, parentNode , parentbgColor , bgColor )
{
	var _this = this;
	
	var PARENT_BACKGROUND_COLOR = parentbgColor || "#FFFFFF";
	var BACKGROUND_COLOR = bgColor || "#EEEEEE";
	
	this.value = "";
	
	theTableId = theTableId+1;

	this.parent = parent;
	if( typeof parent == "string" ) this.parent = document.getElementById( parent );
	
	this.parentNode = parentNode;
	
//	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");
	parentNode.appendChild( this.thebody );
	this.thebody.width = "100%";
	this.thebody.border = 0;
	this.thebody.cellPadding  = 0;
	this.thebody.cellSpacing = 0;
	
	//document.all = true;
	
	if( document.all ) this.thebody.style.backgroundColor = BACKGROUND_COLOR;

	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 = BACKGROUND_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 = BACKGROUND_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 = BACKGROUND_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 = BACKGROUND_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 = BACKGROUND_COLOR;
		context.beginPath();
		context.arc(10,0,10,0, Math.PI*2 ,true); // Outer circle
		context.closePath();
		context.fill();
	}
	
	
	bottomtr.insertCell( -1 ).style.backgroundColor = BACKGROUND_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 = BACKGROUND_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++;
	
}






function backgroundImage( parent, parentNode , className ,  bgColor )
{
	var _this = this;
	
	var BACKGROUND_COLOR = bgColor || "#FFFFFF";
	this.value = "";

	this.parent = parent;
	if( typeof parent == "string" ) this.parent = document.getElementById( parent );
	
	this.parentNode = parentNode;

	this.thebody = document.createElement("TABLE");
	parentNode.appendChild( this.thebody );

	this.thebody.border = 0;
	this.thebody.cellPadding = this.thebody.cellSpacing = 0;
	this.thebody.className = className || "box_ro";	

	var tbody = document.createElement("TBODY");
	this.thebody.appendChild( tbody );
	var toptr = tbody.insertRow(-1);
	
	this.topTdLeft = toptr.insertCell( -1 );
	this.topTdLeft.width="20";
	this.topTdLeft.height="20";
	this.topTdLeft.innerHTML = "<div style='width:20px; height:20px;' ></div>";
	this.topTdLeft.className = "lefttop";
	
	//top td
	var toptd =  toptr.insertCell( -1 );
	toptd.className = "top";
	this.toptd = toptd;
	
	this.topTdRight = toptr.insertCell( -1 );
	this.topTdRight.width="20";
	this.topTdRight.height="20";
	this.topTdRight.innerHTML = "<div style='width:20px; height:20px;' ></div>";
	this.topTdRight.className = "righttop";
	
	var midtr = tbody.insertRow(-1);
	//midtr.style.backgroundColor = BACKGROUND_COLOR;
	
	var leftTd = midtr.insertCell( -1 );
	leftTd.className = "left";
	this.leftTd = leftTd;
	
	//the body 
	this.midcell = midtr.insertCell( -1 );
	this.midcell.style.backgroundColor = BACKGROUND_COLOR;
	
	var rightTd = midtr.insertCell( -1 );
	rightTd.className = "right";
	this.rightTd = rightTd;

	var bottomtr = tbody.insertRow(-1);
	var bottomTdLeft = bottomtr.insertCell( -1 );
	bottomTdLeft.width="20";
	bottomTdLeft.height="20";
	bottomTdLeft.innerHTML = "<div style='width:20px; height:20px;' ></div>";
	bottomTdLeft.className = "leftbottom";
	this.bottomTdLeft = bottomTdLeft;
	
	var bottomTd =  bottomtr.insertCell( -1 );
	bottomTd.className = "bottom";
	this.bottomTd = bottomTd;
	
	var bottomTdright = bottomtr.insertCell( -1 );
	bottomTdright.width="20";
	bottomTdright.height="20";
	bottomTdright.innerHTML = "<div style='width:20px; height:20px;' ></div>";
	bottomTdright.className = "rightbottom";

	this.bottomTdright = bottomTdright;
	
	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++;
	
}





//class FilterBar
function FilterBar( parent , parentNode , name , value , dir )
{
	
	var _this = this;
	this.parent = parent;
	var table = parentNode.appendChild( document.createElement("table") );
	table.className = "filterbar";
	table.border = 0;
	table.cellPadding = table.cellSpacing =  0;
	
	this.tbody = table.appendChild( document.createElement("tbody") );
	this.thebody = this.tbody.appendChild( document.createElement("tr") );

	this.parentNode = parentNode;

	//this.name = name;
	this.value = value;

	
	this.sort = 0;
	
	this.dir = dir;
	
	var buttons = new Array();
	var selectedButton = null;
	var BACKGROUND_COLOR = "#FFFFFF";	


	this.isshow = 0;

	this.title = null;

	_this.title = this.thebody.appendChild( document.createElement("td") );
	if( dir == "v" )
	{
		_this.title.colSpan = 3;
	}
	else
	{
		//this.thebody.style.display = "table-cell";
	}
	
	_this.title.className = "filtername";
	_this.title.innerHTML = name;


	this.dragdrop = new DragDrop( _this, false ,true );

	var dropIndex  = null;
	var onItemIndex = null;
	var moveDirY = 0;
	var moveDirX = 0;
	
	this.dragdrop.mouseMoveCallBack = function( x, y,event , dargbox )
	{
		if( !_this.dragdrop.draggingThebody ) return false;

		var draggingItemTop = dargbox.table.offsetTop + _this.dragdrop.scrollNode.scrollTop;
		var draggingItemHeight = draggingItemTop + dargbox.table.offsetHeight;
		
		if( _this.dir == "v" )
		{
			var from = ( onItemIndex != null && onItemIndex - 2 >= 0)?onItemIndex - 2:0;
			var to = ( onItemIndex != null && onItemIndex + 2 <= buttons.length )?onItemIndex + 2:buttons.length;

			for( var i=from;i<to;i++ )
			{
				if( _this.dragdrop.draggingThebody != buttons[i].thebody )
				{
					var thetop = getTop( buttons[i].thebody );
					var theHeight = thetop + buttons[i].thebody.offsetHeight;
					
					if( ( draggingItemTop >= thetop+2 && draggingItemTop <= theHeight-2 ) ||
					( draggingItemHeight >= thetop+2 && draggingItemHeight <= theHeight-2 ) )
					{
						
						if( moveDirY <= y )
						{
							//if the prevs one is not the dragging one. 如果是从上面来的
							if( buttons[i].thebody == _this.dragdrop.draggingThebody.nextSibling )
							{
								buttons[i].thebody.parentNode.insertBefore( buttons[i].thebody , _this.dragdrop.draggingThebody );
								
								//如果经过第一个
								if( _this.dragdrop.draggingObjIndex > i ) dropIndex = i+1; else dropIndex = i;
								
								//title.innerHTML = _this.dragdrop.draggingObjIndex +":"+dropIndex+" ";
								return true;
							}	
						}
						else if( moveDirY > y  )
						{
							//如果 拖动的物件是从下面来的,
							if( _this.dragdrop.draggingThebody == buttons[i].thebody.nextSibling )
							{
								buttons[i].thebody.parentNode.insertBefore( _this.dragdrop.draggingThebody , buttons[i].thebody );
								
								//到底回来
								if( _this.dragdrop.draggingObjIndex < i ) dropIndex =  i-1; else dropIndex = i;
								
								//title.innerHTML = _this.dragdrop.draggingObjIndex +":"+dropIndex+" ";
								return true;
							}
						}
						
						//getting the cerrent item that is on.
						onItemIndex = i;
					}
				}
				else if( _this.dragdrop.draggingObjIndex == null )
				{
					_this.dragdrop.draggingObjIndex = i;
					return true;
				}
				
			}
		}
		else
		{
			//dir = "h";
		}
		moveDirY = y;
	};
	
	
	this.dragdrop.mouseUpCallBack = function( event )
	{
		//title.innerHTML = _this.dragdrop.draggingObjIndex +":"+dropIndex+" ";
		//在 up 动作后整理最可靠
		if( _this.dragdrop.draggingObjIndex != dropIndex )
		{
			
			if( _this.dragdrop.draggingObjIndex < dropIndex  )	
			{
				for(var i= _this.dragdrop.draggingObjIndex; i< dropIndex;i++  )
				{
					var temp = buttons[i];
					buttons[i] = buttons[ i+1 ];
					buttons[ i+1 ] = temp;	
				}
			}
			else
			{
				for(var i= _this.dragdrop.draggingObjIndex; i > dropIndex ;i--  )
				{
					var temp = buttons[i];
					buttons[i] = buttons[ i-1 ];
					buttons[ i-1 ] = temp;	
				}
			}
			
			//title.innerHTML = _this.dragdrop.draggingObjIndex +":"+dropIndex+" ";
			_this.onButtonOrderChange( buttons ,  _this.dragdrop.draggingObjIndex , dropIndex );
		}
		onItemIndex = null;
			
	};

this.sortButtons = function( sortingkey, from, to )
	{
		//title.innerHTML = ":"+from+":"+to;
		
		var to = ( to >0 )?to:0;
		
		if( from > to  )
		{
			var temp = from;
			from = to;
			to = temp;
		} 
		//var thebodys = buttons[0].thebody.parentNode.getElementsByTagName( "TR" );
		
		if("sort" == sortingkey)
		{
			_this.sorting();
			//buttons[i].thebody.parentNode.insertBefore( buttons[i], buttons[i].thebody );
		}
		else if( "index" == sortingkey  )
		{
			for(var i= from;i<=to; i++ )
			{
				buttons[i].sort = i;
			}
		}
		
		/*
		for(var i=0;i<buttons.length;i++  )
		{
			title.innerHTML += ":"+buttons[i].sort;
		}
		* */
	};

	this.sorting = function( )
	{	  
		var x, y, holder;
	
		if( buttons.length >0 )
		{
		  // The Bubble Sort method.
		  for(x = 0; x < buttons.length; x++) {
			for(y = 0; y < (buttons.length-1); y++) {
			  if(  buttons[y].sort > buttons[y+1].sort ) 
			  {
				holder = buttons[y+1];
				buttons[y+1] = buttons[y];
				buttons[y] = holder;
			  }
			}
		  }
		}
	}


	//event
	this.onButtonOrderChange = function( buttons, indexFrom, indexTo ){};





	
	this.getButtonSelected = function()
	{
		return selectedButton;
	};
	
	this.addButton = function( html, value , click, editable, atl , isDragable )
	{
		var sort = buttons.length >0 ? buttons[ buttons.length -1 ].sort +1 : 0;
		
		var button = new FilterButton( this, html , value , click, _this.dir , editable ,atl );
		buttons[buttons.length] = button;
		button.sort = sort;
		
		if( dir == "v" )
		{
			if( isDragable ) _this.dragdrop.addDraggableItem( button );
		}
		
		
		return button;
	};
	
	this.removeButtonByValue = function( value )
	{
		for(var i = 0; i<buttons.length;i++  )
		{
			if( value == buttons[i].value )
			{
				if( selectedButton == buttons[i] ) selectedButton = null;
				buttons[i].remove();
				buttons.remove( buttons[i] );
				var n = 0;
				
				for(var j=0; j< buttons.length ; j++)
				{
					buttons[j].sort = n;
					n++;
				}
				return true;
			}	
		}
		return false;
	};
	
	
	this.removeButton = function( button )
	{
		if( selectedButton == button ) selectedButton = null;

		for(var i = 0; i<buttons.length;i++  )
		{
			if( button == buttons[i] )
			{
				buttons[i].remove();
				buttons.remove( buttons[i] );
				
				var n = 0;
				
				for(var j=0; j< buttons.length ; j++)
				{
					buttons[j].sort = n;
					n++;
				}
				
				return true;
			}	
		}
		return false;
	};
	
	this.addSepBar = function()
	{
		if( dir == "v" )
		{
			var row = this.tbody.appendChild ( document.createElement("tr") );
			var bar = row.appendChild( document.createElement("td") );
			bar.style.backgroundColor ="#ccc";
			bar.innerHTML ="<div style='height:2px;'></div>";
			bar.style.height ="2px";
			bar.colSpan = 3;

		}
		else
		{	
			var bar = this.thebody.appendChild( document.createElement("td") );
			bar.innerHTML = "|";
			bar.style.color = "#666"
			bar.style.paddingLeft = "2px";
			bar.style.paddingRight = "2px";
		}
		
	};
	
	this.addSpace = function()
	{
		if( dir == "v" )
		{
			var row = this.parent.tbody.appendChild ( document.createElement("tr") );
			var bar = row.appendChild( document.createElement("td") );
			bar.style.paddingTop = "4px";
		}
		else
		{	
			var bar = this.thebody.appendChild( document.createElement("td") );
			bar.style.paddingLeft = "4px";
		}
		
	};
	
	
	this.buttonSelected = function( button )
	{
		if( selectedButton != null ) selectedButton.selected( false );
		this.value = button.value;
		
		selectedButton = button;
		selectedButton.selected( true );
		
		return button;
	};
	
	this.unSelected = function()
	{
		if( selectedButton != null ) selectedButton.selected( false );
		this.value = null;
		
		selectedButton = null;
	};
	
	this.show = function()
	{
		//holder.style.display = "";
		_this.thebody.style.visibility = "visible";
	};
	
	this.hide = function()
	{
		//holder.style.display = "none";
		_this.thebody.style.visibility= "hidden"; 
	};
	
	this.getButtons = function()
	{
		return buttons;
	};
	
	this.getButtonByValue = function( value )
	{
		if( value == this.value && selectedButton != null )
		{
			return selectedButton;			
		}
		else
		{	
			for(var i=0;i< buttons.length; i++  )
			{
				if( buttons[i].value == value ) return buttons[i];
			}
		}
		
		return false;
	};
	
	
	this.buttonSelectedByValue = function( value )
	{
		for(var i = 0; i<buttons.length;i++  )
		{
			if( value == buttons[i].value )
			{
				this.buttonSelected( buttons[i] );
				return true;
			}	
		}
		return false;
	};
	
	this.buttonSelectedByIndex = function( value )
	{
		if( value == -1 )
		{
			//var button =  _this.buttonSelected( buttons[buttons.length - 1] );
			if(buttons[buttons.length - 1] )
			{
				buttons[buttons.length - 1].select();
				
			}
			
			return true;
		}
		else( value > 0 && value < buttons.length )
		{
			if( buttons[value] ) buttons[value].select();
			
			return true;
		}

		return false;
		
	};
	
	
	
	
}



//class FilterButton
function FilterButton( parent, thehtml, thevalue, click , dir, editable ,atl )
{
	var _this = this;
	//var html = thehtml;
	this.value = thevalue;
	this.sort;
	this.parent = parent;
	this.isSelected = false;
	
	this.data = null;
	
	this.offsetX;
	this.offsetY;
	
	this.thebody;
	
	if( dir == "v" )
	{
		this.thebody = this.parent.tbody.appendChild ( document.createElement("tr") );
	}
	else
	{
		this.thebody = this.parent.thebody;
	}
	
	//alert( this.thebody.tagName );
	var leftCell = this.thebody.appendChild ( document.createElement("td") );
		leftCell.className = "filterbuttonleftCell";
		leftCell.innerHTML = "<div style='width:8px;'></div>";
			
	var centerCell = this.thebody.appendChild ( document.createElement("td") );
		centerCell.className = "filterbuttoncenterCell";
	var rightCell = this.thebody.appendChild ( document.createElement("td") );
		rightCell.className = "filterbuttonrightCell";

	
	var BACKGROUND_COLOR = "#666666";
	var COLOR = "#555555";
	var COLOR_SELECTED = "#FFFFFF";
	
	this.editable =  editable || false;
	
	//ini

	centerCell.innerHTML = thehtml;
	centerCell.title = atl || thehtml;
	rightCell.innerHTML = "<div style='width:8px;'></div>";
	
	
	this.select = function( bool )
	{	
		var thebool = bool==null?true:false;
		
		_this.parent.buttonSelected( _this );
		_this.parent.value = _this.value;
		if( (click != null) && thebool ) click( _this );
	};
	
	function onclick( event )
	{
		_this.select();
	}
	
	
	leftCell.onclick = onclick;
	centerCell.onclick = onclick;
	
	this.editableMethod = function( text ){};
	this.rightcell = rightCell;
		
	var onover = function(event)
	{

		
		if( _this.isSelected )
		{
			//
		}
		else
		{
			leftCell.className = "filterbuttonOverleftCell";
			centerCell.className = "filterbuttonOvercenterCell";
			rightCell.className = "filterbuttonOverrightCell";
		}
		
		//rightCell.style.backgroundColor = rightCell.parentNode.style.backgroundColor;
		//leftCell.style.backgroundColor = leftCell.parentNode.style.backgroundColor;
		
		//setOpacity( rightCell , 50 );
		//setOpacity( leftCell , 50 );
		
		
	};
	leftCell.onmouseover = centerCell.onmouseover = rightCell.onmouseover = onover;
	
	var onout = function(event)
	{

		
		if( _this.isSelected )
		{
			leftCell.className = "filterbuttonSelectedleftCell";
			centerCell.className = "filterbuttonSelectedcenterCell";
			rightCell.className = "filterbuttonSelectedrightCell";
		}
		else
		{
			leftCell.className = "filterbuttonleftCell";
			centerCell.className = "filterbuttoncenterCell";
			rightCell.className = "filterbuttonrightCell";
		}
	};
	
	leftCell.onmouseout = centerCell.onmouseout = rightCell.onmouseout  = onout;
	
	
	this.selected = function( bool )
	{
		this.isSelected = bool;
		if( bool )
		{
			leftCell.className = "filterbuttonSelectedleftCell";
			centerCell.className = "filterbuttonSelectedcenterCell";
			rightCell.className = "filterbuttonSelectedrightCell";
		}
		else
		{
			leftCell.className = "filterbuttonleftCell";
			centerCell.className = "filterbuttoncenterCell";
			rightCell.className = "filterbuttonrightCell";
		}
	};
	
	
	this.inEditMode = function( callbackMethod  )
	{

		if( editable && centerCell.firstChild.tagName != "INPUT" )
		{
			
			centerCell.innerHTML = "";
			
			var textbox = document.createElement("input");
				textbox.type = "text";
				centerCell.appendChild( textbox );
				textbox.style.border = "0px";
				textbox.value = centerCell.title;
				textbox.style.width = "100%";
				textbox.select();
				textbox.style.fontSize = "10px";
				
				
				textbox.onclick = function( event )
				{
					if ( window.event ) event = window.event;
					event.cancelBubble = true;
					
				}
				
				var change = function( obj )
				{
					//alert( obj.value );
					
					if( obj.value == "" || centerCell.title == obj.value )
					{
						centerCell.innerHTML = centerCell.title;			
					}
					else
					{
						callbackMethod( _this,  obj.value );
						centerCell.innerHTML = obj.value;
					}
				};
				
				
				textbox.onblur = function()
				{
					change( this );	
				};
				
				//may call the server twac
				textbox.onkeyup = function( event )
				{
					if ( window.event ) event = window.event;
					var key = event.charCode || event.keyCode;
					
					if( key == 13 ) 
					{
						//change( this );
					}
				}
		}
		
	};
	

	this.innerHTML = function( html )
	{
		if( html ) centerCell.innerHTML = html;
		
		return centerCell.innerHTML ;
	};
	
	this.restore = function()
	{
		centerCell.innerHTML = centerCell.title;
	};
	
	this.commit = function()
	{
		centerCell.title = centerCell.innerHTML;
	};
	
	this.remove = function()
	{
		if( dir == "v" )
		{
			this.parent.tbody.removeChild( this.thebody );
		}
		else
		{
			this.thebody.removeChild( centerCell );
			this.thebody.removeChild( leftCell );
			this.thebody.removeChild( rightCell );
		}
	};
	
	
	this.getCenterCell = function()
	{
		return centerCell;
	}
	
}


  
 //class
function WindowFrame( parent )
{
	var _this = this;
	var tempOverflow = document.body.style.overflow;
	var maxW = document.documentElement.scrollWidth;
	var maxH = document.documentElement.scrollHeight;
	//safar can get the whole height with document.height or document.documentElement.offsetHeight
	var iframeEl = document.createElement("IFRAME");
	this.thebody = document.createElement( "div" );
	var offsetx = -1;
	var offsety = -1;
	//渐变显示
	this.fromY = 0;
	this.fromX = 0;
	this.toX = 0;
	this.toY = 0;
	this.width = 0;
	this.height = 0;

	this.isMax = false;


	var BgMax = 60;	
	
	this.topFrame = document.createElement("div");
	document.body.appendChild( this.topFrame );	
	this.topFrame.style.display = "none";
	this.topFrame.style.position = "absolute";
	if( !document.all  ) setOpacity( this.topFrame, 0 );
	
	iframeEl.frameBorder = 0;
	iframeEl = this.topFrame.parentNode.insertBefore( iframeEl, this.topFrame );
	iframeEl.src = "about:blank";

	iframeEl.style.top  = "0px";
	iframeEl.style.left = "0px";
	iframeEl.style.width  = "100%";
	iframeEl.style.height = maxH +"px";
	iframeEl.style.display = "none";
	iframeEl.style.backgroundColor = "#000000";	
	iframeEl.style.position = "absolute";
	setOpacity( iframeEl, ( BgMax ) );
		
	this.closeButton = document.createElement("img");
	this.topFrame.appendChild( this.closeButton );
	this.closeButton.src= IMG_DIR+"close_black.png";
	this.closeButton.style.cursor = "pointer";
	this.closeButton.border = 0;
	this.closeButton.style.position = "relative";
	this.closeButton.style.left = "0px";
	this.closeButton.style.top = "0px";
	this.closeButton.style.zIndex = 2;
	
	//the background
	this.background = new backgroundImage( _this, this.topFrame );
	this.background.thebody.style.height = "100%";
	this.background.midcell.style.verticalAlign = "top";
	this.background.thebody.style.zIndex = 0;
	this.background.thebody.style.position = "relative";
	this.background.style.left = "5px";
	this.background.style.top = "-25px";

	//the table
	var table = this.background.appendChild( document.createElement("table") );
	//table.style.width = "100%";
	table.border = 0;
	table.cellPadding = table.cellSpacing ="0";
	
	var tbody = table.appendChild( document.createElement("tbody") ); 
	var toprow = tbody.appendChild( document.createElement("tr") );
	
	this.closeButtonOnclick = function( event ,obj )
	{
		return true;
	}
	
	this.closeButton.onclick = function( event )
	{
		if( _this.closeButtonOnclick( event, _this ) )
		{
			_this.hide();
		}
	};
	
	this.title = toprow.appendChild( document.createElement("td") );
	this.title.innerHTML = "";
	this.title.align = "center";
	this.title.style.height = "30px";
	
	var midrow = tbody.appendChild( document.createElement("tr") );
	var midcell = midrow.appendChild( document.createElement("td") );
		midcell.colSpan = 2;	
	this.thebody = midcell.appendChild( document.createElement("div") );
	
	//if( document.all ) iframeEl.allowTransparency = true;

	//method
	this.setSize = function( width , height )
	{
		this.height = height;
		this.width = width;
		this.thebody.style.width = width + "px";
		this.thebody.style.height = height + "px";
	};

	this.show = function( fromX, fromY, toX , toY , notrans )
	{
		//_this.topFrame.style.overflow = "hidden";
		//_this.topFrame.style.width = _this.topFrame.style.height = "0px";
			
		var scrollTop = (document.all)?document.body.scrollTop:window.pageYOffset;
		
		this.toY = toY || parseInt( (  document.documentElement.clientHeight - this.height ) / 2 ) + scrollTop - 40;
		if( this.toY <= 0 ) this.toY = 5;
		this.toX = toX || parseInt( ( document.documentElement.clientWidth  - this.width ) / 2 );
		if( this.toX <= 0 ) this.toX = 5;
		
		this.fromX = fromX || this.toX;
		this.fromY = fromY || this.toY;
		
		
		_this.topFrame.style.top = _this.toY + "px";
		_this.topFrame.style.left = _this.toX + "px";
		_this.topFrame.style.width = _this.width +"px";
		_this.topFrame.style.height = _this.height +"px";
		
		iframeEl.style.display = "";
		_this.topFrame.style.display = "";
		
			if( document.all )
			{
					//_this.topFrame.style.overflow = "";
					
					//setOpacity( _this.topFrame , 100 );
					//setOpacity( iframeEl, ( BgMax )  );
			}
			else
			{
				if( _this.isMax)
				{
					setOpacity( _this.topFrame , 100 );
				}
				else
				{
					//渐变线程
					var showing = new transform( 
					function( intv ){
		
						var rate = intv / 100;
						
						/*
						if( !notrans )
						{
							var lenY = _this.fromY - _this.toY;
							var lenX = _this.fromX - _this.toX;
							
							//50-80 之间走过30 然后用 intv/100 来按照比例走
									
				 			_this.topFrame.style.top = parseInt ( _this.fromY - ( lenY * rate) )+ "px";
							_this.topFrame.style.left = parseInt ( _this.fromX - ( lenX * rate) )+ "px";
							
							_this.topFrame.style.width = parseInt ( _this.width * rate ) +"px";
							_this.topFrame.style.height = parseInt ( _this.height * rate ) +"px";
						}
						*/
						//alert( intv );
						setOpacity( _this.topFrame , intv );
						//setOpacity( iframeEl, (rate * BgMax)  );
						showing.sce = showing.sce - intv;
						
					} , 
					function(){
						
						//_this.topFrame.style.overflow = "";
						setOpacity( _this.topFrame , 100 );
						//setOpacity( iframeEl, ( BgMax )  );
							
					} , 15,  80 );
					showing.run();
				}
				
			}
		
	};
	

	this.hide = function()
	{
		
		RemoveEventListener( window, "resize", _this.resize );
		
		//_this.topFrame.style.overflow = "hidden";
		if( true )
		{
			_this.topFrame.style.display = "none";
			iframeEl.style.display = "none";
			
			//_this.topFrame.parentNode.removeChild( _this.topFrame  );
			//_this.iframeEl.parentNode.removeChild( iframeEl  );
			
		}
		else
		{
			var hiding = new transform( 
			function( intv ){
				intv = 100 - intv;
				var rate =  intv / 100;
				
				/*
				 //sucking
				_this.topFrame.style.width = ( _this.width = parseInt( _this.width * rate ) )+"px";
				_this.topFrame.style.height = ( _this.height = parseInt( _this.height * rate ))+"px";
				*/
				
				setOpacity( _this.topFrame , rate * 100 );
				//_this.title.innerHTML += (rate * BgMax)+ "-";
				setOpacity( iframeEl, (rate * BgMax) > BgMax?BgMax:(rate * BgMax) );
				hiding.sce = hiding.sce - intv;
			} , 
			function(){
				
				_this.topFrame.style.display = "none";
				iframeEl.style.display = "none";
				document.body.removeChild( _this.topFrame );
				document.body.removeChild( iframeEl );
				
			} , 40,  80 )
			
			//hiding.run();
		}
		
	};
	
	this.onResize = function(  h ,  w ){};
	
	this.setMax = function( bool )
	{
		this.isMax = bool;
		
		if( bool )
		{

			_this.height = document.documentElement.clientHeight - 40;
			_this.width  = document.documentElement.clientWidth  - 40;
			
			//_this.topFrame.style.height = _this.height  + "px";
			//_this.topFrame.style.width =  _this.width  + "px";
			
			//_this.thebody.style.width = _this.width + "px";
			//_this.thebody.style.height = _this.height + "px";
			
			_this.background.thebody.style.height =  _this.height + "px";
			_this.background.thebody.style.width =  _this.width + "px";
			//_this.title.innerHTML = _this.background.thebody.style.height;
			
			_this.onResize( _this.height ,  _this.width );
		}
	};
	
	
	
	this.resize = function()
	{
		iframeEl.style.width = document.documentElement.clientWidth + "px";
		iframeEl.style.height = document.documentElement.clientHeight + "px";
		
		var scrollTop = (document.all)?document.body.scrollTop:window.pageYOffset;
		
		if( _this.isMax )
		{
			_this.setMax( true );
		}
		
		var  top =  parseInt( ( document.documentElement.clientHeight - _this.height ) / 2 ) + scrollTop - 40 ;
		if( top <0  ) top = 5;
		_this.topFrame.style.top = top + "px";
		var left = parseInt ( parseInt( ( document.documentElement.clientWidth  - _this.width ) / 2 )  );
		if( left < 0 ) left = 5;
		_this.topFrame.style.left = left+ "px";
		
		_this.onResize( _this.height ,  _this.width );
	};
	
	
	AddEventListener( window, "resize",  _this.resize );
	
	
	this.vibrate = function()
	{
	//震动
		var left = _this.topFrame.offsetLeft;
		var offset = -5;
	
		var showing = new transform( 
		function( intv ){
			_this.topFrame.style.left = ( left + offset ) +"px";
			if( offset == -5 ) offset = 5; else offset = -5;
		} , 
		function(){
			_this.topFrame.style.left = left +"px";	
		} , 40,  40 );
		
		showing.run();
	}
	
}
 

function imgButton( parent, parentNode, src , title, onclick )
{
	var _this = this;
	this.isDisabled = false;
	
	this.value= "";
	
	this.parent  = parent;
	this.thebody = document.createElement("img");
	parentNode.appendChild( this.thebody );
	
		this.thebody.onload = function( event )
		{
			var file = new File( src );

			if( document.all && file.ext == ".png" )
			{
				/*
				var strNewHTML = "<span "
		         + " style=\" display:inline-block; " + "width:" + this.width + "px; height:" + this.height + "px;"
		         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
		         + "(src=\'" + this.src + "\', sizingMethod='scale');\"></span>";
		         */
		         
		        //this.outerHTML = strNewHTML;
				var span = document.createElement("span");
					span.style.display = "inline-block";	
					span.style.width = this.width + "px";
					span.style.height = this.height + "px";
					span.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='scale')";
				
				parentNode.removeChild( this );
				
				parentNode.appendChild( span );
				
				_this.thebody = span;
				
				_this.thebody.alt = title;		
				_this.thebody.title = title;
				_this.thebody.style.cursor = "pointer";
		
				
				_this.thebody.onclick = function( event )
				{
					if( window.event ) event = window.event;
					event.cancelBubble = true;
					
					if( !_this.isDisabled && onclick ) onclick( event, _this );
				}
				
				
				
			}
		}
		
		
		this.thebody.src = src;

		this.thebody.alt = title;
		this.thebody.title = title;
		this.thebody.style.cursor = "pointer";

		
		this.thebody.onclick = function( event )
		{
			if( window.event ) event = window.event;
			event.cancelBubble = true;
			
			if( !_this.isDisabled && onclick ) onclick( event, _this );
		}
		
		
		
	this.setDisplay = function( bool )
	{
		if( bool )
		{
			this.thebody.style.display = "";
		}
		else
		{
			this.thebody.style.display = "none";
		}
	};
	
	this.disabled = function( bool )
	{
		_this.isDisabled = bool;
		if( bool )
		{
			if( document.all )
			{
				_this.thebody.style.visibility = "hidden";
			}
			else
			{
				setOpacity( _this.thebody, 50 );
			}

			_this.thebody.style.cursor = "";
			
		}
		else
		{
			if( document.all )
			{	
				_this.thebody.style.visibility = "visible";
			}
			else
			{
				setOpacity( _this.thebody, 100 );
			}
			_this.thebody.style.cursor = "pointer";
		
		}
		
	}
	
	this.remove = function()
	{
		parentNode.removeChild( _this.thebody );
		
	}
		
}


function imgUploder( parent, parentNode, table, id, cell, pic  , servercgi , thewidth  )
{
	var _this = this;

	this.parent  = parent;
	this.thebody = document.createElement("DIV");
	parentNode.appendChild( this.thebody );
	this.SERVER_PAGE = servercgi || "imgUploader.php";
	var timestamp = new Date().getTime();
	
	this.theIframe = document.createElement("IFRAME");
	//this.theIframe.className = "textbox";
	this.theIframe.name = timestamp +"iframe";
	this.theIframe.id = timestamp +"iframe";
	this.theIframe.src = this.SERVER_PAGE+"?cell="+cell+"&itemid="+id+"&table="+table+"&width="+thewidth;
	this.theIframe.style.border = "1px #eee solid";
	if( document.all ) this.theIframe.frameBorder = 0;
	//this.theIframe.style.height = "200px";
		
	this.thebody.appendChild( this.theIframe );
	
	this.pic = pic;
	
	var theForm = document.createElement("form");
		this.thebody.appendChild( theForm );	
		theForm.method = "POST"; 
		theForm.id = "fileform";
		theForm.name = "fileform";
		theForm.action = this.SERVER_PAGE;
		theForm.target = this.theIframe.name;  
		theForm.enctype= "multipart/form-data";
		//theForm.style.display = "none";
		
	var textItemid = document.createElement( "input" );
		textItemid.type = "hidden";
		textItemid.id= "itemid";
		textItemid.name= "itemid";
		theForm.appendChild( textItemid );
		textItemid.value = id;
		
	var textTable = document.createElement( "input" );
		textTable.type = "hidden";
		textTable.id= "table";
		textTable.name= "table";
		theForm.appendChild( textTable );
		textTable.value = table;
		
	var textCell = document.createElement( "input" );
		textCell.type = "hidden";
		textCell.id= "cell";
		textCell.name= "cell";
		theForm.appendChild( textCell );
		textCell.value = cell;
		
	var textCell = document.createElement( "input" );
		textCell.type = "hidden";
		textCell.id= "pic";
		textCell.name= "pic";
		theForm.appendChild( textCell );
		textCell.value = pic;
	
	/*
	var buttonSubmit = document.createElement("input");
		buttonSubmit.type = "submit";
		buttonSubmit.value = "上传图片";
		theForm.appendChild( buttonSubmit );
	*/
		 	
	var buttonFile = document.createElement("input");
		buttonFile.type = "file";
		buttonFile.name = "thefile";
		buttonFile.id = "thefile";
		buttonFile.style.width = "60px";
		
		theForm.appendChild( buttonFile );
		
	var widthHidden = document.createElement("input");
		theForm.appendChild( widthHidden );
		widthHidden.type = "hidden";
		widthHidden.value = thewidth || 200+"px";
		widthHidden.id = "width";
		widthHidden.name = "width";
		
	
	buttonFile.onchange = function( event )
	{
		if( this.value == "" )
		{
		
			//alert("no");
		
		}
		else
		{
			//alert( document.getElementById("thefile").value  );
		
			theForm.submit();
		}
	};
	
	
	
	
	
}

 
 
 

/* class search bar
** Ver: 1.1.2
** Author: Jia Yu
**
** Change log
** support Safari
*/



function SearchBar( parent , themenu, close_Button_On_Click , textBoxKeyPress, resDir )
{	
	var _this = this;
	var RES_DIR = resDir || "../img/";

	var IMG_CLOSE = RES_DIR + "close.png";
	var IMG_LEFT = RES_DIR + "serleft.png";
	var IMG_RIGHT = RES_DIR + "serright.png";
	var IMG_CENTER = RES_DIR +  "sercenter.png";
	var USER_AGENT = "Safari";
	var theRow = null;
	var infoRow = null;

	var leftCell = null;
	var centerCell = null;
	var rightCell = null;
	var textBox = document.createElement("INPUT");
	var searchScop = document.createElement("INPUT");

//public prop
	this.parent = parent;
	this.themenu = themenu;
	this.thebody = document.createElement("TABLE");
	this.theform = null;
	this.disableSubmit = false;
	
//ini---
	if( navigator.userAgent.indexOf("Safari") == -1 ) USER_AGENT = "Other";
	
	if( typeof parent == "string" ) this.parent = document.getElementById( parent );
	this.parent.innerHTML = "";
	
	this.theform = this.parent;
	while( this.theform.tagName != "BODY"  )
	{		
		this.theform = this.theform.parentNode;
		if( this.theform.tagName == "FORM"   ) break;
	}
	
	if(  this.theform.tagName != "FORM" )
	{
		this.theform = document.createElement("FORM");
		this.theform.id = "form_search";
		//this.theform.method = "post";
		//this.theform.action = "#";
		
		this.parent.appendChild( this.theform );
		this.theform.appendChild( this.thebody );
		this.theform.onsubmit = function()
		{
			return false;	
		};
	}
	
	//debug info
	if(  this.theform == null )
	{
		alert( "Can not found form for search bar class ini failed." );	
	}
	//alert( this.theform );
	this.theform.style.padding = "0px";
	this.theform.style.margin = "0px";
		
	this.parent.appendChild( this.thebody );
	this.thebody.name = "searchbar";
	this.thebody.border = 0;
	this.thebody.cellPadding = 0;
	this.thebody.cellSpacing = 0;
  
	theRow = this.thebody.insertRow(-1);
	infoRow = this.thebody.insertRow(-1);
	
	infoRow.insertCell(-1);
	infoCell = infoRow.insertCell(-1);
	infoCell.align = "center";
	infoCell.style.padding = "1px";
	
	infoRow.insertCell(-1);
	
	leftCell = theRow.insertCell(-1);
	
	if( USER_AGENT == "Other" )
	{
		leftCell.style.width = "24px";
		leftCell.style.height = "24px";

		leftCell.style.backgroundImage = "url("+IMG_LEFT+")";
		leftCell.style.backgroundRepeat = "no-repeat";
		leftCell.style.backgroundPosition = "center right";
		//leftCell.align = "right";
		//leftCell.valign = "middle";
		leftCell.style.cursor="pointer";
		leftCell.style.whiteSpace = "nowrap";
		leftCell.innerHTML = "<div style='width:24px;'></div>";
	}
	else if(  USER_AGENT == "Safari" )
	{
		leftCell.style.visibility = "hidden";
	}
	
	centerCell = theRow.insertCell(-1);
	centerCell.style.width = "150px";
	centerCell.style.height = "24px";
	if( USER_AGENT == "Other" )
	{
		centerCell.style.backgroundImage = "url("+IMG_CENTER+")";
		centerCell.style.backgroundRepeat = "repeat-x";
		centerCell.style.backgroundPosition = "center";
		centerCell.style.paddingLeft = "2px";
	}
	else if(  USER_AGENT == "Safari" )
	{
		//centerCell.class="search";
	}
	
	rightCell = theRow.insertCell(-1);
	var loadingImg = document.createElement("img");

	
	if(  USER_AGENT == "Other"  )
	{
		rightCell.style.width = "24px";
		rightCell.style.backgroundImage = "url("+IMG_RIGHT+")";
		rightCell.style.backgroundRepeat = "no-repeat";
		rightCell.style.backgroundPosition = "center left";
		rightCell.style.whiteSpace = "nowrap";
		
		loadingImg.src = RES_DIR+"syc_or_gr.gif";
		loadingImg.border = 0;
		
		rightCell.align = "left";
		
		var imgDiv = document.createElement("div");
			imgDiv.appendChild( loadingImg );
			imgDiv.style.width = "24px";
			loadingImg.style.visibility = "hidden";
			
		rightCell.appendChild( imgDiv );
		rightCell.style.cursor = "pointer";
	}
	else if(  USER_AGENT == "Safari" )
	{
		//rightCell.style.visibility = "hidden";
	}
	
	this.setLoadingImgVis = function( bool )
	{
		if( bool )
		{
			loadingImg.style.visibility = "visible";
		} 
		else
		{
			loadingImg.style.visibility = "hidden";
		}
	};
	
	
	if( USER_AGENT == "Safari" )
	{
		textBox.type = "search";
		textBox.setAttribute( "autosave", "bsn_srch" );
		textBox.setAttribute( "results", "5" );
	}
	else
	{
		textBox.type = "text";		
		textBox.style.borderWidth = "0px";
		textBox.style.borderStyle = "none";
		textBox.style.borderColor = "#FFFFFF";
		textBox.style.fontFamily= "Arial, Helvetica, sans-serif";
		textBox.style.fontSize="11px";
		textBox.style.height = "12px";
	}
	
	//textBox.style.width = "200px";
	textBox.id = "searchkey";
	textBox.name="q";
		
	centerCell.appendChild(textBox);
	
	searchScop.type = "hidden";	
	this.theform.appendChild( searchScop );
	searchScop.id = "searchScop";
	searchScop.name = "searchScop";
	searchScop.value ="";
		
	
	//event--		
	if(  USER_AGENT == "Other"  )
	{
		//closebutton.onclick = closebuttononclick;
		leftCell.onclick = mgonclick;
		rightCell.onclick = closebuttononclick;
	}
	
	textBox.onchange = change;
	
	function mgonclick()
	{
		if(  _this.themenu != null )
		{
			_this.themenu.showpop( this ,10, -3 );
		}
	}
	
	function change()
	{
		if( textBox.value != ""  )
		{
			//closebutton.style.visibility = "visible";
			rightCell.style.backgroundImage = "url("+IMG_CLOSE+")";
		}
		else
		{
			//closebutton.style.visibility = "hidden";
			rightCell.style.backgroundImage = "url("+IMG_RIGHT+")";
		}
	}
	
	function closebuttononclick()
	{
		if( textBox.value != "" )
		{
			//closebutton.style.visibility = "hidden";
			rightCell.style.backgroundImage = "url("+IMG_CLOSE+")";
			
			textBox.value = "";
			change();
			
			if( _this.disableSubmit == false )  
			{	
				_this.theform.submit();
			}
			else
			{
				//_this.close_Button_On_Click(); 
				close_Button_On_Click( _this );
			}
			
		}
	}
	
	textBox.onkeypress = keypress;
	function keypress( event )
	{		
		if ( window.event ) event = window.event;	
		var key = event.charCode || event.keyCode;
		
		change();
		
		if( key == 13 ) 
		{
			if( _this.disableSubmit == false )  
			{	
				_this.theform.submit();
			}
			else
			{
				textBoxKeyPress( _this );
			}
		}
	}
	
	
	//publiuc method
	this.getTextBox = function()
	{
		return textBox;
	};
	
	this.getRightCell = function()
	{
		return rightCell;
	};
	
	this.setInfoText =  function( str )
	{
		infoCell.innerHTML = str;
		searchScop.value = str;
	};
	
	
	this.getInfoText = function()
	{
		return infoCell.innerHTML;
	};
	
	
	this.setText = function( str )
	{
		textBox.value = str;
		change();
	};
	
	this.getText = function()
	{
		return textBox.value;
	};
	
	this.setInfoTextClass = function( str )
	{
		infoCell.className = str;
	};
	
	this.setWidth = function( number )
	{
		if(  USER_AGENT != "Safari"  )
		{
			number -= 50;
		}
		textBox.style.width = number - 2 +"px";
		
		//alert( textBox.style.width );
	};
}



function ColorPicker( parent, parentNode  , onColorPicked )
{
	//call supclass
	ColorPicker.baseConstructor.call( this, parent, parentNode );
	//----------------------------------------------------------------
	var _this = this;
	
	
	this.frame = new TheFrame( _this, document.body , function( event, obj ){
		
		_this.remove();
		
	} );
	
	
var iframeEl = document.createElement("IFRAME");	
	setOpacity( iframeEl , 0 );
	iframeEl = this.frame.thebody.parentNode.insertBefore( iframeEl, this.frame.thebody );

		
	iframeEl.src = "about:blank";
	iframeEl.frameBorder = 0;
	iframeEl.style.display = "none";
	iframeEl.style.backgroundColor = "#FFFFFF";
	iframeEl.style.position = "absolute";
	iframeEl.style.left = "0px";
	iframeEl.style.top = "0px";
	iframeEl.style.width = "100%";
	iframeEl.style.height = "100%";
	iframeEl.style.zIndex = 310;

	//this.frame.closeButton.thebody.style.display = "none";
	this.frame.thebody.style.position = "absolute";
	this.frame.thebody.style.left = "200px";
	this.frame.thebody.style.top = "200px";
	this.frame.thebody.style.visibility = "hidden";
	this.frame.thebody.style.zIndex = iframeEl.style.zIndex +1;
	
	var theTable = document.createElement("TABLE");
	this.frame.background.midcell.appendChild( theTable );
	//theTable.style.width = "145px";
	theTable.cellPadding = 0;
	theTable.cellSpacing = 0;
	//theTable.style.padding = "2px";
	
	
	for(var k=0;k<3;k++ )
	{
		for(var i=0;i<6;i++)
		{
		var row = theTable.insertRow( -1 );
			
			for( var j=0;j<12;j++ )	
			{
				var cell = row.insertCell( -1 );
				
				cell.onmouseover = onOver;
				cell.onmouseout = onOut;
				cell.onclick = function( event )
				{
					onColorPicked( event, _this , this.id+"" );
					_this.remove();
				};
				
				//cell.className = "colorCell";
				cell.innerHTML = "<div style='width:15px; height:15px;'></div>";
				cell.style.border = "1px solid #eee";
				
				if( j < 6 )
				{
					cell.style.backgroundColor = "#"+twoDigs(tohex(k*51))+twoDigs(tohex(i*51))+twoDigs(tohex(j*51));
					cell.id = "#"+twoDigs(tohex(k*51))+twoDigs(tohex(i*51))+twoDigs(tohex(j*51));
				}
				else
				{
					cell.style.backgroundColor = "#"+twoDigs(tohex((k+3)*51))+twoDigs(tohex(i*51))+twoDigs(tohex((j-6)*51));
					cell.id = "#"+twoDigs(tohex((k+3)*51))+twoDigs(tohex(i*51))+twoDigs(tohex((j-6)*51));
				}
				
				cell.title = cell.style.backgroundColor;
			}
		}
	}
	
	lastRow = theTable.insertRow( -1 );
	

	for(var i=0;i<12;i++)
	{
		var cell = lastRow.insertCell( -1 );
		cell.onmouseover = onOver;
		cell.onmouseout = onOut;
		cell.onclick = function(event)
		{
			onColorPicked( event, _this , this.id+""  );
			_this.remove();
		};
				cell.innerHTML = "<div style='width:15px; height:15px;'></div>";
				cell.style.border = "1px solid #eee";
		cell.style.backgroundColor = "#"+twoDigs(tohex(i*21.25))+twoDigs(tohex(i*21.25))+twoDigs(tohex(i*21.25));
		cell.id = "#"+twoDigs(tohex(i*21.25))+twoDigs(tohex(i*21.25))+twoDigs(tohex(i*21.25));
		cell.title = cell.style.backgroundColor;
	}
	
	
	//Events
	//this.thebody.onclick = onClick;
	//this.thebody.onmouseover = onOver;
	//this.thebody.onmouseout = onOut;



	
	function onOver( event )
	{
		if( document.all) event = window.event;
		
		if( !_this.isDisabled && _this.isVisible )
		{
			//this.className = "colorCellOver";
			//alert( this.style.backgroundColor );
			//this.style.borderColor="#000000";
			
			this.style.border = "1px solid #333";
			
		}
		//event.cancelBubble = true;
	}
	
	function onOut( event )
	{
		if( document.all) event = window.event;
		if( !_this.isDisabled && _this.isVisible )
		{
//			_this.thebody.className = "colorCell";
			//this.className = "colorCell";
			//this.style.borderColor="#DDDDDD";
			this.style.border = "1px solid #eee";
		}
		//event.cancelBubble = true;
	}
	
	
	

	this.show = function(  )
	{
		
		var midLeft = parseInt( ( document.documentElement.clientWidth  - _this.frame.thebody.offsetWidth ) / 2 );
		var midTop =  parseInt( (  document.documentElement.clientHeight - _this.frame.thebody.offsetHeight ) / 2 );
		 
		_this.frame.thebody.style.left = midLeft +"px" ;
		_this.frame.thebody.style.top = midTop +"px";
		
		
		iframeEl.style.display  ="";

		//_this.frame.setDisplay( true );
		
		_this.frame.thebody.style.visibility = "visible";
		
		
	};
	
	this.remove = function()
	{
		//iframeEl.style.diplay = "none";
		_this.frame.thebody.parentNode.removeChild( iframeEl );
		_this.frame.thebody.parentNode.removeChild( _this.frame.thebody );
	}
	
	
}
Class.extend( _gui , ColorPicker );





/*
 * 
 * 
 * 
 * usage:
	var dp = new datePicker( _this, document.body, function(event, yaer, month, date ){
		
		//alert( yaer+"-"+month+"-"+date );
		
		} );
		//dp.show( 300,300 ,yyyy, mm, dd );
 * 
 * 
 */
function datePicker( parent, parentNode , onDatePicked )
{
	var _this = this;
	this.parent = parent;
	this.parentNode = parentNode;

	
	var today = new Date();
	var theDayCell = new Array();
	var showingdate = null;

	var months = new Array("1月",  "2月", "3月" , "4月" , "5月", "6月" , 
	"7月" , "8月", "9月" , "10月" , "11月", "12月");

	var weeks = new Array("日",  "一", "二" , "三" , "四", "五" , "六");

	this.value = today.getFullYear() +"-"+(today.getMonth()+1) +"-"+ today.getDate();
	
	var box_class ="box_ro";
	
	var pop = new PopFrame( document.body, function()
	{
		return true;
	}  ,  box_class );
	
	pop.midcell.style.backgroundColor = "#FFF";
	pop.midcell.style.color = "#333";		
	pop.setSize(300,200);
	pop.popbg.setDisplay(true);
	//pop.setDisplay( true );
pop.frame.closeButton.thebody.parentNode.removeChild(pop.frame.closeButton.thebody );	//alert( pop.frame.closeButton.thebody.tagName );
	

//toolbar
	var toolTable = new tableLayout( _this, pop.midcell );
	
	var caloseCell = toolTable.addCell();
		caloseCell.align = "left";
		caloseCell.vAlign = "top";
	
	this.closeButton = new imgButton( caloseCell, caloseCell, IMG_DIR+"close.gif" , "Close", 
	function( event, obj )
	{
		pop.hide();
	} );
	
	var todayCell = toolTable.addCell();
		todayCell.align = "right";
		
	var button_today = new imgButton(_this, todayCell, "../img/today.png", "Today", function()
	{
		_this.reset( today.getFullYear(), today.getMonth() , today.getDate() );
		pop.vibrate();
	});
	
//date grie	
	this.table = new tableLayout( _this, pop.midcell );

//Yaer	
	var yaerLeftArrowCell = this.table.addCell("<img src='../img/arrowleft.png' border=0 />");
		yaerLeftArrowCell.align = "center";
		yaerLeftArrowCell.style.cursor = "pointer";
		yaerLeftArrowCell.onclick = function( event )
		{
			_this.reset( showingdate.getFullYear(),  showingdate.getMonth() - 1, 1 );
			
		}
		
	var yaerCell = this.table.addCell("<span style='color:#333;'></span>"+new Date().getFullYear() + " "+ months[ new Date().getMonth() ]);
		yaerCell.colSpan = 5;
		yaerCell.style.height = "30px";
		yaerCell.align = "center";
		
	var yaerRightArrowCell = this.table.addCell("<img src='../img/arrow.png' border=0 />");
		yaerRightArrowCell.align = "center";
		yaerRightArrowCell.style.cursor = "pointer";
		yaerRightArrowCell.onclick = function( event )
		{
			_this.reset( showingdate.getFullYear(), showingdate.getMonth() +1, 1 );
		}
		//yaerRightArrowCell.parentNode.style.backgroundColor = "#eee";
	this.table.addSeparateRow();

//Week
	for(var i=0; i< weeks.length;i++)
	{
		var title = this.table.addCell("<div align='center'>"+ weeks[i] +"</div>");
			title.align = "center";
			title.style.height = "25px";
			
			title.style.paddingTop = "2px";
			title.style.paddingBottom = "2px";
			title.style.border = "#FFF solid 1px";
			title.style.backgroundColor = "#DDD";
	}
	
	this.table.addSeparateRow();
	
//Date
	for(var i=0;i<6; i++  )
	{
		for(var j=1;j<=7;j++ )
		{
			theDayCell[theDayCell.length] = _this.table.addCell();
			theDayCell[theDayCell.length-1].style.width = "25px";
			theDayCell[theDayCell.length-1].style.height = "25px";
			theDayCell[theDayCell.length-1].style.verticalAlign = "middle";
			theDayCell[theDayCell.length-1].align = "center";
			theDayCell[theDayCell.length-1].style.cursor = "pointer";
			
		}
		this.table.addSeparateRow();
	}
		
	
	this.reset = function( year, month, date )
	{	
		
		//指定的日期
		var theDate = new Date();
			theDate.setFullYear( year );
			theDate.setMonth( month );
			theDate.setDate( date );
		
		//the year month date after check
		year = theDate.getFullYear();
		month = theDate.getMonth();
		date = theDate.getDate();
		
		
		//指定的日期
		var weekDayOffset = new Date();
			weekDayOffset.setFullYear( year );
			weekDayOffset.setMonth( month );
			weekDayOffset.setDate( 1 );
			
		var weekDayOffset = weekDayOffset.getDay();
		
		yaerCell.innerHTML = year + " "+ months[ month ];
		
		for(var i=0;i<6; i++  )
		{
			for(var j=1;j<=7;j++ )
			{
				
				var theday =  j+(i*7) - weekDayOffset;
				var index  = j+(i*7)-1;
				
				theDayCell[ index ].style.backgroundColor = "#FFF";
				theDayCell[ index ].innerHTML = "";
				
				var tmpDate = new Date();
					tmpDate.setFullYear( year );
					tmpDate.setMonth( month );
					tmpDate.setDate( theday );
				
				if( tmpDate.getMonth() == month && tmpDate.getFullYear() == year )
				{
					theDayCell[ index ].innerHTML = theday;
					
					theDayCell[ index ].style.backgroundColor = "#eee";
					theDayCell[ index ].style.backgroundImage = "";
					theDayCell[ index ].style.color = "#000";
					theDayCell[ index ].style.border = "#FFF solid 1px";
					
					theDayCell[index].onclick = function( event )
					{
						onDatePicked(event, showingdate.getFullYear(),  
						new Number( showingdate.getMonth() +1 ).format(2) , 
						new Number( this.innerHTML  ).format(2));
						//_this.parentNode.removeChild( _this.frame.thebody );
						this.value = "";
						pop.hide();
					};
				}
				
				
				if( today.getFullYear() == year && 
				today.getMonth() == month && today.getDate() == theday )
				{
					theDayCell[ index ].style.backgroundColor = "#CCC";					
				}
				
			}
		}
		
		showingdate = theDate;
		
	};
	
	
	this.show = function( left, top , year , month , date )
	{
		_this.reset( year, month, date );
		pop.setDisplay( true );	
	};
	

	//ini
	//this.reset( date.getFullYear(), date.getMonth(), date.getDate() );
	
	
	this.toString = function()
	{
		return _this.value;
	}
	
}







function imgMUploder( parent, parentNode, id  , theWidth , servercgi )
{

	var _this = this;

	this.parent  = parent;
	this.thebody = document.createElement("DIV");
	parentNode.appendChild( this.thebody );
	this.SERVER_PAGE = servercgi || "imgUploader.php";
	var timestamp = new Date();
	
	if( document.all )
	{
		this.theIframe = document.createElement("<IFRAME ID="+timestamp+" FRAMEBORDER=0 SCROLLING=NO  >");
	}
	else
	{
		this.theIframe = document.createElement("IFRAME");
	}
	

//parentNode.style.width = "250px";
	this.thebody.appendChild( this.theIframe );
	this.theIframe.style.borderWidth = "0px";
	//this.theIframe.style.backgroundColor = "#666";
	this.thebody.style.backgroundColor = "#666";
	
/*
	var theForm = document.createElement("form");
		this.thebody.appendChild( theForm );	
		theForm.method = "POST"; 
		theForm.id = "fileform";
		theForm.name = "fileform";
		theForm.action = this.SERVER_PAGE;
		theForm.enctype= "multipart/form-data";
		theForm.style.padding = "3px";
		theForm.style.margin = "0px";
		theForm.style.height = "25px";
		theForm.style.backgroundColor = "#000";
		theForm.target =  "theIframe";
		
		
	var widthHidden = document.createElement("input");
		widthHidden.type = "hidden";
		theForm.appendChild( widthHidden );
		widthHidden.value = theWidth || 200;
		widthHidden.id = "width";
		widthHidden.name = "width";
		widthHidden.style.margin = "0px";


	var textItemid = document.createElement( "input" );
		textItemid.type = "hidden";
		theForm.appendChild( textItemid );
		textItemid.id= "itemid";
		textItemid.name= "itemid";
		textItemid.value = id;
		 	
	var buttonFile = document.createElement("input");
		buttonFile.type = "file";
		theForm.appendChild( buttonFile );
		buttonFile.name = "thefile";
		buttonFile.id = "thefile";
		buttonFile.style.width = "60px";
		


	buttonFile.onchange = function( event )
	{
		if( this.value == "" )
		{
		
			//alert("no");
		
		}
		else
		{
			theForm.submit();
		}
	};
*/
	
	this.setdata = function( id  )
	{
		//buttonFile.value = "";
		//textItemid.value = id;
		//theForm.submit();
		_this.theIframe.src = _this.SERVER_PAGE+"?itemid="+id;
	};
	
//setDispaly
	this.setDisplay = function( bool )
	{
		if( bool )
		{
			//this.thebody.style.display = "";
			this.thebody.style.visibility = "visible";
		}
		else
		{
			//this.thebody.style.display = "none";
			this.thebody.style.visibility = "hidden";
		}
	};
	
	
	this.resize =  function( h, w )
	{
		_this.thebody.style.height = h +"px";
		_this.theIframe.style.height = h +"px"; 
		_this.theIframe.style.width = w +"px";
	};
}






function TitleAndDes( parent, parentNode , title, des )
{
	var _this = this;
	this.parent = parent;
	this.parentNode = parentNode;
	this.thebody = document.createElement("div");
	this.parentNode.appendChild( this.thebody );
	
	this.strTitle = title; 
	this.strDes = des; 
	
	this.table = new tableLayout( _this, this.thebody );
	
	var titleCell = this.table.addCell( );
		titleCell.style.paddingTop = titleCell.style.paddingBottom = "1px";
		titleCell.style.paddingRight = (document.all)?"12px":"6px";

	//this.thebody.appendChild( titleCell );
	
	var theTitle = document.createElement("input");
		theTitle.type = "text";
		titleCell.appendChild( theTitle );
		theTitle.className = "textbox";
		theTitle.value = title;
		theTitle.title = title;
		theTitle.style.padding = "2px";
		theTitle.style.border = "1px solid #ccc";
		theTitle.style.width = "100%";

		theTitle.onchange = function()
		{
			if( this.value == "" ) this.value = this.title;
		}
		theTitle.onblur =  function(event){
			this.style.border = "1px solid #cccccc";
		}
		theTitle.onfocus =  function(event){
			this.style.border = "1px solid #333333";
		}
	
	
	this.theDes = new TextEditor( _this , this.thebody , des );
	
	
	this.setsize = function( h, w )
	{
		_this.theDes.setSize( h - 25 , w );
	};
	
	this.getTitle = function()
	{
		return theTitle.value;
	};
	
	this.setTitle = function( str )
	{
		theTitle.value = str;
	};
	
	this.getDes = function()
	{
		return _this.theDes.getHTML();
	};
	
	this.setDes = function( html )
	{
		_this.theDes.setHTML(html);
	};
	
	this.setBgColor = function( color )
	{
		_this.theDes.setGgColor( color );
	}
	
//setDispaly
	this.setDisplay = function( bool )
	{
		if( bool )
		{
			this.thebody.style.display = "";
		}
		else
		{
			this.thebody.style.display = "none";
		}
	};
	
	this.disableTitle = function( bool )
	{
		theTitle.disabled = bool;
	};
	
	this.RTEdisabled = function( bool )
	{
		_this.theDes.RTEdisabled( bool );
	};
	
	
}



function mText(en , cn)
{
	this.en = en || "";
	this.cn = cn || "";
}


function mLangTab( parent , parentNode , arTabTitle , defTabIndex )
{
	
	var _this = this;
	var IMG_DIR = "../js/tab/img/";
	var panelList = new Array();
	
	var MAX_LANG = 1;

	this.parent = parent;
	this.parentNode = parentNode;
	this.thebody = document.createElement("div");
	this.parentNode.appendChild( this.thebody );
	
	this.desEditMode = true;
	
	var theTabCell = document.createElement("div");
	this.thebody.appendChild( theTabCell );
		theTabCell.style.paddingTop = "5px";
		theTabCell.style.backgroundImage = "url( "+IMG_DIR+"shodow.png )";
		theTabCell.style.backgroundRepeat = "repeat-x";
		theTabCell.style.backgroundPosition = "bottom";
		
	var langTabs = new tab( theTabCell, IMG_DIR );

	var lastshow = null;
	
	for(var i=0; i< arTabTitle.length ; i++)
	{
		var thetab = langTabs.addTab( arTabTitle[i], 
		function( obj )
		{
			if( lastshow != null ) lastshow.setDisplay(false);
			
			panelList[ obj.value ].setDisplay( true );
			
			if( _this.thebody.offsetHeight &&  theTabCell.offsetHeight )
			{
				panelList[ obj.value ].setsize( _this.thebody.offsetHeight - theTabCell.offsetHeight ,"100%"  );
			}
			
			panelList[obj.value].theDes.setEditModeOn( _this.desEditMode );
			lastshow = panelList[ obj.value ];
		}, i+"" );
		
		panelList[panelList.length] = new TitleAndDes( _this, this.thebody , "", "" );
		panelList[panelList.length-1].theDes.onEditModeChange = function( obj , mode )
		{
			_this.desEditMode = mode;
		};
		
		
		//做出语言数量限制
		if( i >= MAX_LANG )
		{
		
			thetab.thebody.style.display = "none";
			if( i < arTabTitle.length - 1 ) thetab.thebody.nextSibling.style.display = "none";
		
		}
		
		if( i == 0 ) 
		{
			//thetab.thebody.style.display = "none";
		}
		
		panelList[panelList.length-1].setDisplay( false );
	}
	
	
	
	langTabs.getTabs()[ defTabIndex || 0 ].method( langTabs.getTabs()[ defTabIndex || 0 ] );
	langTabs.getTabs()[ defTabIndex || 0 ].setIsSelected( true );
	
	
	//array
	this.setData = function( arTitle, arDes )
	{
		for(var i=0;i<arTitle.length;i++ )	
		{
			panelList[i].setTitle( arTitle[i] );
			panelList[i].setDes( arDes[i] );
		}
	};
	
	this.getData = function()
	{
		var arData = new Array();
		
		for(var i=0;i<panelList.length;i++)
		{
			arData[i] =  new Array();
			
			arData[i][0] = panelList[i].getTitle();
			arData[i][1] = panelList[i].getDes();
		}
		
		return arData;
	};


	this.resize = function( h, w )
	{
		_this.thebody.style.height = h + "px";
		
		for(var i=0;i<panelList.length;i++  )
		{
			panelList[i].setsize( h - theTabCell.offsetHeight , w );
		}
	};
	
	this.disableTitle = function( bool )
	{
		for(var i=0; i< panelList.length ; i++)
		{
			panelList[i].disableTitle( bool )
		}
	};
	
	
	this.RTEdisabled = function( bool )
	{
		for(var i=0; i< panelList.length ; i++)
		{
			panelList[i].RTEdisabled( bool )
		}
	};
	
	this.setBgColor = function( color )
	{
		for(var i=0;i<panelList.length;i++)
		{

			panelList[i].setBgColor( color );

		}
	}
	
	

}


/*
 * usage: new TheFrame(  parent, parentNode , function( event , obj ){ if( true ) { obj.remove(); } } );
 * 
 * 
 */
function TheFrame(  parent, parentNode , closeButtonOnclick , hideCloseButton , style )
{

	var _this = this;
	var SRC_CLOSE_BLACK = IMG_DIR+"close_black.png";
	
	this.isDisabled = false;
	
	this.parentNode = parentNode;
	this.parent = parent || null;
	this.thebody = document.createElement( "div" );
	this.parentNode.appendChild( this.thebody );
	
	//this.thebody.style.display = "none";
	this.background = new backgroundImage( _this, this.thebody , style );
	this.background.topTdLeft.innerHTML = "";
	this.background.midcell.style.verticalAlign = "top";
	this.background.midcell.align = "left";
	
	if( hideCloseButton == undefined ) hideCloseButton = false;
	
	this.closeButton = new imgButton( _this, this.background.topTdLeft , SRC_CLOSE_BLACK , "Close", closeButtonOnclick );
	
	if( hideCloseButton ) _this.closeButton.thebody.style.visibility = "hidden";
	
	
	this.appendChild = function( obj )
	{
		this.background.midcell.appendChild( obj );
	}

	this.thebody.onmouseover = function( event  )
	{
		if( hideCloseButton )
		{
			if( _this.closeButton.thebody.style.visibility == "hidden" ) _this.closeButton.thebody.style.visibility = "visible";
		}
	}

	this.thebody.onmouseout = function( event )
	{
		//if( window.event ) event = window.event;
		//var relatedTarget  = event.relatedTarget  || event.toElement;
		
		if( hideCloseButton  )
		{
			if( _this.closeButton.thebody.style.visibility == "visible" ) _this.closeButton.thebody.style.visibility = "hidden";
		}
	}


	this.remove = function()
	{
		try
		{
			_this.parentNode.removeChild( _this.thebody );
		}
		catch(e){}
	};
	
	this.resize = function( h, w )
	{
		//_this.background.thebody.style.height = h +"px";
		//_this.background.thebody.style.width = w +"px";
		
		_this.background.midcell.style.height = ( h - 50 ) +"px";
		_this.background.midcell.style.width = ( w  - 50 ) +"px";
		//_this.background.midcell.style.paddingRight = "4px";

	};
	
	this.setMidCellSize = function( w,h )
	{
		_this.background.midcell.style.height = ( h ) +"px";
		_this.background.midcell.style.width = 	( w ) +"px";
	};
	
			
	this.setDisplay = function( bool )
	{
		if( bool )
		{
			this.thebody.style.display = "";
		}
		else
		{
			this.thebody.style.display = "none";
		}
	};
	
	this.setVisible = function( bool )
	{
		if( bool )
		{
			this.thebody.style.visibility = "visible";
		}
		else
		{
			this.thebody.style.visibility = "hidden";
		}
	};
	
	this.disabled = function( bool )
	{
		_this.isDisabled = bool;
		if( bool )
		{
			setOpacity ( _this.background.thebody, 50 );
			this.thebody.style.cursor = "";
		}
		else
		{
			setOpacity ( _this.background.thebody, 100 );	
			this.thebody.style.cursor = "pointer";
		}
		_this.closeButton.disabled( bool );		
	}
}


/*
 * usage: new PopBg( parent , "#000" , 80  , function( popbg ){}, function( popbg ){} );
 * IE7, FF, safari tested
 * 
 * 
 */
function PopBg( parent  , bgColor , BgMax , onResize , onDispatch )
{
	var _this = this;
	//bg
	this.iframeBG = document.createElement( "IFRAME" );	
	if( document.all  && BrowserDetect.version < 9 )

	{	

		this.iframeBG = document.createElement( "<IFRAME FRAMEBORDER=0 SCROLLING=NO >" )	

		

	}		
this.iframeBG.setAttribute( "frameborder" , 0 );
this.iframeBG.setAttribute( "scrolling" , "no" );


	this.iframeBG.style.position = "absolute";
	document.body.appendChild( this.iframeBG );
	this.iframeBG.style.top = this.iframeBG.style.left = "0px";
	//this.iframeBG.style.width  = document.documentElement.scrollWidth + "px";
	this.iframeBG.style.width = "100%";
	this.iframeBG.style.height = document.documentElement.scrollHeight + ( BrowserDetect.browser == "Safari"?15:0 ) + "px";
	//this.iframeBG = this.frame.thebody.parentNode.insertBefore( iframeBG, this.frame.thebody );
	this.iframeBG.style.display = "none";
	this.iframeBG.src = "about:blank";
	this.zIndex = this.iframeBG.style.zIndex  = 100;
	this.iframeBG.style.overflow = "hidden";
	this.iframeBG.style.borderWidth = "0px";
	//for ie to show the black bgcolor
	this.iframeBG.style.backgroundColor = bgColor || "#000";
	this.iFrameDocument = _this.iframeBG.contentWindow;
	
	if( document.all || BrowserDetect.browser == "Safari" )
	{
		this.iframeBG.contentWindow.document.open();
		this.iframeBG.contentWindow.document.write( "<html><body style='overflow:hidden;' bgcolor='"+this.iframeBG.style.backgroundColor+"'   ></body></html>");
		this.iframeBG.contentWindow.document.close();
		this.iFrameDocument = this.iframeBG.contentWindow.document;
	}
	
	setOpacity( this.iframeBG, ( BgMax || 80 ) );
	
	
	
	this.iFrameDocument.onclick = function( event )
	{
		_this.dispatch();
	};
	
	
	var resize = function( event )
	{
		//resize the bg
		//_this.iframeBG.style.width  = document.documentElement.scrollWidth + "px";

		_this.setsize( document.documentElement.scrollHeight );
		if( onResize ) onResize( _this );
	}
	
	this.setsize = function( h )
	{
		if( h ) _this.iframeBG.style.height = h + "px";
	}
	
	
	this.dispatch = function()
	{
		if( _this.iframeBG )
		{
			if(   _this.iframeBG ) document.body.removeChild(  _this.iframeBG  );
			RemoveEventListener( window, "resize", resize );
			if( onDispatch ) onDispatch();
		}
	};
	
	
//event
	AddEventListener( window, "resize",  resize );
//interface
	this.setDisplay = function( bool )
	{
		_this.iframeBG.style.display = (bool)?"":"none";	
	};
}



 
function PopFrame( parent , onClose  ,  style , bgcolor  )
{
	var _this = this;

	var isMax = false;
	var HEIGHT = 100;
	var WIDTH = 200;
	this.thebody = null;

	this.onClose = onClose || function( event, _this ){};
	this.onResize = function( w,h ){};
	
	
	
	this.frame = new TheFrame( _this , document.body, function( event, obj )
	{
	
		//alert( "Yes" );
		//if the function retun true then exit
		if( _this.onClose( event, _this ) == true ) _this.hide();
	}, false, style );
	
	
	this.frame.setVisible( false );
	this.frame.thebody.style.position = "absolute";

	var top = parseInt( ( document.documentElement.clientHeight - HEIGHT ) / 2 ) ;
		if( top <0  ) top = 0;
	
	var left = parseInt ( parseInt( ( document.documentElement.clientWidth  - WIDTH ) / 2 )  );
		if( left < 0 ) left = 0;	
	
	this.frame.thebody.style.left = top +"px";
	this.frame.thebody.style.top = left + "px";
	this.frame.setMidCellSize( WIDTH, HEIGHT );
	this.appendChild = this.frame.background.appendChild;
	this.midcell = this.frame.background.midcell;
	this.thebody = this.frame.thebody;
	
	
	var resize = function()
	{
		var w = document.documentElement.clientWidth - 30;
		var	h = document.documentElement.clientHeight - 30;
		var	top = 15;
		var	left = 15;
		
		var scrollTop = (document.all)?document.documentElement.scrollTop:window.pageYOffset;
		
		if( !isMax )
		{
			w = WIDTH;
			h = HEIGHT;
			
			top = parseInt( ( document.documentElement.clientHeight - HEIGHT ) / 2 ) ;
			if( top <0  ) top = 0;
			left = parseInt ( parseInt( ( document.documentElement.clientWidth  - WIDTH ) / 2 )  );
			if( left < 0 ) left = 0;
			
		}
		
		if(  _this.frame )
		{
			_this.frame.thebody.style.top = top + scrollTop+ "px";
			_this.frame.thebody.style.left = left + "px";
			_this.frame.resize( h,w );
		
			if( _this.thebody.offsetTop - scrollTop <= 0  ) _this.thebody.style.top = scrollTop + 5 + "px";
		
		}
		_this.onResize( w - 50 , h - 50  );
		
	};
	
	
	
	this.popbg = new PopBg( _this , bgcolor , null , function( obj ){
		
		resize();
	} , 
	function(){
		
		//alert( "Yes" );
		_this.frame.remove();
	});
	
		
	
	

	this.setButtonCloseDisplay = function( bool )
	{
		if( bool )
		{
			this.frame.closeButton.thebody.style.display = "";
		}
		else
		{
			this.frame.closeButton.thebody.style.display = "none";			
		}
	};

	
	//this.frame.thebody.parentNode.insertBefore( popbg.iframeBG, this.frame.thebody );
	this.frame.thebody.style.zIndex = this.popbg.zIndex  + 1;

	this.setMidCellSize = function( w , h )
	{
		this.frame.setMidCellSize( w, h );
	}

	
	this.maximize = function()
	{
		isMax = true;
		resize();
	};
	
	
	this.setSize = function( w, h )
	{
		HEIGHT = h;
		WIDTH = w;
		//_this.frame.resize( h , w );
		resize();
	};
	
	
	this.setDisplay = function( bool )
	{
		_this.frame.setVisible( bool );
		_this.popbg.setDisplay( bool );
		
		if( _this.popbg.iframeBG.offsetHeight < _this.frame.thebody.offsetHeight + _this.frame.thebody.offsetTop )
		{
			//alert( popbg.iframeBG.offsetHeight );
			_this.popbg.setsize(  _this.frame.thebody.offsetHeight + _this.frame.thebody.offsetTop );
		}
		
	};
	
	
	this.hide = function()
	{
		_this.popbg.dispatch();	
		_this.frame.remove();
	};
	

	this.vibrate = function()
	{
	//震动
		var left = _this.frame.thebody.offsetLeft;
		var offset = -3;
	
		var showing = new transform( 
		function( intv ){
			_this.frame.thebody.style.left = ( left + offset ) +"px";
			offset = offset * ( -1 );
		} , 
		function(){
			_this.frame.thebody.style.left = left +"px";	
		} , 30,  40 );
		showing.run();
	}
	
}






//class texteditor
//IE tested pass
//ver:1.3.1
function TextEditor( parent, parentNode, html )
{	
	
	var _this = this;
	this.parents = parent;
	this.parentNode = parentNode;
	this.html = html;

	var IMG_DIR = "./img/";
	
	this.thebody = document.createElement("div");
	this.parentNode.appendChild( this.thebody );
	this.table = new tableLayout( _this,  this.thebody );
	
	var theIframe;
	//for ie only
	var theHTML;
	
this.onEditModeChange = function( obj , mode ){};	
	
	var getTextRange = function()
	{
		if( document.all )
		{
			var obj = document.selection;
			if( obj.type == "None" ) theHTML.focus();
	 		return obj.createRange();
	 	}
	 	else
	 	{
	 		return obj = theIframe.contentWindow.document;
	 	}
	};
	
//tool bar
var toolbarCell = this.table.addCell();
	toolbarCell.style.backgroundColor = "#efedde";
	toolbarCell.style.paddingBottom = "2px";
	toolbarCell.style.height = "25px";
	
	
var buttons = new Array();

var buttonTitle = new Array(
 "undo",
 "redo",
 "Bold",
 "Italic", 
 "UnderLine" ,
 "Justify Left",
 "Center", 
 "Right" ,
 "Justify Full",
 
 "superscript", 
 "subscript" ,
 
 "Indent",
 "Outdent",
 "Insert Unordered List",
 "Insert Ordered List",
 "insert Horizontal Rule",
 "insert Image"  );

var commands = new Array( 
 "undo",
 "redo",
"Bold", 
"Italic", 
"UnderLine" , 
"JustifyLeft", 
"JustifyCenter", 
"JustifyRight" , 
"JustifyFull",
 "superscript", 
 "subscript" ,
 
"Indent",
"Outdent",
"InsertUnorderedList", 
"InsertOrderedList",
"insertHorizontalRule",
"insertImage"  );



//button FormatBlock
	var formatBlock = document.createElement("select");
		toolbarCell.appendChild( formatBlock );
		formatBlock.style.margin = "0px";
		formatBlock.style.width = "90px";
		
		var opt = document.createElement("option");
			opt.innerHTML = "Text style";
			opt.value = "";
			formatBlock.appendChild( opt );
		
		var opt = document.createElement("option");
			opt.innerHTML = " None";
			opt.value = "removeFormat";
			formatBlock.appendChild( opt );
		
		var opt = document.createElement("option");
			opt.innerHTML = " Paragraph";
			opt.value = "p";

			formatBlock.appendChild( opt );

		for(var i=1;i<=6;i++  )
		{
			opt = document.createElement("option");
			opt.innerHTML = " Heading "+i+" ";
			opt.value = "H"+i;
			formatBlock.appendChild( opt );
		}

		formatBlock.onchange = function(event)
		{
			var str = this.value;
			
			if( str == "removeFormat" )
			{
				getTextRange().execCommand( "removeFormat" ,false, null );
			}
			else
			{
				if( document.all ) str = "<"+str+">";
				getTextRange().execCommand( "FormatBlock" ,false, str );
			}
			this.value = "";
		};

		toolbarCell.appendChild( document.createTextNode("  ") );
		
		var TextMode = document.createElement("span");
			toolbarCell.appendChild( TextMode );
			TextMode.innerHTML = "Text Mode";
			TextMode.style.display = "none";
		

//button size
	var fontSize = document.createElement("select");
		toolbarCell.appendChild( fontSize );
		fontSize.style.margin = "0px";
		fontSize.style.width = "90px";
		
		var opt = document.createElement("option");
			opt.innerHTML = "Font size";
			
			fontSize.appendChild( opt );
			opt.value = "";
			
		for(var i=1;i<=7;i++  )
		{
			opt = document.createElement("option");
			opt.innerHTML = " "+i+" ";
			opt.value = i;
			fontSize.appendChild( opt );
		}
		
		fontSize.onchange = function()
		{
			if( this.value != "" )
			{
				getTextRange().execCommand( "FontSize" ,false, this.value );
				this.value = "";
			}
		};
	
	toolbarCell.appendChild( document.createTextNode("  ")  );

//button fontName 
	var dorpDown = document.createElement("select");
		toolbarCell.appendChild( dorpDown );
		dorpDown.style.margin = "0px";
		dorpDown.style.width = "90px";
		
		var opt = document.createElement("option");
			opt.innerHTML = "Font Name";
			dorpDown.appendChild( opt );
			opt.value = "";
		
		var fontname = Array( "Arial" , "Helvetica Neue" , "Geneva" , "sans-serif" ,"Courier New","Courier", "mono" );
		
		for(var i = 0; i < fontname.length; i++ )
		{
			opt = document.createElement("option");
			opt.innerHTML = " <span style='font-family:"+fontname[i]+";'>"+fontname[i]+"</> ";
			opt.value = fontname[i];
			dorpDown.appendChild( opt );
		}
		
		dorpDown.onchange = function()
		{
			if( this.value != "" )
			{
				getTextRange().execCommand( "fontName" ,false, this.value );
				this.value = "";
			}
		};
	
	toolbarCell.appendChild( document.createTextNode("  ")  );


//put execCommand

	for( var i=0;i<buttonTitle.length;i++  )
	{
		buttons[i] = new imgButton( _this,toolbarCell, IMG_DIR+commands[i]+".png", buttonTitle[i] , function( event,  obj )
		{
			if (noHTML.style.display == "none")
			{
				if ("insertImage" == commands[obj.thebody.id]) {
					var string = window.prompt("Please enter the URL for the Image.", "http://");
					if (string != "" && "http://" != string) {
						getTextRange().execCommand(commands[obj.thebody.id], false, string);
					}
				}
				else {
					getTextRange().execCommand(commands[obj.thebody.id], false, null);
				}
			}
			
		} ); 
		
		buttons[i].thebody.id = i;
		buttons[i].thebody.style.border= "1px #efedde solid";
		buttons[i].thebody.width = "20";
		buttons[i].thebody.height = "20";
		buttons[i].thebody.style.verticalAlign = "middle";
		
		buttons[i].thebody.onmouseover = function()
		{
			this.style.border = "1px #999999 solid";
		};
		
		buttons[i].thebody.onmouseout = function()
		{
			this.style.border = "1px #efedde solid";
		};
	}
	
	
	
	toolbarCell.appendChild( document.createTextNode("  ")  );
		
//button color
	buttons[ buttons.length ] = new imgButton( _this,toolbarCell, IMG_DIR + "fcolor.png", "Color" , function( event,  obj )
		{
			if( noHTML.style.display == "none" ) 
			{
				var textRange = getTextRange();
				
				var color =  new ColorPicker( _this, _this.thebody , function( event, obj, color )
				{
					textRange.execCommand( "foreColor" ,false, color );
				});
				
				color.show( );
			}
		} ); 
		
		buttons[ buttons.length -1 ].thebody.style.border= "1px #efedde solid";
		buttons[ buttons.length -1 ].thebody.style.verticalAlign = "middle";
		
		buttons[ buttons.length -1 ].thebody.onmouseover = function()
		{
			this.style.border = "1px #999999 solid";
		};
		
		buttons[ buttons.length -1 ].thebody.onmouseout = function()
		{
			this.style.border = "1px #efedde solid";
		};


//createLink
	buttons[ buttons.length ] = new imgButton( _this,toolbarCell, IMG_DIR + "link.png", "Link" , function( event,  obj )
		{
			if( noHTML.style.display == "none" ) 
			{
				var textRange = getTextRange();
				
				var string = window.prompt("Please enter the URL for the link.","http://");
				
				if( string != "" &&  string != "http://" )
				{
					textRange.execCommand( "createLink" ,false, string );
				}
				
			}
		} ); 
		
		buttons[ buttons.length -1 ].thebody.style.border= "1px #efedde solid";
		buttons[ buttons.length -1 ].thebody.style.verticalAlign = "middle";
		
		buttons[ buttons.length -1 ].thebody.onmouseover = function()
		{
			this.style.border = "1px #999999 solid";
		};
		
		buttons[ buttons.length -1 ].thebody.onmouseout = function()
		{
			this.style.border = "1px #efedde solid";
		};
		
	/*
//button image
	var buttonImage = new imgButton( _this,toolbarCell, IMG_DIR+"img.png", "Image" , function( event,  obj )
		{
			if( noHTML.style.display == "none" ) 
			{
				
				var imgP =  new ImagePicker( _this, document.body, function( event, obj ){
					
					if( obj.urlBox.value != "" )
					{	
						getTextRange().execCommand( "insertImage" ,false, obj.urlBox.value );
					}
					
				} );
				
				imgP.show();
				//textRange
			}
		} ); 
		
		buttonImage.thebody.style.border= "1px #efedde solid";
		buttonImage.thebody.style.verticalAlign = "middle";
		
		buttonImage.thebody.onmouseover = function()
		{
			this.style.border = "1px #999999 solid";
		};
		
		buttonImage.thebody.onmouseout = function()
		{
			this.style.border = "1px #efedde solid";
		};
		
	toolbarCell.appendChild( document.createTextNode(" | ") );
	
	*/
	
//button html	
	var buttonHTML = new imgButton( _this,toolbarCell, IMG_DIR+"html.png", "HTML Code" , function()
	{	
		_this.setEditModeOn( theIframe.style.display == "none" );
	}  );
	buttonHTML.thebody.style.border = "1px #efedde solid";
	buttonHTML.thebody.style.verticalAlign = "middle";
	
	
	this.setEditModeOn = function( bool )
	{
		if( bool )
		{
			_this.setHTML( noHTML.value );
			noHTML.style.display  = "none";	
			theIframe.style.display = "";
			
		}
		else
		{
			noHTML.value = _this.getHTML();
			noHTML.style.display  = "";	
			theIframe.style.display = "none";
		}
		
		_this.showButtons( bool );
		
		_this.onEditModeChange( _this, bool );
	}
	
	
	buttonHTML.thebody.onmouseover = function()
	{
		this.style.border = "1px #999999 solid";
	};
		
	buttonHTML.thebody.onmouseout = function()
	{
		this.style.border = "1px #efedde solid";
	};


//button Maximize
	
	var buttonLarge = new imgButton( _this,toolbarCell, IMG_DIR+"max.png", "Maximize" , function()
	{	
		var popWin = new PopFrame( _this , function( event ,obj )
		{
			_this.setHTML( largeText.getHTML() );
			return true;
		} );

		var largeText = new TextEditor( _this, popWin.midcell , _this.getHTML() );	
			largeText.enLargable(false);
			
			if( buttonHTML.isDisabled ) largeText.RTEdisabled( true );
			
			popWin.onResize = function( w, h  )
			{
				largeText.setSize( h , w  +"px");
			};

			popWin.maximize();
			popWin.setDisplay( true );
		
	}  );
	
	buttonLarge.thebody.style.border = "1px #efedde solid";
	buttonLarge.thebody.style.verticalAlign = "middle";
	
	buttonLarge.thebody.onmouseover = function()
	{
		this.style.border = "1px #999999 solid";
	};
		
	buttonLarge.thebody.onmouseout = function()
	{
		this.style.border = "1px #efedde solid";
	};
	
	
	this.enLargable = function( bool )
	{
		buttonLarge.disabled( !bool )
	};
	

	this.showButtons = function( bool )
	{
		
		formatBlock.style.display = ( bool )?"":"none";
		fontSize.style.display = ( bool )?"":"none";
		dorpDown.style.display = ( bool )?"":"none";
		
		TextMode.style.display = ( !bool )?"":"none";
		
		for(var i=0; i< buttons.length ;i++)
		{
			buttons[i].thebody.style.display = ( bool )?"":"none";
		}
		
	};



this.table.addSeparateRow();
// text edit area

var dataAreaCell = this.table.addCell();
	dataAreaCell.style.paddingRight = "2px";
	dataAreaCell.style.verticalAlign = "top";
var noHTML = document.createElement("textarea");
	dataAreaCell.appendChild( noHTML );
	noHTML.style.border = "1px solid #cccccc";
	noHTML.style.font = '10px "Lucida Grande", Lucida, Verdana, sans-serif';
	noHTML.style.width = "100%";
	noHTML.style.height = this.thebody.offsetHeight - toolbarCell.offsetHeight +"px";
	noHTML.style.display  = "none";
	noHTML.style.margin  = "0px";
	noHTML.onblur =  function(event){
		this.style.border = "1px solid #cccccc";
		_this.eventblur( event );
	}
	noHTML.onfocus =  function(event){
		this.style.border = "1px solid #999999";
	}	
	


if( document.all )
{
	theIframe = document.createElement( "div" );
	dataAreaCell.appendChild( theIframe );
	dataAreaCell.style.paddingRight = "4px";
	
		theHTML = document.createElement( "div" );
	theIframe.appendChild( theHTML );
		theHTML.style.width = "100%";
		theHTML.style.height = "100%";

		theHTML.contentEditable = true
		theHTML.innerHTML = html+"<br />";
		
		theHTML.onblur = function( )
		{
			//if( theHTML.innerHTML = "" ) theHTML.innerHTML = "<br />";
			
		}
		
	theIframe.style.overflowY = "auto";
	theIframe.style.overflowX = "hidden";
	
	theIframe.style.backgroundColor = "#eee";
	
	theIframe.onclick = function( event )
	{
		theHTML.focus();
		//innerHTML.select();
	};
	
	theIframe.onblur = function( event )
	{
		_this.eventblur(event);
		this.style.border = "1px solid #cccccc";
	};
	
	theIframe.onfocus = function( event )
	{
		this.style.border = "1px solid #999999";
	};
	
	
}
else
{
	theIframe = document.createElement("iframe");
	dataAreaCell.appendChild( theIframe );
    // 针对IE浏览器, 可编辑
	theIframe.contentWindow.document.designMode = 'On';
	theIframe.contentWindow.document.contentEditable = true;
	
    // 兼容 FireFox, 打开并写入
	theIframe.contentWindow.document.open();
	theIframe.contentWindow.document.writeln( "<html>");
	theIframe.contentWindow.document.write( "<body bgcolor='#ffffff' id='EDITAREA' style='padding:5px; margin:0px; font-size: 12px; font-family: \"Lucida Grande\", Lucida, Verdana, sans-serif; '>");
	theIframe.contentWindow.document.writeln( html+"</body></html>" );
	theIframe.contentWindow.document.close();
	
	//firefox
	theIframe.contentWindow.document.addEventListener("blur", function(event){
		_this.eventblur( event );
		theIframe.style.border = "1px solid #cccccc";
	},false);
	
	theIframe.contentWindow.document.addEventListener("focus", function(event){
		theIframe.style.border = "1px solid #999999";
	},false);
	
	/*
	theIframe.contentWindow.document.addEventListener("onkeypress", function(event){
		
		//theIframe.style.border = "1px solid #999999";
		//document.keypress( event );
		
	},false);
	*/
	
	//safir not supported
	//the blur event not supported for iframe
	//bug
}
	
	
	theIframe.style.border = "1px solid #cccccc";
	theIframe.style.fontSize = "12px";
	theIframe.style.fontFamily = '"Lucida Grande", Lucida, Verdana, sans-serif';
	theIframe.style.width = "100%";
	
	this.getHTML = function()
	{
		
		if( theIframe.style.display == "none"  ) 
		{
			_this.setHTML( noHTML.value );
		}
		else
		{
			if( document.all )
			{
				_this.setHTML( theHTML.innerHTML );
			}
			else
			{
				_this.setHTML( theIframe.contentWindow.document.body.innerHTML );
			}
		}
		
		return _this.html;
	};
	
	this.setHTML = function( thehtml )
	{
		noHTML.value = thehtml;
		_this.html = thehtml;
		
		if( document.all )
		{
			return theHTML.innerHTML = thehtml;
		}
		else
		{	
			return theIframe.contentWindow.document.body.innerHTML = thehtml;
		}
	};
	
	this.setDisplay = function( bool )
	{
		if( bool )
		{
			this.thebody.style.display = "";
		}
		else
		{
			this.thebody.style.display = "none";
		}
	};
	
	this.setSize = function( h , w  )
	{
		
		if( !w ) w = "100%";
		
		h = parseInt( h -2 );
		
		_this.thebody.style.width = w;
		_this.thebody.style.height = h +"px";
		
		theIframe.style.width = w;
		noHTML.style.width = w;
		
		dataAreaCell.style.height = h - toolbarCell.offsetHeight -5 + "px";
		
		theIframe.style.height = h - toolbarCell.offsetHeight -5 + "px";
		
		noHTML.style.height = h - toolbarCell.offsetHeight -5 + "px";
		
	};
	
	this.setGgColor = function( color )
	{
		if( document.all )
		{
			theIframe.style.backgroundColor = color;
		}
		else
		{
			theIframe.contentWindow.document.body.style.backgroundColor = color;
			
		}
	}
	
	
	this.RTEdisabled = function( bool )
	{
		buttonHTML.disabled( bool )
		
		if( !bool )
		{
			_this.setHTML( noHTML.value );
			noHTML.style.display  = "none";	
			theIframe.style.display = "";
		}
		else
		{
			noHTML.value = _this.getHTML();
			noHTML.style.display  = "";	
			theIframe.style.display = "none";
		}
		
	};
	
	
	this.eventblur = function( event ){};
	
}
 

 


 
 
function BarGraph( parent, parentNode , width , title )
{
	//call super class
	//BarGraph.baseConstructor.call( this, parent, parentNode );
	//---
	var _this = this;
	this.width = width || 150;
	
	this.parent = parent;
	if( typeof parent == "string" ) this.parent = document.getElementById( parent );
	this.parentNode = parentNode;
	if( typeof parentNode == "string" ) this.parentNode = document.getElementById( parentNode );
	
	this.thebody = document.createElement("div");
	this.parentNode.appendChild( this.thebody );
	
	var thetitle = document.createElement("div");
		//thetitle.colSpan = 2;
		thetitle.style.padding = "2px";
		
	this.thebody.appendChild( thetitle );
		thetitle.innerHTML = title;
	
	this.thebody.style.paddingTop = "5px";
	this.table = new tableLayout( this, this.thebody );
	
	this.table.table.style.width = "";

	var red = 51;
	var green = 51;
	var blue = 51;
	
	var colorArray = new Array( "#ff0000", "#999999" , "#666666" , "#333333" , "#00ff00"  );
	
	
	
	
	this.setData = function( titleArray, dataArray ,total )
	{
		_this.table.clear();
		
		for(i=0;i< titleArray.length;i++  )
		{
			/*
			var color = "#"+
			twoDigs( Number( 255 -( 200 ) ).toString(16) )+ 
			twoDigs( Number( 255 -( i* green )).toString(16) )+
			twoDigs( Number( 255 -( i* blue )).toString(16) );
			*/
			
			var titleCell = this.table.addCell( titleArray[i]+" ( "+ dataArray[i] +" - "+ parseInt( dataArray[i] / total *100  ) +"% )" );
				titleCell.style.color = "#333";
				titleCell.style.fontSize = "10px";
				titleCell.style.padding = "2px";
			this.table.addRow();
			
			var dataDiv = document.createElement("div");
			
			var dataCell = this.table.addCell( dataDiv );
				
				dataDiv.style.backgroundColor = colorArray[i];
				dataDiv.style.width =  parseInt( dataArray[i] / total * this.width )   +"px";
				dataDiv.style.height = "12px";
				dataDiv.style.color = "#FFF";
			this.table.addRow();

		}

	};

	
}

 
function ImagePicker( parent, parentNode  , onImagePicked )
{
	//call supclass
	ImagePicker.baseConstructor.call( this, parent, parentNode );
	//----------------------------------------------------------------
	var _this = this;
	
	
	this.frame = new TheFrame( _this, document.body , function( event, obj ){
		
		_this.remove();
		
	} );
	
	
var iframeEl = document.createElement("IFRAME");	
	setOpacity( iframeEl , 0 );
	iframeEl = this.frame.thebody.parentNode.insertBefore( iframeEl, this.frame.thebody );

		
	iframeEl.src = "about:blank";
	iframeEl.frameBorder = 0;
	iframeEl.style.display = "none";
	iframeEl.style.backgroundColor = "#FFFFFF";
	iframeEl.style.position = "absolute";
	iframeEl.style.left = "0px";
	iframeEl.style.top = "0px";
	iframeEl.style.width = "100%";
	iframeEl.style.height = "100%";
	iframeEl.style.zIndex = 300;

	//this.frame.closeButton.thebody.style.display = "none";
	this.frame.thebody.style.position = "absolute";
	this.frame.thebody.style.left = "200px";
	this.frame.thebody.style.top = "200px";
	this.frame.thebody.style.visibility = "hidden";
	this.frame.thebody.style.zIndex = iframeEl.style.zIndex +1;
	
	var theTable = new tableLayout( _this, this.frame.background.midcell );
		theTable.table.style.width = "300px";
		
	var srcTitleCell = theTable.addCell("Image URL");
	
//next row
theTable.addRow();
	
	this.urlBox = null;
/*	
	this.urlBox.type = "text";
	
	var srcCell = theTable.addCell(this.urlBox);
	this.urlBox.style.width = "100%";
*/

//next row
theTable.addRow();
	var upiFrame = document.createElement("IFRAME");
		upiFrame.frameBorder = 0;

	var uploadCell =  theTable.addCell( upiFrame );
		upiFrame.style.width = "300px";
		upiFrame.style.height = "300px";
		upiFrame.src = "./uploadimg.php";
		
//next row
theTable.addRow();
		
	var buttonYes = document.createElement("input");
		buttonYes.type = "button";
		
	var buttonCell = theTable.addCell(buttonYes);
		buttonCell.style.padding = "5px";
		buttonCell.align = "right";
		buttonYes.value = "Ok";
		buttonYes.onclick = function( event )
		{
			if( window.event ) event = window.event;
			
			//alert( upiFrame.contentWindow.document.body.getElementById( "urlbox" ).value );
			if( upiFrame.contentWindow.document.getElementById( "urlbox" ) )
			{
				_this.urlBox = upiFrame.contentWindow.document.getElementById( "urlbox" );
				onImagePicked( event, _this );
				_this.remove();
			}
			else
			{
				if( MSG_OUTPUT ) MSG_OUTPUT.pushMsg( "Please wait for image page loading" , "msg" );
			}
		}



	this.show = function(  )
	{
		
		var midLeft = parseInt( ( document.documentElement.clientWidth  - _this.frame.thebody.offsetWidth ) / 2 );
		var midTop =  parseInt( (  document.documentElement.clientHeight - _this.frame.thebody.offsetHeight ) / 2 );
		 
		_this.frame.thebody.style.left = midLeft +"px" ;
		_this.frame.thebody.style.top = midTop +"px";
		
		iframeEl.style.display  ="";
		_this.frame.thebody.style.visibility = "visible";
		
		
	};
	
	this.remove = function()
	{
		//iframeEl.style.diplay = "none";
		_this.frame.thebody.parentNode.removeChild( iframeEl );
		_this.frame.thebody.parentNode.removeChild( _this.frame.thebody );
	}
	
	
}
Class.extend( _gui , ImagePicker );



/*
 * add, delete and edit the item
 *  
 * 
*/

function ItemManager( parent , parentNode  , width, isAllOtherShow ,  table_name , img_dir  )
{
	//call supclass
	ItemManager.baseConstructor.call( this, parent, parentNode );
	var _this = this;
	//var itemlist = new Array();
	
	this.type = this.parent.type || 0;
	this.parentID = 0;
	this.isfolder = 1;
	
	this.sort = "sort";
	this.sortDir = "0";
	
	
	var TABLE_NAME = table_name || "item";
	var IMG_DIR = img_dir || "../img/";
	var STR_ADD_NEW = "Add";
	var STR_DELETE = "Delete";
	var STR_EDIT = "Edit";
	var STR_ALL = "<span class='cotext'>All</span>";
	var STR_OTHER = "<span class='cotext'>Other</span>";
	var STR_NEW_ITEM = "Add...";
	var STR_ARE_SURE_TO_DELETE = "Are you sure?";
	
	var ITEM_PER_PAGE = 25;

	
//event 
this.onListLoaded = function( itemlist_this ){};
this.onListItemOnClick = function( obj, button ){};
this.buttonEditOnClick = function( itemlist_this, button ){};
this.onListItemDeleted = function( itemlist_this ){};

	
//search bar cell	
	var searchCell = this.table.addCell(); 
		searchCell.align = "center";
		searchCell.style.verticalAlign = "top";
		//searchCell.style.height = "27px";
		searchCell.style.borderRight = "1px solid #333333";

		searchCell.style.backgroundImage = "url("+IMG_DIR+"toolbg.gif)";
		searchCell.style.backgroundPosition = "top";
		searchCell.style.backgroundRepeat = "repeat-x";
		searchCell.style.paddingTop = searchCell.style.paddingLeft = "1px";
		searchCell.vAlign = "top";
	
//search bar
	this.searchbar = new SearchBar( searchCell , null, 
	function()
	{
		_this.getItemList( _this.parentID )
	
	} , 
	function()
	{
		_this.getItemList( _this.parentID )
			
	} );
	//this.searchbar.setWidth( 220 );
	this.searchbar.disableSubmit = true;

//next	
	this.table.addRow();
	
	
//list div	
	var listDiv = document.createElement("div");
	var listCell = this.table.addCell( listDiv ); 
		listCell.style.borderRight = "1px solid #333333";
		listCell.style.backgroundColor = "#ddd";
		listDiv.style.height = listDiv.style.width = "100%";
		listDiv.style.overflowY = "auto";
		listDiv.style.overflowX = "hidden";
		
		listDiv.style.backgroundRepeat = "no-repeat";
		listDiv.style.backgroundPosition = "center";
		
	this.list = new FilterBar( _this , listDiv , "List" , "all" , "v" );
	this.list.tbody.parentNode.style.width = "100%";
	

	var listItemOnclick = function( obj )
	{
		_this.button_del.disabled( obj.value == 0 || obj.value == "all" );
		_this.button_edit.disabled( obj.value == 0 || obj.value == "all" );
		_this.onListItemOnClick( _this, obj );
	};
	
	
	if( isAllOtherShow == true )
	{
		this.list.addButton( STR_ALL, "all" , listItemOnclick , false , STR_ALL , false );
		this.list.addButton( STR_OTHER ,"0", listItemOnclick, false , STR_OTHER ,false );
		this.list.addSepBar();
	}


	this.list.onButtonOrderChange = function( guids, from, to  )
	{
		var guidArrayAsString = "";
		for( var i=0;i < guids.length ; i++  ) guidArrayAsString += "&guids[]="+guids[i].value;
		
		sendRequest( XML_SERVER , function( xmlhttp )
		{
			if( xmlhttp.status == 200 )
			{
				var msg = new serverMsg( xmlhttp, false );
				if( msg.status == "ok" )
				{
					_this.list.sortButtons("index", from,to);
					//if( MSG_OUTPUT ) MSG_OUTPUT.pushMsg( "Order changed" , "msg" );
				}
				else
				{
					//not seccess
					_this.list.sortButtons("sort",from ,to);
					if( MSG_OUTPUT ) MSG_OUTPUT.pushMsg( "Can not change the order" , "msg" );
				}
			}
			else if( xmlhttp.status == 404 )
			{
				if( MSG_OUTPUT ) MSG_OUTPUT.pushMsg( SERVER_ERROR_404 , "error" );
			}
		}, "&com=sortItem" + guidArrayAsString+"&from="+from +"&to="+to );
	};
	
//next	
	this.table.addRow();
	
	
//page bar 
	this.pageCell = this.table.addCell();
	this.pageCell.style.height = "27px";
	this.pageCell.style.backgroundColor = "#ccc";
	this.pageCell.style.borderRight = "1px solid #333333";
	
	this.pagebar = new PageBar( _this, this.pageCell );	
	
	
this.submitForm = function( )
{	
	_this.getItemList( _this.parentID );
};
	

this.getItemList = function( pID )
{
	_this.button_add.disabled( true );
	_this.button_del.disabled( true );
	_this.button_edit.disabled( true );
	_this.parentID = pID;
		
		var pop = new PopFrame( document.body, function(){
			
		} ,null, "#ffffff" );
		
		pop.setButtonCloseDisplay( false );
		pop.midcell.style.verticalAlign = "middle";
		pop.midcell.align = "center";
		
		pop.midcell.style.color = "#333";
		pop.midcell.innerHTML = "<img src='"+IMG_DIR+"syc_or_gr.gif' border=0 /> Loading... ";
		pop.setSize( 200,100 );
		pop.setDisplay( true );	
	
	listDiv.style.backgroundImage = "url("+IMG_DIR+"inprogress.gif)";
	
	RPC( XML_SERVER, "getItems", false , function( msg, xmlhttp )
	{
		_this.removeAll();
		
		if( msg.status == "ok" )
			{
				//try
				//{
					var items = msg.data.getElementsByTagName('item');
					if( items.length > 0 )
					{
						//get cate lists
						for(var i=0; i<items.length;i++ )
						{
							var guid = getXmlText( items[i], "guid" );
							var thebutton = _this.list.addButton( "<span class='cotext'>"+ 
							getXmlText( items[i], "guid" )+"</span> "+
							getXmlText(  items[i], "title_cn" ) , 
							guid, listItemOnclick , false , 
							getXmlText(  items[i], "title_cn" ) , true  );
							
							
							var serTags = items[i].getElementsByTagName('tags');
							var tags = new Array();
							
								if( serTags && serTags.length >0 )
								{
									for(var j=0;j< serTags.length; j++ )
									{
										
										tags[j] = new dataItem( getXmlText( serTags[j], "guid" ),
										0,
										getXmlText( serTags[j], "tagId" ),"","","","","","","","",
										
										getXmlText( serTags[j], "tag_title_cn" ),
										getXmlText( serTags[j], "tag_title_en" ),
										getXmlText( serTags[j], "tag_title_jp" ),
										
										"","","",
										
										0,
										"",
										"",
										getXmlText( serTags[j], "tag_title_it" ),
										""
							 			);		
									}
								}
							
							_this.pagebar.setData( getXmlText( items[i], "totalrows" ) , ITEM_PER_PAGE , _this.pagebar.offset );
							
							
							thebutton.sort = i;
							thebutton.data = new dataItem(	
								getXmlText( items[i], "guid" ),
								getXmlText( items[i], "desID" ),
								getXmlText( items[i], "titleID" ),
								getXmlText( items[i], "date" ),
								getXmlText( items[i], "isshow" ),
								getXmlText( items[i], "sort" ),
								getXmlText( items[i], "link" ),
								getXmlText( items[i], "type" ),
								getXmlText( items[i], "pid" ),
								getXmlText( items[i], "ishome" ),
								getXmlText( items[i], "isfolder" ),
								
								getXmlText( items[i], "title_cn" ),
								getXmlText( items[i], "title_en" ),
								getXmlText( items[i], "title_jp" ),
								
								getXmlText( items[i], "des_cn" ),
								getXmlText( items[i], "des_en" ),
								getXmlText( items[i], "des_jp" ),
								
								getXmlText( items[i], "price" ),
								getXmlText( items[i], "src" ),
								getXmlText( items[i], "oTitle" ),
								
								getXmlText( items[i], "title_it" ),
								getXmlText( items[i], "des_it" ),
								tags,
								getXmlText( items[i], "oDate" ),
								getXmlText( items[i], "rate" ), 
								
								getXmlText( items[i], "password" ),
								
								getXmlText( items[i], "role" ),
								
								getXmlText( items[i], "title" )
														
							 );
							
							//_this.dragdrop.addDraggableItem( eventList[ i ] );			
						}
					}
					
					var buttons = _this.list.getButtons();
					
					for(var i=0; i<  buttons.length; i++ )
					{
						if( buttons[ i ].value != "all" && buttons[ i ].value != 0  )
						{
							_this.list.buttonSelectedByIndex( i );
							break;
						}
					}
					
					_this.onListLoaded( _this );
				//}
				//catch( e )
				//{
				//	if( MSG_OUTPUT ) MSG_OUTPUT.pushMsg( "CAN NOT GET THE LIST。" , "error" );
				//}
				
				pop.hide();
			}
			else
			{
				
				try {
					if( "500" == msg.error.childNodes[0].data )	
					{
						showLoginWindow(function(){
							//_this.getCateList();
						});
					}
				} catch (e) {
					// TODO: handle exception
					showLoginWindow(function(){
							//_this.getCateList();
						});
				}
			}
			
		listDiv.style.backgroundImage = "";	
	
		_this.button_add.disabled( false );
		//_this.button_del.disabled( true );
		//_this.button_edit.disabled( true );
				
	}, _this.type + "" , pID , _this.searchbar.getText(), _this.sort  , _this.sortDir , _this.isfolder,  _this.pagebar.offset ,ITEM_PER_PAGE );
	 	
};




	

//next	
	this.table.addRow();
	
//the tool bar
	this.toolCell = this.table.addCell();
	this.toolCell.style.backgroundImage = "url( "+IMG_DIR+"toolshadow.png )";
	this.toolCell.style.backgroundRepeat = "repeat-x";
	this.toolCell.style.backgroundPosition = "top";
	this.toolCell.style.backgroundColor = "#666666";
	this.toolCell.style.height = "27px";
	
	
		
//button add	
	this.button_add = new imgButton( _this, this.toolCell, IMG_DIR+"add.png" , STR_ADD_NEW, 
		function( event , obj )
		{
			
			_this.button_add.disabled( true );
			var pop = new PopFrame( document.body, function(){
				
			} );
			
			pop.setButtonCloseDisplay( false );
			pop.midcell.style.verticalAlign = "middle";
			pop.midcell.align = "center";
			
			pop.midcell.style.color = "#333";
			pop.midcell.innerHTML = "<img src='../img/syc_or_gr.gif' border=0 /> 正在添加... ";
			pop.setSize( 200,100 );
			pop.setDisplay( true );
			
				var newCate = _this.list.addButton( STR_NEW_ITEM , -1 , 
				listItemOnclick , false , "" , true  );
					
				RPC( XML_SERVER, "addItem", false , function( msg, xmlhttp )
				{
					if( msg.status == "ok" )
					{
						var items = msg.data.getElementsByTagName( "item" );
						
						newCate.value = getXmlText( items[0], "guid" );
						newCate.innerHTML("<span class='cotext'>"+newCate.value+"</span> " );
						
						newCate.data = new dataItem( newCate.value , getXmlText( items[0], "desID" ),
						 getXmlText( items[0], "titleID" ) , getXmlText( items[0], "date" ) ,
						   0 , newCate.sort , "", _this.type , _this.parentID , 0, _this.isfolder ,
						  "" ,"" , ""  );
						
						//if( MSG_OUTPUT ) MSG_OUTPUT.pushMsg( "新分类已添加。" , "msg" );
						
						
						_this.pagebar.setData( parseInt(_this.pagebar.totalrow) + 1 , 
						_this.pagebar.rowPerPage , _this.pagebar.offset );
						
						
					}
					else
					{
						_this.list.removeButton( newCate );
						if( MSG_OUTPUT ) MSG_OUTPUT.pushMsg( "Can not add." , "error" );
						
						try {
							if( "500" == msg.error.childNodes[0].data )	
							{
								showLoginWindow(function(){
									//_this.getCateList();
								});
							}
						} catch (e) {
							// TODO: handle exception
							showLoginWindow(function(){
									//_this.getCateList();
								});
						}
					}
					
					_this.button_add.disabled( false );
					pop.hide();
					
					
					newCate.select();
					
					_this.buttonEditOnClick( _this , obj );
					
				},  _this.type+"" , _this.parentID , newCate.sort , _this.isfolder );
				
		}
	);
	//this.button_add.disabled(true);
	
	
//button DELETE
	this.button_del = new imgButton( _this, this.toolCell, IMG_DIR+"del.png" , STR_DELETE, 
		function( event , obj )
		{
			_this.button_del.disabled( true );
			
			var pop = new PopFrame( document.body, function(){
			
		} );
		
		pop.setButtonCloseDisplay( false );
		pop.midcell.style.verticalAlign = "middle";
		pop.midcell.align = "center";
		
		pop.midcell.style.color = "#333";
		pop.midcell.innerHTML = "<img src='../img/syc_or_gr.gif' border=0 /> Loading... ";
		pop.setSize( 200,100 );
		pop.setDisplay( true );
			
			if( _this.list.getButtonSelected() && window.confirm( STR_ARE_SURE_TO_DELETE ) && _this.list.value != 0 && _this.list.value != "all" )
			{
				var button = _this.list.getButtonSelected();
				button.thebody.style.visibility = "hidden";
				
				
				RPC( XML_SERVER, "delItem", false , function(msg, xmlhttp)
				{
					if( msg.status == "ok" )
					{
						_this.list.removeButton( button );
						_this.list.value = "";
						//SetCookie( "cates_value", "0" );
						
						//_this.list.buttonSelectedByIndex( -1 );
						//if( button ) button.select();
						
						//if( MSG_OUTPUT ) MSG_OUTPUT.pushMsg( "分类被删除。" , "msg" );
						
						_this.pagebar.setData( parseInt(_this.pagebar.totalrow) - 1 , 
						_this.pagebar.rowPerPage , _this.pagebar.offset );

						_this.onListItemDeleted( _this );
					}
					else
					{	
						button.thebody.style.visibility = "visible";
						if( MSG_OUTPUT ) MSG_OUTPUT.pushMsg( "Can not delete" , "error" );
				
						try {
							if( "500" == msg.error.childNodes[0].data )	
							{
								showLoginWindow(function(){
									//_this.getCateList();
								});
							}
						} catch (e) {
							// TODO: handle exception
							showLoginWindow(function(){
									//_this.getCateList();
								});
						}
						
					}
					_this.button_del.disabled( false );
					
					pop.hide();
					
				},button.data.guid, button.data.desID, button.data.titleID ,button.data.src );
			}
			else
			{
				pop.hide();
				_this.button_del.disabled( false );
				
				
			}
		}
	);	
	this.button_del.disabled(true);



//button edit
	this.button_edit = new imgButton( _this, this.toolCell, IMG_DIR+"edit.png" , STR_EDIT, 
		function( event , obj )
		{
			if( _this.list.getButtonSelected() )
			{
				//alert( "yes" );
				_this.buttonEditOnClick( _this , obj );
			}
		}
	);
	this.button_edit.disabled( true );
	
	
	this.removeAll = function()
	{
		
		var buttons = _this.list.getButtons();
		var buttonLen = buttons.length;
		
		while( buttonLen > 0 && buttons[ buttonLen-1 ].value != 0 )
		{
			_this.list.removeButton( buttons[ buttonLen-1 ] );
			
			buttons = _this.list.getButtons();
			buttonLen = buttons.length;
		}
		
	};
	
	
	
	this.resize = function( h, w )
	{
		if( h ) _this.setHeight( h );
		if( w ) _this.setWidth ( w );
	};
	
	this.setHeight = function( h )
	{
		listDiv.style.height = h - this.pageCell.offsetHeight - this.toolCell.offsetHeight - searchCell.offsetHeight + "px";
	};
	
	this.setWidth = function( w )
	{
		listDiv.style.width 
		= listCell.style.width 
		= this.toolCell.style.width
		= searchCell.style.width 
		= _this.table.table.style.width
		=  w +"px";
		
		_this.searchbar.setWidth( w );
	};
	
	this.setTitle = function( string )
	{
		this.list.title.innerHTML = string;
	};
	
	//ini
	if( width )
	_this.setWidth( width );
	else
	_this.setWidth( 250 );
	
	//this.setTitle( "产品" );
	
}
Class.extend( _gui , ItemManager );




/* 
function MusicBox( parent, parentNode )
{
	//call super class
	MusicBox.baseConstructor.call( this, parent, parentNode );
	//---
	var _this = this;

	var player = new document.createElement("OBJECT");
	this.thebody.appendChild( player );
	
	if(-1 != navigator.userAgent.indexOf("MSIE"))
    {
    	player.classid = "clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6";
    }
    else if(-1 != navigator.userAgent.indexOf("Firefox"))
    {
    	player.type = "clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6";     
    }     
	
	player.width = "300";
	player.height = "200";
		
	
}
Class.extend( _gui , MusicBox );

*/

function dataItem( guid , desID, titleID, date, isshow,sort, link , type , pid , ishome, isfolder,
title_cn ,title_en , title_jp , des_cn , des_en , des_jp , price , src , oTitle , title_it ,
des_it , tags , oDate ,rate , password , role , title)
{
	var thedate = new Date();
	var cYear = thedate.getFullYear();
	var cMonth = thedate.getMonth();
	var cDay = thedate.getDay();
	
	var dateString = cYear +"-" +parseInt( cMonth +1 ).format(2)+ "-"+ parseInt( cDay ).format(2)+ " 00:00:00";
	
	
	var _this = this;
	
	this.guid = guid || 0;
	this.desID = desID || 0;
	this.titleID = titleID || 0;
	
	if( date != null && date != "" )
	this.date = date;
	else
	this.date = dateString;
	
	this.isshow = isshow || 0;

	this.sort = sort || 0;
	
	this.link = link || "";
	this.type = type || 0;
	this.pid = pid || 0;
	this.ishome = ishome || 0;
	this.isfolder = isfolder || 0;
	
	this.title_cn = title_cn || "";
	this.title_en = title_en || "";
	this.title_jp = title_jp || "";
	
	this.des_cn = des_cn || "";
	this.des_en = des_en || "";
	this.des_jp = des_jp || "";
	
	this.price = price || 0;
	this.src =  src || "";
	this.oTitle =  oTitle || "";
	
	
	if( oDate != null && oDate != "" )
	this.oDate = oDate;
	else
	this.oDate = dateString;
	
	this.title_it = title_it || "";
	this.des_it = des_it || "";
	
	this.tags = tags || new Array();
	
	this.rate = rate || 0;
	
	this.cat_cn = "";
	this.cat_en = "";
	this.cat_jp = "";
	this.cat_it = "";
	
	this.type_cn = "";
	this.type_en = "";
	this.type_jp = "";
	this.type_it = "";
	
	this.rates = new Array();
	
	this.images = new Array();
	
	this.password = password || "";
	
	this.role = role || 0;
	
	this.title = title || "";
	
	
	this.isInTags = function( guid )
	{
		if( _this.tags.length <= 0 || _this.tags == null ) return false;
		
		for(var i=0;i< _this.tags.length; i++  )
		{
			//alert( _this.tags[i].guid );
			
			if( _this.tags[i].titleID == guid ) return true;
		}
		
		return false;
	};
	
	
	
	this.delTag = function( guid )
	{
		if( _this.tags.length <= 0 || _this.tags == null ) return false;
		
		for(var i=0;i< _this.tags.length; i++  )
		{
			//alert( _this.tags[i].guid );
			
			if( _this.tags[i].titleID == guid )
			{
				_this.tags.remove(  _this.tags[i] );
			}
		}
		
	}
	
	this.addTag = function( tagID , guid )
	{
		
		_this.tags[ _this.tags.length ] = new dataItem( tagID ,
			0,
			guid,"","","","","","","","",
			
			"",
			"",
			"",
			
			"","","",
			
			0,
			"",
			"",
			"",
			""
 			);		
		
	}
	
	
	
}
 
 
 function Rate( rate, cn,en,jp,it  )
 {
 	this.cn = cn || "";	
	this.en = en || "";
	this.jp = jp || "";
	this.it = it || "";
	
	this.rate = rate;
	
 }
 
 
function LabaledCheckBox( parent, parentNode , labelText , value , isChecked )
{

	var _this = this;
	this.parent = parent;
	this.parentNode = parentNode;
	this.value = value || "";
	this.thebody = document.createElement("label");	
	this.parentNode.appendChild( this.thebody );
	
	this.checkbox = document.createElement("input");
	this.checkbox.type = "checkbox";
	this.thebody.appendChild( this.checkbox );
	this.checkbox.checked = isChecked;
	this.thelabel = document.createElement( "span" );
	this.thelabel.innerHTML = labelText || "";
	this.thebody.appendChild( this.thelabel );

}




function DatePicker( parent, parentNode , title , yearStart )
{
	var _this = this
	this.parent = parent;
	this.parentNode = parentNode;
	this.thebody = document.createElement("span");	
	this.parentNode.appendChild( this.thebody );
	
	var date = new Date();
	var cYear = date.getFullYear();
	var cMonth = date.getMonth();
	var cDay = date.getDate();
	
	this.yearStart = yearStart || (cYear - 5);
	
	this.title = document.createElement( "span" );
	
	this.thebody.appendChild( this.title );
	
	this.title.innerHTML = title;
	
	this.theYear = document.createElement( "select" );
		this.theYear.style.width = "60px";
	this.thebody.appendChild( this.theYear );	
	_this.theYear.className = "box";
		

	var option = document.createElement("option");
	_this.theYear.appendChild( option );							
				option.value = "0000";	
				option.innerHTML = "YYYY";
	
	
	for(var i= ( _this.yearStart  ); i<= ( cYear+5 ) ;i++ )
	{
		
		
		option = document.createElement("option");
		_this.theYear.appendChild( option );							
		option.value = i;	
		option.innerHTML = i;
		
		if( i == cYear  ) option.selected= true;
		
		
	}
	
	this.thebody.appendChild( document.createTextNode(" ") );	
	
	
	this.theMonth = document.createElement( "select" );
	_this.theMonth.style.width = "45px";
	this.thebody.appendChild( _this.theMonth );	
	_this.theMonth.className = "box";
		
	option = document.createElement("option");
	_this.theMonth.appendChild( option );
	option.value = "00";
	option.innerHTML = "MM";
		
	for(var i= 0; i< 12 ;i++ )
	{
		
		option = document.createElement("option");
		_this.theMonth.appendChild( option );							
		option.value = (i+1);	
		option.innerHTML = parseInt( i+1 ).format(2);
		
		if( i == cMonth  ) option.selected= true;
		
	
	}
	
	this.thebody.appendChild( document.createTextNode(" ") );	
	
	
	_this.theDay = document.createElement( "select" );
	_this.theDay.style.width = "45px";
	this.thebody.appendChild( _this.theDay );	
	_this.theDay.className = "box";
	
	option = document.createElement("option");
	_this.theDay.appendChild( option );							
	option.value = "00";	
	option.innerHTML = "DD";
	
	
	for(var i= 1; i<= 31 ;i++ )
	{
		
		option = document.createElement("option");
		_this.theDay.appendChild( option );
		option.value = i;	
		option.innerHTML = parseInt( i ).format(2);
		
		if( i == cDay  ) option.selected= true;
		
	
	}
	
	
	this.toString = function()
	{		
		return _this.theYear.value +"-" + parseInt( _this.theMonth.value ).format(2) + 
		"-" + parseInt( _this.theDay.value ).format(2)
	}
	
	this.setDate = function(yyyy, mm, dd){
		
		//alert( yyyy );
		
		if (yyyy == 0 && mm == 0 && dd == 0) {
		
			_this.setToToday();
		
		}
		else 
		{
			_this.theYear.value = yyyy;
			_this.theMonth.value = (mm - 0);
			_this.theDay.value = (dd - 0);
		}
		
	}
	
	this.addDays = function( days )
	{
		
		var newDate = new Date();
		newDate.setDate(newDate.getDate() + days );
		
		_this.setDate(newDate.getFullYear(), newDate.getMonth() + 1 , newDate.getDate() );
		
	};
	
	
	this.setDisplay = function( bool )
	{
		if( bool )
		{
			this.thebody.style.display = "";
		}
		else
		{
			this.thebody.style.display = "none";
		}	
	}

//event	
	this.onChange = function( obj, YYYY, MM, DD , date ){};
	
	
	_this.theYear.onchange =  function()
	{
		
		var date = new Date();
			date.setFullYear( _this.theYear.value  );
			date.setMonth(_this.theMonth.value - 1);
			date.setDate( _this.theDay.value   );
			
		_this.setDate( date.getFullYear(),
		 date.getMonth()+1, date.getDate() );
			
			
		_this.onChange( _this, 
		_this.theYear.value ,
		_this.theMonth.value, 
		_this.theDay.value , 
		date );
		
	}
	
	_this.theMonth.onchange =  function()
	{
		var date = new Date();
			date.setFullYear( _this.theYear.value  );
			date.setMonth(_this.theMonth.value - 1);
			date.setDate( _this.theDay.value   );
		
		_this.setDate( date.getFullYear(),
		 date.getMonth()+1, date.getDate() );
		
			
		_this.onChange( _this, 
		_this.theYear.value ,
		_this.theMonth.value, 
		_this.theDay.value , 
		date );

	}
	
	
	_this.theDay.onchange =  function()
	{
		var date = new Date();
			date.setFullYear( _this.theYear.value  );
			date.setMonth(_this.theMonth.value - 1);
			date.setDate( _this.theDay.value   );
		
		_this.setDate( date.getFullYear(),
		 date.getMonth()+1, date.getDate() );
		
			
		_this.onChange( _this, 
		_this.theYear.value ,
		_this.theMonth.value, 
		_this.theDay.value , 
		date );

	}
	
	this.setToToday = function(){
	
	
		_this.addDays(0);
	
	}
	
	this.getDate=function()
	{
		var date = new Date();
			date.setFullYear( _this.theYear.value  );
			date.setDate( _this.theDay.value   );
			date.setMonth(_this.theMonth.value - 1);
			
		return  date;			
	};
	
}







/*
 * XML_ARRAY = new Array(); 
 * XML_ARRAY[0] = new Array( value , cn, en,jp,it  )
 * 
 * onChange( _this, this.value );
 * 
 * 
 */
function DorpList( parent , parentNode , label , XML_ARRAY , XML_TYPE , lang , onChange )
{
	var _this = this
	this.parent = parent;
	this.parentNode = parentNode;
	this.thebody = document.createElement("span");	
	this.parentNode.appendChild( this.thebody );
	
	
	this.lang = lang || "cn";
	
	var STR_ALL_EN = "All";
	var STR_ALL_CN = "全部";
	
	
	this.thebody.innerHTML = label + " ";
	this.thebody.style.paddingLeft = "10px";

	
	this.theList = document.createElement( "select" );
	this.thebody.appendChild( this.theList );	
	this.theList.style.width = "100px";
	this.theList.disabled = true;
	
	_this.theList.className = "box";
	
	var option = document.createElement("option");
	_this.theList.appendChild( option );							
	option.value = "--";	
	option.innerHTML = "加载中(loading)...";	
	_this.theList.value = "--";
	
	_this.theList.onchange = function()
	{
		_this.value = _this.theList.value;
		onChange( _this, _this.value );
	}

	this.value = 0;
	
	if(  typeof XML_ARRAY == "string" )
	{
		RPC( XML_ARRAY , "getItems", false , function( msg, xmlhttp )
		{
			if( msg.status == "ok" )
			{
				
				try{
					
					var items = msg.data.getElementsByTagName('item');
					if (items.length > 0) 
					{
						_this.theList.innerHTML = "";
						
						option = document.createElement("option");
						_this.theList.appendChild( option );							
						option.value = 0;	
						option.innerHTML = STR_ALL_CN;
						
						
						for(var i=0; i<  items.length  ;i++ )
						{
							option = document.createElement("option");
							_this.theList.appendChild( option );
							option.value = getXmlText( items[i], "guid" );
	
							option.innerHTML = getXmlText( items[i], "title_"+ lang );
							
						}
						
						_this.theList.value = _this.value;
						_this.theList.disabled = false;
					}
				}
				catch(e)
				{
					_this.theList.innerHTML = "<option>不能加载选项，请稍后再试</option>";	
					_this.theList.disabled = false;	
				}				
			}
			else
			{									
				_this.theList.innerHTML = "<option>不能加载选项，请刷新页面</option>";	
				_this.theList.disabled = false;	
	
				try {
					if( "500" == msg.error.childNodes[0].data )	
					{
						showLoginWindow(function(){
							//_this.getCateList();
						});
					}
				} catch (e) {
					// TODO: handle exception
					showLoginWindow(function(){
							//_this.getCateList();
					});
				}
			}									
		} , XML_TYPE, "", "", "sort", "0", "1" );
		
	}
	else
	{
		if( XML_ARRAY.length > 0 )
		{
			_this.theList.innerHTML = "";	

			for(var i=0; i<  XML_ARRAY.length  ;i++ )
			{				
				var option = document.createElement("option");
				_this.theList.appendChild( option );
				option.value = XML_ARRAY[i][0];	
				option.innerHTML = XML_ARRAY[i][ 1 ];
				
			}
			_this.theList.value = XML_ARRAY[0][0];
			_this.value = _this.theList.value;
			_this.theList.disabled = false;				
			
		}
	
		
		
		this.theList.disabled = false;
	}
	
	this.setValue = function( value ){
		_this.value = value;
		if( _this.theList.disabled  == false )
		{
			_this.theList.value = value;
		}
	};
	
	this.getValue = function()
	{
		if( _this.theList.disabled  == false )
		{
			return _this.theList.value;
		}
		else
		{
			return _this.value;
		}
	}
	
}


function createTagList( thelist , title , button,  type,  isFolder, showFolder )
{
	
	//==
	thelist.style.display = "";				
	thelist.innerHTML = "<option value='0' selected='selected' >加载中...</option>";
	thelist.disabled = true;
	//var type = 8;
	
	thelist.onchange = function()
	{
		this.disabled = true;
		if( this.value != 0 && this.value != "-" )
		{
			var options = this.getElementsByTagName("option");
			
			for(var i=0; i<options.length; i++)
			{
				if( this.value == options[i].value )
				{
					//alert( options[i].id +"-"+ options[i].value );
					
					if( options[i].id == 1  )
					{
						RPC( XML_SERVER, "delTagForItem", false , function( msg, xmlhttp )
						{
							if( msg.status == "ok" )
							{
								button.data.delTag( thelist.value  );
								getTags(  type , isFolder , thelist , button ,title  , showFolder );
								
							}
							else
							{									
								try {
									if( "500" == msg.error.childNodes[0].data )	
									{
										showLoginWindow(function(){
											//_this.getCateList();
										});
									}
								} catch (e) {
									// TODO: handle exception
									showLoginWindow(function(){
											//_this.getCateList();
									});
								}
							}									
						}, button.data.guid,  options[i].value  );
						
					}
					else
					{
						
						RPC( XML_SERVER, "putTag", false , function( msg, xmlhttp )
						{
							if( msg.status == "ok" )
							{
								button.data.addTag( getXmlText( msg.items[0], "guid" ) , 
								thelist.value  );									
								getTags(  type , isFolder , thelist , button , title , showFolder );	
							}
							else
							{
								try {
									if( "500" == msg.error.childNodes[0].data )	
									{
										showLoginWindow(function(){
											//_this.getCateList();
										});
									}
								} catch (e) {
									// TODO: handle exception
									showLoginWindow(function(){
											//_this.getCateList();
										});
								}
							}
							
								
						}, button.data.guid,  options[i].value  );
						
					}
					
					break;
				}
			}
			
		}
		else
		{
			this.disabled = false;
			this.value = 0;
			
		}
	};

	getTags(  type , isFolder , thelist , button , title , showFolder  );		



}




function getTags( type , isFolder , thelist , button , text , dataName )
{
	
	RPC( XML_SERVER, "getItems", false , function( msg, xmlhttp )
	{
			if( msg.status == "ok" )
			{
					var catName = "";
				
					var items = msg.data.getElementsByTagName('item');
					if( items.length > 0 )
					{
						
						thelist.innerHTML = "<option id='0' value='0' selected='selected' >-"
						+text+"-</option>";
								
						//get cate lists
						for(var i=0; i<items.length;i++ )
						{
							var guid = getXmlText( items[i], "guid" );
							
							
							var value = 0;
							var selText = ""
							
							if( button.data.isInTags( guid ) )
							{
								value = 1;
								selText = "\t*"
							}
						
							
							if(  "show_folder" == dataName || dataName == true )
							{
								if( catName != getXmlText( items[i], "cat_cn" )  )
								{
									
									catName = getXmlText( items[i], "cat_cn" );
									thelist.innerHTML += "<option disabled='disabled' id='-' value='-'  >+"
									+catName +"-</option>";
									
								}
								
								
								thelist.innerHTML += "<option id='"+ value +"' value='"
								+( guid )+"'  >+--"
								+getXmlText( items[i], "title_cn" )+" " +selText+"</option>";
								
							}
							else
							{
								thelist.innerHTML += "<option id='"+ value +"' value='"
								+( guid )+"'  >+--"
								+getXmlText( items[i], "title_cn" ) + " " +selText+"</option>";
								
							}
						}
						
						
						thelist.disabled = false;
					}
			}
			else
			{	
				try {
					if( "500" == msg.error.childNodes[0].data )	
					{
						showLoginWindow(function(){
							//_this.getCateList();
						});
					}
				} catch (e) {
					// TODO: handle exception
					showLoginWindow(function(){
							//_this.getCateList();
						});
				}
			}						
	}, type + "" , "" , "", "cat" , "0" , isFolder );

}