window.addEvent('domready',function() {
	slider = new contentSlider({});
});

var contentSlider = new Class({
	////////////////////////////////////////
	// Variables and options
	////////////////////////////////////////
	Implements: [Options,Events],
	options: {
		mainContainer: 'slideshow', // main container for the slideshow, holds the window and controls 
		slidesContainer: 'slidesContainer', // container that holds the slides and become the "window" for the 'sliderBlock'
		startIndex: '0',
		transition: 'sine',
		width: 940,
		height: 426,
		backLink: true
	},
	slideCon: '',
	sliderBlock: new Element('div',{'id':'sliderBlock'}),
	leftControl: new Element('span',{'id':'leftControl','class':'control'}),
	rightControl: new Element('span',{'id':'rightControl','class':'control'}),
	contentsControl: new Element('span',{'id':'contentsControl','class':'control'}),
	currentSlide: -1,
	numberOfSlides: $$('div.slide').length,
	scroll: '', // variable for the single Fx object


	initialize: function(options) {
		var that = this;
		
		this.setOptions(options);
		////////////////////////////////////////
		// Slide Con
		////////////////////////////////////////
		this.slideCon = $(this.options.slidesContainer);

		var slides = this.slideCon.getChildren('div.slide');
		slides.setStyle('float','left');


		this.slideCon.setStyle('overflow','hidden');
		this.slideCon.setStyle('position','relative');

		////////////////////////////////////////
		// Slider Block
		////////////////////////////////////////

		this.sliderBlock.setStyles({
			width: this.numberOfSlides*this.options.width,
			height: this.options.height,
			position: 'absolute',
			top: 0,
			left: 0
		})


		this.sliderBlock.adopt(slides);
		this.sliderBlock.inject(this.slideCon,'top');
		
		this.leftControl.inject($(this.options.mainContainer),'top');
		this.rightControl.inject($(this.options.mainContainer),'bottom');
		if ( this.options.backLink ) {
			this.contentsControl.inject($(this.options.mainContainer),'bottom');
		}

		////////////////////////////////////////
		// Table of Contents
		////////////////////////////////////////
		var thumbs = slides[0].getChildren('ul').getChildren('li')[0];
		//alert( thumbs );
		if ( $type( thumbs ) == "array" ) {
			thumbs.each(function(item, loc) {
				//alert(item + " " + loc);
				item.setProperty('id','slide-'+(loc+1));
				item.addEvent('click',function() {
					that.gotoSlide( thumbs.indexOf(this) + 1 );
				});
			});
		}
		
		


		////////////////////////////////////////
		// Events and Effects
		////////////////////////////////////////
		
		
		// Used in diff
		var startPos = 0;

		this.scroll = new Fx.Scroll(this.slideCon,{
			transition: this.options.transition+':out',
			duration: '1000',
			onComplete: function () {
				that.currentSlide = that.slideCon.getScroll().x / that.options.width;
			},
			link: 'cancel'
		});
				
		new Drag(this.slideCon,{
			snap: 5,
			modifiers: {x: 'scrollLeft', y: 'scrollTop'},
			style: false,
			invert: true,
			onBeforeStart: function(el) {
				startPos = el.getScroll().x;
				that.scroll.cancel();
			},
			onComplete: function( el ) {				
				var currentPos = el.getScroll().x;
				var diff = currentPos % that.options.width;


				var direction = 100;
				if ( startPos < currentPos ) {
					direction = 100;
				} else {
					direction = that.options.width-100;
				}

				if ( diff ) {
					if ( diff < direction ) {
						
						that.gotoSlide((currentPos-diff)/that.options.width);
					} else {
						that.gotoSlide((currentPos+(that.options.width-diff))/that.options.width);
					}
				} else {
					that.currentSlide = that.slideCon.getScroll().x / that.options.width;
				}
			}
		});

		
		
		this.rightControl.addEvent('click',function() {
			that.gotoSlide(parseInt(that.currentSlide)+1);
		});
		this.leftControl.addEvent('click',function() {
			that.gotoSlide(parseInt(that.currentSlide)-1);
		});
		this.contentsControl.addEvent('click',function() {
			that.gotoSlide(0);
		});
		if ( this.currentSlide != this.options.startIndex ) {
			this.gotoSlide( this.options.startIndex );
		}
		
	},
	gotoSlide: function ( slideNum ) {
		if ( slideNum == 0 ) {
			if ( this.options.backLink ) {
				this.contentsControl.setStyle('display','none');
			}
			this.leftControl.setStyle('display', 'none');
		}
		if ( slideNum+1 == this.numberOfSlides ) {
			this.rightControl.setStyle('display','none');
		}
		if ( slideNum != 0 && this.currentSlide == 0) {
			if ( this.options.backLink ) {
				this.contentsControl.setStyle('display','block');
			}
			this.leftControl.setStyle('display','block');
		}
		if ( slideNum+1 != this.numberOfSlides && this.currentSlide+1 == this.numberOfSlides ) {
			this.rightControl.setStyle('display','block');
		}

		this.currentSlide = slideNum;

		//alert( this.scroll );
		var distance = this.currentSlide * this.options.width;
		this.scroll.start(distance,0);
	}


});