var scrollControl = new Class({
	Implements: [Options, Events],
	options: {
		picWidth : 100,
		prevEl : $(),
		nextEl : $(),
		wrapperEl : $(),
		containerEl : $(),
		thumbEl : 'a',
		scrollCSS : 'width',	// specify whether we want to use vertical (height) or horizontal (width) scrolling
		scrollerObj : $empty,
		offsetCompensate : 10
	},
	thumbs: [],
	index : 0,
	offsetIndex : [],	
		
	initialize: function(options)
	{
		this.setOptions(options);
		
		this.addThumbs(this.options.containerEl);
	
		this.initStyles();
	
		this.addControls();
	
	},
	
	initStyles : function()
	{
		this.options.wrapperEl.setStyles({'overflow':'hidden'});
	},
	initIndex : function()
	{
		var maxIndex = (this.options.containerEl.getStyle('width').toInt() / this.options.wrapperEl.getStyle('width').toInt()).ceil();
		for (i=0; i < maxIndex; i++)
		{
			this.offsetIndex[i] = (i * (this.options.wrapperEl.getStyle('width').toInt())) + (i * this.options.offsetCompensate);
		}
	},
	
	addThumbs : function(thumbList)
	{
		thumbList.getElements(this.options.thumbEl).each(function(thumb){
			this.thumbs.include($(thumb));
		}, this);
		
		this.setContainerSize();
		this.initIndex();
		this.assignThumbBehaviour();
	},
	setContainerSize : function()
	{
		var containerWidth = this.thumbs.length * this.options.picWidth;
		this.options.containerEl.setStyles({ 'width': containerWidth });
	},
	addControls:function()
	{
	
		this.options.scrollerObj.toLeft();
	
		$(this.options.prevEl).addEvent('click', function(){
				if(this.index > 0)
				{
					this.options.scrollerObj.start(this.offsetIndex[--this.index])
				}
			}.bind(this));
		$(this.options.nextEl).addEvent('click', function(){
				if(this.index < this.offsetIndex.length)
				{
					this.options.scrollerObj.start(this.offsetIndex[++this.index])
				}
			}.bind(this));
	},
	assignThumbBehaviour:function()
	{
		this.thumbs.each(function(element){
			element.addEvent('click', function(e){
				var e = new Event(e).stop();
				
				var imgMorph = new Fx.Morph($('img').getElement('img'));
				imgMorph.start({'opacity' : 0 });
				
				// load image
				var newImg = new Asset.image(element.href, {
						onload: function()
						{
							imgMorph.start({'opacity' : 0 });
							imgMorph.chain(function(){
									$('img').getElement('img').src = newImg.src;
									imgMorph.start({'opacity' : 1});
								});
						}
					});
			});
		});
	},
	injectImg : function()
	{
		alert('ok');
	}
	
});