var Site = {
	 
	// initialisation function
	start : function(){
		Site.behaviour();
	},
	// apply behaviours to elements via CSS selectors	
	behaviour : function() {
		$$('#tabcontent').each(function(el,i){
			new ContentSlider(el);
		});
		

	}
		
};
 
document.observe('dom:loaded', Site.start);


var ContentSlider = Class.create({
	initialize: function(element) {
		this.element = $(element); // tab_content
        this.options = Object.extend({
        	transition: Effect.Transitions.sinoidal,
        	duration: 1,
        	defaultOpenBox: 0,
        	timerInterval: 6
        }, arguments[1] || {});
        this.setup();
	},
	
	setup: function()
	{
		this.element.setStyle({ 
			'overflow' : 'hidden'
		});

		this.boxes = $$('#' + this.element.id + ' > div > div');
		this.numBoxes = this.boxes.length;

		this.contentWidth = this.element.getWidth();

		this.sliderBox = $$('#' + this.element.id + ' > div').first();
		this.sliderBox.setStyle({'width':((this.contentWidth+200)*this.numBoxes)+120+'px'});		

		this.boxes.each(function(el, i)	{
			el.setStyle({'width':this.contentWidth+'px','margin':'0 200px 0 0','float':'left'});
		}.bind(this));
		
		$$('#tabmenu > ul > li').each(function(el, i){
			el.setStyle({'cursor':'pointer'});
			if (i == this.options.defaultOpenBox) {
				el.addClassName('on');
			}
			el.observe('click', this.slideComponent.bindAsEventListener(this));
		}.bind(this));
	},
	
	slideComponent : function(e)
	{
		$$('#tabmenu > ul > li').each(function(el, i)
		{
			if(Event.element(e) == el)
			{
				var scrollPos = i * this.contentWidth + (i*200);
				new Effect.Move('sliderBox', { x: -1 * scrollPos, mode: 'absolute' });
				el.addClassName('on');
				this.nextBox = i + 1;
				this.nextBox = this.nextBox > (this.boxes.length -1) ? 0 : this.nextBox;
			} else {
				el.removeClassName('on');
			}
		}.bind(this));
	}
	
});