/**
 * Content Slider - A Useable Horizontal Scroller
 *
 *  Requires a parent element with hidden overflow and child elements floated inside the parent.
 *  Take any two elements as previous and next buttons and scolls the child elements through the parent element
 *
 * Dependencies: MooTools 1.2 (and probably 1.1.x but not tested)
 *
 * adapted from Antonio Lupetti's original blog post at
 *    http://woork.blogspot.com/2009/01/elegant-animated-weekly-timeline-for.html
 *
 * @version		0.9
 *
 * @license		MIT-style license
 * @author		Bryce McDonnell bryce {at} bridgetownint {dot} com   www.brycemcdonnell.com
 * @copyright	Bryce McDonnell
 */
var ContentSlider = new Class({
    config: {
		totIncrement: 0,
		increment: 0,
		maxRightIncrement: 0,
		container: $empty,
		slidingEl: "",
		slideAtATime: 1,
		previous_btn: $empty,
		next_btn: $empty,
		duration: 1000,
		transition: Fx.Transitions.Back.easeInOut
	},
 
	initialize: function(config) {
 
		this.config = $merge(this.config, config);
 
		this.config.maxRightIncrement = this.config.increment * -( ( $$(this.config.slidingEl).length / this.config.slideAtATime) - 1 );
		if (this.config.previous_btn && this.config.next_btn) {
			this.activateMoveBtns();
		};
 
		return this.config
	},
 
	move: function() {
		this.config.fx = new Fx.Tween(this.config.container, {
		property: 'margin-left',
		duration: this.config.duration,
		transition: this.config.transition,
 
		onStart: function() {
			this.config.previous_btn.removeEvents('click');
			this.config.next_btn.removeEvents('click');
		}.bind(this),
 
		onComplete: function() {
			this.activateMoveBtns();
		}.bind(this)
 
		});
	},
 
	activateMoveBtns: function() {
		//Next Button
		this.config.next_btn.addEvents({
			'click' : function(event){
				this.config.totIncrement = (this.config.totIncrement>this.config.maxRightIncrement) ? this.config.totIncrement - this.config.increment : 0;
				event.stop();
				this.move();
				this.config.fx.start(this.config.totIncrement);
	 		}.bind(this)
 
		 });
 
		//Previous Button
		this.config.previous_btn.addEvents({
			'click' : function(event){
				this.move();
				event.stop();
				this.config.totIncrement = (this.config.totIncrement < 0) ? this.config.totIncrement + this.config.increment : this.config.maxRightIncrement;
				this.config.fx.start(this.config.totIncrement);
			}.bind(this)
 
		});
	}
});
ContentSlider.extend(new Fx.Tween);

<script src="/lib/js/homeslider.js" type="text/javascript"><!--mce:0--></script>
<div id="worksamples" class="slide-box">
	<a id="slide-left" class="slider-arrows"> previous </a>
	<a id="slide-right" class="slider-arrows">next</a>
<div id="workimgs">
<ul id="slider-list">
	<li><img class="aligncenter size-full wp-image-168" title="BME logo small" src="http://blog.thedevranch.net/wp-content/uploads/2009/05/BME-logo-small.jpg" alt="BME logo small" width="300" height="405" /></li>
	<li><img src="/lib/img/slide/img.jpg" alt="meth" width="292" height="184" /></li>
	<li><img src="/lib/img/slide/img.jpg" alt="nuskin" width="292" height="184" /></li>
	<li><img src="/lib/img/slide/img.jpg" alt="choice" width="292" height="184" /></li>
	<li><img src="/lib/img/slide/img.jpg" alt="meth" width="292" height="184" /></li>
	<li><img src="/lib/img/slide/img.jpg" alt="nuskin" width="292" height="184" /></li>
	<li><img src="/lib/img/slide/img.jpg" alt="choice" width="292" height="184" /></li>
</ul>
</div>
</div>

new ContentSlider({
		increment: 904,
		container: $("slider-list"),
		slidingEl: "#slider-list li",
		slideAtATime: 3,
		next_btn: $("slide-right"),
		previous_btn: $("slide-left")
	});

  /***  SLIDER   ***/
#worksamples {
	width:960px;
	height:180px;
}
#workimgs{
	width:900px;
	overflow:auto;
	overflow:hidden;
	height:200px;
	margin:0 auto;
}
#slider-list{
	width:20000px;
	margin:0;
	padding:0;
	left:400px;
}
#slider-list li{
	list-style:none;
	margin:0;
	margin-right:5px;
	padding:2px;
	float:left;
	width:292px;
	height:200px;
}
.slider-arrows {
	display:block;
	width:18px;
	height:42px;
	text-indent:-9999px;
	overflow:hidden;
	margin-top:74px;
	cursor:pointer;
}
#slide-left {
	float:left;
	background:url(../img/left-arrow.png) no-repeat !important;
	background:url(../img/left-arrow.gif) no-repeat;
}
#slide-right {
	float:right;
	background:url(../img/right-arrow.png) no-repeat !important;
	background:url(../img/right-arrow.gif) no-repeat;
 
}

var totIncrement = 0;
var increment = 387;
var totalIncrements = $$("#sliderList li").length - 1
var maxRightIncrement = increment*(- totalIncrements);
 
var fx = new Fx.Tween('sliderList', {
   property: 'margin-left',
   duration: 1000,
   transition: Fx.Transitions.Back.easeInOut,
   onStart: function() {
      $("slide-left").removeEvents('click');
      $("slide-right").removeEvents('click');
   },
   onComplete: function() {
      appEvent();
   }
});
 
function appEvent() {
   // Previous Button
   $('slide-left').addEvents({
      'click' : function(event){
         if(totIncrement<0){
            event.stop();
            totIncrement = totIncrement + increment;
            fx.start(totIncrement);
        }
      }
   });
 
   // Next Button
   $('slide-right').addEvents({
      'click' : function(event){
         if(totIncrement>maxRightIncrement){
            event.stop();
            totIncrement = totIncrement - increment;
            fx.start(totIncrement);
        }
      }
   });
}
appEvent();