/*
 * filename: wgui.class.js
 * 
 * 
 * 
 * 
 * 
 */



SRC_CLOSE_BLACK = "../img/close_black.png";


//class Page Bar
function PageBar( parent , parentNode )
{
	var _this = this;
	//--
	this.thebody = document.createElement("div");
	this.parent = parent;
	var BACKGROUND_COLOR = "";
	var COLOR = "#ccc";
	var TEXT_LAST = "Last page";
	var TEXT_FIRST = "First page";
	var TEXT_SHOW_ALL = "Showing All";
	
	var startPageNum = 1;
	var maxpage = 10;
	var page = 0;
	
	this.rowPerPage;
	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= "bold 11px Arial, Helvetica, Geneva, sans-serif";
		
		return pageButton;
	};
	
	var resetpagenum = function()
	{
		pagenumspan.innerHTML = "";
		
			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.backgroundColor = COLOR;
							//button.style.color = BACKGROUND_COLOR;
							button.style.color = "#FFF";
							button.style.whiteSpace = "";
							button.style.fontWeight = "bold";
							button.style.fontSize = "13px";
						}
						else
						{
							//button.style.backgroundColor = BACKGROUND_COLOR;
							button.style.color = COLOR;
							button.style.fontSize = "11px";
						}
						
						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 = "#999999";
							//this.style.color = BACKGROUND_COLOR;
						}
						
						button.onmouseout = function( event )
						{
							if( _this.offset == ( ( this.innerHTML - 1) * _this.rowPerPage ) ) 
							{
								//this.style.backgroundColor = COLOR;
								//this.style.color = BACKGROUND_COLOR;
							}
							else
							{
								//this.style.backgroundColor = BACKGROUND_COLOR;
								//this.style.color = COLOR;
							}
							
						}
					}
			}
			
		};
	
	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;&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;&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.offset +"/" + thetotalrow)
			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 || "roundBox";	

	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.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";
	
	//the body 
	this.midcell = midtr.insertCell( -1 );
	this.midcell.style.backgroundColor = BACKGROUND_COLOR;
	
	
	var rightTd =  midtr.insertCell( -1 );
	rightTd.className = "right";


	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";
	
	
	var bottomTd =  bottomtr.insertCell( -1 );
	bottomTd.className = "bottom";
	
	
	var bottomTdright = bottomtr.insertCell( -1 );
	bottomTdright.width="20";
	bottomTdright.height="20";
	bottomTdright.innerHTML = "<div style='width:20px; height:20px;' ></div>";
	bottomTdright.className = "rightbottom";

	
	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 )
	{
		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" )
		{
			_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 );
	};
	
	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;
	};
}



//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.titleid  = 0;
	this.desid = 0;
	this.cntitle = "";
	this.des = "";
	
	
	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/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.className = "img_button";
		this.thebody.src = src;
		this.thebody.alt = title;
		this.thebody.title = title;
		this.thebody.style.cursor = "pointer";
		this.thebody.style.verticalAlign = "middle";
		
	if( document.all )	
	{
		//this.thebody.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+_this.thebody.src+"', sizingMethod='auto')";
		this.thebody.style.backgroundColor = parentNode.style.backgroundColor;
		//this.thebody.style.backgroundColor = "#610000";
	}
		
		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 )
		{
			setOpacity ( this.thebody, 50 );
			this.thebody.style.cursor = "";
		}
		else
		{
			setOpacity ( this.thebody, 100 );
			
			this.thebody.style.cursor = "pointer";
		}
		
	}
	
		
}


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 += 40;
		}
		textBox.style.width = number +"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  );
 * 
 * 
 */
function datePicker( parent, parentNode , onDatePicked )
{
	var _this = this;
	this.parent = parent;
	this.parentNode = parentNode;
	this.frame = new TheFrame( _this, this.parentNode , function( event, obj ){
		
		onDatePicked(event, showingdate.getFullYear(),  
		new Number( showingdate.getMonth()+1).format(2) , 
		new Number( showingdate.getDate()  ).format(2) );
		
		_this.remove();
		
	} );
	
	var date = new Date(); 
	var theDayCell = new Array();
	var showingdate = null;

	var months = new Array("January",  "February", "March" , "April" , "May", "June" , "July" , "Aguest", "September" , "October" , "November", "December");
	
	var iframeEl = document.createElement("IFRAME");
	iframeEl = this.frame.thebody.parentNode.insertBefore( iframeEl, this.frame.thebody );
	setOpacity( iframeEl , 40 );
		
	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%";
	

	//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";
	
	if( document.all )
	{
		this.frame.setDisplay( false );	
	}
	else
	{
		setOpacity( this.frame.thebody , 0 );
	}
	
	
//date grie	
	this.table = new tableLayout( _this, this.frame.background.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;'>Year </span>"+date.getFullYear() + " "+ months[ date.getMonth() ]);
		yaerCell.colSpan = 5;
		yaerCell.style.height = "25px";
		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
	this.table.addCell("<span class='week' align='center'>Sun</span>").align = "center";
	this.table.addCell("<span class='week' align='center'>Mon</span>").align = "center";
	this.table.addCell("<span class='week' align='center'>Tue</span>").align = "center";
	this.table.addCell("<span class='week' align='center'>Wed</span>").align = "center";
	this.table.addCell("<span class='week' align='center'>Thu</span>").align = "center";
	this.table.addCell("<span class='week' align='center'>Fri</span>").align = "center";
	this.table.addCell("<span class='week' align='center'>Sat</span>").align = "center";
	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";
			theDayCell[theDayCell.length-1].onclick = function( event )
			{
				onDatePicked(event, this.getAttribute("year"),  
				new Number( this.getAttribute("month") ).format(2) , 
				new Number( this.innerHTML  ).format(2));
				//_this.parentNode.removeChild( _this.frame.thebody );
				_this.remove();
			};
		}
		this.table.addSeparateRow();
	}
	
//toolbar
	var toolbar = this.table.addCell();
		toolbar.colSpan = 7;
		toolbar.style.padding = "3px";
		//toolbar.style.backgroundColor = "#999999";
		toolbar.align = "right";
		
	var button_today = new imgButton(_this, toolbar, "../img/today.png", "Today", function()
	{
		_this.reset( date.getFullYear(), date.getMonth(), date.getDate() );
	});
	
	
	this.reset = function( year, month, day )
	{	
		if( year < 1900 ) year = date.getFullYear();
		if( day < 1 || day > 31 ) day = date.getDate();

			if( month > 11 )
			{
				month = 0;
				year++;
			}
			else if( month < 0 )
			{
				month = 11;
				year--;
			}
		
		showingdate = new Date( year, month, day );
		showingdate.setDate( 1 );
		var dayoffset = showingdate.getDay();

		showingdate.setMonth( month - 1 );
		showingdate.setDate( 0 );
		var lastDayofLastMonth = showingdate.getDate();
		showingdate = new Date( year, month , day );


		showingdate.setMonth( month +1 );
		showingdate.setDate( 0);
		var lastday = showingdate.getDate();
		showingdate = new Date( year, month , day );

		var today = date.getDate();
		
		yaerCell.innerHTML = "<span style='color:#333;'>Year </span>"+year + " "+ months[ month ];
		
		for(var i=0;i<6; i++  )
		{
			for(var j=1;j<=7;j++ )
			{
				var theday =  j+(i*7) - dayoffset;
				var index  = j+(i*7)-1;
				
				
				if( theday < 1 )		
				{
					var prevMonth = showingdate.getMonth() - 1;
					var prevYear = showingdate.getFullYear();
					
					if( prevMonth < 0 ) 
					{
						prevMonth = 11;
						prevYear = nextYear-1;
					}
					theDayCell[index].setAttribute("month", prevMonth +1 );
					theDayCell[index].setAttribute("year", prevYear );
					
					theDayCell[ index ].innerHTML = lastDayofLastMonth + theday+ "";
					theDayCell[ index ].style.backgroundColor = "#eee";
					theDayCell[ index ].style.color = "#ccc";
				}
				else if( theday > lastday )
				{
					theDayCell[ index ].innerHTML = theday - lastday;
					
					var nextMonth = showingdate.getMonth() +1;
					var nextYear = showingdate.getFullYear();
					
					if( nextMonth > 11 ) 
					{
						nextMonth = 0;
						nextYear = nextYear+1;
					}
					theDayCell[index].setAttribute("month", nextMonth +1 );
					theDayCell[index].setAttribute("year", nextYear );
					
					theDayCell[ index ].style.backgroundColor = "#eee";
					theDayCell[ index ].style.color = "#ccc";
				}
				else
				{
					showingdate.setDate( theday );
					var showingday = showingdate.getDate();
					theDayCell[index].innerHTML = showingday +"";
					
					theDayCell[index].setAttribute("year", showingdate.getFullYear() );
					theDayCell[index].setAttribute("month", showingdate.getMonth() +1);
					
					
					if( showingday == today && year == date.getFullYear() && month == date.getMonth() )
					{
						//alert( showingday +"-"+ today +":"+  year +"-"+ date.getFullYear() +":"+ month +"-"+ date.getMonth()  );
						
						theDayCell[ index ].style.backgroundImage = "url(../img/daybg.png)";
						theDayCell[ index ].style.backgroundPosition= "center";
						theDayCell[ index ].style.backgroundRepeat = "no-repeat";
					}
					else
					{
						theDayCell[ index ].style.backgroundColor = "#ddd";
						theDayCell[ index ].style.backgroundImage = "";
					}
						theDayCell[ index ].style.color = "#000";				
				}
			}
		}
		
		showingdate = new Date( year, month, day );
	};
	
	
	this.show = function( left, top , year , month , date )
	{
		_this.frame.thebody.style.left = left +"px";
		_this.frame.thebody.style.top = top +"px";
		//_this.setDisplay( true );
		iframeEl.style.display = "";
			
		_this.reset( year, month-1, date )
		
		if( !document.all )
		{
			var showing = new transform( 
			function( intv ){
				setOpacity( _this.frame.thebody , intv );
			} , 
			function(){
				setOpacity( _this.frame.thebody ,100 );
			} , 20,  60 );
			showing.run();
		}
		else
		{
			_this.frame.setDisplay( true );
		}
	};
	
	this.remove = function()
	{
		//iframeEl.style.diplay = "none";
		_this.frame.thebody.parentNode.removeChild( iframeEl );
		_this.frame.thebody.parentNode.removeChild( _this.frame.thebody );
	}
	
	/*
	this.setDisplay = function( bool )
	{
		_this.frame.setDisplay( bool );
	};
*/

	//ini
	//this.reset( date.getFullYear(), date.getMonth(), date.getDate() );
	
}







function imgMUploder( parent, parentNode, id, 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();
	
/*
	var titleCell = document.createElement("div");
		titleCell.style.backgroundColor  = "#000";
		titleCell.style.padding = "3px";
		titleCell.innerHTML = "Photos:";
		titleCell.style.color = "#fff";
	this.thebody.appendChild( titleCell );
*/	
	
	this.theWidth = theWidth || 270;
	
	this.theIframe = document.createElement("IFRAME");
	this.theIframe.name = timestamp;
	this.theIframe.id = timestamp;
	this.theIframe.src = _this.SERVER_PAGE+"?itemid="+id+"&width="+_this.theWidth;
	this.theIframe.style.border = "1px #333 solid";
	if( document.all ) this.theIframe.frameBorder = 0;
	this.thebody.appendChild( this.theIframe );
	
/*
	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+"&width="+_this.theWidth;
	};
	
//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";
		}
	
	
	var theDes = new TextEditor( _this , this.thebody , des );
	
	this.setsize = function( h, w )
	{
		theDes.setSize( h - 25 , w );
		
	};
	
	this.getTitle = function()
	{
		return theTitle.value;
	};
	
	this.setTitle = function( str )
	{
		theTitle.value = str;
	};
	
	this.getDes = function()
	{
		return theDes.getHTML();
	};
	
	this.setDes = function( html )
	{
		theDes.setHTML(html);
	};
//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 )
	{
		theDes.RTEdisabled( bool );
	};
	
	
}



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


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

	this.parent = parent;
	this.parentNode = parentNode;
	this.thebody = document.createElement("div");
	this.parentNode.appendChild( this.thebody );
		
	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++)
	{
		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%"  );
			}
			
			lastshow = panelList[ obj.value ];
		}, i+"" );
		
		panelList[panelList.length] = new TitleAndDes( _this, this.thebody , "", "" );
		panelList[panelList.length-1].setDisplay( false );
	}

	langTabs.getTabs()[ 0 ].method( langTabs.getTabs()[ 0 ] );
	langTabs.getTabs()[ 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 )
		}
	};

}


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

	var _this = this;
	var SRC_CLOSE_BLACK = "../img/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 );
	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.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 PopFrame( parent function( event, obj ){ return true; } )
 * 
 * 
 * 
 */
function PopFrame( parent , onClose )
{
	var _this = this;
	var BgMax = 60;
	var isMax = false;
	var HEIGHT = 200;
	var WIDTH = 400;
		

	var iframeBG = document.createElement("IFRAME");

	this.onClose = onClose || function( event, _this ){};
	this.onResize = function( w,h ){};
	
	this.frame = new TheFrame( _this , document.body, function( event, obj )
	{
		if( _this.onClose( event, _this ) ) _this.hide();
	} );
	
	
	this.frame.setVisible( false );
	this.frame.thebody.style.position = "absolute";
	this.frame.thebody.style.left = "0px";
	this.frame.thebody.style.top = "0px";
	
	this.appendChild = this.frame.background.appendChild;
	this.midcell = this.frame.background.midcell;
	
	iframeBG.frameBorder = 0;
	iframeBG.style.width  = "100%";
	iframeBG.style.height = document.documentElement.scrollHeight +"px";
	
	iframeBG = this.frame.thebody.parentNode.insertBefore( iframeBG, this.frame.thebody );
	iframeBG.style.display = "none";
	iframeBG.src = "about:blank";

	iframeBG.style.top  = "0px";
	iframeBG.style.left = "0px";

	iframeBG.style.backgroundColor = "#000000";	
	iframeBG.style.position = "absolute";
	iframeBG.style.zIndex = 100;
	
	setOpacity( iframeBG, ( BgMax ) );
	
	this.frame.thebody.style.zIndex = iframeBG.style.zIndex  + 1;

	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;
		//var scrollTop = document.documentElement.scrollTop;
		
		//h = h+scrollTop;
		
		//alert( document.body.scrollTop );
		
		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;
			
		}
		
		_this.frame.thebody.style.top = top + scrollTop - 15 + "px";
		_this.frame.thebody.style.left = left + "px";
		_this.frame.resize( h,w );
		
		_this.onResize( w - 50 , h - 50  );
	};
	
	
	this.maximize = function()
	{
		isMax = true;
		resize();
	};
	
	
	this.setSize = function( w, h )
	{
		HEIGHT = h;
		WIDTH = w;
		//_this.frame.resize( h , w );
		resize();
	};
	
	AddEventListener( window, "resize",  resize );
	
	this.setDisplay = function( bool )
	{
		if( bool )
		{
			iframeBG.style.display = "";
			//resize();
			
		}
		else
		{
			iframeBG.style.display = "none";
		}
		
		_this.frame.setVisible( bool );
	};
	
	
	this.hide = function()
	{
		RemoveEventListener( window, "resize", resize );
				
		//_this.setDisplay( false );
		_this.frame.remove();
		iframeBG.parentNode.removeChild(  iframeBG  );
	};
	

	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.thebody.style.width = "300px";
	//this.thebody.style.height = "500px";
	
	
	this.table = new tableLayout( _this,  this.thebody );
	//this.table.table.style.height = "100%";
	
	var theIframe;
	//for ie only
	var theHTML;
	
	
	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("bold",
 "Italics", 
 "Under Line" ,
 "Left",
 "Center", 
 "Right" ,
 "Indent",
 "Outdent",
 "List",
 "List"  );

var commands = new Array( "bold", 
"Italic", 
"UnderLine" , 
"JustifyLeft", 
"JustifyCenter", 
"JustifyRight" , 
"Indent",
"Outdent",
"InsertUnorderedList", 
"InsertOrderedList"  );


//button FormatBlock
	var formatBlock = document.createElement("select");
		toolbarCell.appendChild( formatBlock );
		formatBlock.style.margin = "0px";
		
		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( document.all ) str = "<"+str+">";
				
				getTextRange().execCommand( "FormatBlock" ,false, str );
				
			};

//button size
	var fontSize = document.createElement("select");
		toolbarCell.appendChild( fontSize );
		fontSize.style.margin = "0px";
		
		var opt = document.createElement("option");
			opt.innerHTML = "Select a 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 );
			}
		};	
		
	
	toolbarCell.appendChild( document.createTextNode(" | ")  );

	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" ) 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
	var buttonColor = 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 )
				{
					//alert( color );
					textRange.execCommand( "foreColor" ,false, color );
					
					
				});
				//var p = getXY( obj );
				
				color.show( );
				
				//textRange
			}
		} ); 
		
		buttonColor.thebody.style.border= "1px #efedde solid";
		buttonColor.thebody.style.verticalAlign = "middle";
		
		buttonColor.thebody.onmouseover = function()
		{
			this.style.border = "1px #999999 solid";
		};
		
		buttonColor.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 = buttons[buttons.length] = new imgButton( _this,toolbarCell, IMG_DIR+"html.png", "HTML Code" , function()
	{	
		if( theIframe.style.display == "none" )
		{
			_this.setHTML( noHTML.value );
			noHTML.style.display  = "none";	
			theIframe.style.display = "";
		}
		else
		{
			noHTML.value = _this.getHTML();
			noHTML.style.display  = "";	
			theIframe.style.display = "none";
		}
		
	}  );
	buttons[buttons.length-1].thebody.style.border = "1px #efedde solid";
	buttonHTML.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 Maximize
	
	var buttonLarge = buttons[buttons.length] = 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 );
		
	}  );
	buttons[buttons.length-1].thebody.style.border = "1px #efedde solid";
	buttonLarge.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";
	};
	
	
	this.enLargable = function( bool )
	{
		buttonLarge.disabled( !bool )
	}
	


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 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);
	
	//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 );
		
		if( document.all )
		{
			return theHTML.innerHTML;
		}
		else
		{
			return theIframe.contentWindow.document.body.innerHTML;
		}
	};
	
	this.setHTML = function( thehtml )
	{
		noHTML.value = 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 + "px";
		
		theIframe.style.height = h - toolbarCell.offsetHeight + "px";
		
		noHTML.style.height = h - toolbarCell.offsetHeight + "px";
		
	};
	
	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 );

 
 
/* 
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 );

*/