window.addEvent('domready', function() {
	var strScroll = new StoriesScroll();
	document.store('strScroll', strScroll);
});
window.addEvent('load', function() {
	document.retrieve('strScroll').scrollToCurrentStory();
});
var StoriesScroll = new Class({
	Implements: [Events, Options],

	options: {
	},

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

		this.content			= $('stories_content');
		this.wrap				= $('stories_wrapper');
		this.scrl_up			= $('scroll_up');
		this.scrl_up_bg			= this.scrl_up.getFirst('#scroll_up_bg');
		this.scrl_down			= $('scroll_down');
		this.scrl_down_bg		= this.scrl_down.getFirst('#scroll_down_bg');

		this.scrollNextElement	= $('thumb_story_' + story_id);

		this.scrollDirection	= 0;
		this.inScrolling		= false;
		this.lowerLimit			= 0;
		this.upperLimit			= 0;

		if ($defined(this.content) && $defined(this.wrap) && $defined(this.scrl_up) && $defined(this.scrl_up_bg) && $defined(this.scrl_down) && $defined(this.scrl_down_bg)) {
			this.wrap.setStyle('top', this.scrl_up.getCoordinates().bottom + 'px');
			this.scrl_down.setStyle('top', (this.wrap.getCoordinates().bottom + this.wrap.getStyle('margin-bottom').toInt()) + 'px');//(this.wrap.getStyle('top').toInt() + this.wrap.getStyle('height').toInt() + this.wrap.getStyle('margin-top').toInt() + this.wrap.getStyle('margin-bottom').toInt()) + 'px');

			/*this.fxscroll = new Fx.Scroll(this.wrap, {
				transition:	Fx.Transitions.linear,

				onComplete:	function() {
					//this.wrap.addEvent('mousewheel', this.boundedDoWheel);

					if (this.scrollDirection == -1) {
						this.scrollToPrevious();
					} else if (this.scrollDirection == 1) {
						this.scrollToNext();
					}

					this.inScrolling = false;
				}.bind(this),

				onStart: function() {
					//this.wrap.removeEvent('mousewheel', this.boundedDoWheel);
					this.inScrolling = true;
				}.bind(this)
			});*/

			this.fxmorph = new Fx.Morph(this.content, {
				transition:	Fx.Transitions.linear,

				onComplete:	function() {
					if (this.scrollDirection == -1) {
						this.scrollToPrevious();
					} else if (this.scrollDirection == 1) {
						this.scrollToNext();
					}

					this.inScrolling = false;
				}.bind(this),

				onStart: function() {
					this.inScrolling = true;
				}.bind(this)
			});

			this.scrl_up_bg.set('morph', {
				duration:	200,
				link:		'chain',
				transition:	Fx.Transitions.Quad.easeOut,
				onComplete:	function(el) {
					el.setStyle('visibility', 'visible');
				}.pass(this.scrl_up_bg)
			});

			this.scrl_up_bg.setOpacity(0);

			this.scrl_down_bg.set('morph', {
				duration:	200,
				link:		'chain',
				transition:	Fx.Transitions.Quad.easeOut,
				onComplete:	function(el) {
					el.setStyle('visibility', 'visible');
				}.pass(this.scrl_down_bg)
			});

			this.scrl_down_bg.setOpacity(0);

			//this.fxscroll.set(this.scrollNextElement.getPosition(this.wrap).x, this.scrollNextElement.getPosition(this.wrap).y);

			this.scrl_up.addEvent('mousedown',		this.onButtonMouseDown.bind(this));
			this.scrl_up.addEvent('mouseup',		this.onButtonMouseUp.bind(this));
			this.scrl_up.addEvent('mouseenter',		this.onButtonMouseEnter.bind(this));
			this.scrl_up.addEvent('mouseleave',		this.onButtonMouseLeave.bind(this));

			this.scrl_down.addEvent('mousedown',	this.onButtonMouseDown.bind(this));
			this.scrl_down.addEvent('mouseup',		this.onButtonMouseUp.bind(this));
			this.scrl_down.addEvent('mouseenter',	this.onButtonMouseEnter.bind(this));
			this.scrl_down.addEvent('mouseleave',	this.onButtonMouseLeave.bind(this));

			this.boundedDoWheel = this.doWheel.bind(this);

			this.wrap.addEvent('mousewheel', this.boundedDoWheel);
		}
	},

	scrollToCurrentStory: function() {
		this.lowerLimit = this.wrap.getSize().y - this.content.getSize().y;
		this.upperLimit = 0;

		this.content.setStyle('top', (this.wrap.getCoordinates().bottom - this.scrollNextElement.getCoordinates().bottom + this.content.getPosition(this.wrap).y).limit(this.lowerLimit, this.upperLimit));
	},

	scrollToPrevious: function() {
		if ($defined(this.getPreviousInvisible())) {
			this.scrollNextElement = this.getPreviousInvisible();
			//this.fxscroll.start(this.scrollNextElement.getPosition(this.wrap).x, this.scrollNextElement.getPosition(this.wrap).y);
			this.fxmorph.start({'top': (this.wrap.getPosition().y - this.scrollNextElement.getPosition().y + this.content.getPosition(this.wrap).y).limit(this.lowerLimit, this.upperLimit)});
		}
	},

	scrollToNext: function() {
		if ($defined(this.getNextInvisible())) {
			this.scrollNextElement = this.getNextInvisible();
			//this.fxscroll.start(this.scrollNextElement.getPosition(this.wrap).x, this.scrollNextElement.getPosition(this.wrap).y + this.scrollNextElement.getSize().y - this.wrap.getSize().y);
			this.fxmorph.start({'top': (this.wrap.getCoordinates().bottom - this.scrollNextElement.getCoordinates().bottom + this.content.getPosition(this.wrap).y).limit(this.lowerLimit, this.upperLimit)});
		}
	},

	getPreviousInvisible: function() {
		var res		= null;
		var thumbs	= this.content.getFirst().getChildren();
		var i		= thumbs.length - 1;

		while ((i >= 0) && (res == null)) {
			if (thumbs[i].getPosition(this.wrap).y < this.wrap.getScroll().y) {
				res = thumbs[i];
			}
			--i;
		}

		return res;
	},

	getNextInvisible: function() {
		var res		= null;
		var thumbs	= this.content.getFirst().getChildren();
		var l		= thumbs.length;
		var i		= 0;

		while ((i < l) && (res == null)) {
			if ((thumbs[i].getPosition(this.wrap).y + thumbs[i].getSize().y - this.wrap.getScroll().y) > (this.wrap.getSize().y)) {
				res = thumbs[i];
			}
			++i;
		}

		return res;
	},

	onButtonMouseDown: function(evt) {
		evt.target.morph({
			opacity:	0.3
		});

		if (evt.target.getParent() == this.scrl_up) {
			this.scrollDirection = -1;
			this.scrollToPrevious();
		} else 	if (evt.target.getParent() == this.scrl_down) {
			this.scrollDirection = 1;
			this.scrollToNext();
		}
	},

	onButtonMouseUp: function(evt) {
		evt.target.morph({
			opacity:	0.1
		});

		this.scrollDirection = 0;
	},

	onButtonMouseEnter: function(evt) {
		var bg = evt.target;
		bg.get('morph').clearChain();
		bg.morph({
			opacity:	0.1
		});
	},

	onButtonMouseLeave: function(evt) {
		var bg = evt.target;
		bg.get('morph').clearChain();
		bg.morph({
			opacity:	0
		});
	},

	doWheel: function(evt) {
		evt.stop();

		if (!this.inScrolling) {
			if (evt.wheel >= 0) {
				this.scrollToPrevious();
			} else {
				this.scrollToNext();
			}
		}
	}
});

//console.log('StoriesScroll.js loaded');