/*
** FileName:	slideshow.js
** Author:		Jia Yu
** Date:		07-04-2006
** Ver:			0.2.1
** Path:		
*/


var SERVER_ERROR_404 = "404";
 
function randomNumber(limit)
{
	return Math.floor(Math.random()*limit);
}



function ImgLoader( parent, parentNode , imgs , width , height , onLoad )
{
	//call supclass
	ImgLoader.baseConstructor.call( this, parent, parentNode );
	//----------------------------------------------------------------
	var _this = this;

	//imgs = new Array( new Array( "src", "url" ), new Array( "src", "url" ) );
	var imgCount = 0;
	this.imgs = new Array();

	this.setSize( width+"px", height+"px" );
	this.thebody.style.backgroundImage = "url("+IMG_DIR+"inprogress.gif)";
	this.thebody.style.backgroundPosition = "center";
	this.thebody.style.backgroundRepeat = "no-repeat";
	this.thebody.style.fontSize = "10px";
	//this.thebody.style.backgroundColor = "#000";
	
	this.width = width;
	this.height = height;
	
	this.setData = function( imgs )
	{
		if( imgs instanceof Array && imgs.length > 0 )		
		{
			this.thebody.style.backgroundImage = "url( "+IMG_DIR+"inprogress.gif )";
			this.thebody.innerHTML = "";
			this.thebody.style.fontSize = "10px";
			
			this.imgOnload = function( event )
			{		
				imgCount ++;
				
				_this.thebody.innerHTML = "<p align='center' style='padding:20px' >Loading: "+ parseInt(( imgCount*100 ) / imgs.length ) +" % </p>";

				if( imgCount >= imgs.length )
				{
					_this.thebody.style.height = "";
					_this.thebody.innerHTML  = "";
					_this.thebody.style.backgroundImage = "";
					
					onLoad( event ,_this );
				}
			}
			
			for(var i=0;i< imgs.length; i++  )
			{
				_this.imgs[i] = new Image();
				_this.imgs[i].onload = _this.imgOnload;
				_this.imgs[i].src = imgs[i][0];
				if( imgs[i][1] != "" ) _this.imgs[i].title = imgs[i][1];

			}
		}
		else
		{
			this.thebody.style.backgroundImage = "url( "+IMG_DIR+"no_photo.gif )";
			this.thebody.style.verticalAlign = "middle";
			this.thebody.align = "center";
			//this.thebody.innerHTML = "<strong>No Photos</strong>";
			//this.thebody.style.fontSize = "20px";
		}
	};
	
	this.setData( imgs )
	
	
}
Class.extend( _gui , ImgLoader );






/*
 * side preview slide Show 
 * 
 * 
 * 
 * 
 */


function SidePreviewSlideShow( parent , parentNode, dir, images , width , lang ,thumbSize )
{
	//call supclass
	SidePreviewSlideShow.baseConstructor.call( this, parent, parentNode );
	
	var _this = this;
	this.width = width || 500;
	this.dir = dir || IMG_DIR+"photos/";
	this.thumb = dir+"/thumb/";
	this.lang = lang || "cn";
	
	var buttonList = new Array();
	var thumbPerRow = images.length;
	var index = 0;
	var lastButton = null;
	var colFirstIndex = 0;
	var lastIndex = images.length - 1;
	var thumbOptLevel = 80;
	this.thebody.style.backgroundColor = "#FFF";

	var Thumb_Size = thumbSize || 64;

	this.thebody.style.width = this.width+"px";
//preview div	
	
	this.thumbPanel = new tableLayout( _this, this.thebody );
	
	var leftButtonCell = this.thumbPanel.addCell();

		this.leftArrowButton = new imgButton( _this, leftButtonCell, IMG_DIR+"arrow_left_black.png" , "Left", function( event, obj )
		{
			_this.leftArrowButton.disabled( true );
			var toIndex = ( parseInt( index / thumbPerRow ) * thumbPerRow  ) - thumbPerRow;
				if( toIndex < 0 ) toIndex = 0;
				
				_this.showImg( toIndex );
		} );

	var previewCell = this.thumbPanel.addCell();

	var rightButtonCell = this.thumbPanel.addCell();
		rightButtonCell.style.width = leftButtonCell.style.width = "30px";
		rightButtonCell.style.backgroundColor = leftButtonCell.style.backgroundColor = this.thebody.style.backgroundColor;
		rightButtonCell.style.padding = leftButtonCell.style.padding = "2px";
		rightButtonCell.align = "right";
		this.rightArrowButton = new imgButton( _this, rightButtonCell, IMG_DIR+"arrow_right_black.png" , "Right", function( event, obj )
		{
			_this.rightArrowButton.disabled( true );			
			var toIndex = ( (parseInt( index / thumbPerRow ) + 1 )* thumbPerRow );
				if( toIndex >= images.length ) ( ( parseInt( (images.length-1) / thumbPerRow ) + 1 ) * thumbPerRow );
				
				_this.showImg( toIndex );
		} );
	if( document.all ) this.rightArrowButton.thebody.style.backgroundColor = this.leftArrowButton.thebody.style.backgroundColor = this.thebody.style.backgroundColor;	

	var previewDiv = document.createElement("div");
	previewCell.appendChild( previewDiv );

	previewDiv.style.width = width - ( parseInt( leftButtonCell.style.width ) *2 ) +"px";
	previewDiv.style.height = (Thumb_Size +10 ) +"px";
	previewDiv.style.overflowY = "hidden";
	previewDiv.style.overflowX = "hidden";
	previewDiv.style.position = "relative";

	this.previewbar = new tableLayout( _this, previewDiv );
	this.previewbar.table.width = "";
	this.previewbar.table.align = "center";
	this.previewbar.table.cellSpacing = "1";
	this.previewbar.table.style.position= "absolute";
	this.previewbar.table.style.left = this.previewbar.table.style.top = "0px";
	
//show area	
 	this.showArea = document.createElement("div");
	this.thebody.appendChild( this.showArea );
	this.showArea.style.width = width+"px";
	this.showArea.style.overflowY = "hidden";
	this.showArea.style.overflowX = "hidden";
	this.showArea.align = "center";
	//this.showArea.style.width =  _this.width +"px";


//loading 	
	this.loading = document.createElement("div");
	this.thebody.appendChild( this.loading );
	this.loading.innerHTML = "<div class='cotext' align='center'>Loaging ...</div><img src='"+IMG_DIR+"inprogress.gif' border='0'>";
	this.loading.align="center";
	this.loading.style.padding = "10px";
	
	for(var i = 0;i < images.length;i++ )
	{
// thumb
		var	imgDiv = document.createElement("div");
		buttonList[buttonList.length] = imgDiv;
			this.previewbar.addCell(imgDiv);
		
			setOpacity(imgDiv , thumbOptLevel );
				
			imgDiv.style.padding = "3px";
			imgDiv.style.backgroundColor = "#fff";
			imgDiv.style.overflow = "hidden";
			imgDiv.style.width = (Thumb_Size+2)+ "px";
			imgDiv.style.height = (Thumb_Size+2)+ "px";
		 	imgDiv.style.backgroundImage = "url( "+IMG_DIR+"syc_or_gr.gif )";
			imgDiv.style.backgroundRepeat = "no-repeat";
			imgDiv.style.backgroundPosition  = "center";
			imgDiv.id = i;
			imgDiv.style.cursor = "pointer";
			imgDiv.align = "center";
			
			imgDiv.onclick = function( event )
		 	{
		 		_this.showImg( this.id );
		 	};
		 	
		var	img = new Image();			
			imgDiv.appendChild( img );
			img.style.visibility = "hidden";
		
			img.onload = function( event )
			{
			
				resizeImg( this, Thumb_Size, Thumb_Size )

				this.parentNode.style.backgroundImage = "";
				this.style.visibility = "visible";
			};
			
			img.src = this.thumb + images[i][0];

		if( thumbPerRow == images.length )
		{
			if( buttonList[i].parentNode.offsetLeft + buttonList[i].offsetWidth > previewDiv.offsetWidth )
			{
				thumbPerRow = i;
			}
		}
	}
	
	
	var resetButton = function()
	{
		if( index >= 0 && index <= lastIndex )
		{
			if( lastButton != null )
			{
				//lastButton.style.backgroundColor  = "#fff";
				setOpacity(lastButton , thumbOptLevel );
			}

				//buttonList[index].style.backgroundColor  = "#CCC";
				lastButton = buttonList[ index ];
				setOpacity( lastButton , 100 );
				
//put the thumb into the view
				if( colFirstIndex != (parseInt( index / thumbPerRow ) * thumbPerRow  ) )
				{
					colFirstIndex = ( parseInt( index / thumbPerRow ) * thumbPerRow  );
					
					var left = - (buttonList[colFirstIndex].offsetLeft + buttonList[colFirstIndex].parentNode.offsetLeft - 5 );
					
					if( left > 0 ) left = 0;
					if( left <= -(_this.previewbar.table.offsetWidth) ) left = -(buttonList[buttonList.length-1].offsetLeft + buttonList[buttonList.length-1].parentNode.offsetLeft - 3);
					var leftFrom = _this.previewbar.table.offsetLeft;
					var leftTo = left;
					
					var moveing = new transform(
					function( intv ){
						var rate = intv / 100;
						var lenX = leftFrom - leftTo;
							_this.previewbar.table.style.left = parseInt ( leftFrom - ( lenX * rate) )+ "px";
					} , 
					function(){
						_this.previewbar.table.style.left = left +"px";
					
					} , 25, 55 );
					moveing.run();
				}
				
				
				if( parseInt( index / thumbPerRow ) * thumbPerRow  == 0  )
				{
					if( _this.leftArrowButton.isDisabled == false ) _this.leftArrowButton.disabled( true );
				}
				else
				{
					if( _this.leftArrowButton.isDisabled == true ) _this.leftArrowButton.disabled( false );
				}
				
				if( parseInt( index / thumbPerRow ) == parseInt( (buttonList.length-1) / thumbPerRow ) )
				{
					if( _this.rightArrowButton.isDisabled == false ) _this.rightArrowButton.disabled( true );
				}
				else
				{
					if( _this.rightArrowButton.isDisabled == true ) _this.rightArrowButton.disabled( false );
				}
				
		}
	};

	this.showImg = function( num )
	{
		index = num;
		_this.loading.style.display = "";
		
		_this.showArea.innerHTML = "";
		
		var img = new Image();
 		_this.showArea.appendChild( img );
		//img.style.visibility = "hidden";
		setOpacity( img , 0 );
		
		img.onload = function( event )
		{
			_this.loading.style.display = "none";
		
			var width = img.offsetWidth;
			var height = img.offsetHeight;
			
			if( width > _this.width )
			{
				img.style.width = _this.width+"px";
				//height = img.offsetHeight;
				//img.style.height = parseInt( _this.width * height / width ) + "px";
			}
			
			img.style.visibility = "visible";
			
			var moveing = new transform(
					function( intv ){
						setOpacity( img , intv );
					} , 
					function(){
						//_this.previewbar.table.style.left = left +"px";
					
					} , 25, 55 );
			moveing.run();
			
			
		}
		
		img.src = _this.dir + images[index][0];
				
		resetButton();
	}
		
	if( buttonList.length > 0 )
	{
 		this.showImg( 0 );
	}	
	//alert( "colFirstIndex:"+colFirstIndex +"thumbPerRow:"+thumbPerRow+"index"+index );
	
	
}
Class.extend( _gui , SidePreviewSlideShow );




//class
function XmlImageSlideShow( parent , parentNode, xml_url ,width , height , loadingimg , pageoffset , imgperpage , lang )
{
	//call supclass
	XmlImageSlideShow.baseConstructor.call( this, parent, parentNode );	
	var _this = this;
	
	var XML_SERVER =  xml_url || "./server/client.php";
	this.width = width;
	this.height = height;	
	this.loadingimg = loadingimg || IMG_DIR + "syc_or_gr.gif" ;
	this.pageoffset = pageoffset || 0;
	this.imgperpage = imgperpage || 10;
	this.type = 0;
	
	var firstshow = true;
	
	this.totalLoading = 30;
	
	this.PIC_SHOWING_TIME = 3000;
	this.step = 25;
	this.time = 100;		
	
	var totalrows = 0;
	var timerID = 0;
	this.isRunning = false;
	//the current showing pic
	var index = 0;
	var lastIndex = 0;
	var nextIndex = index+1;
	var showing = null;
	var hiddening = null;
	var imageList = new Array();
		imageList[0] = new Array();
		imageList[1] = new Array();
		
	var listIndex = 0;
	var zIndex = 0;

	//loading …
	var titleDiv = document.createElement("div");
	this.titleCell = this.table.addCell( titleDiv );
	titleDiv.innerHTML = "Loading...";
	titleDiv.className = "cotext";
	titleDiv.style.height = "15px";
	titleDiv.align = "center";
	this.table.addRow();

	this.showArea = document.createElement("div");
	this.thebody.appendChild( this.showArea );
	this.showArea.style.width = this.width + "px";
	this.showArea.style.height = this.height +"px";
	this.showArea.style.position = "relative";
	this.showArea.align = "left";
	this.showArea.style.cursor = "pointer";
	
	this.showArea.style.backgroundImage = "url("+this.loadingimg+")";
	this.showArea.style.backgroundPosition = "center";
	this.showArea.style.backgroundRepeat = "no-repeat";

//text	
	this.desDiv = document.createElement( "div" );
	this.showArea.appendChild( this.desDiv );
	this.desDiv.style.zIndex = _this.imgperpage * 2 + 2;
	this.desDiv.style.overflow = "hidden";
	this.desDiv.style.backgroundColor = "#eee";
	setOpacity( this.desDiv , 70 );
	this.desDiv.style.position = "absolute";
	this.desDiv.style.height = "0px";
	var closeing = null;
	var opening = null;
	
	this.lang = lang || "en";
	
	this.itemList = new Array();
	
	//cover text
	var isPopShow = false;

	this.setLang = function( lang )
	{
		_this.lang = lang;
	};

	this.showArea.onclick = function()
	{
		_this.stop();
		isPopShow = true;
		var pop = new PopFrame( _this, function()
		{
			//show.remove();
			//document.body.style.overflow = "auto";
			_this.start();
			isPopShow = false;
			return true;
		} );
		
		pop.setDisplay( true );
		pop.frame.background.topTdLeft.appendChild( pop.frame.closeButton.thebody );
		pop.midcell.style.backgroundColor = "#FFF";
		pop.setSize( 800 , 500 );
		
		var img = document.createElement("img");
			img.src = IMG_DIR+"photos/"+ imageList[ listIndex ][index].data.src; 
		
		pop.midcell.appendChild( img );

		var subjectText = "";
		var desText = "";

		if( _this.lang == "cn" )
		{
			desText = imageList[ listIndex ][index].data.des_cn;
			subjectText = "照片序号# ";
			orderText = "请到订购页面\"订购\"此照片";
		}
		else if( _this.lang == "it" )
		{
			desText = imageList[ listIndex ][index].data.des_it;
			subjectText = "ORDINARE ID ";
			orderText = "Per ordinare  questa foto vai alla pagina  \"Ordini\" ";
		}
		else if( _this.lang == "jp" )
		{
			desText = imageList[ listIndex ][index].data.des_jp;
			subjectText = "写真ID # ";
			orderText = "この写真をご注文ご希望の方は「注文」のページに行って下さい";
		}
		else
		{
			desText = imageList[ listIndex ][index].data.des_en;
			subjectText = "PhotoID # ";
			orderText = "To order this photo please go to the \"Orders\" page";
		}	
		
		var titlediv = document.createElement("div");
			pop.midcell.appendChild( titlediv );
			titlediv.style.padding = "10px";
		
		var link = document.createElement("div");
			titlediv.appendChild( link );
			//link.href = "mailto:roy@roryimages.com?Subject=PhotoOrderOn#"+imageList[ listIndex ][index].data.guid;
			link.innerHTML = subjectText + imageList[ listIndex ][index].data.guid;
			titlediv.innerHTML += orderText;
		
		var des = document.createElement("div");
			des.innerHTML = desText;
			des.style.padding = "10px";
			
		pop.midcell.appendChild( des );	
		pop.thebody.style.left = pop.thebody.offsetLeft - 25 + "px";
		
	}

	this.showArea.onmouseover = function()
	{
		//_this.stop();
	}
	
	this.showArea.onmouseout = function( event )
	{
		if( isPopShow == false )
		{
			//_this.start();
		}
		//this.showArea.style.cursor = "pointer";
	}
	
	var Num_Img_loaded = 0;

	this.setDes = function( theimg )
	{
		_this.desDiv.innerHTML = "<div style='padding:10px;'>"+theimg.midcell.getElementsByTagName("img")[0].src +"</div>";
		_this.desDiv.style.left = theimg.midcell.offsetLeft+ "px";
		_this.desDiv.style.top = getTop( theimg.midcell.getElementsByTagName("img")[0] ) -
		 _this.desDiv.offsetHeight + theimg.midcell.offsetHeight - 110 + "px";
		_this.desDiv.style.width = theimg.midcell.offsetWidth + "px";
	};
	
	this.loadImage = function( offset )
	{
		Num_Img_loaded = 0;
		_this.stop();
		if( offset != null ) _this.pageoffset = offset;
		if( totalrows != 0 && _this.pageoffset >= totalrows ) _this.pageoffset = 0;
		
		if( firstshow == false ) SetCookie( "ss_offset" ,  _this.pageoffset );
		
		var searchText = "";
		titleDiv.innerHTML = "Loading...";
		
		RPC( XML_SERVER, "getItems", false , function( msg, xmlhttp )
		{
			if( msg.status == "ok" )
				{
					var items = msg.data.getElementsByTagName( 'item' );
					lastIndex = items.length - 1;
					zIndex = items.length;
					
					for(var i=0; i<imageList[ listIndex ].length ;i++  )
					{
						imageList[ listIndex ][i].thebody.parentNode.removeChild( imageList[ listIndex ][i].thebody );
					}
					
					imageList[ listIndex ] = new Array();
					
					if( items && items.length > 0 )
					{
						totalrows = getXmlText( items[0], "totalrows" );
						
						for( var i=0; i< items.length ; i++ )
						{
							var src = getXmlText( items[i], "src" );
							
							var imgcell = new ImgCell( _this, _this.showArea ,  function( imgCell, img )
							{
								//imgCell.setZIndex( zIndex );
								//imageList[listIndex][ items.length - zIndex ] = imgCell;
								_this.loading( "" );
								//zIndex -- ;
								setOpacity( imgCell.thebody , 0 );
								imgCell.show( null, _this.height - 40 );
								//img
								imgCell.thebody.style.left = ( _this.width - imgCell.thebody.offsetWidth )/2 + "px";
								imgCell.thebody.style.top = ( parentNode.offsetHeight - imgCell.thebody.offsetHeight + 30 )/2 - 20 + "px";
							
							}, EVENT_PHOTO_DIR+ src,  null , "homeBox" , zIndex );
							
							imgcell.thebody.style.cursor = "pointer";
							
							imgcell.data = new dataItem(	getXmlText( items[i], "guid" ),
															"",
															"",
															"",
															"",
															"",
															"",
															"",
															"",
															"",
															"",
															
															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], "src" ),
															"",
															
															getXmlText( items[i], "title_it" ),
															getXmlText( items[i], "des_it" )
							 );
							
							//alert( getXmlText( items[i], "des_en" ) );
							
							
							imgcell.setZIndex( items.length - i );
							imageList[listIndex][ i ] = imgcell;
								
							imgcell.thebody.style.position = "absolute";
							zIndex -- ;
							
						}
						
					}
				}
				else
				{
				 //error
				}
		
		}, _this.type + "" , 0 , searchText, "sort" , "1" , 1 , _this.pageoffset , _this.imgperpage );

	}

	this.run = function()
	{
		_this.stop();
		nextIndex = index + 1;
		
		if( index >=0 && index < lastIndex )
		{
			timerID = window.setTimeout( function()
			{	
				
				_this.setDes( imageList[ listIndex ][nextIndex] );
			
				hiddening = new transform( 
				function( intv )
				{
					setOpacity( imageList[ listIndex ][index].thebody , ( 100 - intv ) );
					setOpacity( imageList[ listIndex ][nextIndex].thebody , intv );		
				} , 
				function(){
					setOpacity( imageList[listIndex][index].thebody , 0 );
					imageList[listIndex][index].isShow  = false;	
					
					setOpacity( imageList[listIndex][nextIndex].thebody , 100 );
					imageList[listIndex][nextIndex].isShow  = true;	
					
					index = nextIndex;
					if( index >= lastIndex )
					{
						// no more pics
						if( timerID ) window.clearTimeout( timerID );
						
						//firstshow = false;
						
						timerID = window.setTimeout( function()
						{
							_this.stop();
							listIndex = ( listIndex == 0 )?1:0;
							if( firstshow )
							{
								firstshow = false;
								_this.pageoffset = GetCookie( "ss_offset" );
								//alert( _this.pageoffset );
								
							}
							
							if( totalrows != 0  && totalrows > _this.imgperpage )
							{
								_this.pageoffset = randomNumber( ( totalrows ) ) + _this.imgperpage;
							}
							else
							{
								_this.pageoffset = _this.pageoffset + _this.imgperpage;
							}
							
							_this.loadImage( _this.pageoffset );
						} , _this.PIC_SHOWING_TIME );
					}
					else
					{	
						_this.run();
					}
					
				} , _this.step,  _this.time );
				hiddening.run();
				
			}, _this.PIC_SHOWING_TIME );
		}
		else
		{
			if( timerID ) window.clearTimeout( timerID );
			timerID = window.setTimeout( function()
			{
				_this.stop();
				listIndex = ( listIndex == 0 )?1:0;
				_this.loadImage( _this.pageoffset + _this.imgperpage  );
			} , _this.PIC_SHOWING_TIME );
		}
	}


	
	this.loading = function( title )
	{
		Num_Img_loaded++;
		
		titleDiv.innerHTML = "Loading... " + parseInt( Num_Img_loaded * 100 / ( lastIndex+1 ) ) +"% "+title;
		
		if( Num_Img_loaded >= ( lastIndex+1 ) )
		{
			_this.showArea.style.backgroundImage = "";
			index = 0;
			titleDiv.innerHTML = " ";
			
			if( _this.isRunning == false  ) 
			{
				var otherListIndex = ((listIndex==1)?0:1);
				_this.isRunning == true;
				
				_this.setDes( imageList[ listIndex ][index] );
				showing = new transform( 
				function( intv ){
					//make the pic of index appear 
					var otherListIndex = ((listIndex==1)?0:1);
									
					if( index >=0 && index < lastIndex  ) 
					{
						setOpacity( imageList[listIndex][index].thebody , intv );
						
						if( imageList[otherListIndex][imageList[otherListIndex].length -1]  ) 
						{
							setOpacity( imageList[otherListIndex][imageList[otherListIndex].length -1].thebody , ( 100 - intv ) );
						}
					}		
				} , 
				function(){
					var otherListIndex = ((listIndex==1)?0:1);
									
					if( imageList[otherListIndex][imageList[otherListIndex].length -1] )
					{
						setOpacity( imageList[otherListIndex][ imageList[otherListIndex].length -1 ].thebody ,  0  );
						imageList[otherListIndex][imageList[otherListIndex].length -1 ].isShow = false;
					}
					
					setOpacity( imageList[listIndex][index].thebody , 100 );
					imageList[listIndex][index].isShow = true;
					
					_this.run();
				} , _this.step,  _this.time );
				showing.run();
			}
		}
		
		//_this.loadFirst();
	}

	this.start = function()
	{
		
		if( _this.isRunning == false)
		{
			this.run();
			
			_this.isRunning = true;
		}
	}

	this.stop = function()
	{
		if( timerID ) window.clearTimeout( timerID );
		if( showing ) showing.stop();
		if( hiddening ) hiddening.stop();

		_this.isRunning = false;
	}
	
}
Class.extend( _gui , XmlImageSlideShow );




	
//class	
function ImgCell( parent, parentNode , onImgLoad,  src , zoom , style , zIndex )
{
	var _this = this;
	this.bg = new backgroundImage( _this, parentNode , style || "bigRoundBox" );
	this.isReady = false;
	this.isShow = false;
	this.data = null;
	
	// for big home box only
	this.bg.rightTd.style.verticalAlign = "top";
	this.bg.rightTd.innerHTML = "<div style='width:100px;' ><img src='"+IMG_DIR+"box_home/right_top.jpg' border=0 ></div>";
	this.bg.topTdRight.className = "";
	this.bg.bottomTdLeft.className = "";
	this.bg.leftTd.className = "";
	this.bg.toptd.className = "";	
	this.bg.topTdLeft.className = "";	
	this.bg.leftTd.innerHTML = "<div style='width:100px;' ></div>";
	this.bg.bottomTd.align = "left";
	this.bg.bottomTd.innerHTML = "<div style='height:100px;' ><img src='"+IMG_DIR+"box_home/left_bottom.jpg' border=0 ></div>";
	
	//====================================
	
	var img = document.createElement( "img" );
	this.bg.midcell.appendChild( img );
	this.bg.thebody.style.visibility = "hidden";
	
	this.thebody = this.bg.thebody;
	this.midcell = this.bg.midcell;
	
	img.border = 0;

	this.setZIndex = function(  index  )
	{
		this.bg.thebody.style.zIndex = index || 0;
	};
	
	
	img.onload = function( event )
	{
		_this.isReady = true;
		onImgLoad( _this, img );
		if( zoom ) _this.zoom( zoom || 1 );
	}
	
	this.setBorderStyle = function( style )
	{
		_this.bg.thebody.className = style || "bigRoundBox" ;
	}
	
	
	this.show = function( width, height, zoom )
	{
		if( width )
		{
			this.fitWidth( width );	
		}
		else if( height )
		{
			this.fitHeight( height );	
		}
		else if( zoom )
		{
			this.zoom( height );	
		}
		
		_this.bg.thebody.style.visibility = "visible";
	}
	
	
	this.zoom = function( zoom )
	{
		if( _this.isReady )
		{
			var oH = img.offsetHeight;
			var oW = img.offsetWidth;
			
			img.style.width = parseInt( oW * zoom ) +"px";
			img.style.height = parseInt( oH * zoom ) +"px";
		}
	}
	

	
	this.fitHeight = function( h )
	{
		if( _this.isReady  )
		{
			if( h < img.offsetHeight )
			{
				var zoom = h / img.offsetHeight;
				_this.zoom( zoom );
			}
		}
	}
	
	this.fitWidth = function( w )
	{
		if( _this.isReady  )
		{
			
			if( w < img.offsetWidth )
			{
				var zoom = w / img.offsetWidth;
				_this.zoom( zoom );
			}
		}
	}
	
	
	//ini
	if(  zIndex ) this.setZIndex( zIndex );
	img.src = src || IMG_DIR+"no_photo.gif";
		
}
	




//class
function XmlImageSlideShowWithTag( parent , parentNode, xml_url ,width ,height ,loadingimg ,pageoffset ,imgperpage ,lang )
{
	
	//call supclass
	XmlImageSlideShowWithTag.baseConstructor.call( this, parent, parentNode );
	var _this = this;
	
	var XML_SERVER =  xml_url || "./server/client.php";
	this.width = width;
	this.height = height;	
	this.loadingimg = loadingimg || IMG_DIR + "syc_or_gr.gif";
	this.pageoffset = pageoffset || 0;
	this.imgperpage = imgperpage || 20;
	this.type = 0;
	
	this.PIC_SHOWING_TIME = 3000;
	this.step = 15;
	this.time = 80;
	
	var totalrows = 0;
	var timerID = 0;
	this.isRunning = false;
	//the current showing pic
	var index = 0;
	var lastIndex = 0;
	var nextIndex = index+1;
	var showing = null;
	var hiddening = null;
	var imageList = new Array();
		imageList[0] = new Array();
		imageList[1] = new Array();
		
	var listIndex = 0;
	var zIndex = 0;
	
	this.lang = lang || "en";

//loading …
var titleDiv = document.createElement("div");
	this.titleCell = this.table.addCell( titleDiv );
	titleDiv.innerHTML = "Loading...";
	titleDiv.className = "cotext";
	titleDiv.style.height = "15px";
	titleDiv.align = "center";
	
	this.table.addRow();

	this.showArea = document.createElement("div");
	this.thebody.appendChild( this.showArea );
	this.showArea.style.width = this.width + "px";
	this.showArea.style.height = this.height +"px";
	this.showArea.style.position = "relative";
	this.showArea.align = "left";
	
	this.showArea.style.backgroundImage = "url("+this.loadingimg+")";
	this.showArea.style.backgroundPosition = "center";
	this.showArea.style.backgroundRepeat = "no-repeat";
	
	this.tags = new Array();
	
	var Num_Img_loaded = 0;
	this.photo_tags = "";

	this.showArea.onclick = function()
	{
		_this.stop();

		isPopShow = true;
		var pop = new PopFrame( _this, function()
		{
			//show.remove();
			//document.body.style.overflow = "auto";
			_this.start();
			isPopShow = false;
			return true;
		} );
		
		pop.setDisplay( true );
		pop.frame.background.topTdLeft.appendChild( pop.frame.closeButton.thebody );
		pop.midcell.style.backgroundColor = "#FFF";
		pop.setSize( 800 , 500 );
		
		var img = document.createElement("img");
			img.src = IMG_DIR+"photos/"+ imageList[ listIndex ][index].data.src;
		pop.midcell.appendChild( img );
		var subjectText = "";
		var desText = "";

		
		if( _this.lang == "cn" )
		{
			desText = imageList[ listIndex ][index].data.des_cn;
			subjectText = "照片序号# ";
			orderText = "请到订购页面\"订购\"此照片";
		}
		else if( _this.lang == "it" )
		{
			desText = imageList[ listIndex ][index].data.des_it;
			subjectText = "PhotoID # ";
			orderText = "Per ordinare questa foto vai alla pagina  \"Ordini\" ";	
		}
		else if( _this.lang == "jp" )
		{
		
			desText = imageList[ listIndex ][index].data.des_jp;
			subjectText = "写真 # ";
			orderText = "この写真をご注文ご希望の方は「注文」のページに行って下さい。";
		}
		else
		{
			desText = imageList[ listIndex ][index].data.des_en;
			subjectText = "PhotoID # ";
			orderText = "To order this photo please go to the \"Orders\" page";
		}	
		
		var titlediv = document.createElement("div");
			pop.midcell.appendChild( titlediv );
			titlediv.style.padding = "10px";
		
		var link = document.createElement("div");
			titlediv.appendChild( link );
			//link.href = "mailto:roy@roryimages.com?Subject=PhotoOrderOn#"+imageList[ listIndex ][index].data.guid;
			link.innerHTML = subjectText + imageList[ listIndex ][index].data.guid;
			titlediv.innerHTML += orderText;
		
		var des = document.createElement("div");
			des.innerHTML = desText;
			des.style.padding = "10px";
			
		pop.midcell.appendChild( des );	
		pop.thebody.style.left = pop.thebody.offsetLeft - 25 + "px";		
	}



	this.loadImage = function( offset )
	{
		Num_Img_loaded = 0;
		_this.stop();
		if( offset != null ) _this.pageoffset = offset;
		if( totalrows != 0 && _this.pageoffset >= totalrows ) _this.pageoffset = 0; 
		var searchText = "";
		titleDiv.innerHTML = "Loading...";
		
		RPC( XML_SERVER, "getItemsWithTag", false , function( msg, xmlhttp )
		{
			if( msg.status == "ok" )
				{
					var items = msg.data.getElementsByTagName( 'item' );
					lastIndex = items.length - 1;
					zIndex = items.length;
					
					for(var i=0; i<imageList[ listIndex ].length ;i++  )
					{
						imageList[ listIndex ][i].thebody.parentNode.removeChild( imageList[ listIndex ][i].thebody );
					}
					
					imageList[ listIndex ] = new Array();
					
					if( items && items.length > 0 )
					{
						totalrows = getXmlText( items[0], "totalrows" );
						
						for( var i=0; i< items.length ; i++ )
						{
							var src = getXmlText( items[i], "src" );
							var imgcell = new ImgCell( _this, _this.showArea ,  function( imgCell, img )
							{
								//imgCell.setZIndex( zIndex );
								//imageList[listIndex][ items.length - zIndex ] = imgCell;
								_this.loading();
								//zIndex -- ;
								setOpacity( imgCell.thebody , 0 );
								imgCell.show( null, _this.height - 40 );
								//img
								imgCell.thebody.style.left = ( _this.width - imgCell.thebody.offsetWidth )/2 + "px";
								imgCell.thebody.style.top = ( parentNode.offsetHeight - imgCell.thebody.offsetHeight + 30 )/2  - 20+ "px";
							
							}, EVENT_PHOTO_DIR+ src,  null , "homeBox" , zIndex );
							imgcell.thebody.style.cursor = "pointer";
							imgcell.thebody.style.position = "absolute";
							
							imgcell.data = new dataItem(	getXmlText( items[i], "guid" ),
															"","","","","","","","","","",
															
															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], "src" ),
															"",
															getXmlText( items[i], "title_it" ),
															getXmlText( items[i], "des_it" )
							 );
							 
							imgcell.setZIndex( items.length - i );
							imageList[listIndex][ i ] = imgcell;
							
							zIndex -- ;
						}
					}
				}
				else
				{
				 //error
				}
		
		},  _this.photo_tags  ,  _this.pageoffset , _this.imgperpage  );
	
	}

	this.run = function()
	{
		if( showing ) showing.stop();
		if( hiddening ) hiddening.stop();
		nextIndex = index + 1;
		if( timerID ) window.clearTimeout( timerID );
		
		if( index >=0 && index < lastIndex )
		{
			timerID = window.setTimeout( function()
			{	
				hiddening = new transform( 
				function( intv )
				{
					setOpacity( imageList[ listIndex ][index].thebody , ( 100 - intv ) );
					setOpacity( imageList[ listIndex ][nextIndex].thebody , intv );		
				} , 
				function(){
					setOpacity( imageList[listIndex][index].thebody , 0 );
					imageList[listIndex][index].isShow  = false;	
					
					setOpacity( imageList[listIndex][nextIndex].thebody , 100 );
					imageList[listIndex][nextIndex].isShow  = true;	
					
					index = nextIndex;
					if( index >= lastIndex )
					{
						
						
						// no more pics
						if( timerID ) window.clearTimeout( timerID );
						timerID = window.setTimeout( function()
						{
							_this.stop();
							listIndex = ( listIndex == 0 )?1:0;
							
							_this.loadImage( _this.pageoffset + _this.imgperpage  );
							
						} , _this.PIC_SHOWING_TIME );
						
						
					}
					else
					{	
						_this.run();
					}
					
				} , _this.step,  _this.time );
				hiddening.run();
				
			}, _this.PIC_SHOWING_TIME );
		}
		else
		{
			if( timerID ) window.clearTimeout( timerID );
			timerID = window.setTimeout( function()
			{
				_this.stop();
				listIndex = ( listIndex == 0 )?1:0;
				_this.loadImage( _this.pageoffset + _this.imgperpage  );
			} , _this.PIC_SHOWING_TIME );
		}
		
		
	}


	
	this.loading = function()
	{
		Num_Img_loaded++;
		titleDiv.innerHTML = "Loading... " + parseInt( Num_Img_loaded * 100 / ( lastIndex+1 ) ) +"%";
		
		
		if( Num_Img_loaded >= ( lastIndex+1 ) || Num_Img_loaded >= 20 )
		{
			_this.showArea.style.backgroundImage = "";
			index = 0;
			titleDiv.innerHTML = " ";
					
			if( _this.isRunning == false  ) 
			{
				var otherListIndex = ((listIndex==1)?0:1);
				_this.isRunning == true;
				
				showing = new transform( 
				function( intv ){
					//make the pic of index appear 
					var otherListIndex = ((listIndex==1)?0:1);
									
					if( index >=0 && index < lastIndex  ) 
					{
						setOpacity( imageList[listIndex][index].thebody , intv );
						
						if( imageList[otherListIndex][imageList[otherListIndex].length -1]  ) 
						{
							setOpacity( imageList[otherListIndex][imageList[otherListIndex].length -1].thebody , ( 100 - intv ) );
						}
					}		
				} , 
				function(){
					var otherListIndex = ((listIndex==1)?0:1);
									
					if( imageList[otherListIndex][imageList[otherListIndex].length -1] )
					{
						setOpacity( imageList[otherListIndex][ imageList[otherListIndex].length -1 ].thebody ,  0  );
						imageList[otherListIndex][imageList[otherListIndex].length -1 ].isShow = false;
					}
					
					setOpacity( imageList[listIndex][index].thebody , 100 );
					imageList[listIndex][index].isShow = true;
					
					_this.run();
				} , _this.step,  _this.time );
				showing.run();
			}
		}
		
		//_this.loadFirst();
	}

	this.start = function()
	{
		
		if( _this.isRunning == false)
		{
			this.run();
			
			_this.isRunning = true;
		}
	}

	this.stop = function()
	{
		if( showing ) showing.stop();
		if( hiddening ) hiddening.stop();
		if( timerID ) window.clearTimeout( timerID );
		_this.isRunning = false;
	}
	
}
Class.extend( _gui , XmlImageSlideShowWithTag );




function SlideShow4( parent , parentNode, images , width, height , bgcolor, isMaxable )
{
	//call supclass
	SlideShow4.baseConstructor.call( this, parent, parentNode );
//table not in use.	
//	this.thebody.removeChild( this.table.table );
	this.thebody.innerHTML = "";
	
	var _this = this;
	var PIC_SHOWING_TIME = 4000;
	var timerID = 0;
	var thumbPerRow = images.length;

	_this.isMaxable  = isMaxable || false;

	var showing = null;
	//the current showing pic
	var index = 0;
	var lastIndex = images.length - 1;
	var seekingback = null;
	var seekingforward = null;

	var imageList = new Array();
	var buttonList = new Array();
	var lastButton = null;
	var colFirstIndex = 0;

	this.width = width || 500;
	this.height = height || 300;
	
	this.thebody.style.backgroundColor = bgcolor || "#EEE";

	this.showArea = document.createElement("div");
	this.thebody.appendChild( this.showArea );
	this.showArea.style.width = _this.width + "px";
	this.showArea.style.height = _this.height - 20 +"px";
	this.showArea.style.position= "relative";
	this.showArea.align = "left";
	
	
	var shadow = document.createElement("div");
		this.thebody.appendChild( shadow );
		shadow.style.height = "5px";
		//shadow.style.backgroundImage = "url("+IMG_DIR+"toolshadow.png)";
		shadow.style.backgroundPosition = "top";
		shadow.style.backgroundRepeat = "repeat-x";

	this.thumbPanel = new tableLayout( _this, this.thebody );
	
	var toolbarCell = this.thumbPanel.addCell();


	var toolbarDiv = document.createElement( "div" );
	toolbarCell.appendChild(toolbarDiv);
	toolbarDiv.style.height = "15px";
	toolbarDiv.align = "center";
	toolbarDiv.style.overflow = "hidden";
	
	
var buttons = new tableLayout( _this, toolbarDiv );	
	buttons.table.cellSpacing = 5;
	buttons.table.width = "";
//mid cell ini the images
	var resetButton = function()
	{
	
		if( index >= 0 && index <= lastIndex )
		{
			if( lastButton != null )
			{
				lastButton.style.backgroundImage = "url( "+IMG_DIR+"dot_button_out.png )";
			}
				buttonList[index].style.backgroundImage = "url( "+IMG_DIR+"dot_button_over.png )";	
				lastButton = buttonList[ index ];
		}
	};
	
	
	for(var i=0;i<images.length;i++  )
	{
		imageList[i] = document.createElement("div");
		_this.showArea.appendChild( imageList[i] );
		
		imageList[i].align = "center";
		imageList[i].style.position= "absolute";
		imageList[i].style.overflow = "hidden";
		imageList[i].style.zIndex = images.length - i;
		
		imageList[i].style.width = _this.width + "px";
		imageList[i].style.height =  _this.showArea.style.height;
		imageList[i].style.backgroundColor = bgcolor || "#EEE";
		
		imageList[i].style.backgroundPosition = "center";
		imageList[i].style.backgroundRepeat = "no-repeat";
		imageList[i].style.backgroundImage = "url("+ images[i].src +")";


//maxmize		
		if( _this.isMaxable ) 
		{
			imageList[i].style.cursor = "pointer";
			
			imageList[i].onclick = function()
			{
				//document.body.style.overflow = "hidden";
				
				var show = null;
				
				var pop = new PopFrame( _this, function()
				{
					
					//show.remove();
					//document.body.style.overflow = "auto";
					return true;
				} );
				
				//pop.maximize();
				pop.setDisplay( true );
				pop.frame.background.topTdRight.appendChild( pop.frame.closeButton.thebody );
				pop.frame.closeButton.thebody.title = "Close Window";
				pop.midcell.style.backgroundColor = "#a40000";
				
				//pop.setSize();
				
				var img = document.createElement("img");
					img.src = images[index].src
				pop.midcell.appendChild( img );
				pop.setSize( img.offsetWidth , img.offsetHeight );
				
				
				/*
				var theimg = new Array();
				
				theimg[0] = images[index];
				
				for(var i=0; i< images.length;i++  )
				{
					theimg[i] =  images[i];
				}
				*/
				
				//show = new SlideShow4( _this , pop.midcell , theimg , pop.midcell.offsetWidth , pop.midcell.offsetHeight - 20  , "#ffffff" );
				//show.seek( index );		
			};
		}


//buttons list
		buttonList[i] = buttons.addCell();
		buttonList[i].style.width = buttonList[i].style.height = "10px";
		buttonList[i].style.paddingLeft = buttonList[i].style.paddingRight = "5px";
		
		buttonList[i].style.backgroundPosition = "center";
		buttonList[i].style.backgroundRepeat = "no-repeat";
		buttonList[i].style.backgroundImage = "url( "+IMG_DIR+"dot_button_out.png )";
		
		buttonList[i].style.cursor = "pointer";
		buttonList[i].id = i;
		
		buttonList[i].onclick =  function( event )
		{
		 	_this.seek( this.id );
		};
		 	
		if( index == i ) 
		{
			resetButton();		
		}

	}
	
	var seekingFor = function( to )
	{
		_this.stop();
		
		//index is the current index of pic
		if( index >=0 && to <= lastIndex && index < to )
		{
			
			for(var i= index - (-1); i< to ;i++ )
			{
				setOpacity( imageList[i] , 0 );
			}				
				
			seekingforward = new transform(
				function( intv ){
					
					setOpacity( imageList[index] , ( 100 - intv ) );

				} , 
				function(){
					setOpacity( imageList[index] , 0 );				
					
					//this index is the current one
					index = to;
					
					resetButton();
					timerID = window.setTimeout( _this.run ,PIC_SHOWING_TIME );
					//_this.rightArrowButton.disabled( false );		
					seekingforward = null;
					
				
				} , 20,  100 );
				seekingforward.run();
			
			
		}
	};
	
	
	var seekingBak = function( to )
	{
		//the index is the one current showing.
		_this.stop();
		
		if( index > 0 && to >=0 && index > to )
		{
			
			seekingback = new transform( 
				function( intv ){
					
					setOpacity( imageList[to] , intv );
								
				} , 
				function(){
					//setOpacity( imageList[to] , 100 );
	
						for(var i= to ;i<= index ; i++ )
						{
							setOpacity( imageList[i] , 100 );
						}
					
					index = to;
		
					//the index is showing
					resetButton();
					//chack if the index is = to 
					timerID = window.setTimeout( _this.run , PIC_SHOWING_TIME );
					seekingback = null;
					
					
				} , 20,  100 );
				seekingback.run();
			
		}	
	};
	
	
	
	this.start = function()
	{
		//Stay for a while
		window.setTimeout( _this.run , PIC_SHOWING_TIME );
	}
	
	
	this.run = function()
	{
		_this.stop();
		
		if( index >= lastIndex )
		{
			index = lastIndex;
			//if it's the last one go to the 1st one.
			timerID = window.setTimeout( function()
			{ 
				seekingBak(0) 
			} , PIC_SHOWING_TIME );
			
		}
		else
		{
			//渐变线程
			showing = new transform( 
			function( intv ){
				//make the pic of index disappear 
				if( index >=0 && index < lastIndex  ) 
				{
					setOpacity( imageList[index] , ( 100 - intv ) );
				}		
			} , 
			function(){
				if( index >=0 && index < lastIndex  ) setOpacity( imageList[index] , 0 );
				//showing the index of current pic
				index ++;
				if( index < imageList.length )
				{
					resetButton();
					//show the last one. if the index is the last 2nd one.
					timerID = window.setTimeout( _this.run , PIC_SHOWING_TIME );
				}
			} , 15,  100 );
			showing.run();
		
		}
		
	};
	
	this.thebody.onmouseover = function( event )
	{
		
		//if( showing ) showing.stop();
		//if( seekingforward ) seekingforward.stop();
		//( seekingback ) seekingback.stop();
		
	};
	
	this.thebody.onmouseout = function( event )
	{
		//if( showing ) showing.run();
	}
	
	

	
	this.seek = function( toIndex )
	{
		_this.stop();

		if(  toIndex > index )
		{
			seekingFor( toIndex );
		}
		else if( toIndex < index )
		{
			seekingBak( toIndex );
		}
		else
		{
			if( showing != null ) showing.run();
		}
	};
	
	
	this.stop = function()
	{
		window.clearTimeout( timerID );
		if( showing ) showing.stop();
		if( seekingforward ) seekingforward.stop();
		if( seekingback ) seekingback.stop();
	};
	
	
	//ini
	if( buttonList.length > 0 ) resetButton();
		
	
}
Class.extend( _gui , SlideShow4 );