// JavaScript Document

var divSlider = new Class({
        Implements: [Options, Events],
        options: {
				baseContainer: null,
				itemsContainer: null,
				itemsSelector: null,
				itemWidth: null,
				itemsVisible: 4,
				startIndex: 0,
				toSlide: 4,
				navs:{ 
					fwd:'.goForward',
					bk:'.goBack'
				},
				transition: Fx.Transitions.linear,
				duration: 350
        },
        initialize: function(options){
                this.setOptions(options);
				this.elements = $(this.options.itemsContainer).getElements(this.options.itemsSelector);
				this.totalElements = this.elements.length;

				// width of itemsContainer children
				var defaultSize = this.elements[0].getSize();
				var lMargin = this.elements[0].getStyle('margin-left').toInt();
				var rMargin = this.elements[0].getStyle('margin-right').toInt();
				var elWidth = this.elements[0].getStyle('width').toInt();
				this.elementWidth = this.options.itemWidth || defaultSize.x + lMargin + rMargin;
				//alert(this.elementWidth);
				this.slideAmount = this.elementWidth * this.options.toSlide;
				this.totalSize = (this.elements.length + 1) * this.elementWidth;
                this.begin();
        },
        begin: function() {
				$(this.options.itemsContainer).setStyle('width', this.totalSize);
				this.myFx = new Fx.Tween(this.options.itemsContainer, { 
					property: ('margin-left'),
					wait: true, 
					transition: this.options.transition,
					duration: this.options.duration
				});	
				
				this.curOffset = $(this.options.itemsContainer).getStyle('margin-left').toInt();
				if(this.options.startIndex && this.options.startIndex > 0 && this.options.startIndex < this.elements.length){
					var startOffset = this.curOffset - (this.options.startIndex * this.elementWidth);
					this.myFx.start(startOffset);
					this.curOffset = startOffset;
				}
				this.initControls();
		},
		slide: function(direction) {
			if (direction == -1) {
				var newOffset = this.curOffset + this.slideAmount;
				if(newOffset > 0) newOffset = 0;
				this.myFx.start(newOffset);
				this.curOffset = newOffset;
				if(this.curOffset >= 0) {
					this.bkwd.setStyle('display', 'none');
				}
				if((-this.curOffset + this.slideAmount + this.elementWidth) <= this.totalSize) {
					this.fwd.setStyle('display', 'inline');
				}
			} else {
				var newOffset = this.curOffset - this.slideAmount;

				this.myFx.start(newOffset);
				this.curOffset = newOffset;

				if((-this.curOffset + this.slideAmount + this.elementWidth) >= this.totalSize) {
					this.fwd.setStyle('display', 'none');
				}
				if(this.curOffset <= 0) {
					this.bkwd.setStyle('display', 'inline');
				}
			}
		},
		initControls: function() {
				this.fwd = $(this.options.baseContainer).getElement(this.options.navs.fwd);
				this.bkwd = $(this.options.baseContainer).getElement(this.options.navs.bk);

				if( this.totalElements <= this.options.itemsVisible ) {
				 	this.fwd.setStyle('display', 'none');
					this.bkwd.setStyle('display', 'none');
					return;
				}
				if(this.fwd) {
					this.fwd.addEvent('click', this.slide.pass(1, this));
					
				}
				if(this.bkwd) {
					this.bkwd.addEvent('click', this.slide.pass(-1, this));	
					if(this.curOffset >= 0) {
						this.bkwd.setStyle('display', 'none');
					}
				}
		}
});