function ScrollObject(div_parent,prev_button,next_button,vertical,page_width,page_height,page_html,page_count,circular,prev_function,prev_argv,complete_function,complete_argv)
{
	//private:
	var prev_object = prev_button;
	var next_object = next_button;
//	var find_object;
	var div_parent = div_parent;
	
	var page_width = new Number(page_width);
	var page_height = new Number(page_height);

	var complete_function = complete_function;
	var complete_argv = complete_argv;

  var prev_function = prev_function;
	var prev_argv = prev_argv;

	var page_count = new Number(page_count);

	var CurrentPageIndex = new Number(0);
	
	var vertical = vertical;
	var page_html = page_html;
	
	var circular = circular;

	
	//negative number for previous page,positive number for next page
	function ChangePage(flip_count)
	{
		var new_index = new Number(CurrentPageIndex + flip_count);
				
		var max_index = new Number(page_count - 1);
		
//		alert(max_index);
		
		if( max_index <= 0 )
		{
			return 0;	
		}
		
		if( circular == true )
		{
			if( flip_count > 0 )
			{
				diff = 1;	
				new_index = new_index % page_count;
				
			}else if ( flip_count < 0 )
			{
				diff = -1;	
				if( new_index < 0 )
				{ //new_index is a negative number,so we use add directly
					new_index = page_count + ( new_index % page_count );
				}
			}else
			{
				diff = 0;	
				new_index= CurrentPageIndex;
			}
		}else
		{
			new_index = CurrentPageIndex + flip_count;
		}

		var diff;
		//flip next
		if( circular == false )
		{
			if( flip_count > 0 )
			{
				//exceed page count
				if( new_index >= max_index )
				{
					new_index = max_index;
					next_object.css("visibility","hidden");
				}
				if( new_index != 0 )
				{
					prev_object.css("visibility","visible");
				}	
			}else//flip prev
			{
				//not first page
				if( new_index <= 0)
				{
					new_index = 0;
					prev_object.css("visibility","hidden");					
				}
				if( new_index != max_index )
				{
					next_object.css("visibility","visible");					
				}
			}
			diff = new_index - CurrentPageIndex;			
		}
		
		if( diff > 2 )
		{
			diff = 2;	
		}
		if( diff < -2 )
		{
			diff = -2;
		}
//		alert(new_index);
		CurrentPageIndex = new_index;
//		alert(CurrentPageIndex);		
		return diff;
	}
	
	function FlipPrevMulti()
	{
		for( var i = 0; i < 2; ++i )
		{
			//insert two new page in the front
			$(page_html).insertBefore(div_parent.children().first());
			//assign page attribute
			div_parent.children().first().css("position","absolute");
			div_parent.children().first().css("width",page_width+"px");
			div_parent.children().first().css("height",page_height+"px");
			//if display is hidden,make it visible
			div_parent.children().first().css("visibility","visible");
		}
		
		if( vertical != true )
		{
			//because we insert two new in the front,the original page should be in the 2nd page.but we use absolute,so we should move the origin page to right
			div_parent.children().last().css("left",( page_width * 2 )+"px");
			//and middle page need new position,too
			div_parent.children().eq(1).css("left",page_width +"px");
			//and to keep displaying the original page,we must move the background to left to display the 2nd page,which is the original one
			div_parent.css("left","-" + ( page_width * 2 ) + "px");
			
			BeforeAnimate();
			
			//then start animate the background to the first page
			div_parent.animate({"left": "+=" + ( page_width * 2 ) + "px"}, "slow",function()
			{
//				alert("animatePH");
				//remove the last 2 pages,which should not be visible now.
				div_parent.children().last().remove();
				div_parent.children().last().remove();
				//do some complete callback,like getjson
				AfterAnimate();
			});			
		}else
		{
//			alert("ver");
			//because we insert a new in the front,the original page should be in the 2nd page.but we use absolute,so we should move the origin page to bottom
			div_parent.children().last().css("top",( page_height * 2 )+"px");
			//and middle page need new position,too
			div_parent.children().eq(1).css("top",page_height +"px");			
			//and to keep displaying the original page,we must move the background to bottom to display the 2nd page,which is the original one
			div_parent.css("top","-" + ( page_height * 2 ) + "px");
			
			BeforeAnimate();
			
			//then start animate the background to the first page
			div_parent.animate({"top": "+=" + ( page_height * 2 ) + "px"}, "slow",function()
			{
//				alert("animatePV");
				//remove the last 2 pages,which should not be visible now.				
				div_parent.children().last().remove();
				div_parent.children().last().remove();
				//do some complete callback,like getjson				
				AfterAnimate();
			});
			
		}		
			
	}
	
	function FlipNextMulti()
	{
//		alert("new next");
		for( var i = 0; i < 2; ++i )
		{		
			//insert new page in the back		
			$(page_html).insertAfter(div_parent.children().last());
			//assign page attribute
			div_parent.children().last().css("position","absolute");
			div_parent.children().last().css("width",page_width+"px");
			div_parent.children().last().css("height",page_height+"px");
			//if display is hidden,make it visible		
			div_parent.children().first().css("visibility","visible");
		}
		
		if(vertical != true )
		{
			//because we use absolute for position,the new page should set the start position
			div_parent.children().last().css("left",( page_width * 2 )+"px");
			//and middle page need new position
			div_parent.children().eq(1).css("left",page_width + "px");
			
			BeforeAnimate();
						
			//start animate the background to the 2nd page
			div_parent.animate({"left": "-=" + ( page_width * 2 ) + "px"}, "slow",function()
			{
//				alert("animateNH");
				//we remove the fist 2 pages,which should not be visible.
				div_parent.children().first().remove();
				div_parent.children().first().remove();
				//because we use absolute,we should reset all position information to origin,that include the 3rd page position and the background position
				div_parent.children().css("left","0px");
				div_parent.css("left","0px");
				//do some complete callback,like getjson	
				AfterAnimate();					
			});			
		}else
		{
//			alert("ver");
			//because we use absolute for position,the new page should set the start position
			div_parent.children().last().css("top",( page_height * 2 )+"px");		
			//and middle page need new position
			div_parent.children().eq(1).css("top",page_height + "px");			
			
			BeforeAnimate();
				
			//start animate the background to the 2nd page
			div_parent.animate({"top": "-=" + ( page_height * 2 ) + "px"}, "slow",function()
			{
//				alert("animateNV");
				//we remove the fist page,which should not be visible.
				div_parent.children().first().remove();
				div_parent.children().first().remove();
				//because we use absolute,we should reset all position information to origin,that include the 3rd page position and the background position
				div_parent.css("top","0px");
				div_parent.children().css("top","0px");
				//do some complete callback,like getjson	
				AfterAnimate();
			});
	
		}
				
	}
	
	//public:		

	this.GetPrev = function()
	{
		return prev_object;
	}
	
	this.GetNext = function()
	{
		return next_object;	
	}

	this.GetDiv = function()
	{	
		return div_parent;
	}
	
	this.GetWidth = function()
	{
		return page_width;
	}
	
	this.GetHeight = function()
	{
		return page_height;
	}

	this.GetIndex = function()
	{
		return CurrentPageIndex;
	}
	
	
	this.SetVertical = function(new_vertical)
	{
		vertical = new_vertical;
//		alert(vertical);
	}
	
	function BeforeAnimate()
	{
		if( prev_function )
		{
			prev_function(prev_argv);
		}	
	}
	function AfterAnimate()
	{
		if( complete_function )
		{
			complete_function(complete_argv);	
		}	
	}
	
	this.GetCurrentIndex = function()
	{
		return CurrentPageIndex;	
	}
		
	this.FindPage = function(NewPageIndex)
	{

		var FlipCount = new Number(NewPageIndex - CurrentPageIndex);

		var flip_type = ChangePage(FlipCount);

		switch(flip_type)
		{
			case 1:
				FlipNextOne();
				break;
			case 2:
				FlipNextMulti();
				break;			
			case -1:
				FlipPrevOne();
				break;
			case -2:
				FlipPrevMulti();
				break;
		}
	}
	
	this.FlipPrevOneSP = function()
	{
		if( ChangePage(-1) == -1 )
		{
			FlipPrevOne();	
		}
	}
		
	function FlipPrevOne()
	{
		//insert new page in the front
//		alert(page_html);
		$(page_html).insertBefore(div_parent.children());
		//assign page attribute
		div_parent.children().first().css("position","absolute");
		div_parent.children().first().css("width",page_width+"px");
		div_parent.children().first().css("height",page_height+"px");
		//if display is hidden,make it visible
		div_parent.children().first().css("visibility","visible");
		
		if( vertical != true )
		{
			//because we insert a new in the front,the original page should be in the 2nd page.but we use absolute,so we should move the origin page to right
			div_parent.children().last().css("left",page_width+"px");
			//and to keep displaying the original page,we must move the background to left to display the 2nd page,which is the original one
			div_parent.css("left","-" + page_width + "px");
			
			BeforeAnimate();
			
			//then start animate the background to the first page
			div_parent.animate({"left": "+=" + page_width + "px"}, "slow",function()
			{
//				alert("animatePHO");
				//remove the 2nd page,which should not be visible now.
				div_parent.children().last().remove();
				//do some complete callback,like getjson
				AfterAnimate();
			});			
		}else
		{
//			alert("ver");
			//because we insert a new in the front,the original page should be in the 2nd page.but we use absolute,so we should move the origin page to bottom
			div_parent.children().last().css("top",page_height+"px");
			//and to keep displaying the original page,we must move the background to bottom to display the 2nd page,which is the original one
			div_parent.css("top","-" + page_height + "px");
			
			BeforeAnimate();
			
			//then start animate the background to the first page
			div_parent.animate({"top": "+=" + page_height + "px"}, "slow",function()
			{
//				alert("animatePVO");
				//remove the 2nd page,which should not be visible now.				
				div_parent.children().last().remove();
				//do some complete callback,like getjson				
				AfterAnimate();
			});
			
		}		
	}
	this.FlipNextOneSP = function()
	{
		if( ChangePage(1) == 1 )
		{
			FlipNextOne();	
		}
	}

	function FlipNextOne()
	{
		//insert new page in the back		
		$(page_html).insertAfter(div_parent.children());
		//assign page attribute
		div_parent.children().last().css("position","absolute");
		div_parent.children().last().css("width",page_width+"px");
		div_parent.children().last().css("height",page_height+"px");
		//if display is hidden,make it visible		
		div_parent.children().first().css("visibility","visible");

		
		if(vertical != true )
		{
			//because we use absolute for position,the new page should set the start position
			div_parent.children().last().css("left",page_width+"px");
			
			BeforeAnimate();
						
			//start animate the background to the 2nd page
			div_parent.animate({"left": "-=" + page_width + "px"}, "slow",function()
			{
//				alert("animateNHO");
				//we remove the fist page,which should not be visible.
				div_parent.children().first().remove();
				//because we use absolute,we should reset all position information to origin,that include the 2nd page position and the background position
				div_parent.children().css("left","0px");
				div_parent.css("left","0px");
				//do some complete callback,like getjson	
				AfterAnimate();					
			});			
		}else
		{
//			alert("ver");
			//because we use absolute for position,the new page should set the start position
			div_parent.children().last().css("top",page_height+"px");		
			
			BeforeAnimate();
				
			//start animate the background to the 2nd page
			div_parent.animate({"top": "-=" + page_height + "px"}, "slow",function()
			{
//				alert("animateNVO");
				//we remove the fist page,which should not be visible.
				div_parent.children().first().remove();
				//because we use absolute,we should reset all position information to origin,that include the 2nd page position and the background position
				div_parent.css("top","0px");
				div_parent.children().css("top","0px");
				//do some complete callback,like getjson	
				AfterAnimate();
			});
		}
//		alert(page_width);

	}
	
	this.AssignFind = function(TargetObject,event_type)
	{
		TargetObject.bind(event_type,{ScrollObject:this,FindObject:TargetObject},find_handler);	
	}
	
	this.init = function()
	{
		//set view window size
		div_parent.parent().css("width",page_width+"px");
		div_parent.parent().css("height",page_height+"px");
		//use "absolute for each page,because some children margin will effect the div.Ex.<p>"	
		div_parent.children().css("position","absolute");
		div_parent.children().css("width",page_width+"px");
		div_parent.children().css("height",page_height+"px");	
		prev_object.bind("click",{ScrollObject:this},prev_handler);
		next_object.bind("click",{ScrollObject:this},next_handler);
		if(( !page_count ) || ( page_count <= 0 ))
		{
			page_count = 1;	
		}
//		alert(page_count);
	}
		
	//construct,be careful about the order,you should declare function first
	this.init();
	
}

function prev_handler(event)
{
	var ScrollObject = event.data.ScrollObject;
//	alert("prev_trigger");
	ScrollObject.FlipPrevOneSP();
}
	
function next_handler(event)
{
	var ScrollObject = event.data.ScrollObject;
//	alert("next_trigger");
	ScrollObject.FlipNextOneSP();	
}


/*
This must be careful...Some bug is found.
This is due to the event type.
I use input text box for testing,assign 'change' event to trigger this.
Input box must press "enter" key to finish the change,but the input box itself doesn't contain focus.
So when you press the enter to finish the change,it will trigger anthor button's ckick if they contain focus.
In test situation,it trigger the previous button at the same time,and the worst thing is,
Our callback function will not guarantee the sequence,so it will display some error result. 
*/
function find_handler(event)
{
//	alert("find_trigger");	
	var ScrollObject = event.data.ScrollObject;
	var FindObject = event.data.FindObject;
	alert(FindObject.val());
	ScrollObject.FindPage(FindObject.val());
}