var scroller;

function thumbScroller(container){
	this.container = container;
	this.sThumbs = container.getElement('ul');
	this.fThumbs = container.getElements('ul')[1];
	this.prev = container.getElementById('prevSet');
	this.next = container.getElementById('nextSet');
	this.create();
}

thumbScroller.prototype.create = function(){
	var container = this.sThumbs;
	var sThumbs = this.sThumbs.getElements('li');
	var fThumbs = this.fThumbs.getElements('li');
	var prev = this.prev;
	var next = this.next;
	var elHeight = 60;
	var elToScroll = 7;
	var currentElement = 0;
	var totalElement = sThumbs.length;
	var timesDivisible = Math.floor(sThumbs.length/elToScroll);
	
	var scrollHeight = 60;
	var currentHeight = 0;
	var numElScroll = 5;
	
	var scrollThumbs = new Fx.Scroll(container, {duration: 1000, transition: Fx.Transitions.quadOut});
	//scrollThumbs.toTop();	
	
	prev.onclick = function(){
		currentElement -= elToScroll;
		if(currentElement < 0){
			currentElement = 0;
		}
		scrollThumbs.scrollTo(0,(currentElement*elHeight));
		return false;
	}

	next.onclick = function(){
		currentElement += elToScroll;
		if(currentElement >= (elToScroll * timesDivisible)){
			currentElement = (totalElement - elToScroll);
			//alert(currentElement);
		}
		scrollThumbs.scrollTo(0,(currentElement*elHeight));
		return false;
	}
	
	sThumbs.each(function(el, i){
		var fx = new Fx.Styles(fThumbs[i].getElement('img'), {duration: 500, wait:false, transition: Fx.Transitions.quintOut});
		el.onmouseover = function(){
			fThumbs[i].style.visibility = 'visible';
			fThumbs[i].style.top = (el.offsetTop - (currentElement*elHeight))+'px';
			fx.start({'width': [0,94], 'opacity': [0,10]});
		}
		el.onmouseout = function(){
			fx.stop();
			fx.start({'width': [94,0], 'opacity': [10,0]});
		}
	});
	
	this.showLook = function(selected){
		section = Math.ceil(selected / elToScroll);
		currentElement = (elToScroll * (section-1));
		scrollThumbs.scrollTo(0,(section-1) * elHeight * elToScroll);
	};
}



window.addEvent('domready', function(){
	scroller = new thumbScroller($$('.browse')[0]);
	scroller.showLook(currentLook);
});