/*
	SliderMoo v1.0 - Image slider
	(c) 2011 Dmitry Nikonov <http://www.smelo.ru>
	MIT-style license.
*/

var SliderMoo = new Class({

	Implements: [Options],
	options: {
		outer: null,
		item: null,
		itemWidth: 200,
		itemHeight: 100,
		itemBigWidth: 600,
		itemBigHeight: 300,
		transition: Fx.Transitions.Linear,
		duration: 800,
		currentElement: 1,
		direction: 1,
		start: 1
	},

	initialize: function(options){
		this.setOptions(options);

		this.elements = $(this.options.outer).getElements(this.options.item);
		this.totalElements = this.elements.length;
		if (this.totalElements < 3 ) return;

		var il = ($(this.options.outer).getSize().x/2-(this.options.itemWidth+64)/2).toInt()+'px';
		$each(this.elements, function(elem){
			elem.setStyles({'left': il, 'opacity': 0});
			})

		this.span = $(this.options.outer).getElements('span.block');
		this.images = $(this.options.outer).getElements('img');
		this.src = [];
		for (var i = 0; i < this.images.length; i++)
		{
			var src = this.images[i].get('src');
			this.src[i] = [];
			this.src[i][0] = src;
			this.src[i][1] = src.substring(0, src.length-5)+src.substring(src.length-4, src.length);
		}

		this.l = new Element('div', {'class': 'SliderMoo_left'}).inject($(this.options.outer));
		this.r = new Element('div', {'class': 'SliderMoo_right'}).inject($(this.options.outer));

		this.currentElement = this.options.currentElement-1;

		window.addEvent('resize', this.rePosition.bind(this));

		this.begin();
	},

	rePosition: function(){
		var il = ($(this.options.outer).getSize().x/2-(this.options.itemWidth+64)/2).toInt()+'px';
		$each(this.elements, function(elem){
			elem.setStyle('left', il);
			})
		this.elements[this.currentElement].setStyle('left', ($(this.options.outer).getSize().x/2-(this.options.itemBigWidth+30)/2).toInt()+'px');
		this.elements[this.leftElement].setStyle('left', this.l.getSize().x-32);
		this.elements[this.rightElement].setStyle('left', $(this.options.outer).getSize().x-this.options.itemWidth-32-this.l.getSize().x+'px');
	},

	begin: function(){
		this.elements.removeEvents();
		this.images.removeEvents();

		if (this.options.start == 0)
		{
			this.options.direction == 1 ? this.elements[this.rightElement].setStyle('visibility', 'hidden') : this.elements[this.leftElement].setStyle('visibility', 'hidden');
		}

		this.leftElement = this.currentElement >= this.totalElements-1 ? 0 : this.currentElement + 1;
		this.rightElement = this.currentElement == 0 ? this.totalElements-1 : this.currentElement - 1;

		this.elements[this.rightElement].setStyle('visibility', 'visible');
		this.elements[this.leftElement].setStyle('visibility', 'visible');

		if (this.options.start == 0)
		{
			this.myFxRight = new Fx.Morph(this.elements[this.rightElement], {
				transition: this.options.transition,
				duration:this.options.duration
			}).start({
				'left': $(this.options.outer).getSize().x-this.options.itemWidth-32-this.l.getSize().x,
				'opacity': 1
			});
			this.myFxLeft = new Fx.Morph(this.elements[this.leftElement], {
				transition: this.options.transition,
				duration:this.options.duration
			}).start({
				'left': this.l.getSize().x-32,
				'opacity': 1
			});
		}

		this.setCenterElement();
		this.setLeftElement();
		this.setRightElement();
	},

	setCenterElement: function(){
		this.elements[this.currentElement].addClass('SliderMoo_currentElement').setStyles({
			'left': this.options.direction == 1 && this.options.start == 0 ? -this.options.itemBigWidth-30+'px' : $(this.options.outer).getSize().x+this.options.itemBigWidth+30+'px',
			'top': '0px',
			'z-index': '10',
			'opacity': 1
		});
		this.images[this.currentElement].set('width', this.options.itemBigWidth).set('height', this.options.itemBigHeight).set('src', this.src[this.currentElement][1]);
		this.span[this.currentElement].setStyle('display', 'block');

		this.myFxCenter = new Fx.Morph(this.elements[this.currentElement], {
			transition: this.options.transition,
			duration: this.options.duration
		}).start({
			'left': ($(this.options.outer).getSize().x/2-(this.options.itemBigWidth+30)/2).toInt()
		});
	},

	setLeftElement: function(){
		this.elements[this.leftElement].addEvent('click', function(){return false;});
		this.images[this.leftElement].addEvent('click', this.slide.bind(this).pass(1));

		if (this.options.start == 1)
		{
			this.elements[this.leftElement].setStyles({
				'left': -this.options.itemWidth-64+'px',
				'top': '40px',
				'z-index': '-1',
				'visibility': 'visible',
				'opacity': 1
			});
		}
		if (this.options.start == 1 || this.options.direction == -1)
		{
			this.myFxLeft = new Fx.Morph(this.elements[this.leftElement], {
				transition: this.options.transition,
				duration: this.options.duration
			}).start({
				'left': this.l.getSize().x-32
			});
		}
	},

	setRightElement: function(){
		this.elements[this.rightElement].addEvent('click', function(){return false;});
		this.images[this.rightElement].addEvent('click', this.slide.bind(this).pass(-1));

		if (this.options.start == 1)
		{
			this.elements[this.rightElement].setStyles({
				'left': -this.options.itemWidth-64+'px',
				'top': '40px',
				'z-index': '-1',
				'visibility': 'visible',
				'opacity': 1
			});
		}
		if (this.options.start == 1 || this.options.direction == 1)
		{
			this.myFxRight = new Fx.Morph(this.elements[this.rightElement], {
				transition: this.options.transition,
				duration:this.options.duration
			}).start({
				'left': $(this.options.outer).getSize().x-this.options.itemWidth-32-this.l.getSize().x
			});
		}
	},

	slide: function(direction){
		if (this.started) return;

		this.options.start = 0;
		this.options.direction = direction;
		this.started = true;

		this.myFxLeft = new Fx.Morph(this.elements[this.leftElement], {
			transition: this.options.transition,
			duration: this.options.direction == 1 ? (this.options.duration/2).toInt() : this.options.duration
		});
		if (this.options.direction == 1)
		{
			this.myFxLeft.start({
				'left': -this.options.itemWidth-64
			});
		}
		else
		{
			this.myFxLeft.start({
				'left': ($(this.options.outer).getSize().x/2-this.options.itemWidth/2-32).toInt(),
				'opacity': 0
			});
		}

		this.myFxRight = new Fx.Morph(this.elements[this.rightElement], {
			transition: this.options.transition,
			duration: this.options.direction == 1 ? this.options.duration : (this.options.duration/2).toInt()
		});
		if (this.options.direction == 1)
		{
			this.myFxRight.start({
				'left': ($(this.options.outer).getSize().x/2-this.options.itemWidth/2-32).toInt(),
				'opacity': 0
			});
		}
		else
		{
			this.myFxRight.start({
				'left': $(this.options.outer).getSize().x
			});
		}

		this.myFxCenter.start({
			'left': this.options.direction == 1 ? $(this.options.outer).getSize().x : -this.options.itemBigWidth-30
		}).chain(this.rearange.bind(this).pass(true));
	},

	rearange: function(rerun){
		if (rerun) this.started = false;

		this.elements[this.currentElement].removeClass('SliderMoo_currentElement').setStyles({
			'left': this.options.direction == 1 ? $(this.options.outer).getSize().x+this.options.itemWidth+64+'px' : -this.options.itemWidth-64+'px',
			'top': '40px',
			'z-index': '-1',
			'visibility': 'visible',
			'opacity': 1
		});
		this.images[this.currentElement].set('width', this.options.itemWidth).set('height', this.options.itemHeight).set('src', this.src[this.currentElement][0]);
		this.span[this.currentElement].setStyle('display', 'none');

		this.currentElement = this.currentIndex();
		this.begin();
	},

	currentIndex: function(){
		var elemIndex = null;
		switch( this.options.direction ){
			case 1:
				elemIndex = this.currentElement >= this.totalElements-1 ? 0 : this.currentElement + this.options.direction;
			break;
			case -1:
				elemIndex = this.currentElement == 0 ? this.totalElements - 1 : this.currentElement + this.options.direction;
			break;
		}
		return elemIndex;
	}
});