//class
function Animated_scroller(number_of_elements,page_number_ref,layer1_length,layer2_length,list_element_length,prev_id,next_id,layer1_id,layer2_id,animation_speed) 
{
    
this._number_of_elements=number_of_elements;
this._page_number_ref=page_number_ref;

this._layer1_length = layer1_length;
this._layer2_length = layer2_length;

this._list_element_length = list_element_length;
this._prev_id = prev_id;
this._next_id = next_id;
this._layer1_id = layer1_id;
this._layer2_id = layer2_id;

this._layer1_left=0;
this._layer2_left=0;

this._animation_speed = animation_speed;

$(this._layer1_id).css("left","0px");
$(this._layer2_id).css("left",this._layer1_length + "px");


 
this._page=1;

var self = this;


this.moveScroller = function(direction) {



	//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
	//move left
	if(direction == 'prev') 
	{
	
	this._page = this._page - 1;
	
		
		
		if (this._layer1_left == 0)
		
		{
		
		//layer2left=-750;
		this._layer2_left=(-this._layer2_length);
		
		//$("#getinspired_layer2").css("left","-750px");
		$(this._layer2_id).css("left","-" + this._layer2_length + "px");
		
		}
		
			if (this._layer2_left == 0)
		
		{
		
		this._layer1_left=(-this._layer1_length);
		
		$(this._layer1_id).css("left","-" + this._layer1_length + "px");
	
	
		
		}
			 
		this._layer1_left=this._layer1_left+this._list_element_length;
		this._layer2_left=this._layer2_left+this._list_element_length;
		
		
	
		$(this._prev_id).unbind("click");
	
	$(this._next_id).unbind("click"); 
	
	
	
	
	
$(this._layer1_id).animate({
      "left": this._layer1_left + "px"
    }, this._animation_speed,"swing" );


  
$(this._layer2_id).animate(

{"left": this._layer2_left + "px"
    }, this._animation_speed,"swing",
	function()
	{
	//because we are using the function constructor here, it would pass this a new reference, to the function! this
	//is why we cant us this to invoke bindback!
	
	//without using the () we are not invoking the function, we are merely accessing the function VALUE . ie , the body of the function?
		self.bindBack();
	
	 
		}	
	
	 );
		
		
		
		
		
							
	} else { 

		
	//>>>>>>>>>>>>>>>>>>>>>>>>>>
	//move right
	
	this._page = this._page + 1;
	
	
		
		
		
		if (this._layer1_left == 0)
		
		{
		
		this._layer2_left=this._layer1_length;
		
		$(this._layer2_id).css("left",this._layer1_length + "px");
	
		
		}
		
			if (this._layer2_left == 0)
		
		{
		
		this._layer1_left=this._layer2_length;
		
		$(this._layer1_id).css("left",this._layer2_length + "px");
	
	
		
		}
		
		
		this._layer1_left=this._layer1_left-this._list_element_length;
		this._layer2_left=this._layer2_left-this._list_element_length;
		
		
	
		$(this._prev_id).unbind("click");
	
	$(this._next_id).unbind("click"); 
	
	
	
	
	
$(this._layer1_id).animate({
      "left": this._layer1_left + "px"
    }, this._animation_speed,"swing" );


  
$(this._layer2_id).animate({
      "left": this._layer2_left + "px"
     }, this._animation_speed,"swing",
	function(){
	
		self.bindBack();
	
	 
		}	
	
	 );
		

	}


//only run if page numbering required
if (this._number_of_elements != 0)
{
this.updatePages();
}

	//}//  if(scroller != 0) 

	
};//scroll method






this.updatePages = function() {



if (this._page > this._number_of_elements)
{
this._page = 1;
}
if (this._page < 1)
{
this._page = this._number_of_elements;
}


//remove the text
document.getElementById(this._page_number_ref).removeChild(document.getElementById(this._page_number_ref).childNodes[0]);


var text1 = document.createTextNode(this._page + ' of ' + this._number_of_elements);
//insert it into the document somewhere
document.getElementById(this._page_number_ref).appendChild(text1);

};  //updatePages method












//method bindBack
this.bindBack = function() {
 
		
		$(this._prev_id).bind("click", function(){
		 //scroller("prev");
		// this.moveScroller.call(this,"prev");
		// exterior.call(this, extColor, doorCount,  airWing, tireWidth);
	//moveScroller("prev");
	
	 self.moveScroller("prev");
	 
	 
		});
	
	
		$(this._next_id).bind("click", function(){
	
		 //scroller("next");
		// get_inspired.moveScroller("next");
	
		self.moveScroller("next");
		
		//moveScroller("next");
		
		
		});
		
 
 
};

 

 
};//class