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




function SlideShow( parent, thedata , width, height,  frontpageindex,  ptp , ts )
{
	var _this = this;
	
	
	var picTimePeriod = ptp || 3000;
	var tranSteps = ts || 10;
	var intervalTime = 50;
	
	var runing = false;
	
	var mainintervalID = 0;
	var picchintervalID = 0;
	
	var picindex = frontpageindex || 0;
	var op = tranSteps;
	
	var imgindex = 0;
	var picshowimg = Array(2);
	var showingpichref = "";
	
	var picshowlinkdata = null;
	
	
//public porp	
	this.parent = parent;

//ini --
	if( typeof parent == "string" ) this.parent = document.getElementById( parent );
	
	this.parent.innerHTML = "";
	
	this.parent.style.position= "relative";
	this.parent.style.overflow = "hidden";
	this.parent.style.width = width +"px" || "770px";
	this.parent.style.height = height+"px" || "250px";
	
	picshowlinkdata = thedata;
	
	if( typeof thedata == "string" ) 
	{
		thedata = document.getElementById( thedata );
		picshowlinkdata = thedata.getElementsByTagName("img");
	}
	//alert( picshowlinkdata.length );

	//-----------------------
	if( picindex >= picshowlinkdata.length ) picindex = 0;
	
	
	for( var i=0; i<2; i++ )
	{
		picshowimg[i] = document.createElement("IMG");
		this.parent.appendChild( picshowimg[i] );
		picshowimg[i].className = "picshow";
		picshowimg[i].style.zIndex = 2 - i;
		picshowimg[i].style.position= "absolute";
		picshowimg[i].style.cursor= "pointer";
		picshowimg[i].border="0";
		picshowimg[i].style.visibility = "visible";
	}
	
	
	if( picshowlinkdata.length > 1 )
	{		
	
		showingpichref = picshowlinkdata[ picindex ].title;

		picshowimg[imgindex].src = picshowlinkdata[ picindex ].src; 
		picshowimg[imgindex].style.zIndex = 2;
		
		picindex = ( picindex+1 ) % picshowlinkdata.length
		picshowimg[  (imgindex+1) % 2 ].src = picshowlinkdata[ picindex ].src; 
		picshowimg[  (imgindex+1) % 2 ].style.zIndex = 0;
		
		//picshowimg[1].src = picshowlinkdata[ 1 ].firstChild.src; 
	}
	else  if( picshowlinkdata.length == 1 )
	{
		picshowimg[imgindex].src = picshowlinkdata[ picindex ].src; 
		picshowimg[imgindex].style.zIndex = 2;
		showingpichref = picshowlinkdata[ picindex ].title;
	}
	else
	{
		this.parent.innerHTML = "No pictures to show.";
	}

	
//private method

	this.transmitter = function()
	{
		if( runing || (op < tranSteps)  )
		{
			if( op < 0 )
			{
				op = tranSteps;
				window.clearInterval(picchintervalID);
				_this.changepic();
			}
			else
			{
				setOpacity( picshowimg[imgindex], 100*(op/tranSteps) );
				op--;
				picchintervalID = window.setTimeout(  _this.transmitter , intervalTime  );
			}
		}
	};
		
	
	this.changepic = function()
	{

			showingpichref = picshowlinkdata[ picindex ].title;
			picindex = picindex+1;
			if( picindex >= picshowlinkdata.length   )picindex =0;
			
	//		picindex = randomNumber( picshowdata.length );
			picshowimg[ (imgindex+1) % 2].style.zIndex = 2;
	
			picshowimg[imgindex].style.zIndex = 0;
			//picshowimg[ (imgindex+1) % 2 ].style.zIndex = 2;
			picshowimg[imgindex].src = picshowlinkdata[ picindex ].src; //picshowdata[ picindex ].src;
			picshowimg[imgindex].title = picshowlinkdata[ picindex ].title; //picshowdata[ picindex ].src;
			
			picshowimg[imgindex].style.zIndex = 1;
			setOpacity( picshowimg[imgindex] , 100 );
			
			imgindex = (imgindex+1) % 2;
			
			if( runing )
			{
				_this.run();
			}
	};


	
//events
	this.parent.onclick = function()
	{
		
		if( showingpichref != "undefined" && showingpichref != "" )
		{
			window.location = showingpichref; //picshowdata[ picindex ].src;
		}
		
	};


	this.parent.onmouseover = function()
	{
		_this.puase();
	};
	
	this.parent.onmouseout = function()
	{
		if( runing == false )
		{
			_this.run();
		}
	};
	


//public methods

	this.run = function()
	{
		runing = true;
		window.clearInterval(mainintervalID);
		mainintervalID = window.setTimeout( _this.transmitter , picTimePeriod );
	};
	
	
	this.puase = function()
	{
		runing = false;
		window.clearInterval(mainintervalID);
	};


	this.setPicStayTime = function(num)
	{
		picTimePeriod = num;
	};
	
	this.setMotionSteps = function(num)
	{
		tranSteps = num;	
	};
	
	this.setIntervalTime = function( num )
	{
		intervalTime = num;
	};

	this.isRuning = function()
	{
		return runing;
	};


}



//0-100
function setOpacity( obj,value ){
	if( document.all ){
				obj.style.filter = "alpha(opacity="+value+")";
	}
	else{
		value = value * 0.01;
		obj.style.opacity = value;
	}	
}



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 = "Loading: "+ parseInt(( imgCount*100 ) / imgs.length ) +" %";
						
				if( imgCount >= imgs.length )
				{
					_this.thebody.style.height = "";
					_this.thebody.innerHTML  = "";
					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 );



function SlideShow2( parent , parentNode, images , width, height, isMaxable )
{
	//call supclass
	SlideShow2.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 = 5000;
	var timerID = 0;
	var thumbPerRow = images.length;

	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.isMaxable = isMaxable || true;
	
	
	this.thebody.style.backgroundColor = "#333";
	
	
	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";
	
	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";
		shadow.style.backgroundColor  = this.thebody.style.backgroundColor;
	
	this.thumbPanel = new tableLayout( _this, this.thebody );
	
	var leftButtonCell = this.thumbPanel.addCell();
		leftButtonCell.style.width = "30px";
		leftButtonCell.style.backgroundColor = this.thebody.style.backgroundColor;
		leftButtonCell.style.padding = "2px";
	this.leftArrowButton = new imgButton( _this, leftButtonCell, IMG_DIR+"/arrow_left_black.png" , "Left", function( event, obj )
		{
			_this.stop();
			_this.leftArrowButton.disabled( true );
			var toIndex = ( parseInt( index / thumbPerRow ) * thumbPerRow  ) - thumbPerRow;
				if( toIndex < 0 ) toIndex = 0;
				_this.seek( toIndex );
				_this.leftArrowButton.disabled( false );
		} );
		
	var toolbarCell = this.thumbPanel.addCell();

	var rightButtonCell = this.thumbPanel.addCell();
		rightButtonCell.style.width = leftButtonCell.style.width ;
		rightButtonCell.style.backgroundColor = leftButtonCell.style.backgroundColor;
		rightButtonCell.style.padding = leftButtonCell.style.padding;
	this.rightArrowButton = new imgButton( _this, rightButtonCell, IMG_DIR+"/arrow_right_black.png" , "Right", function( event, obj )
		{
			_this.stop();
			_this.rightArrowButton.disabled( true );
			var toIndex = ( (parseInt( index / thumbPerRow ) + 1 )* thumbPerRow );		
				if( toIndex >= images.length ) ( ( parseInt( (images.length-1) / thumbPerRow ) + 1 ) * thumbPerRow );
				_this.seek( toIndex );
				_this.rightArrowButton.disabled( false );
		} );	
		

	var toolbarDiv = document.createElement( "div" );
	toolbarCell.appendChild(toolbarDiv);
	toolbarDiv.style.width = width - ( parseInt( leftButtonCell.style.width ) *2 ) +"px";
	toolbarDiv.style.height = "104px";
	toolbarDiv.style.overflowY = "hidden";
	toolbarDiv.style.overflowX = "hidden";
	toolbarDiv.style.position= "relative";
	
	this.toolbar = new tableLayout( _this, toolbarDiv );
	this.toolbar.table.width = "";
	this.toolbar.table.align = "center";
	this.toolbar.table.cellSpacing = "5";
	this.toolbar.table.style.position= "absolute";
	this.toolbar.table.style.left = "0px";
	this.toolbar.table.style.top = "0px";
	
	
	
//mid cell ini the images
	for(var i=0;i<images.length;i++  )
	{
		//the showing pic
		
		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.height +"px";
		imageList[i].style.backgroundColor = "#000";

		var theImg = images[i];
			//theImg.src = images[i].src;
			imageList[i].appendChild( theImg );


		var imgWidth = theImg.offsetWidth;
		var imgHeight = theImg.offsetHeight;
			
			if( imgWidth > _this.width )
			{
				theImg.style.width = _this.width + "px";
				theImg.style.height =  parseInt( _this.width * imgHeight / imgWidth ) + "px";
			}
		
		
			
		imgWidth = theImg.offsetWidth;
		imgHeight = theImg.offsetHeight;
			
			if( imgHeight > _this.height )
			{
				theImg.style.height = _this.height + "px";
				theImg.style.width = parseInt( _this.height * imgWidth / imgHeight ) + "px";
			}


// thumb

			buttonList[i] = this.toolbar.addCell();
			buttonList[i].style.padding = "3px";
			buttonList[i].style.backgroundColor = "#FFFFFF";
			buttonList[i].id = i;
			buttonList[i].style.cursor = "pointer";
			buttonList[i].onclick =  function( event )
		 	{
		 		_this.seek( this.id );
		 	};


		var	imgDiv = document.createElement("div");
			buttonList[i].appendChild( imgDiv );
			imgDiv.style.overflow = "hidden";
			imgDiv.style.width = "80px";
			//imgDiv.style.height = parseInt( 80 * _this.height / _this.width ) + "px";
			imgDiv.style.height = "60px";
			imgDiv.style.backgroundColor = "#EEEEEE";
		 	imgDiv.style.backgroundImage = "url( "+IMG_DIR+"syc_or_gr.gif )";
			imgDiv.style.backgroundRepeat = "no-repeat";
			imgDiv.style.backgroundPosition  = "center";
		
		
		var	img = new Image();			
			imgDiv.appendChild( img );
			img.style.visibility  = "hidden";
			
			img.onload = function( event )
			{
				var width = this.offsetWidth;
				var height = this.offsetHeight;
				
				this.width = "80";
				
				if( width > 0 && height > 0  )
				{
					this.style.height = parseInt( this.width * height / width ) + "px";
				}

				this.parentNode.style.backgroundColor = "#000";
				this.parentNode.style.backgroundImage = "";

				this.style.visibility = "visible";
			};
			
		var imgfile = new File( images[i].src );
			img.src = imgfile.path+"thumb/"+imgfile.filename+imgfile.ext;
			
		var textCell = document.createElement("div");	
			buttonList[i].appendChild( textCell );
			textCell.className = "cotext";
			textCell.innerHTML = "#: "+(i+1);
			textCell.style.padding = "3px";
			textCell.style.height = "20px";
			textCell.style.color = "#666";
			
		if( thumbPerRow == images.length )
		{
			if( buttonList[i].offsetLeft + buttonList[i].offsetWidth > toolbarDiv.offsetWidth )
			{
				thumbPerRow = i;
			}
		}	
			
	}
	
/*	
	
	var buttonEnlarge = document.createElement("div");
		_this.showArea.appendChild( buttonEnlarge );
		buttonEnlarge.style.position= "absolute";
		buttonEnlarge.style.overflow = "hidden";
		buttonEnlarge.style.zIndex = images.length + 1;
		buttonEnlarge.style.display = "none";
		buttonEnlarge.style.border = "1px soild"	
	
*/	
	
		
	

	var shadowBottom = document.createElement("div");
	this.thebody.appendChild( shadowBottom );
		shadowBottom.style.backgroundImage = "url("+IMG_DIR+"shadowbottom.png)";
		shadowBottom.style.backgroundPosition = "bottom";
		shadowBottom.style.backgroundRepeat = "repeat-x";
		shadowBottom.style.height = "4px";
		
	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;
					
					_this.showArea.style.height = imageList[index].offsetHeight + "px";
					
					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;
					
					_this.showArea.style.height = imageList[index].offsetHeight + "px";
					
					//alert(  imageList[index].offsetHeight + "px" );
					//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 );	
				}
			} , 20,  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();
	}
	
	
	var resetButton = function()
	{
		if( index >= 0 && index <= lastIndex )
		{
			if( lastButton != null )
			{
				//lastButton.style.border = "1px #fff solid";
				lastButton.style.backgroundColor  = "#fff";
				
			}
				//buttonList[index].style.border = "1px #333 solid";
				buttonList[index].style.backgroundColor  = "#CCC";
				lastButton = buttonList[ index ];

//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.toolbar.table.offsetWidth) ) left = -(buttonList[buttonList.length-1].offsetLeft + buttonList[buttonList.length-1].parentNode.offsetLeft - 3);
					
					//_this.toolbar.table.style.left = left +"px";
					
					var leftFrom = _this.toolbar.table.offsetLeft;
					var leftTo = left;
					
					var moveing = new transform(
					function( intv ){
						var rate = intv / 100;
						var lenX = leftFrom - leftTo;
							_this.toolbar.table.style.left = parseInt ( leftFrom - ( lenX * rate) )+ "px";
					} , 
					function(){
						_this.toolbar.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 );
				}
		}
	};
	

	if( buttonList.length > 0 )
	{
		resetButton();
	}
	
	
	this.seek = function( toIndex )
	{
		_this.stop();
		
		if(  toIndex > index )
		{
			seekingFor( toIndex );
		}
		else if( toIndex < index )
		{
			seekingBak( toIndex );
		}
		else
		{
			//showing.run();
		}
	};
	
	
	this.stop = function()
	{
		window.clearTimeout( timerID );
		if( showing ) showing.stop();
		if( seekingforward ) seekingforward.stop();
		if( seekingback ) seekingback.stop();
	};
	
	
	this.remove = function()
	{
		_this.stop();
		_this.thebody.parentNode.removeChild( _this.thebody );
		
	}
	
}
Class.extend( _gui , SlideShow2 );




function SlideShow3( parent , parentNode , images ,width, height , onImgClick )
{
	//call supclass
	SlideShow3.baseConstructor.call( this, parent, parentNode );
	
	var _this = this;
	
	var timerID ="";
	
	var index = 0;
	var thumbPerRow = images.length;
	var lastIndex = images.length - 1;
	var seekingback = null;
	var seekingforward = null;

	var buttonList = new Array();
	var lastButton = null;
	var colFirstIndex = 0;
	
	var showing = null;
	
	
	//this.thebody.style.backgroundColor = "#610000";
	this.setSize( width+"px", height+"px" );
	
	this.thumbPanel = new tableLayout( _this, this.thebody );
	this.thumbPanel.table.style.height = this.thebody.style.height;
		
	var leftButtonCell = this.thumbPanel.addCell();
		leftButtonCell.style.width = "30px";
		leftButtonCell.style.backgroundColor = this.thebody.style.backgroundColor;
		leftButtonCell.style.padding = "2px";
		
//left button		
	this.leftArrowButton = new imgButton( _this, leftButtonCell, IMG_DIR+"arrow_left_black.png" , "Left", function( event, obj )
		{
			_this.stop();
			_this.leftArrowButton.disabled( true );
			var toIndex = ( parseInt( index / thumbPerRow ) * thumbPerRow  ) - thumbPerRow;
				if( toIndex < 0 ) toIndex = 0;
				_this.seek( toIndex );
				//_this.leftArrowButton.disabled( false );
		} );
		
	var toolbarCell = this.thumbPanel.addCell();

//right button
	var rightButtonCell = this.thumbPanel.addCell();
		rightButtonCell.style.width = leftButtonCell.style.width ;
		rightButtonCell.style.backgroundColor = leftButtonCell.style.backgroundColor;
		rightButtonCell.style.padding = leftButtonCell.style.padding;
		
		
	this.rightArrowButton = new imgButton( _this, rightButtonCell, IMG_DIR+"arrow_right_black.png" , "Right", function( event, obj )
		{
			_this.stop();
			_this.rightArrowButton.disabled( true );
			var toIndex = ( (parseInt( index / thumbPerRow ) + 1 )* thumbPerRow );		
				if( toIndex >= images.length ) ( ( parseInt( (images.length-1) / thumbPerRow ) + 1 ) * thumbPerRow );
				_this.seek( toIndex );
				//_this.rightArrowButton.disabled( false );
		} );	
	
	

	var toolbarDiv = document.createElement( "div" );
	toolbarCell.appendChild(toolbarDiv);

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

	this.toolbar = new tableLayout( _this, toolbarDiv );
	this.toolbar.table.width = "";
	this.toolbar.table.align = "center";
	this.toolbar.table.cellSpacing = "5";
	this.toolbar.table.style.position= "absolute";
	this.toolbar.table.style.left = "0px";
	this.toolbar.table.style.top = "0px";
	

	for(var i=0;i<images.length;i++ )
	{
		
// thumb
			buttonList[i] = this.toolbar.addCell();
			buttonList[i].style.padding = "1px";
			buttonList[i].style.backgroundColor = "#eee";
			//var bg = new backgroundImage( _this,  buttonList[i] );
			buttonList[i].id = i;
			buttonList[i].style.cursor = "pointer";
			buttonList[i].onclick = function( event )
		 	{
		 		_this.seek( this.id );
		 		//showEvent
		 		if( onImgClick instanceof  Function ) onImgClick( event ,_this , images[this.id][2] );
		 	};

		var	imgDiv = document.createElement("div");
			buttonList[i].appendChild( imgDiv );
			//bg.appendChild( imgDiv );
			
			imgDiv.style.overflow = "hidden";
			imgDiv.style.width = "110px";
			imgDiv.style.height = "100px";
			imgDiv.style.backgroundColor = "#FFFFFF";
		 	imgDiv.style.backgroundImage = "url( "+IMG_DIR+"syc_or_gr.gif )";
			imgDiv.style.backgroundRepeat = "no-repeat";
			imgDiv.style.backgroundPosition  = "center";
		
		var	img = new Image();			
			imgDiv.appendChild( img );
			img.style.visibility  = "hidden";
			
			img.onload = function( event )
			{
				var width = this.offsetWidth;
				var height = this.offsetHeight;
				
				this.width = imgDiv.offsetWidth;
				
				if( width > 0 && height > 0  )
				{
					this.style.height = parseInt( this.width * height / width ) + "px";
					//this.style.height = 90+ "px";
				}

				//this.parentNode.style.backgroundColor = "#fff";
				this.parentNode.style.backgroundImage = "";				
				
				this.style.visibility = "visible";
			};
			
		//var imgfile = new File( images[i].src );
			img.src = images[i][0];
			
		var textCell = document.createElement("div");
			textCell.style.overflow = "hidden";
			textCell.style.padding = "0px";
			buttonList[i].appendChild( textCell );
			//bg.appendChild(textCell)
		var theText = document.createElement("div");
			textCell.appendChild( theText );
			theText.className = "cotext";
			theText.style.height = "20px";
			theText.innerHTML = images[i][1];
			theText.style.color = "#666";
			theText.style.fontSize = "11px";
/*
		var dateText = document.createElement("div");
			textCell.appendChild( dateText );
			dateText.style.fontSize = "9px";
			dateText.style.color = "#666";
			dateText.innerHTML = images[i][3];
			dateText.align = "right";
*/		

		if( thumbPerRow == images.length )
		{
			if( buttonList[i].offsetLeft + buttonList[i].offsetWidth > toolbarDiv.offsetWidth )
			{
				thumbPerRow = i;
			}
		}	
			
	}
	
	
	
	var resetButton = function()
	{
		if( index >= 0 && index <= lastIndex )
		{
			if( lastButton != null )
			{
				//lastButton.style.border = "1px #fff solid";
				//lastButton.style.backgroundColor  = "#CCC";
			}
				//buttonList[index].style.border = "1px #333 solid";
				//buttonList[index].style.backgroundColor  = "#CCC";
				lastButton = buttonList[ index ];


//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.toolbar.table.offsetWidth) ) left = -(buttonList[buttonList.length-1].offsetLeft + buttonList[buttonList.length-1].parentNode.offsetLeft - 3);
					
					var leftFrom = _this.toolbar.table.offsetLeft;
					var leftTo = left;
					
					
					var moveing = new transform(
					function( intv ){
						//if( index < lastIndex  ) setOpacity( imageList[index] , ( 100 - intv ) );			
						var rate = intv / 100;
						var lenX = leftFrom - leftTo;
							_this.toolbar.table.style.left = parseInt ( leftFrom - ( lenX * rate) )+ "px";
						
						//alert( leftFrom+"-"+ leftTo);
					} , 
					function(){
						//if( index < lastIndex ) setOpacity( imageList[index] , 0 );				
						_this.toolbar.table.style.left = left +"px";
						
						_this.start();
						
					} , 25, 55 );
					moveing.run();
					
					//_this.toolbar.table.style.left = left +"px";
					
				}
				
				//alert( parseInt( index / thumbPerRow ) * thumbPerRow );
				
				
				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 );
				}
		}
	};
	
	
	if( buttonList.length > 0 )
	{
		resetButton();
	}
	
	this.seek = function( toIndex )
	{
		//_this.stop();
		if( toIndex < 0  ) toIndex = 0;
		if( toIndex >= images.length ) toIndex = images.length - 1;
		
		index = toIndex;
		resetButton();
		
		/*
		if(  toIndex > index )
		{
			seekingFor( toIndex );
		}
		else if( toIndex < index )
		{
			seekingBak( toIndex );
		}
		else
		{
			//showing.run();
		}
		*/ 
	};
	
	this.stop = function()
	{
		window.clearTimeout( timerID );
		//if( showing ) showing.stop();
		if( seekingforward ) seekingforward.stop();
		if( seekingback ) seekingback.stop();
	};
	
	this.start = function()
	{
		
		_this.stop();
		
		timerID = window.setTimeout( function()
		{
			
			index = index + thumbPerRow;
			
			if ( index > lastIndex ) index = 0;
			
			//alert( index );
			_this.seek( index );
			
		}, 5000 );
		
	};
	
	var seekingFor = function( to )
	{
		_this.stop();
					
		//index is the current index of pic
		if( index >=0 && to <= lastIndex && index < to )
		{
		
			seekingforward = new transform(
			function( intv ){
				//if( index < lastIndex  ) setOpacity( imageList[index] , ( 100 - intv ) );			
			} , 
			function(){
				//if( index < lastIndex ) setOpacity( imageList[index] , 0 );				
				
				//this index is the current one
				index ++;
				
				resetButton();
				
				if( index == to )
				{
					//timerID = window.setTimeout( _this.run ,PIC_SHOWING_TIME );
					//_this.rightArrowButton.disabled( false );
					
					//if( onImgClick instanceof  Function ) onImgClick( _this , images[index][2] );
					
					seekingforward = null;
				}
				else
				{
					seekingFor( to );
				}
			
			} , 50,  30 );
			seekingforward.run();
			
		}
	};
	
	var seekingBak = function( to )
	{
		//the index is the one current showing.
		_this.stop();
		
		if( index > 0 && to >=0 && index > to )
		{
			index--;
			//this make the pic appear.
			

				seekingback = new transform( 
				function( intv ){
					//if( index >=0 ) setOpacity( imageList[index] , intv );				
				} , 
				function(){
					//if( index >=0 ) setOpacity( imageList[index] , 100 );
	
					//the index is showing
					resetButton();
					
					//chack if the index is = to 
					if( index == to )
					{
						//timerID = window.setTimeout( _this.run , PIC_SHOWING_TIME );
						//_this.leftArrowButton.disabled( false );
						//if( onImgClick instanceof  Function ) onImgClick( _this , images[index][2] );
						seekingback = null;
					}
					else
					{
						seekingBak( to );
					}
					
				} , 50,  30 );
	
				seekingback.run();
								
		}	
	};
	
	
	
}
Class.extend( _gui , SlideShow3 );





function SlideShow4( parent , parentNode, images , width, height , isMaxable , bgcolor )
{
	//call supclass
	SlideShow4.baseConstructor.call( this, parent, parentNode );
//table not in use.	
//	this.thebody.removeChild( this.table.table );
	this.thebody.innerHTML = "";
	
	var _this = this;
	this.PIC_SHOWING_TIME = 3000;
	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 = "#000";

	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";
	
	
	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 );
	//this.thumbPanel.table.style.display = "none";
	
	var toolbarCell = this.thumbPanel.addCell();

	var toolbarDiv = document.createElement( "div" );
	toolbarCell.appendChild(toolbarDiv);
	//toolbarDiv.style.height = "15px";
	toolbarDiv.align = "center";
	toolbarDiv.style.overflow = "hidden";
	
	toolbarDiv.style.display = "none";
	
var buttons = new tableLayout( _this, toolbarDiv );	
	//buttons.table.cellSpacing = 5;
	buttons.table.width = "";
	
	//buttons.style.display = "none";
//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 || "#000";
		
		imageList[i].style.backgroundPosition = "center";
		imageList[i].style.backgroundRepeat = "no-repeat";
		
		if( _this.isMaxable == false )
		{
			imageList[i].style.backgroundImage = "url("+ images[i].src +")";
		}
		else
		{
			imageList[i].style.backgroundColor = "#fff";
		
			var theImg = images[i];
			//theImg.src = images[i].src;
			imageList[i].appendChild( theImg );

			var imgWidth = theImg.offsetWidth;
			var imgHeight = theImg.offsetHeight;
			
			if( imgWidth > _this.width )
			{
				theImg.style.width = _this.width + "px";
				theImg.style.height =  parseInt( _this.width * imgHeight / imgWidth ) + "px";
			}
		
			imgWidth = theImg.offsetWidth;
			imgHeight = theImg.offsetHeight;
			
			if( imgHeight > _this.height )
			{
				theImg.style.height = _this.height + "px";
				theImg.style.width = parseInt( _this.height * imgWidth / imgHeight ) + "px";
			}
			
		}
		
//maxmize		
		if( _this.isMaxable ) 
		{
			imageList[i].style.cursor = "pointer";
			
			imageList[i].onclick = function()
			{
				//document.body.style.overflow = "hidden";

					var pop = new PopFrame( document.body, function()
					{
						
						return true;
					}  ,  "box_ro" );
					
					pop.midcell.style.backgroundColor = "#FFF";
					pop.midcell.style.color = "#333";		
					pop.setSize(800,600);
					pop.popbg.setDisplay(true);
					//pop.setDisplay( true );
					
					var img = document.createElement("img");
						pop.appendChild( img );
						img.style.visibility = "hidden";
						img.onload = function()
						{
							img.style.visibility = "visible";
							pop.setSize( this.offsetWidth,this.offsetHeight );
							
							setOpacity( pop.thebody , 0 );
							pop.setDisplay( true );
							
							var runner = new transform(
								function( intv ){
									setOpacity( pop.thebody , intv );								
								} , 
								function(){
									setOpacity( pop.thebody , 100 );
								} , 20,  100 );
							runner.run();
						}
								
						img.src = images[index].src;

			};
		}


//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 , _this.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 , _this.PIC_SHOWING_TIME );
					seekingback = null;
					
					
				} , 20,  100 );
				seekingback.run();
			
		}	
	};
	
	
	
	this.start = function()
	{
		//Stay for a while
		window.setTimeout( _this.run , _this.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) 
			} , _this.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 , _this.PIC_SHOWING_TIME );
				}
			} , 15,  200 );
			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 );





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




function SlideShow5( parent , parentNode , images ,width, height , onImgClick )
{
	//call supclass
	SlideShow5.baseConstructor.call( this, parent, parentNode );
	
	
	
	var _this = this;
	
	var index = 0;
	var thumbPerRow = images.length;
	var lastIndex = images.length - 1;
	var seekingback = null;
	var seekingforward = null;

	var buttonList = new Array();
	var lastButton = null;
	var colFirstIndex = 0;
	
	
	//this.thebody.style.backgroundColor = "#610000";
	this.setSize( width+"px", height+"px" );
	
	this.thumbPanel = new tableLayout( _this, this.thebody );
	this.thumbPanel.table.style.height = this.thebody.style.height;
		
	var leftButtonCell = this.thumbPanel.addCell();
		leftButtonCell.style.width = "30px";
		leftButtonCell.style.backgroundColor = this.thebody.style.backgroundColor;
		leftButtonCell.style.padding = "2px";
		
//left button		
	this.leftArrowButton = new imgButton( _this, leftButtonCell, IMG_DIR+"arrow_left_black.png" , "Left", function( event, obj )
		{
			_this.stop();
			_this.leftArrowButton.disabled( true );
			var toIndex = ( parseInt( index / thumbPerRow ) * thumbPerRow  ) - thumbPerRow;
				if( toIndex < 0 ) toIndex = 0;
				_this.seek( toIndex );
				//_this.leftArrowButton.disabled( false );
		} );
		
	var toolbarCell = this.thumbPanel.addCell();

//right button
	var rightButtonCell = this.thumbPanel.addCell();
		rightButtonCell.style.width = leftButtonCell.style.width ;
		rightButtonCell.style.backgroundColor = leftButtonCell.style.backgroundColor;
		rightButtonCell.style.padding = leftButtonCell.style.padding;
		
	this.rightArrowButton = new imgButton( _this, rightButtonCell, IMG_DIR+"arrow_right_black.png" , "Right", function( event, obj )
		{
			_this.stop();
			_this.rightArrowButton.disabled( true );
			var toIndex = ( (parseInt( index / thumbPerRow ) + 1 )* thumbPerRow );		
				if( toIndex >= images.length ) ( ( parseInt( (images.length-1) / thumbPerRow ) + 1 ) * thumbPerRow );
				_this.seek( toIndex );
				//_this.rightArrowButton.disabled( false );
		} );	
	
	
	

	var toolbarDiv = document.createElement( "div" );
	toolbarCell.appendChild(toolbarDiv);

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

	this.toolbar = new tableLayout( _this, toolbarDiv );
	this.toolbar.table.width = "";
	this.toolbar.table.align = "center";
	this.toolbar.table.cellSpacing = "5";
	this.toolbar.table.style.position= "absolute";
	this.toolbar.table.style.left = "0px";
	this.toolbar.table.style.top = "0px";
	

	for(var i=0;i<images.length;i++ )
	{
		
// thumb
			buttonList[i] = this.toolbar.addCell();
			buttonList[i].style.padding = "1px";
			buttonList[i].style.backgroundColor = "#eee";
			//var bg = new backgroundImage( _this,  buttonList[i] );
			buttonList[i].id = i;
			buttonList[i].style.cursor = "pointer";
			buttonList[i].onclick = function( event )
		 	{
		 		_this.seek( this.id );
		 		//showEvent
		 		if( onImgClick instanceof  Function ) onImgClick( event ,_this , images[this.id][2] );
		 	};

		var	imgDiv = document.createElement("div");
			buttonList[i].appendChild( imgDiv );
			//bg.appendChild( imgDiv );
			
			imgDiv.style.overflow = "hidden";
			imgDiv.style.width = "100px";
			imgDiv.style.height = "100px";
			imgDiv.style.backgroundColor = "#FFFFFF";
		 	imgDiv.style.backgroundImage = "url( "+IMG_DIR+"syc_or_gr.gif )";
			imgDiv.style.backgroundRepeat = "no-repeat";
			imgDiv.style.backgroundPosition  = "center";
		
		var	img = new Image();			
			imgDiv.appendChild( img );
			img.style.visibility  = "hidden";
			
			img.onload = function( event )
			{
				var width = this.offsetWidth;
				var height = this.offsetHeight;
				
				this.width = imgDiv.offsetWidth;
				
				if( width > 0 && height > 0  )
				{
					this.style.height = parseInt( this.width * height / width ) + "px";
					//this.style.height = 90+ "px";
				}

				//this.parentNode.style.backgroundColor = "#fff";
				this.parentNode.style.backgroundImage = "";				
				
				this.style.visibility = "visible";
			};
			
		//var imgfile = new File( images[i].src );
			img.src = images[i][0];
			
		var textCell = document.createElement("div");
			textCell.style.overflow = "hidden";
			textCell.style.padding = "0px";
			buttonList[i].appendChild( textCell );
			//bg.appendChild(textCell)
		var theText = document.createElement("div");
			textCell.appendChild( theText );
			theText.className = "cotext";
			theText.style.height = "12px";
			theText.innerHTML = images[i][1];
			theText.style.color = "#666";
			theText.style.fontSize = "11px";
/*
		var dateText = document.createElement("div");
			textCell.appendChild( dateText );
			dateText.style.fontSize = "9px";
			dateText.style.color = "#666";
			dateText.innerHTML = images[i][3];
			dateText.align = "right";
*/		

		if( thumbPerRow == images.length )
		{
			if( buttonList[i].offsetLeft + buttonList[i].offsetWidth > toolbarDiv.offsetWidth )
			{
				thumbPerRow = i;
			}
		}	
			
	}
	
	
	
	var resetButton = function()
	{
		if( index >= 0 && index <= lastIndex )
		{
			if( lastButton != null )
			{
				//lastButton.style.border = "1px #fff solid";
				//lastButton.style.backgroundColor  = "#CCC";
			}
				//buttonList[index].style.border = "1px #333 solid";
				//buttonList[index].style.backgroundColor  = "#CCC";
				lastButton = buttonList[ index ];

//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.toolbar.table.offsetWidth) ) left = -(buttonList[buttonList.length-1].offsetLeft + buttonList[buttonList.length-1].parentNode.offsetLeft - 3);
					
					var leftFrom = _this.toolbar.table.offsetLeft;
					var leftTo = left;
					
					
					var moveing = new transform(
					function( intv ){
						//if( index < lastIndex  ) setOpacity( imageList[index] , ( 100 - intv ) );			
						var rate = intv / 100;
						var lenX = leftFrom - leftTo;
							_this.toolbar.table.style.left = parseInt ( leftFrom - ( lenX * rate) )+ "px";
						
						//alert( leftFrom+"-"+ leftTo);
					} , 
					function(){
						//if( index < lastIndex ) setOpacity( imageList[index] , 0 );				
						_this.toolbar.table.style.left = left +"px";
					
					} , 25, 55 );
					moveing.run();
					
					//_this.toolbar.table.style.left = left +"px";
					
				}
				
				//alert( parseInt( index / thumbPerRow ) * thumbPerRow );
				
				
				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 );
				}
		}
	};
	
	
	if( buttonList.length > 0 )
	{
		resetButton();
	}
	
	this.seek = function( toIndex )
	{
		//_this.stop();
		if( toIndex < 0  ) toIndex = 0;
		if( toIndex >= images.length ) toIndex = images.length - 1;
		
		index = toIndex;
		resetButton();
		
		/*
		if(  toIndex > index )
		{
			seekingFor( toIndex );
		}
		else if( toIndex < index )
		{
			seekingBak( toIndex );
		}
		else
		{
			//showing.run();
		}
		*/ 
	};
	
	this.stop = function()
	{
		//window.clearTimeout( timerID );
		//if( showing ) showing.stop();
		if( seekingforward ) seekingforward.stop();
		if( seekingback ) seekingback.stop();
	};
	
	this.start = function()
	{
		
	};
	
	var seekingFor = function( to )
	{
		_this.stop();
					
		//index is the current index of pic
		if( index >=0 && to <= lastIndex && index < to )
		{
		
			seekingforward = new transform(
			function( intv ){
				//if( index < lastIndex  ) setOpacity( imageList[index] , ( 100 - intv ) );			
			} , 
			function(){
				//if( index < lastIndex ) setOpacity( imageList[index] , 0 );				
				
				//this index is the current one
				index ++;
				
				resetButton();
				
				if( index == to )
				{
					//timerID = window.setTimeout( _this.run ,PIC_SHOWING_TIME );
					//_this.rightArrowButton.disabled( false );
					
					//if( onImgClick instanceof  Function ) onImgClick( _this , images[index][2] );
					
					seekingforward = null;
				}
				else
				{
					seekingFor( to );
				}
			
			} , 50,  30 );
			seekingforward.run();
			
		}
	};
	
	var seekingBak = function( to )
	{
		//the index is the one current showing.
		_this.stop();
		
		if( index > 0 && to >=0 && index > to )
		{
			index--;
			//this make the pic appear.
			

				seekingback = new transform( 
				function( intv ){
					//if( index >=0 ) setOpacity( imageList[index] , intv );				
				} , 
				function(){
					//if( index >=0 ) setOpacity( imageList[index] , 100 );
	
					//the index is showing
					resetButton();
					
					//chack if the index is = to 
					if( index == to )
					{
						//timerID = window.setTimeout( _this.run , PIC_SHOWING_TIME );
						//_this.leftArrowButton.disabled( false );
						//if( onImgClick instanceof  Function ) onImgClick( _this , images[index][2] );
						seekingback = null;
					}
					else
					{
						seekingBak( to );
					}
					
				} , 50,  30 );
	
				seekingback.run();
								
		}	
	};
	
	
	
}
Class.extend( _gui , SlideShow5 );





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

	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.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";
	

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

	var toolbarDiv = document.createElement( "div" );
	toolbarCell.appendChild(toolbarDiv);
	toolbarDiv.style.height = "20px";
	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.backgroundPosition = "center";
		imageList[i].style.backgroundRepeat = "no-repeat";
		
		imageList[i].style.backgroundColor = "#fff";
		
		//theImg.src = images[i].src;
		imageList[i].innerHTML = images[i][0];

		
//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 , _this.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 , _this.PIC_SHOWING_TIME );
					seekingback = null;
					
					
				} , 20,  100 );
				seekingback.run();
			
		}	
	};
	
	
	
	this.start = function()
	{
		//Stay for a while
		window.setTimeout( _this.run , _this.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) 
			} , _this.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 , _this.PIC_SHOWING_TIME );
				}
			} , 15,  200 );
			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 , DivSlideShow );