/*

Array.prototype.pop=function(){if(this.length!=0) this.length--;
return this;}   
Array.prototype.push=function(){
         var len=arguments.length;
         if(len>0)
         for(var i=0;i<len;i++)this[this.length]=arguments[i];
         return this.length;         
   }
Array.prototype.unshift=function(){
         var len=arguments.length;
         this.reverse();
         if(len>0)
         for(var i=len;i>0;i--)
        this[this.length]=arguments[i-1];
         return this.reverse();
  }   

Array.prototype.splice=function(){
         var len=arguments.length;
         var tarray=[];
      if(len>1){
             for(var i=arguments[0]+arguments[1];i<this.length;i++)
                   tarray[tarray.length]=this[i];
            this.length=arguments[0];
             if(len>2)
             for(var i=2;i<len;i++)
                 this[this.length]=arguments[i];
            var tlen=tarray.length;
             for(var i=0;i<tlen;i++)
             this[this.length]=tarray[i];
      }
         return this;
    }

Array.prototype.shift=function(){
         var f=this[0];
         for(var i=0;i<this.length;i++) this[i]=this[i+1];
         this.length--;
         return f;
   }
*/


var ScrollAcross = function(ulId,liTag,leftBtnId,rightBtnId){

	this.ul = null;
	this.lis = null;
	this.leftBtn = null;
	this.rightBtn = null;
	
	this.isScroll = false;
	
	this.init(ulId,liTag,leftBtnId,rightBtnId);
}
ScrollAcross.prototype = {
	init : function(ulId,liTag,leftBtnId,rightBtnId){
		this.ul = jQuery("#"+ulId);
		this.lis = jQuery("#"+ulId+"  "+liTag);
		this.leftBtn = jQuery("#"+leftBtnId);
		this.rightBtn = jQuery("#"+rightBtnId);


		if( this.lis.length<1 || this.lis.length < this.nowScroll) return;
		var scrollDis = this.lis[0].offsetWidth,li,This = this;
		var This = this;
		this.leftBtn.click (function(){ This.scroll('left',scrollDis);});
		this.rightBtn.click(function(){ This.scroll('right',scrollDis);});
				
		//this.leftBtn.onclick = function(){  var This = this; alert(This + "l"); This.scroll('left',scrollDis);}
		//this.rightBtn.onclick = function(){var This = this;alert("r");	This.scroll('right',scrollDis);}
	
	},
	scroll : function(dir,scrollDis){
		var This = this,cut = 30;
		if(this.isScroll)return false;
		this.isScroll = true;
		var li = null;
		if(dir == 'left') li = this.lis.shift();
		else{
			li = this.ul.removeChild(this.lis.pop());
			li.style.marginLeft = -1 * scrollDis + 'px';
			this.ul.insertBefore(li,this.lis[0]);
		}
		
		var process = function(){
			li.style.marginLeft = parseInt(li.style.marginLeft?li.style.marginLeft:'0',10) + (dir=='left'?-1*cut:cut) + 'px';
			var left = parseInt(li.style.marginLeft,10);
			if((dir=='left' && left*-1 < scrollDis) || (dir=='right' && left < 0)){
				setTimeout(process,20);
			}
			else This.callback(li,dir);
		}
		process();
	},
	callback : function(li,dir){
	
		li.style.marginLeft = '0px';
		if(dir == 'left'){
			var temp = this.ul.removeChild(li);
			
			this.ul.appendChild(temp);
			
			this.lis.push(temp);
		}
		else{
			this.lis = [li].concat(this.lis);
		}
		
		this.isScroll = false;
	}
}