var portfolio_slider = Class.create({

	initialize: function(obj) {		
		// 
		var projects = $$('#recent .item');
		this.itemWidth = obj.width;
		this.item_hoffset = -1*this.itemWidth;
		this.totalWidth = projects.length * this.itemWidth;
		this.totalHeight = obj.height;
		this.scrolling = false;
		this.interval = obj.interval;
		
		//
		Event.observe($('leftClick'), 'click', this.scroll.bindAsEventListener(this, -1));
		Event.observe($('rightClick'), 'click', this.scroll.bindAsEventListener(this, 1));
		
		$('items').setStyle({width:this.totalWidth+"px",height:this.totalHeight+"px",display:"block"});
		
		setInterval(this.scroll.bind(this), this.interval*1000); 
	},
	
	scrollPrepare: function(){
		if (this.dir < 0){
			var items = $$('.item');
			items[0].insert({before:items[items.length-1]});
			$('items').setStyle({left:this.item_hoffset+'px'});
		}
	},

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

document.observe('dom:loaded', function(){
	var rSlider = new portfolio_slider( {width:675, height: 200, interval: 7} );
});