var sliderPos = 0;
var sliderInterval = 5000; //in ms
$j(document).ready(function(){ 
	
	var container = $j('.slider-wrapper');
	var elements = $j('.slider-wrapper .slidable');
	var pager = $j('<ul class="pager"></ul>');
	if(elements.size() > 1 && container.size() == 1){
		elements.each(function(index,el){
			var elementLink = $j('<li><a>'+ (index+1) + '</a></li>');
			$j(elementLink).bind('mouseenter',function(){
				$j(elements).each(function(indexInner,elInner){
					if(indexInner != index){
						$j(elInner).hide();			
					} else {
						$j(elInner).show();
						sliderPos = index;
					}
				});
				$j(this).addClass('active');
				$j(this).prevAll().removeClass('active');
				$j(this).nextAll().removeClass('active');
			});
			if(index == sliderPos){
				$j(elementLink).addClass('active');
			} else {
				$j(el).hide();
			}	
			$j(pager).append(elementLink);
		});
		
		$j(container).append(pager);
		var time = setInterval(slideNext,sliderInterval);
	}	
});
function slideNext(){
	var elements = $j('.slider-wrapper .pager').children();
	var maxPos = elements.size()-1;
	if(elements.size() > 1){
		if(sliderPos < maxPos){
			sliderPos++;
		} else {
			sliderPos = 0;
		}
		$j(elements).eq(sliderPos).mouseenter();
	}
}