/**
Usage:
<table>
    <tr>
        <td style="width:50px; cursor:pointer;" onclick="document.scroll_Listing1.pageBack();">
            left
        </td>
        <td>
            <div id="scrollframe" style="overflow:hidden;  height:100px; width:300px;  ">
                <div id="scrollcontent_Listing1" style="width:1000px; position:relative;">
                    <img 1>  <img 2>  <img 3>  <img 4>
                </div>
           </div>
        </td>
        <td style="width:50px; cursor:pointer;" onclick="document.scroll_Listing1.pageForward();">
            right
        </td>
    </tr>
</table>

<script type="text/javascript" language="javascript">
document.scroll_Listing1 = new scrollControl('scrollcontent_Listing1','scroll_Listing1'); //instanciate the scrollobject

//addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
 document.scroll_Listing1.configure(700,3); //confugure to pagelength in px and number of pages
});
</script>


/**
 * ScrollControl 
 * An object to help make scrollcontrols, it scrolls pages
 * @param {Object} ctrl the id of the divtag to be scrolled
 * @param {Object} pInstanceName the name of this instance
 */
function scrollControl(ctrl,pInstanceName)
{
	this.xpos; // the xposition of the div
	this.timer = null; // timerhandle
    this.instanceName = pInstanceName; //the instancename used in callbackevent
    this.easemode= ""; // easemode (the speedvariation)
    this.distance=0; // the distance to be scrolled
    this.pagelen=50; // the length of a page in pixels
    this.curpage=1; // the current pagenumber
	this.pagecount=5; //the max number of pages
			
			
    this.e = document.getElementById(ctrl);
    //alert(this.e);
    /**
     * Configures the scrollcontrol
     * @param {Object} ppagelen the lenght of a page in pixels
     * @param {Object} ppagecount the total number op pages
     */	
	this.configure = function(ppagelen, ppagecount)
	{
		this.pagelen=ppagelen;
		this.pagecount=ppagecount+1;
        if(this.e==null)
            this.e = document.getElementById(ctrl);
		var CurrentNumctrl = "Currentpage_"+this.instanceName; //storing current pagenumber in hidden field for the backbottom to operate properly
		var	CurPageNum = document.getElementById(CurrentNumctrl);
		
		if(CurPageNum==null)
				return
		
		var stored_curpage=1;
		if(CurPageNum.value!="")
		stored_curpage= parseInt(CurPageNum.value);
		
		//alert(CurPageNum.value);
		if(this.curpage!=stored_curpage)
		{
			this.gotoPage(stored_curpage,"page");
			
		}
		this.updatePageSelector();
        this.updateScrollArrows(); 
        
		//this.addLoadEvent('alert()');
		//this.addLoadEvent('document.' + this.instanceName + '.loader()');
			
	}
	
	this.loader = function()
	{
		var CurrentNumctrl = "Currentpage_"+this.instanceName; //storing current pagenumber in hidden field for the backbottom to operate properly
		var	CurPageNum = document.getElementById(CurrentNumctrl);
		
		if(CurPageNum==null)
				return
				
		var stored_curpage=CurPageNum.value;
		
		
		if(this.curpage!=stored_curpage)
		{
			this.gotoPage(stored_curpage,"page");
		}
		this.updatePageSelector();
       
	
	
	}
	
	this.addLoadEvent = function(func) 
	{
		var oldonload = window.onload;
		if (typeof window.onload != 'function') 
		{
		
			window.onload = func;
		} 
		else 
		{
			window.onload = function() {
			oldonload();
			func();
		}
  }
}

	
	
	/**
	 * Moves to the next page
	 */
	this.pageForward = function()
	{
	    //alert("forward cur:"+this.curpage+":   count:"+this.pagecount);
		if(this.tim !=null) // a scrolling is in progress;
		return;
		if(this.curpage<(this.pagecount))
			this.gotoPage(this.curpage+1,'easeout');
         //else
            //alert("end of forward");
        // if(this.curpage == (this.pagecount))
         //alert("Last page");
			
	}
	/**
	 * Moves a page back
	 */
    this.pageBack = function()
	{
    
		if(this.tim !=null) // a scrolling is in progress;
		return;
		if(this.curpage>1)
			this.gotoPage(this.curpage-1,'easeout');
	    //else
         //   alert("end of backward");
	}
	
	
	/**
	 * Goto a specified page
	 * @param {Object} pagenum the pagenumber
	 */
    this.gotoPage = function (pagenum,mode)
    {
    	var scrolllength=0;
    	if(this.tim !=null) // a scrolling is in progress;
		return;
		if(mode==null) mode='fasteaseinout';
		//alert('goto'+pagenum+" mode"+mode);
		//alert("goto:"+pagenum+" mode"+mode);
    	if(this.curpage==pagenum) // is it the same page as we are in
		{ 
			return;
		} 
    	if(this.pagecount<=pagenum-1)// is we past the last page
		{
			return;
		}
	    if(pagenum<=0) //is we before the first page
		{
			return;
		} //do notting
		
		if(this.curpage<pagenum) // scroll back
	    {
    		scrolllength = (pagenum-this.curpage)*this.pagelen;
    		this.Scroll('left',scrolllength,mode);
    		this.curpage=pagenum;
			this.updatePageSelector();
            this.updateScrollArrows()
    	}
		
    	if(this.curpage>pagenum) //scroll forward
	    {
    		scrolllength = (this.curpage-pagenum)*this.pagelen;
    		this.Scroll('right',scrolllength,mode);
						
    		this.curpage=pagenum;
			this.updatePageSelector();
            this.updateScrollArrows()
    	}
			var CurrentNumctrl = "Currentpage_"+this.instanceName; //storing current pagenumber in hidden field for the backbottom to operate properly
			CurPageNum = document.getElementById(CurrentNumctrl);
			if(CurPageNum==null)
				return
			CurPageNum.value=pagenum;
			
		//eval("document."+this.instanceName);
		
    }
	
    this.updateScrollArrows = function ()
    {
        //alert("forward cur:"+this.curpage+":   count:"+this.pagecount);
        pageforward = document.getElementById('scroll_forward');       
        if(pageforward==null) return  

        if (this.curpage >= this.pagecount)
        {
            pageforward.className = 'scroll_rightarrow_hide';
        }
        else
        {
            pageforward.className = 'scroll_rightarrow';
        }
            
        pageback = document.getElementById('scroll_back');         
        if(pageback==null)  return  
        
        if (this.curpage == 1) 
        {
                pageback.className = 'scroll_leftarrow_hide';
        }
        else
        {
                pageback.className = 'scroll_leftarrow';
        }


    }
    
    
	this.updatePageSelector = function ()
	{
		var pagesel;
		//var i =1;
		//alert('updatePageSelector:'+this.instanceName);
		for(var i=1; i< this.pagecount; i++ )
		{
			var pagectrlID=('pageNumCtrl_'+this.instanceName+'_'+i)
			pagesel = document.getElementById(pagectrlID);
			if(pagesel==null)
				return
			//alert(pagectrlID);			
			//alert(pagesel);
			if (i == this.curpage) 
			{
				//alert('setter:'+i);
				pagesel.className = 'ListingScrollPageSelector_selected';
			}
			else 
				pagesel.className = 'ListingScrollPageSelector';
		}
	}
	
    /**
     * Scrolls a divtag a specified pixels 
     * @param {Object} dir the direction 'left' or 'right'
     * @param {Object} pDistance the distance in pixels eg '50'
     * @param {Object} pEaseMode the scrollmode 'constant', 'easein', 'easeout', 'easeinout'
     */
	this.Scroll = function (dir, pDistance, pEaseMode)
	{
		var curpos = parseInt(this.e.style.left);
		this.easemode = pEaseMode;
		this.distance = parseInt(pDistance);
		
		if(dir=='left')
		{
			this.xpos= curpos-this.distance;
			this.tim = setTimeout('document.'+this.instanceName+'.doScrollLeft()', 10);
		}
		
		if(dir=='right')
		{
			this.xpos= curpos+this.distance;
			this.tim = setTimeout('document.'+this.instanceName+'.doScrollRight()', 10);
		}
		
		return false;
	}
	
	/**
	 * Scrolls left (this is a recursive timer callbackfunction)
	 */
	this.doScrollLeft = function ()
	{
		var curpos = parseInt(this.e.style.left);
		var percet = 100-(((Math.abs(this.xpos-curpos))/this.distance)*100);
    	var step = this.calcSpeed(percet,this.easemode);
    	this.e.style.left = (curpos-step) +'px';
		//alert('per'+percet+' step'+step);
    	if (curpos > this.xpos) //Is the tagetdistance not reached
		{
			this.tim = setTimeout('document.' + this.instanceName + '.doScrollLeft()', 10);
		}
		else 
		{
			this.tim=null; 
			this.e.style.left = this.xpos +'px';//position exactly if steps is large
		} 
   }

	/**
	 * Scrolls right (this is a recursive timer callbackfunction)
	 */
	this.doScrollRight = function ()
	{
		var curpos = parseInt(this.e.style.left);
		var percet = 100-(((Math.abs(this.xpos-curpos))/this.distance)*100); //calculates percent
    	var step = this.calcSpeed(percet,this.easemode);
    	//alert('per'+percet+' step'+step);
    	this.e.style.left = (curpos+step) +'px';
		
    	if (curpos < this.xpos) //Is the tagetdistance not reached
		{
			this.tim = setTimeout('document.' + this.instanceName + '.doScrollRight()', 10);
			if(this.easemode=='page')
				this.tim =null;	
		}
		else 
		{
			this.tim=null;
			this.e.style.left = this.xpos +'px';//position exactly if steps is large
		} 
   }
   
   /**
    * Calculates the ease speed
    * @param {Object} travelpercent the distance traveled in percent
    * @param {Object} mode scrollmode 'constant', 'easein', 'easeout', 'easeinout'
    */
   this.calcSpeed = function (travelpercent,mode)
   {
   
	if(mode=='page')
   		return this.pagelen;
	   if(mode=='constant')
   		return 4
   		if(mode=='easeinout')
   			if(travelpercent<50)
   				mode='easein';
   			else
   				mode='easeout';
             if(mode=='fasteaseinout')
               if(travelpercent<50)
                   mode='fasteasein';
               else
                   mode='fasteaseout';                
   		if(mode=='easeout')
   			return Math.round(((100-travelpercent)/5)+1); 
   		if(mode=='easein')
   			return Math.round((travelpercent/5)+1);
        var step=0;         
        //alert(mode);
        if(mode=='fasteaseout')
               return Math.round((((100-travelpercent)*(100-travelpercent))/50)+1); 
        if(mode=='fasteasein')
               return Math.round(((travelpercent*travelpercent)/50)+1);            
        /*if(step>20) //steplimiter
        return 20;
        else*/
        return step;
   		return 1;
   
   
   }
}