/*
 * 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 = "";
	
	var conerSize = 15;

	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=conerSize;
	this.topTdLeft.height=conerSize;
	this.topTdLeft.innerHTML = "<div style='width:"+conerSize+"px; height:"+conerSize+"px;' ></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=conerSize;
	this.topTdRight.height=conerSize;
	this.topTdRight.innerHTML = "<div style='width:"+conerSize+"px; height:"+conerSize+"px;' ></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=conerSize;
	bottomTdLeft.height=conerSize;
	bottomTdLeft.innerHTML = "<div style='width:"+conerSize+"px; height:"+conerSize+"px;' ></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=conerSize;
	bottomTdright.height=conerSize;
	bottomTdright.innerHTML = "<div style='width:"+conerSize+"px; height:"+conerSize+"px;' ></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( buttons.length > 0 )
		{
			if( value == -1 )
			{
				var button = _this.buttonSelected( buttons[buttons.length - 1] );
				return button;
			}
			else( value >= 0 && value < buttons.length )
			{
				//alert( value );
				var button =  _this.buttonSelected( buttons[value] );
				return button;
			}	
			
			
		}
		
		

		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.parentNode = parentNode;
	this.thebody = document.createElement("img");
	parentNode.appendChild( this.thebody );
	
	this.onClick = onclick;
	
		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 && _this.onClick ) _this.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 && _this.onClick ) _this.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 );
		
	}
		
}


 
 

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






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

	//this.theIframe.width = "220";
	
	this.thebody.appendChild( this.theIframe );
	this.theIframe.style.borderWidth = "0px";
	//this.theIframe.style.backgroundColor = "#666";
	//this.thebody.style.backgroundColor = "#000";
	
/*
	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";
		_this.thebody.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 ="box";
		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 = 2;

	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 ) +"px";
		_this.background.midcell.style.width = ( w  ) +"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
	try{
		_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" );


	}
	catch(e){
		_this.iframeBG = document.createElement( "IFRAME" );
	}
	
	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")?0: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 || "#FFF";
	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 + 
		( (BrowserDetect.browser == "Safari")?0:0 ) );
		if( onResize ) onResize( _this );
	}
	
	this.setsize = function( h )
	{
		if( h ) _this.iframeBG.style.height = h + "px";
	}
	
	
	this.dispatch = function()
	{
		if( _this.iframeBG )
		{
			try
			{
				document.body.removeChild(  _this.iframeBG  );
			}
			catch(e){}
			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 ;
		var	h = document.documentElement.clientHeight ;
		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 )
		{
			//alert(   top + "px" );
			_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 )
		{
			_this.popbg.setsize(  _this.frame.thebody.offsetHeight + 
			_this.frame.thebody.offsetTop );
		}
		this.setSize( this.midcell.offsetWidth , this.midcell.offsetHeight);
		
	};
	
	
	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.offsetHeigh - 3 +"px";
		
		theIframe.style.height = h - toolbarCell.offsetHeight  - 3 + "px";
		
		noHTML.style.height = h - toolbarCell.offsetHeight - 3 + "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 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;
	
	var TABLE_NAME = table_name || "item";
	var IMG_DIR = img_dir || "../img/";
	var STR_ADD_NEW = "Add New";
	var STR_DELETE = "Delete";
	var STR_EDIT = "Edit";
	var STR_ALL = "All";
	var STR_OTHER = "Other<span class='cotext'>(No visible)</span>";
	var STR_NEW_ITEM = "Adding...";
	var STR_ARE_SURE_TO_DELETE = "Are you sure?";
	
	var ITEM_PER_PAGE = 25;
	
	_this.sort = "sort";
	_this.order = "0";
	
	
//event 
this.onListLoaded = function( itemlist_this ){};
this.onListItemOnClick = function( obj, button ){};
this.buttonEditOnClick = function( itemlist_this, button ){};
this.onListItemDeleted = function( itemlist_this ){};
	
	//var STR_LOADING = "加载数据...";
	
//search bar cell	
	var searchCell = this.table.addCell(); 
		searchCell.align = "right";
		searchCell.style.verticalAlign = "top";
		//searchCell.style.height = "27px";
		searchCell.style.borderRight = "1px solid #333333";
		searchCell.align = "center";
		searchCell.style.backgroundImage = "url("+IMG_DIR+"toolbg.gif)";
		searchCell.style.backgroundPosition = "top";
		searchCell.style.backgroundRepeat = "repeat-x";
		searchCell.style.paddingTop = searchCell.style.paddingLeft = "1px";
	
	
//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_en" ) , 
								guid, listItemOnclick , false , getXmlText(  items[i], "title_en" ) , 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" )
															
															
							 );
							 
							
							//if( guid == cookieCateID ) thebutton.select();
						
							//_this.dragdrop.addDraggableItem( eventList[ i ] );			
						}
					}
					

					
					_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.order , _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();
					
					if( _this.isfolder == 1 )
					{
						newCate.select( false );
					}
					else
					{
						newCate.select(  );
					}
					
					_this.buttonEditOnClick( _this , newCate );
					
				},  _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 );
						
						
						var lastButton = _this.list.buttonSelectedByIndex( -1 );
						
						
						//if( lastButton.value != "all" && lastButton.value != 0 )
						//{
							//nothing
						//}
						

						_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 , _this.list.getButtonSelected() );
			}
		}
	);
	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 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 )
{
	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.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.isInTags = function( guid )
	{
		if( _this.tags.length <= 0 || _this.tags == null ) return false;
		
		for(var i=0;i< _this.tags.length; i++  )
		{
			
			if (_this.tags[i].titleID == guid) {
				//alert( _this.tags[i].titleID );
			
				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,
										"",
										"",
										"",
										""
							 			);		
		
	};
	
	this.removeAllTag = function(){
		
		//for(var i=0;i< _this.tags.length; i++  )
		//{
			
			//_this.tags.remove(  _this.tags[i] );
			_this.tags  = new Array();

		//}
		
	};
	

	
}
 
 
 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 ThumbList( parent , parentNode , lang , viewMode )
{
	//call supclass
	ThumbList.baseConstructor.call( this, parent, parentNode );
	var _this = this;
	this.lang = lang || "cn";
	
	var dataList = new Array();
	var ROW_PER_PAGE = 20;
	var XML  = "../server/client.php";
//layout
	this.table.table.cellPadding = 3;
	var imgDiv = new Array();	

	
	var viewMode = viewMode || 0;

	this.toolCell = this.table.addCell();
	this.table.addRow();		
	this.viewCell  = this.table.addCell();
	this.table.addRow();
	this.textCell = this.table.addCell();
	this.textCell.style.height = "15px";		
	this.table.addRow();
	this.thumbCell = this.table.addCell();
	this.thumbCell.style.backgroundImage = "url( "+ IMG_DIR + "inprogress.gif )";
	this.thumbCell.style.backgroundRepeat = "no-repeat";
	this.thumbCell.style.backgroundPosition = "center center";
	this.thumbCell.style.height = "500px";
	this.thumbCell.vAlign = "top";	
	
	this.thumbCell.style.display = "none";
	
	
	this.table.addRow();
	this.listCell = this.table.addCell();
	this.listCell.style.backgroundImage = this.thumbCell.style.backgroundImage;
	this.listCell.style.backgroundRepeat = this.thumbCell.style.backgroundRepeat;
	this.listCell.style.backgroundPosition = this.thumbCell.style.backgroundPosition;
	this.listCell.style.height = "500px";
	this.listCell.vAlign = this.thumbCell.vAlign;
	
	this.listCell.style.display = "none";
	
	this.table.addRow();
	this.listQcell = this.table.addCell();
	this.listQcell.style.backgroundImage = this.thumbCell.style.backgroundImage;
	this.listQcell.style.backgroundRepeat = this.thumbCell.style.backgroundRepeat;
	this.listQcell.style.backgroundPosition = this.thumbCell.style.backgroundPosition;
	this.listQcell.style.height = "500px";
	this.listQcell.vAlign = this.thumbCell.vAlign;
	
	this.listQcell.style.display = "none";
	
	if( viewMode == 0 ) this.thumbCell.style.display = "";
	else if( viewMode == 1 ) this.listCell.style.display = "";
	else if( viewMode == 2 ) this.listQcell.style.display = "";
	
		
	this.table.addRow();	
	this.detailCell = this.table.addCell();
	this.detailCell.style.display = "none";
	this.detailCell.style.height = this.thumbCell.style.height;
	this.detailCell.vAlign = "top";	
	
	
	var buttonBack = null;
	
	
	this.table.addRow();	
	this.pageCell = this.table.addCell();
//end layout

	var sTable = new tableLayout( _this,  this.toolCell );

	var toolTilte = sTable.addCell("<strong>"+((_this.lang=="cn")?"车辆查询:":"Car search:" ) +"</strong>");
		toolTilte.style.width = "70px";
		
	var toolCell  = sTable.addCell();

	var dorp1 = new DorpList( _this , toolCell , ((_this.lang=="cn")?"租车周期:":"Renting Duration:" ) ,
	XML , 1 , _this.lang , 
	function( dorp, value )
	{
		_this.showDetail( false );
								
		_this.getList( dorp1.getValue() , dorp2.getValue() , dorp3.getValue() , dorp4.getValue() , "" );		
		//alert( value +"-"+ dorp2.value );
	} );
	

	var dorp2 = new DorpList( _this , toolCell , 
	(_this.lang=="cn")?"汽车品牌:":"Mark:"  , XML , 3 , _this.lang , 
	function( dorp, value )
	{
		_this.showDetail( false );
								
		_this.getList( dorp1.getValue() , dorp2.getValue() , dorp3.getValue() , dorp4.getValue() , "" );		
		//alert( value  );
	} );	
	
	
	var dataList = new Array();
	dataList[ dataList.length ] = new Array( 0, "自动","Auto:"   );	
	dataList[ dataList.length ] = new Array( 1, "价格由低往高","Price low to Heigh"  );
	dataList[ dataList.length ] = new Array( 2, "价格由高往低","Price heigh to Low"  );
	
	
	var dorp3 = new DorpList( _this , toolCell , 
	(_this.lang=="cn")?"排序":"Sort:"  , dataList , null , _this.lang , 
	function( dorp, value )
	{
		_this.showDetail( false );
								
		_this.getList( dorp1.getValue() , dorp2.getValue() , dorp3.getValue() , dorp4.getValue() , "" );		
		//alert( value  );
	} );	
	

	dataList = new Array();
	dataList[ dataList.length ] = new Array( 0, "全部","All"  );	
	dataList[ dataList.length ] = new Array( 1, "双人座","2 seat"  );
	dataList[ dataList.length ] = new Array( 2, "五人座","5 seat"  );
	dataList[ dataList.length ] = new Array( 3, "七人座","7 seat"  );
	dataList[ dataList.length ] = new Array( 4, "七人座以上","7 and more"  );
	
	
	var dorp4 = new DorpList( _this ,toolCell ,  
	(_this.lang=="cn")?"乘客数量:":"Seat:" , dataList , null , _this.lang , 
	function( dorp, value )
	{
		_this.showDetail( false );
		
		_this.getList( dorp1.getValue() , dorp2.getValue() , dorp3.getValue() , dorp4.getValue() , "" );		
		//alert( value  );
	} );	
	
	
	var buttonShowAllCars = document.createElement("span");
		buttonShowAllCars.innerHTML = ((_this.lang=="cn")?" 显示所有车辆":" Show all cars" );
		buttonShowAllCars.style.display = "none";
		
	toolCell.appendChild( buttonShowAllCars );
		buttonShowAllCars.style.paddingLeft = "10px";

		buttonShowAllCars.style.cursor = "pointer";
		
		//=================

	var viewTable = new tableLayout(_this, this.viewCell );
		//viewTable.table.style.backgroundColor = "#eee";
	var viewTitle = viewTable.addCell("<strong>" + ((_this.lang=="cn")?"排列方式:":"View mode:" ) +"</strong> ");
		viewTitle.style.width = toolTilte.style.width;


	var viewButtonCell = viewTable.addCell();

			viewButtonCell.appendChild( document.createTextNode( " " ) );

		var buttonPreView = new Image();
		var buttonPreSpan = document.createElement("span");
			buttonPreSpan.appendChild(buttonPreView);
			buttonPreSpan.style.display ="inline-block";
			
		viewButtonCell.appendChild( buttonPreSpan );
		
		buttonPreView.src= IMG_DIR + "preview.png";
		//buttonPreView.align="absbottom";
		buttonPreView.style.cursor = "pointer";
		//buttonPreSpan.style.border = "1px #333 solid";
		buttonPreView.style.width = buttonPreView.style.height = "18px";
		buttonPreView.title = (_this.lang=="cn")?"图片模式":"Thumbnail" ;
		
		buttonPreSpan.onmouseover = function(event)
		{
			this.style.border = "1px #333 solid";
		}
		
		buttonPreSpan.onmouseout = function(event)
		{
			if( viewMode != 0 ) this.style.border = "1px #FFF solid";
		}		
		
		buttonPreSpan.onclick = function(event)
		{						
			viewMode = 0;			
			_this.showDetail( false );			
			_this.listCell.style.display = "none";
			_this.listQcell.style.display = "none";
	
			buttonSpan.style.border = "1px #fff solid";
			buttonListSpan.style.border = "1px #fff solid";
			
			this.style.border = "1px #333 solid";			
		}
	
		
		viewButtonCell.appendChild( document.createTextNode(" ") );
		
		viewButtonCell.style.paddingLeft = "10px";
		
	var buttonDetail = new Image();
	var buttonSpan = document.createElement("span");
		buttonSpan.appendChild(buttonDetail);
		buttonSpan.style.display ="inline-block";
		viewButtonCell.appendChild( buttonSpan );
		buttonDetail.src= IMG_DIR + "detail.png";	
		//buttonDetail.align="absbottom";
		buttonDetail.style.cursor = "pointer";
		buttonSpan.style.border = "1px #FFF solid";
		buttonDetail.style.width = buttonDetail.style.height = buttonPreView.style.width;
		buttonDetail.title = (_this.lang=="cn")?"列表模式":"List mode" ;
		

		buttonSpan.onclick = function(event)
		{			
			viewMode = 1;			
			_this.showDetail( false );			
			_this.thumbCell.style.display = "none";			
			_this.listQcell.style.display = "none";			
			buttonPreSpan.style.border = "1px #fff solid";
			buttonListSpan.style.border = "1px #fff solid";
			this.style.border = "1px #333 solid";			
		}

		
		buttonSpan.onmouseover = function(event)
		{
			this.style.border = "1px #333 solid";			
		}
		
		buttonSpan.onmouseout = function(event)
		{
			if( viewMode != 1 ) this.style.border = "1px #FFF solid";			
		}	
	
		viewButtonCell.appendChild( document.createTextNode(" ") );

	
	var buttonList = new Image();
	var buttonListSpan = document.createElement("span");
		buttonListSpan.appendChild( buttonList );
		buttonListSpan.style.display ="inline-block";
		viewButtonCell.appendChild( buttonListSpan );
		buttonList.src= IMG_DIR + "list.png";	
		//buttonDetail.align="absbottom";
		buttonList.style.cursor = "pointer";
		buttonListSpan.style.border = "1px #FFF solid";
		buttonList.style.width = buttonList.style.height = buttonPreView.style.width;
		buttonList.title = (_this.lang=="cn")?"快速模式":"Quick mode" ;
		

		buttonListSpan.onclick = function(event)
		{			
			viewMode = 2;			
			_this.showDetail( false );						
			_this.thumbCell.style.display = "none";
			_this.listCell.style.display = "none";
			_this.listQcell.style.display = "";						
			buttonPreSpan.style.border = "1px #fff solid";
			buttonSpan.style.border = "1px #fff solid";
			
			this.style.border = "1px #333 solid";		
		}

		
		buttonListSpan.onmouseover = function(event)
		{
			this.style.border = "1px #333 solid";			
		}
		
		buttonListSpan.onmouseout = function(event)
		{
			if( viewMode != 2 ) this.style.border = "1px #FFF solid";			
		}		
		
		
		if( viewMode == 0 ) buttonPreSpan.style.border = "1px #333 solid";
		else if( viewMode == 1 ) buttonSpan.style.border = "1px #333 solid";
		else if( viewMode == 2 ) buttonListSpan.style.border = "1px #333 solid";
	






this.submitForm = function()
{
	_this.getList( dorp1.getValue() , dorp2.getValue() , dorp3.getValue() , dorp4.getValue() , "" );		
}	





this.showDetail = function( bool , id , guid, url )
{
	if( bool ) {
				
		_this.detailCell.innerHTML = "";		
		_this.detailCell.style.display = "";
		
		var dataBG = new backgroundImage(_this, _this.detailCell );
		
		var dataTable = new tableLayout( _this, dataBG.midcell );
			dataTable.table.style.height = "482px";
			dataTable.table.style.width = "690px";
	
		var imgD = document.createElement("div");
		var IMG_WIDTH = 400;
		
			imgD.style.width = IMG_WIDTH+"px";
			imgD.style.height = "250px";
			
		var imgCell = dataTable.addCell( imgD );
			imgCell.style.width = IMG_WIDTH+"px";
			imgCell.vAlign = "top";
			
		var imgs = new Array();
		
		for(var j=0;j< dataList[id].images.length ;j++  )
		{
			imgs[imgs.length] = new Array( '../img/photos/'+ dataList[id].images[j] , '' );									
		}							
				
		var photo = new ImgLoader(  _this, imgD, imgs, IMG_WIDTH, 165 , 
		function( event, obj )
		{
			var top = new SlideShow2(  obj.parent, obj.thebody,  
			obj.imgs,  IMG_WIDTH , parseInt( IMG_WIDTH*533/800), false );
		} );											
		
		
		
		var dataCell = dataTable.addCell();
			dataCell.vAlign = "top";
			dataCell.style.paddingLeft = "10px";
					
			
		var datatable =  new tableLayout( _this, dataCell );
			datatable.table.cellPadding = 5;
			datatable.table.style.width = "100%";			
		
			var lab = datatable.addCell((_this.lang=="cn")?"品牌:":"Mark:");
				//lab.align = "right";
				lab.style.width = "70px";
			
			datatable.addCell(  ( (_this.lang=="cn")?dataList[id].cat_cn:dataList[id].cat_en )   );
			lab.parentNode.className = "offsetcol2";
			
			var therow = datatable.addRow();
				therow.className ="offsetcol";				
				
			datatable.addCell((_this.lang=="cn")?"型号:":"Mode:");
			datatable.addCell(  ( (_this.lang=="cn")?dataList[id].title_cn:dataList[id].title_en )   );
		
			therow = datatable.addRow();
				therow.className ="offsetcol2";
			datatable.addRow();								
			datatable.addCell( (_this.lang=="cn")?"车辆类型:":"Type:" );
			datatable.addCell(  ( (_this.lang=="cn")?dataList[id].type_cn:dataList[id].type_en ) );
		
			therow = datatable.addRow();
				therow.className ="offsetcol";
			datatable.addCell( (_this.lang=="cn")?"座位数:":"Seat:");
			datatable.addCell( dataList[id].link  );
			
			therow = datatable.addRow();
				therow.className ="offsetcol2";
			datatable.addCell( (_this.lang=="cn")?"车辆描述:":"Description:" );
			
			datatable.addCell( "<div>"+ ( (_this.lang=="cn")?dataList[id].des_cn:dataList[id].des_en )+"</div>");
			
			
		var rateTable = new tableLayout( _this, dataCell );
			rateTable.table.cellPadding = 5;
			rateTable.table.style.width = "100%";			
				
			
			if( dataList[id].rates.length  > 0 )
			{
				//datatable.addRow();
				
				//var rateTitle = rateTable.addCell("<div style='height:15px;' ></div>");
				//rateTitle.colSpan = 2;
				
				for(var j=0;j< dataList[id].rates.length ;j++  )
				{					
					therow = rateTable.addRow();
					therow.className = ( (j+1)% 2 )?"offsetcol2" : "offsetcol";	
					var title = rateTable.addCell(  ( (_this.lang=="cn")?dataList[id].rates[j].cn:dataList[id].rates[j].en ) );											
						title.style.width = "100px";
					rateTable.addCell( "<div>"+ dataList[id].rates[j].rate +
					( (_this.lang=="cn")?" 元":" RMB" ) +"</div>");
				}
				
			}


		//dataTable.addRow();
		
		rateTable.addRow();
		
		//dataTable.addCell();
		
		var buttonRant =  document.createElement("span");
			buttonRant.innerHTML = "<img src='../images/booking_"+ _this.lang +".png' border='0' />";
			buttonRant.style.cursor = "pointer";
			
		var toolCell = rateTable.addCell( buttonRant );
		
		
			toolCell.colSpan = 2;
			//toolCell.style.cursor = "pointer";
			//toolCell.style.backgroundColor = "#EEE";
			toolCell.style.height = "30px";
			//toolCell.vAlign = "bottom";
			toolCell.align = "left";

			buttonRant.onclick = function()
			{
				//_this.showDetail( false );
				
				//=================
			
				var pop = new PopFrame( document.body, function()
				{					
					return true;
				} );
				
				
				//pop.setButtonCloseDisplay( false );
				pop.midcell.style.verticalAlign = "top";
				pop.frame.closeButton.parentNode.innerHTML = "";
				
				pop.midcell.style.color = "#333";
				pop.setSize( 800 , 400 );
				pop.setDisplay( true );				
				
				var topDiv = document.createElement("div");
					pop.appendChild( topDiv );
					
					topDiv.align = "left";
					topDiv.style.paddingBottom = "10px";
					
				this.closeButton = new imgButton( _this, topDiv, IMG_DIR+"close.gif" , 
			((_this.lang=="cn")?"关闭":"Close" ), function( event, obj )
				{
					pop.hide();
				} );
			
				var appForm = new  tableLayout( _this, pop.midcell );
					appForm.table.cellPadding = "5px";
					
				var leftCell =  appForm.addCell( datatable.table.cloneNode(true)  );
					leftCell.vAlign = "top";
					leftCell.colSpan = 2;
						
				var imgCell = appForm.addCell( carImg );
					imgCell.colSpan = 2;
					imgCell.align = "center";
					
					if( imgs[0] )
					{
						var carImg = NewImage( parent, imgCell, imgs[0][0], 300 ,  parseInt( 300*133/200 ) );
						
					}
					imgCell.style.width = "400px";
					imgCell.style.backgroundColor = "#FFF";
			
				appForm.addRow();			
				
				var	lab = appForm.addCell();
					lab.colSpan = 4;
				 	lab.style.height = "10px";
					appForm.addRow();
					
//==============================

					lab = appForm.addCell( (_this.lang=="cn")?"请填写以下信息":"Please fill out the detail below"  );
					lab.colSpan = 4;
					
					lab.style.backgroundColor = "#EEE";
					appForm.addRow();

//==============================
				
					//lab = appForm.addCell( (_this.lang=="cn")?"车辆编号:":"Car ID:"  );

				//var emailTextBox = document.createElement("input");
				var CarID = appForm.addCell( dataList[id].guid );
					//nameTextBox.type="text";
					//nameTextBox.className ="box";
					CarID.colSpan = 4;
					CarID.style.display = "none";
					
					appForm.addRow();	

//==============================
				var TextBoxWidth = "200px";	
					
					lab = appForm.addCell( (_this.lang=="cn")?"姓名:":"Name:"  );
				 	lab.style.width = "70px";

				var nameTextBox = document.createElement("input"); 	
				var nameTcell =	appForm.addCell( nameTextBox );
					nameTextBox.type="text";
					nameTextBox.className ="box";
					nameTextBox.style.width = TextBoxWidth;
										
//==============================
				
					lab = appForm.addCell( (_this.lang=="cn")?"用途:":"Purpose:"  );
				 	lab.style.width = "70px";
					lab.style.paddingLeft = "20px";								
					
//==============================				
	
				var PurposeTextBox = document.createElement("textarea"); 	
				var pCell =	appForm.addCell( PurposeTextBox );
					pCell.rowSpan = 3;
					
					PurposeTextBox.className ="box";
					PurposeTextBox.style.width = TextBoxWidth;
					PurposeTextBox.style.height = "100px";
					pCell.vAlign ="top";
					
				appForm.addRow();	
					
//==============================
				
					lab = appForm.addCell( (_this.lang=="cn")?"电话:":"Phone:"  );

				var phoneTextBox = document.createElement("input"); 	
					appForm.addCell( phoneTextBox );
					phoneTextBox.type="text";
					phoneTextBox.className ="box";
					phoneTextBox.style.width = TextBoxWidth;
					
				lab = appForm.addCell();	
				lab.rowSpan = 2;	
					
				appForm.addRow();	
				
//==============================
				
					lab = appForm.addCell( (_this.lang=="cn")?"电子邮件:":"Email:"  );

				var emailTextBox = document.createElement("input"); 	
				var eCell = appForm.addCell( emailTextBox );
				
					emailTextBox.type="text";
					emailTextBox.className ="box";
					emailTextBox.style.width = TextBoxWidth;
						
					appForm.addRow();
	
//==============================
				
				lab = appForm.addCell( (_this.lang=="cn")?"起租日期:":"Start Date:" );

				sDateCell  = appForm.addCell();
			var sDateBox = new DatePicker( _this, sDateCell ,
				"", new  Date().getFullYear() );
			
				sDateBox.onChange= function( obj, yyyy,mm,dd ,date )
				{
					var today = new Date();
					
					if( today > date )
					{						
						sDateBox.setToToday();
					}
					
				};

//==============================
				lab = appForm.addCell( (_this.lang=="cn")?"结束日期:":"End Date:" );
				lab.style.paddingLeft = "20px";
					
				eDateCell = appForm.addCell();
			var eDateBox = new DatePicker( _this, eDateCell ,
				"", new Date().getFullYear() );
				eDateBox.addDays( 1 );
				eDateBox.onChange= function( obj, yyyy,mm,dd ,date )
				{
					//var today = new Date();
					
					if( sDateBox.getDate() > date )
					{						
						eDateBox.setDate(sDateBox.getDate().getFullYear(),
						sDateBox.getDate().getMonth()+1,
						sDateBox.getDate().getDate()						
						);						
					}
				};	
				appForm.addRow();		

//==============================

	lab = appForm.addCell();
	lab.colSpan = 4;
	lab.style.backgroundColor = "#EEE";
	
	
	var addressCell  = null;	
	
	var deCheck = new LabaledCheckBox( _this, lab , 
	(_this.lang=="cn")?"需要送车到家?":"Delivery at your door?" ,
	1 , false );		
	
		deCheck.checkbox.onclick = function(){
			
			if( this.checked )
			{
				//addressCell.style.display = "";
				addressCell.style.visibility  = "visible";
			}
			else
			{
				//addressCell.style.display = "none";
				addressCell.style.visibility  = "hidden";
			}
		};		
		
	var addressCell = appForm.addRow();
		addressCell.style.visibility  = "hidden";

//==============================	
			lab = appForm.addCell( (_this.lang=="cn")?"送车时间:":"Delivery time:"  );
		 	lab.style.width = "70px";
			//lab.vAlign  = "top";

		var timeTextBox = document.createElement("select"); 
			timeTextBox.className ="box";	
			appForm.addCell( timeTextBox );
			
			timeTextBox.style.width = TextBoxWidth;
			
			for(var i= 6; i<= 20; i++  )
			{
				var option = document.createElement("option");
				timeTextBox.appendChild( option );							
				option.value = parseInt( i ).format(2)+":00";				
				option.innerHTML = parseInt( i ).format(2)+":00";
				option = document.createElement("option");			
				timeTextBox.appendChild( option );							
				option.value = parseInt( i ).format(2)+":30";				
				option.innerHTML = parseInt( i ).format(2)+":30";
			
			}
			
			//aTable.addRow();
//==============================
	
			lab = appForm.addCell( (_this.lang=="cn")?"地址:":"Address:"  );
			lab.style.width = "70px";
			lab.style.paddingLeft = "20px";

		
		var AddressTextBox = document.createElement("textarea"); 	
			appForm.addCell( AddressTextBox );
			
			AddressTextBox.className ="box";
			AddressTextBox.style.width = TextBoxWidth;
			AddressTextBox.style.height = "60px";
				
			appForm.addRow();			
			
//==============================
			
		appForm.addRow();					
		
		
		var submitButton = document.createElement("input");
			submitButton.type = "button";
			submitButton.className ="box";
			
		var buttonCell =  appForm.addCell( submitButton ); 
			
			submitButton.value =  ( (_this.lang=="cn")?"预订":"book it" );
			buttonCell.colSpan = 4;
			buttonCell.align = "center";
			buttonCell.style.height = "60px";
			

			submitButton.onclick = function(event)
			{
				
				submitButton.disabled = true;	
				//check
				
				if (nameTextBox.value == "") {
					var text = (_this.lang == "cn") ? "请填写您的姓名" : "Please fill out your name.";					
					nameTextBox.focus();					
					alert(text);
					submitButton.disabled = false;	
					return;
				}
				else if( phoneTextBox.value == "" )
				{
					var text = (_this.lang == "cn") ? "请填写您的电话号码" : "Please fill out your phone number.";					
					phoneTextBox.focus();					
					alert(text);
					submitButton.disabled = false;	
					return;					
				}
				else if( echeck( emailTextBox.value ) == false )
				{
					var text = (_this.lang == "cn") ? "请正确填写您的电子邮件" : "Please fill out your email.";					
					emailTextBox.focus();					
					alert(text);
					submitButton.disabled = false;	
					return;	
				}
							
				else if( deCheck.checkbox.checked  )
				{
					if( AddressTextBox.value == "" )
					{
						var text = (_this.lang == "cn") ? "请填写您的地址" : "Please fill out your address.";					
						AddressTextBox.focus();					
						alert(text);
						submitButton.disabled = false;	
						return;
					}
				}								

							
				submitButton.value =  (_this.lang == "cn") ? "正在提交预订，请稍等..." : "Please wait.";	
							
				RPC( XML , "putOrder", false , function( msg, xmlhttp )
				{
					
					if( msg.status == "ok" )
					{
						var items = msg.data.getElementsByTagName( "item" );
						
						var uID = getXmlText( items[0], "uID" );
						
						/*
						alert(
						(_this.lang=="cn")?"感谢您的预定, 我们将尽快与您联系.。\r\n预订号: " + uID:"Thank you for your booking, we will contact you shortly.\r\nBooking #:"+uID
						);
						*/
						
						pop.hide();
						
						
						var Textpop = new PopFrame(document.body, function(){
							return true;
						});
						
						
						Textpop.midcell.style.verticalAlign = "top";
						Textpop.frame.closeButton.parentNode.innerHTML = "";
						
						Textpop.midcell.style.color = "#333";
						Textpop.setSize( 480, 200 );
						Textpop.setDisplay(true);
						
						var topDiv = document.createElement("div");
						Textpop.appendChild(topDiv);
						
						topDiv.align = "left";
						topDiv.style.paddingBottom = "10px";
						
						this.closeButton = new imgButton(_this, topDiv, IMG_DIR + "close.gif", ((_this.lang == "cn") ? "关闭" : "Close"), function(event, obj){
							Textpop.hide();
						});
						
						
						var cText = document.createElement( "div" );
							cText.style.paddingTop = "30px";
							
						if( _this.lang == "cn" )
						{
							cText.innerHTML = "感谢您的预定,一封确认邮件已经发送到您的邮箱。我们将尽快与您联系.。<br /><br />预订号: " + uID;											
						}
						else
						{
							cText.innerHTML = "Thank you for your booking, we will contact you shortly.<br /><br />Booking #: " + uID;											
						}
						
						Textpop.midcell.appendChild ( cText ) ;						
						
						
					}
					else
					{									
						//_this.theList.innerHTML = "<option>不能加载选项，请刷新页面</option>";	
						//_this.theList.disabled = false;	
			
						alert(
							(_this.lang=="cn")?"系统似乎存在问题，您可以电话联系客服，或者尝试再次提交。":"There is a system error, please call our customer service."
						);
						submitButton.disabled = false;
						submitButton.value =  ( (_this.lang=="cn")?"预订":"book now" );
			
						try {
							if( "500" == msg.error.childNodes[0].data )	
							{
								showLoginWindow(function(){
									//_this.getCateList();
								});
							}
						} catch (e) {
							// TODO: handle exception
							showLoginWindow(function(){
									//_this.getCateList();
							});
						}
					}									
				} ,nameTextBox.value,
				  phoneTextBox.value,
				  PurposeTextBox.value,
				  emailTextBox.value,
				  sDateBox.toString(),
				  eDateBox.toString(),
				  (deCheck.checkbox.checked)?"1":"0",
				  timeTextBox.value,
				  AddressTextBox.value,
				  CarID.innerHTML );
				
				
			}
			
			
			pop.setSize( pop.frame.thebody.offsetWidth, pop.frame.thebody.offsetHeight  );
				
		}	

		//dataTable.table.border  =1;
		dataTable.addRow();
		
		buttonBack = document.createElement( "span" );


		var toolCell = dataTable.addCell( buttonBack );
			toolCell.colSpan = 2;
			toolCell.vAlign = "top";
			toolCell.align = "center";
			toolCell.style.paddingTop = "10px";
			
			if( guid )
			{
				buttonBack.innerHTML = "< <a href='#list'>"+
			((_this.lang=="cn")?"显示所有车辆":"Back to List" )+"</a>";
	
				buttonBack.onclick = function()
				{
					//window.location = url;
						dorp1.thebody.style.display = "";
						dorp2.thebody.style.display = "";
						dorp3.thebody.style.display = "";
						dorp4.thebody.style.display = "";
					
						_this.toolCell.style.display = "";
						_this.viewCell.style.display = "";
					
					_this.getList(0,0,0,0,"");
					
					_this.showDetail( false , 0 );
				}
			
			}
			else
			{
				
				buttonBack.innerHTML = "< <a href='#list'>"+
			((_this.lang=="cn")?"返回列表":"Show all cars" )+"</a>";
	
				buttonBack.onclick = function()
				{
					_this.showDetail( false );
				}	
					
			}		
		
		_this.thumbCell.style.display = "none";
		_this.listCell.style.display = "none";
		_this.pageCell.style.display = "none";
		
		
		//增加点击率。
		
		
		RPC( XML , "carClick", false , function( msg, xmlhttp )
		{	
			if( msg.status == "ok" )
			{
				
				
			}
		
		}, dataList[id].guid );
		
		
	
	}
	else {
	
		if (viewMode == 0) {
			_this.thumbCell.style.display = "";
		}
		else if( viewMode == 1 )
		{
			_this.listCell.style.display = "";
		}
		else
		{
			_this.listQcell.style.display = "";
		}
		
		for( var i =0; i<imgDiv.length;i++ )
		{
			imgDiv[i].resize();
		}
		
		
		_this.detailCell.style.display = "none";
		_this.pageCell.style.display = "";
	
	}
	
	
}


var selCar = new Array();


this.getList = function( durtion , brand, sort, seat ,search , theGUID , url ) 
{

	_this.thumbCell.style.backgroundImage = "url( "+ IMG_DIR + "inprogress.gif )";
	_this.thumbCell.innerHTML = "";
	
	_this.listCell.style.backgroundImage = _this.thumbCell.style.backgroundImage;
	_this.listCell.innerHTML = "";
	
	_this.listQcell.style.backgroundImage = _this.thumbCell.style.backgroundImage;
	_this.listQcell.innerHTML = "";
	
	dorp1.setValue( durtion );
	dorp2.setValue( brand );
	dorp3.setValue( sort );
	dorp4.setValue( seat );
	
	var theGUID = theGUID;
	var url = url;
		
	
	RPC( XML , "getCars", false , function( msg, xmlhttp )
	{
		
		imgDiv = new Array();
		
		if( msg.status == "ok" )
		{
			_this.thumbCell.innerHTML = "";
			_this.listCell.innerHTML = "";
			_this.listQcell.innerHTML = "";
			selCar = new Array();

		
			var qTable =  new tableLayout( _this, _this.listQcell ); 
				qTable.table.cellPadding = 5;
						
			//var lab =qTable.addCell( );
			//	lab.style.width = "15px";
					
			var lab = qTable.addCell("<strong>"+ ((_this.lang=="cn")?"品牌":"Mark" ) +"</strong>"  );
						qTable.addCell("<strong>"+ ((_this.lang=="cn")?"型号":"Mode" ) +"</strong>" );
						qTable.addCell( "<strong>"+ ((_this.lang=="cn")?"车辆类型":"Type") +"</strong>" );
						qTable.addCell("<strong>"+ ((_this.lang=="cn")?"座位数":"Seat" ) +"</strong>");						
						qTable.addCell("<strong>"+ ( (_this.lang=="cn")?"选择":"Select" ) +"</strong>");
						
			
				lab.parentNode.style.backgroundColor = "#eee";
				
			//try{
				var totalrows = 0;				
				var items = msg.data.getElementsByTagName('item');
				if( items.length > 0) 
				{
					_this.thumbCell.style.backgroundImage = "";
					var thumbTable = new tableLayout( _this , _this.thumbCell );
						thumbTable.table.cellPadding = 5;
						thumbTable.table.width = "";
					
					var listTable = new tableLayout( _this , _this.listCell );
						listTable.table.cellPadding = 5;
						listTable.table.width = "";
					
					for(var i=0; i< items.length  ;i++ )
					{
						//getXmlText( items[i], "title_"+ lang );
						
						dataList[i] = 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" ),
													"",
													getXmlText( items[i], "oDate" )
							 );
						
						dataList[i].cat_cn = getXmlText( items[i], "cat_cn" );
						dataList[i].cat_en = getXmlText( items[i], "cat_en" );
						dataList[i].cat_jp = getXmlText( items[i], "cat_jp" );
						
						dataList[i].type_cn = getXmlText( items[i], "type_cn" );
						dataList[i].type_en = getXmlText( items[i], "type_en" );
						dataList[i].type_jp = getXmlText( items[i], "type_jp" );
						
						var rates = items[i].getElementsByTagName('rates');
							
						if( rates.length  > 0  )
						{
							for(var j =0; j<  rates.length; j++ )
							{
								dataList[i].rates[ j ] = new Rate( 
									getXmlText( rates[j], "rate" ),
									getXmlText( rates[j], "cn" ),
								 	getXmlText( rates[j], "en" ),
								  	getXmlText( rates[j], "jp" ),
								  	getXmlText( rates[j], "it" )
								   );
							}
						}
						
						var image = items[i].getElementsByTagName('image');
						var src = image[0].getElementsByTagName('src');

						
						var cell = thumbTable.addCell();
							cell.style.cursor = "pointer";
							cell.id = i;
							
					
						var imgCell = listTable.addCell();
							imgCell.id = cell.id;
							imgCell.style.cursor = cell.style.cursor;
					
							
							imgCell.onclick = function()
							{
								_this.showDetail( true , this.id );
							};	
							
							cell.onclick = function()
							{
								_this.showDetail( true , this.id );
							};	
						
						var imgSrc = "";		
							
							
							if( src.length > 0 )
							{
								imgSrc =  "../img/photos/thumb/"+getNodeData( src[0].childNodes );
										
								for( var j = 0; j < src.length; j++ )
								{
									dataList[i].images[ j ] =  getNodeData( src[j].childNodes );
								}							
							}
							
							
						imgDiv[ imgDiv.length ] = new NewImage( _this, cell,imgSrc, 135, 80 );				
						//list view
						imgDiv[ imgDiv.length ] = new NewImage( _this, imgCell, imgSrc, 135, 80 );
						
							
						var titleDiv = document.createElement("div");
							cell.appendChild( titleDiv );
							titleDiv.style.padding = "5px";
							titleDiv.align = "center";
							
							titleDiv.innerHTML = getXmlText( items[i], "cat_"+ _this.lang ) + 
							 getXmlText( items[i], "title_"+ _this.lang ) ;
							
							var seat = getXmlText( items[i], "link" );
							
							if( seat != 0 && seat!="" )
							{
								titleDiv.innerHTML += " "+seat +"人座";								
							}
				
					var textCell = listTable.addCell();
				
					var datatable =  new tableLayout( _this, textCell );
						datatable.table.width = "";
						datatable.table.cellPadding = 5;
						datatable.table.style.width = "100%";
					
						
						var lab = datatable.addCell((_this.lang=="cn")?"品牌:":"Mark:");
						lab.style.width = "70px";
						datatable.addCell(  ( (_this.lang=="cn")?dataList[i].cat_cn:dataList[i].cat_en )   );
						lab.parentNode.className = "offsetcol2";
						
						var therow = datatable.addRow();
							therow.className ="offsetcol";				
							
						datatable.addCell((_this.lang=="cn")?"型号:":"Mode:");
						var dCell = datatable.addCell(  ( (_this.lang=="cn")?dataList[i].title_cn:dataList[i].title_en )   );
							dCell.style.width = "100px";
							
						therow = datatable.addRow();
							therow.className ="offsetcol2";
						datatable.addRow();								
						datatable.addCell( (_this.lang=="cn")?"车辆类型:":"Type:" );
						datatable.addCell(  ( (_this.lang=="cn")?dataList[i].type_cn:dataList[i].type_en ) );
					
						therow = datatable.addRow();
						therow.className ="offsetcol";
						datatable.addCell( (_this.lang=="cn")?"座位数:":"Seat:");
						datatable.addCell( dataList[i].link  );
						
						
						textCell.id = cell.id;
						textCell.style.cursor = cell.style.cursor;
						textCell.onclick = function()
						{
							_this.showDetail( true , this.id );
						};
							
						
						if( (i+1) % 2 == 0 ) 
						{
							listTable.addRow();
							var sep = listTable.addCell( 
							'<div style=" height:5px; border-bottom: 1px #ccc solid"></div>');
							sep.colSpan = 4;
														
							listTable.addRow();							
						}						
						
						if( (i+1) % 5 == 0 ) thumbTable.addRow();
																	
						
						var row = qTable.addRow();
							if ((i + 1) % 2 == 0) 
							{
								row.className = "offsetcol";
							}
							else
							{
								row.className = "offsetcol2";
							}
							
							selCar[i] = document.createElement("input");
							selCar[i].type = "radio";
							selCar[i].name = "selCar";
							selCar[i].id = "selCar"
							selCar[i].value = dataList[i].guid;
							
							
					 	qTable.addCell( ( ( _this.lang=="cn")?dataList[i].cat_cn:dataList[i].cat_en ) );
						qTable.addCell( ( (_this.lang=="cn")?dataList[i].title_cn:dataList[i].title_en ) );
						qTable.addCell( ( (_this.lang=="cn")?dataList[i].type_cn:dataList[i].type_en ) );
						qTable.addCell( dataList[i].link );
						qTable.addCell( selCar[i] );
						
						
/*
						var buttonRant =  document.createElement("span");
							buttonRant.innerHTML = "<img src='../images/booking_"+ _this.lang +".png' border='0' />";
							buttonRant.style.cursor = "pointer";
							buttonRant.id = i;
						
						
						
						var cell = qTable.addCell( buttonRant );
							cell.style.width = "120px";
*/
							
						//buttonRant.onclick = function()
						//{
//=== 订单 窗口


						//}	
						
//订单窗口 =========						
						
						
						}
						
/*						
							var pop = new PopFrame(document.body, function(){
								return true;
							});
							
							
							//pop.setButtonCloseDisplay( false );
							pop.midcell.style.verticalAlign = "top";
							pop.frame.closeButton.parentNode.innerHTML = "";
							
							pop.midcell.style.color = "#333";
							pop.setSize(800, 400);
							pop.setDisplay(true);
							
							var topDiv = document.createElement("div");
							pop.appendChild(topDiv);
							
							topDiv.align = "left";
							topDiv.style.paddingBottom = "10px";
							
							this.closeButton = new imgButton(_this, topDiv, IMG_DIR + "close.gif", ((_this.lang == "cn") ? "关闭" : "Close"), function(event, obj){
								pop.hide();
							});
*/
							
							
							var appForm = new tableLayout( _this , _this.listQcell );
							appForm.table.cellPadding = "5px";
							
							
/*	
	 var leftCell =  appForm.addCell( datatable.table.cloneNode(true)  );
	 leftCell.vAlign = "top";
	 leftCell.colSpan = 2;
	 
	 var imgCell = appForm.addCell( carImg );
	 imgCell.colSpan = 2;
	 imgCell.align = "center";
	 
	 var carImg = NewImage( parent, imgCell, imgs[0][0], 300 ,  parseInt( 300*133/200 ) );
	 imgCell.style.width = "400px";
	 imgCell.style.backgroundColor = "#FFF";
	 
	 appForm.addRow();
*/
	

	var lab = appForm.addCell();
	lab.colSpan = 4;
	lab.style.height = "10px";
	appForm.addRow();

				/*
				var lab = appForm.addCell( ((_this.lang=="cn")?"品牌":"Mark" ) +":" );
				
						appForm.addCell( (_this.lang=="cn")?dataList[this.id].cat_cn:dataList[this.id].cat_en );
						//--
						appForm.addCell( ( (_this.lang=="cn")?"型号":"Mode" ) +":");
						appForm.addCell( ( (_this.lang=="cn")?dataList[this.id].title_cn:dataList[this.id].title_en ) );
						
						appForm.addRow();
						//--
						appForm.addCell( ((_this.lang=="cn")?"车辆类型":"Type" ) +":" );
						appForm.addCell( ( (_this.lang=="cn")?dataList[this.id].type_cn:dataList[this.id].type_en ) );
						
						appForm.addCell( ( (_this.lang=="cn")?"座位数":"Seat" ) + ":");						
						appForm.addCell( dataList[this.id].link );						
							
						
						appForm.addRow();							
						*/
							//==============================
							
							var lab = appForm.addCell((_this.lang == "cn") ? "请填写以下信息" : "Please fill out the detail below");
							lab.colSpan = 4;
							
							lab.style.backgroundColor = "#EEE";
							appForm.addRow();
							
							//==============================
							
							//var emailTextBox = document.createElement("input");
							//var CarID = appForm.addCell(dataList[this.id].guid);
							//nameTextBox.type="text";
							//nameTextBox.className ="box";
							//CarID.colSpan = 4;
							//CarID.style.display = "none";							
							//appForm.addRow();
							
							
							//==============================
							
							var TextBoxWidth = "200px";
							
							lab = appForm.addCell(( _this.lang == "cn" ) ? "姓名:" : "Name:");
							lab.style.width = "70px";
							
							var nameTextBox = document.createElement("input");
							var nameTcell = appForm.addCell(nameTextBox);
							nameTextBox.type = "text";
							nameTextBox.className = "box";
							nameTextBox.style.width = TextBoxWidth;
							
							//==============================
							
							lab = appForm.addCell(( _this.lang == "cn" ) ? "用途:" : "Purpose:");
							lab.style.width = "70px";
							lab.style.paddingLeft = "20px";
							
							//==============================				
							
							var PurposeTextBox = document.createElement("textarea");
							var pCell = appForm.addCell(PurposeTextBox);
							pCell.rowSpan = 3;
							
							PurposeTextBox.className = "box";
							PurposeTextBox.style.width = TextBoxWidth;
							PurposeTextBox.style.height = "100px";
							pCell.vAlign = "top";
							
							appForm.addRow();
							
							//==============================
							
							lab = appForm.addCell((_this.lang == "cn") ? "电话:" : "Phone:");
							
							var phoneTextBox = document.createElement("input");
							appForm.addCell(phoneTextBox);
							phoneTextBox.type = "text";
							phoneTextBox.className = "box";
							phoneTextBox.style.width = TextBoxWidth;
							
							lab = appForm.addCell();
							lab.rowSpan = 2;
							
							appForm.addRow();
							
							//==============================
							
							lab = appForm.addCell((_this.lang == "cn") ? "电子邮件:" : "Email:");
							
							var emailTextBox = document.createElement("input");
							var eCell = appForm.addCell(emailTextBox);
							
							emailTextBox.type = "text";
							emailTextBox.className = "box";
							emailTextBox.style.width = TextBoxWidth;
							
							appForm.addRow();
							
							//==============================
							
							lab = appForm.addCell((_this.lang == "cn") ? "起租日期:" : "Start Date:");
							
							sDateCell = appForm.addCell();
							var sDateBox = new DatePicker( _this, sDateCell, "", new Date().getFullYear());
							
							sDateBox.onChange = function(obj, yyyy, mm, dd, date){
								var today = new Date();
								
								if (today > date) {
									sDateBox.setToToday();
								}								
							};
							
							//==============================
							lab = appForm.addCell((_this.lang == "cn") ? "结束日期:" : "End Date:");
							lab.style.paddingLeft = "20px";
							
							eDateCell = appForm.addCell();
							var eDateBox = new DatePicker(_this, eDateCell, "", new Date().getFullYear());
							eDateBox.addDays(1);
							eDateBox.onChange = function(obj, yyyy, mm, dd, date){
								//var today = new Date();
								
								if (sDateBox.getDate() > date) {
									eDateBox.setDate(sDateBox.getDate().getFullYear(), sDateBox.getDate().getMonth() + 1, sDateBox.getDate().getDate());
								}
							};
							appForm.addRow();
							
							//==============================
							
							lab = appForm.addCell();
							lab.colSpan = 4;
							lab.style.backgroundColor = "#EEE";
							
							
							var addressCell = null;
							
							var deCheck = new LabaledCheckBox(_this, lab, (_this.lang == "cn") ? "需要送车到家?" : "Delivery at your door?", 1, false);
							
							deCheck.checkbox.onclick = function(){
							
								if (this.checked) {
									//addressCell.style.display = "";
									addressCell.style.visibility = "visible";
								}
								else {
									//addressCell.style.display = "none";
									addressCell.style.visibility = "hidden";
								}
							};
							
							var addressCell = appForm.addRow();
							addressCell.style.visibility = "hidden";
							
							//==============================	
							lab = appForm.addCell((_this.lang == "cn") ? "送车时间:" : "Delivery time:");
							lab.style.width = "70px";
							//lab.vAlign  = "top";
							
							var timeTextBox = document.createElement("select");
							timeTextBox.className = "box";
							appForm.addCell(timeTextBox);
							
							timeTextBox.style.width = TextBoxWidth;
							
							for (var i = 6; i <= 20; i++) {
								var option = document.createElement("option");
								timeTextBox.appendChild(option);
								option.value = parseInt(i).format(2) + ":00";
								option.innerHTML = parseInt(i).format(2) + ":00";
								option = document.createElement("option");
								timeTextBox.appendChild(option);
								option.value = parseInt(i).format(2) + ":30";
								option.innerHTML = parseInt(i).format(2) + ":30";
								
							}
							
							//aTable.addRow();
							//==============================
							
							lab = appForm.addCell((_this.lang == "cn") ? "地址:" : "Address:");
							lab.style.width = "70px";
							lab.style.paddingLeft = "20px";
							
							
							var AddressTextBox = document.createElement("textarea");
							appForm.addCell(AddressTextBox);
							
							AddressTextBox.className = "box";
							AddressTextBox.style.width = TextBoxWidth;
							AddressTextBox.style.height = "60px";
							
							appForm.addRow();
							
							//==============================
							
							appForm.addRow();
							
							
							var submitButton = document.createElement("input");
							submitButton.type = "button";
							submitButton.className = "box";
							
							var buttonCell = appForm.addCell(submitButton);
							
							submitButton.value = ((_this.lang == "cn") ? "预订" : "book it");
							buttonCell.colSpan = 4;
							buttonCell.align = "center";
							buttonCell.style.height = "60px";
							
							submitButton.onclick = function(event){
							
								submitButton.disabled = true;
								//check
								var carID = -1;
								
								for(var i = 0; i <  selCar.length ; i++ )
								{
									
									if( selCar[i].checked ) 
									{
										carID = selCar[i].value;
										
										break;
									}
								}
								
								
								
								if( carID == -1 )
								{
									var text = (_this.lang == "cn") ? "请选择您要预订的车辆。" : "Please select your car.";
									//nameTextBox.focus();
									alert( text );
									submitButton.disabled = false;
									return;
									
								}
								else if (nameTextBox.value == "") {
									var text = (_this.lang == "cn") ? "请填写您的姓名" : "Please fill out your name.";
									nameTextBox.focus();
									alert(text);
									submitButton.disabled = false;
									return;
								}
								else if (phoneTextBox.value == "") {
										var text = (_this.lang == "cn") ? "请填写您的电话号码" : "Please fill out your phone number.";
										phoneTextBox.focus();
										alert(text);
										submitButton.disabled = false;
										return;
								}
								else if (echeck(emailTextBox.value) == false) {
										var text = (_this.lang == "cn") ? "请正确填写您的电子邮件" : "Please fill out your email.";
										emailTextBox.focus();
										alert(text);
										submitButton.disabled = false;
										return;
								}
								else if (deCheck.checkbox.checked) 
								{
									if (AddressTextBox.value == "") 
									{
										var text = (_this.lang == "cn") ? "请填写您的地址" : "Please fill out your address.";
										AddressTextBox.focus();
										alert(text);
										submitButton.disabled = false;
										return;
									}
								}
								
								
								submitButton.value = (_this.lang == "cn") ? "正在提交预订，请稍等..." : "Please wait.";
								
								RPC(XML, "putOrder", false, function(msg, xmlhttp){
								
									if (msg.status == "ok") {
										var items = msg.data.getElementsByTagName("item");
										var uID = getXmlText(items[0], "uID");
										var email = getXmlText(items[0], "email");										
										
//										alert((_this.lang == "cn") ? "感谢您的预定, 我们将尽快与您联系.。\r\n预订号: " + uID : "Thank you for your booking, we will contact you shortly.\r\nBooking #:" + uID);

										//pop.hide();
										
										var Textpop = new PopFrame(document.body, function(){
											return true;
										});
										
										
										Textpop.midcell.style.verticalAlign = "top";
										Textpop.frame.closeButton.parentNode.innerHTML = "";
										
										Textpop.midcell.style.color = "#333";
										Textpop.setSize( 480, 200 );
										Textpop.setDisplay(true);
										
										var topDiv = document.createElement("div");
										Textpop.appendChild(topDiv);
										
										topDiv.align = "left";
										topDiv.style.paddingBottom = "10px";
										
										this.closeButton = new imgButton(_this, topDiv, IMG_DIR + "close.gif", ((_this.lang == "cn") ? "关闭" : "Close"), function(event, obj){
											Textpop.hide();
										});
										
										
										var cText = document.createElement( "div" );
											cText.style.paddingTop = "30px";
											
										if( _this.lang == "cn" )
										{
											cText.innerHTML = "感谢您的预定,一封确认邮件已经发送到您的邮箱。我们将尽快与您联系.。<br /><br />预订号: " + uID;											
										}
										else
										{
											cText.innerHTML = "Thank you for your booking, we will contact you shortly.<br /><br />Booking #: " + uID;											
										}
										
										Textpop.midcell.appendChild ( cText ) ;
										
										
										nameTextBox.value = "";
										phoneTextBox.value = "";
										emailTextBox.value = "";
										AddressTextBox.value = "";
										PurposeTextBox.value = "";
										
										sDateBox.setToToday();
										
										eDateBox.setDate(sDateBox.getDate().getFullYear(), sDateBox.getDate().getMonth() + 1, sDateBox.getDate().getDate());
										
										deCheck.checkbox.checked = false;
										
										for(var i = 0; i <  selCar.length ; i++ )
										{
											selCar[i].checked = false; 
										}
										
										addressCell.style.visibility = "hidden";
										submitButton.disabled = false;
										submitButton.value = ((_this.lang == "cn") ? "预订" : "book now");
										
									}
									else {
										//_this.theList.innerHTML = "<option>不能加载选项，请刷新页面</option>";	
										//_this.theList.disabled = false;	
										
										alert((_this.lang == "cn") ? "系统似乎存在问题，您可以电话联系客服，或者尝试再次提交。" : "There is a system error, please call our customer service.");
										submitButton.disabled = false;
										submitButton.value = ((_this.lang == "cn") ? "预订" : "book now");
										
										
										try {
											if ("500" == msg.error.childNodes[0].data) {
												showLoginWindow(function(){
												//_this.getCateList();
												});
											}
										} 
										catch (e) {
											// TODO: handle exception
											showLoginWindow(function(){
											//_this.getCateList();
											});
										}
									}
								}, nameTextBox.value, phoneTextBox.value, PurposeTextBox.value, emailTextBox.value, sDateBox.toString(), eDateBox.toString(), (deCheck.checkbox.checked) ? "1" : "0", timeTextBox.value, AddressTextBox.value,carID);
								
							
							
							//pop.setSize(pop.frame.thebody.offsetWidth, pop.frame.thebody.offsetHeight);
							
						
						
					}					
					
					if(  items.length == 1 && 2 != viewMode )
					{
						_this.showDetail( true , 0 , theGUID , url );
					}
					
					
					
					totalrows = getXmlText( items[0], "totalrows" );
				}				
				
				
					_this.thumbCell.style.backgroundImage = "";	
					_this.listQcell.style.backgroundImage = "";
					_this.listCell.style.backgroundImage = "";
				
				
				
				_this.textCell.innerHTML = "<table border='0' cellpadding='0' cellspacing='0' ><tr><td width='70' style='width:70px;'><strong>"+((_this.lang=="cn")?"查询结果:":"Search results: " ) +"</strong></td><td style='padding-left:10px;'>"+ totalrows+"</td></tr></table>";
				
				_this.pageBar.setData( totalrows ,ROW_PER_PAGE, _this.pageBar.offset ); 
				
			//}catch(e){}				
		}
		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();
				});
			}
		}									
	} , durtion , brand, sort, seat ,search, theGUID , _this.pageBar.offset , ROW_PER_PAGE );	
	
	
	
};





//page
this.pageBar = new PageBar( _this, this.pageCell );
//this.pageBar.setData(100,ROW_PER_PAGE, 0); 




this.showCarWithGuid = function( guid , url )
{
	_this.getList( 0 , 0, 0, 0 ,"" , guid ,url );
	
	dorp1.thebody.style.display = "none";
	dorp2.thebody.style.display = "none";
	dorp3.thebody.style.display = "none";
	dorp4.thebody.style.display = "none";

	_this.toolCell.style.display = "none";
	_this.viewCell.style.display = "none";
		
	//buttonShowAllCars.style.display = "";
	

	buttonShowAllCars.onclick = function(event)
	{
		window.location = url;
	}
	
	
}	
	

}
Class.extend( _gui , ThumbList );






/*
 * 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;	
						if( _this.lang =="cn" ) option.innerHTML = STR_ALL_CN;
						else if( _this.lang == "en" )  option.innerHTML = STR_ALL_EN;
						
						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_"+ _this.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];
				if( _this.lang == "cn" ) option.innerHTML = XML_ARRAY[i][ 1 ];
				else if( _this.lang == "en" ) option.innerHTML = XML_ARRAY[i][ 2 ];
				
				
			}
			_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 NewImage( parent, parentNode, src, width , height  )
{
	
	var _this = this;
	
	
	
	var imgDiv = document.createElement("div");
		parentNode.appendChild( imgDiv );
		imgDiv.style.backgroundRepeat = "no-repeat";
		imgDiv.style.backgroundPosition = "center center";
		
		imgDiv.style.width = width + "px";
		imgDiv.style.height = height + "px";
		
		imgDiv.style.border = "1px #eee solid";
		imgDiv.style.overflow = "hidden";
		
		imgDiv.style.backgroundImage = "url( ../img/no_photo_s.gif )";
		imgDiv.align = "center";
	
	var img = null;
	

	
	this.resize = function()
	{
		if( img != null )
		{
			
			var imgHeight = img.offsetHeight;
			var imgWidth = img.offsetWidth;
			
			//var width = width;
			//var height = height;
			
			if (imgWidth > width) {
				img.style.width = width + "px";
				img.style.height = parseInt(width * imgHeight / imgWidth) + "px";
			}
			
			
			imgHeight = img.offsetHeight;
			imgWidth = img.offsetWidth;
			
			if (imgHeight > height) {
				img.style.height = height + "px";
				img.style.width = parseInt(height * imgWidth / imgHeight) + "px";
			}
			
			
			img.parentNode.style.backgroundColor = "#000";
			img.parentNode.style.backgroundImage = "";				
			
		}
	
	}
	
	if (src != "" && src != null) {
	
		img = document.createElement("img");
			imgDiv.appendChild(img);
			img.style.visibility = "hidden";

		
		img.onload = function(event)
		{
			_this.resize();
			this.style.visibility = "visible";
		};
		
		img.src = src;
		
	}	
	
	//return imgDiv;
	
}


		function getTags( type , isFolder , thelist , button , text , dataName , sort )
		{
			var sort = sort || "title_en";
			
			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" );
									
									//alert( guid );
									
									var value = 0;
									var selText = " ";
									
									if( button.data.isInTags( guid ) )
									{
										value = 1;
										selText = "*";
										
									}
								
									
									if(  "designer" == dataName )
									{
										if( catName != getXmlText( items[i], "cat_en" )  )
										{
											catName = getXmlText( items[i], "cat_en" );
											thelist.innerHTML += "<option id='-' value='-'  >-"
											+catName +"-</option>";
											
										}
										
									}
									
									thelist.innerHTML += "<option id='"+ value +"' value='"
									+( guid )+"'  >" +selText +" "
									+getXmlText( items[i], "title_en" ) + " </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 + "" , "" , "", sort , "0" , isFolder );
		
		}



/*
 * 
 * 
 * 
 * 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("sun",  "mon", "tue" , "wed" , "thu", "fir" , "set");

	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;
	}
	
}