/*
	GENERIC SCROLLER CLASS
	- created by Daniel Ireland for Red Ant Design
	- requires prototype & scriptaculous
	- see EOF for example useage
*/
var scroller = Class.create({

	initialize: function(obj) {		
		// 
		var feature = $$('#'+obj.container+' .'+obj.item);
		this.itemDimension = ( obj.type == "h" ) ? obj.width : obj.height;
		this.constrainDimension = (obj.type == "h") ? $(obj.container).up().getWidth() : $(obj.container).up().getHeight();
		this.item_offset = -1*this.itemDimension;
		this.totalWidth = ( obj.type == "h" ) ? feature.length * this.itemDimension : obj.width;
		this.totalHeight = ( obj.type == "h" ) ? obj.height : feature.length * this.itemDimension;		
		this.startObj = (obj.type == "h") ? { left : this.item_offset+'px'} : { top : this.item_offset+'px'};
		this.endObj = (obj.type == "h") ? { left : '0px'} : { top : '0px'};
		
		this.dir = obj.dir;
		this.interval = obj.interval;
		this.curr = 0;
		this.scrolling = false;	
		this.settings = obj;
		
		$(obj.container).setStyle({width:this.totalWidth+"px",height:this.totalHeight+"px",display:"block", overflow:"hidden"});
		
		if (feature.length > (this.constrainDimension/this.itemDimension)){
			Event.observe(obj.left, 'click', this.scroll.bindAsEventListener(this, -1));
			Event.observe(obj.right, 'click', this.scroll.bindAsEventListener(this, 1));			
			if (obj.auto) setInterval(this.scroll.bind(this), this.interval*1000); 
		}else{
			$(obj.left).hide();
			$(obj.right).hide();
		}
	},
	
	scrollPrepare: function(){
		var items = $$('.'+this.settings.item);
		if (this.dir < 0){
			items[0].insert({before:items[items.length-1]});
			$(this.settings.container).setStyle( this.startObj );
		}
	},

	scrollComplete: function(){
		var items = $$('.'+this.settings.item);
		if (this.dir > 0){
			items[items.length-1].insert({after:items[0]});
			$(this.settings.container).setStyle( this.endObj );
		}
		this.scrolling = false;
	},
	
	scroll: function(event, dir){
		if (this.scrolling != true){		
			this.scrolling = true;
			var items = $$('.'+this.settings.item);
			this.dir = (dir == undefined) ? 1 : dir;
			// if scrolling previous, we only need to scroll to zero because the scrollPrepare function will move things around.
			var loc = (this.dir < 0) ? 0 : this.dir*(this.item_offset); 
			var xloc = (this.settings.type == "h") ? loc : 0;
			var yloc = (this.settings.type == "h") ? 0 : loc;
			new Effect.Move($(this.settings.container),{ 
				x:xloc, 
				y:yloc, 
				duration:1/this.settings.speed, 
				mode:'absolute',
				transition: Effect.Transitions.sinoidal,
				beforeStart: this.scrollPrepare.bind(this), 
				afterFinish: this.scrollComplete.bind(this)
			});
      		try { event.stop() } catch(e) {}
		}
	}
		
});

/*
	GENERIC SCROLL AREA CLASS
	- created by Daniel Ireland for Red Ant Design
	- requires prototype & scriptaculous
*/

var scrollarea = Class.create({

	initialize: function(obj) {		
		//
		this.scrolling = false;	
		this.distance = obj.distance;
		this.container = obj.container;
		this.content = obj.content;
		this.containerHeight = $(obj.container).getHeight();
		this.contentHeight = $(obj.content).getHeight();
		
		if (this.contentHeight > this.containerHeight){
			Event.observe(obj.up, 'click', this.scroll.bindAsEventListener(this, -1));
			Event.observe(obj.down, 'click', this.scroll.bindAsEventListener(this, 1));
		}else{
			$(obj.up).hide();
			$(obj.down).hide();
		}
	},
	
	scrollPrepare: function(){
		/**/
	},

	scrollComplete: function(){
		this.scrolling = false;
	},
	
	scroll: function(event, dir){
		if (this.scrolling != true){		
			this.scrolling = true;
			var dist = 0;
			
			if (dir < 0){
				if ($(this.content).positionedOffset().top < 0){
					dist = Math.min( (0 - $(this.content).positionedOffset().top), this.distance);
				}
			} else {
				if ($(this.content).positionedOffset().top > (this.containerHeight - this.contentHeight)){
					dist = Math.min(($(this.content).positionedOffset().top - (this.containerHeight - this.contentHeight) ), this.distance);
				}
			}
			var yloc = -dir * dist; 
			
			if (yloc != 0){
				new Effect.Move($(this.content),{ 
					x:0, 
					y:yloc, 
					duration:1/3, 
					mode:'relative',
					transition: Effect.Transitions.sinoidal,
					beforeStart: this.scrollPrepare.bind(this), 
					afterFinish: this.scrollComplete.bind(this)
				});
      		}else{
      			this.scrollComplete();
      		}
			
			try { event.stop() } catch(e) {}
		}
	}
		
});

/* 

	EXAMPLE USEAGE 
	
	1. CSS
	
		#scroller {
			width: 960px;
			height: 100px;0
			float:left;
			display:block;
		}
		#scroller-group {
			float:left;
			width: 855px;
			overflow:hidden;
			display:block;
			height: 100px;
			position:relative;
		}
		#scroller .scroller-item {
			width: 285px;
			height: 100px;
			float: left;
			display: block;
		}
		#left-scroll,
		#right-scroll {
			width: 40px;
			height: 110px;
			display: block;
		}
		#left-scroll {
			float:left;
			margin-left: 10px;
		}
		#right-scroll {
			float:right;
			margin-right: 10px;
		}
		#left-scroll span,
		#right-scroll span {
			display:none;
		}
	
	2. HTML
	
		<!-- animated scroller -->
		<div id="scroller">
		
			<a href="#" id="left-scroll"><span>&larr;</span></a>	
			<div id="scroller-group">
				<div id="scroller-container">
			
				  <div class="scroller-item">
					<p>Some scrollable item</p>
				  </div>
				  <div class="scroller-item">
					<p>Some scrollable item</p>
				  </div>
				  <div class="scroller-item">
					<p>Some scrollable item</p>
				  </div>
			
				</div> <!-- /container -->
			</div>
			<a href="#" id="right-scroll"><span>&rarr;</span></a>
			
		</div>
		<!-- /animated scroller -->
	
	3. JS
	- can be used for vertical scrolling as well as horizontal scrolling
	- can be auto scroll or only on trigger
	- speed of scroll can be customised
	- can initialise scrolloing forward or backward
	
		<script type="text/javascript">
		document.observe('dom:loaded', function(){
		  var rTicker = new scroller({type:"h",width:285,height:100,dir:1,auto:true,interval:5,speed:2,container:'scroller-container',item:'scroller-item',left:'left-scroll',right:'right-scroll'});
		})
		</script>

*/