/**************************************************************************************************

	Simple scroll. ideawalks.co.uk 2011.

**************************************************************************************************/

/*************************************************

	Init

*************************************************/

window.addEvent('domready', function() {

	// Get all scrollers
	var scrollers = $$('div.simple-scroll');

	// Initialize scrollers
	if (scrollers[0]) {

		scrollers.each(function(containerElement, i) {
			new SimpleScroll({scrollContainer:containerElement});
		});

	}

});


var SimpleScroll = new Class({

	Implements: [Options, Events],

	options: {
		scrollContainer: '',
		scrollBox: '',
		scrollBoxElementWidth: 135,
		scrollSpeed: 250, 
		fadeSpeed: 150, 
		currentPos:0,
		itemsVisible: 6,
		itemsLength: 0, 
		extraOpacity: 0.4,
		maxOpacity: 0.15,
		minOpacity: 0.01
	},

	initialize: function(options){

		this.setOptions(options);
		options = this.options;


		// Current container, box inside it and all items inside the box.
		var scrollContainer = options.scrollContainer;
		var scrollBox = scrollContainer.getElement('.simple-scroll-content');
		var scrollItems = scrollBox.getElements('a');
		options.itemsLength = scrollItems.length;
		var that = this;


		// Get all links from within the box
		scrollItems.each(function(scrollItemElement, scrollItemCounter) {

			// Add hover effects to every link
			scrollItemElement.addEvents({
				'mouseenter':function() {},
				'mouseleave':function() {}
			});

		});


		// Create left arrow link
		var leftArrow = new Element('a', {

			'events': {

				'click':function(e) {

					e.stop();

					if (options.currentPos >= 0) {
						that.switchElement(this, 0);
						return;
					}
		
					options.currentPos++;
					that.switchElement(rightArrow, 1);

					scrollBox.set('tween', {duration: options.scrollSpeed});
					scrollBox.tween('left', options.currentPos * options.scrollBoxElementWidth);

					if (options.currentPos == 0) {
						that.switchElement(this, 0);
					} else {
						that.switchElement(this, 1);
					}

				},

				'mouseleave':function() {
					that.setElementOpacityEffect(this, 'off');
				},

				'mouseenter':function() {

					if (options.currentPos < 0) {
						that.setElementOpacityEffect(this, 'on');
					}

				}
			},

			'class' : 'simple-scroll-arrow-left', 
			'styles': {'opacity': options.maxOpacity}
		});


		// Create right arrow link
		var rightArrow = new Element('a', {

			'events': {

				'click':function(e) {

					e.stop();

					if (options.itemsVisible + (-options.currentPos) > options.itemsLength) {
						that.switchElement(this, 0);
						return;
					}

					options.currentPos--;
					that.switchElement(leftArrow, 1);

					scrollBox.set('tween', {duration: options.scrollSpeed});
					scrollBox.tween('left', options.currentPos * options.scrollBoxElementWidth);

					if (options.itemsVisible + (-options.currentPos) == options.itemsLength) {
						that.switchElement(this, 0);
					} else {
						that.switchElement(this, 1);
					}

				}, 

				'mouseleave':function() {
					that.setElementOpacityEffect(this, 'off');
				},

				'mouseenter':function() {
					if (options.itemsVisible + (-options.currentPos) < options.itemsLength) {
						that.setElementOpacityEffect(this, 'on');
					}
				}

			},
			'class' : 'simple-scroll-arrow-right', 
			'styles': {'opacity': options.maxOpacity}
		});

			
		// Inject both arrow links
		leftArrow.injectTop(scrollContainer);
		rightArrow.injectTop(scrollContainer);


		// Set initial arrows visibility
		if (options.currentPos == 0) {
			that.switchElement(leftArrow, 0);
		}

		if (options.itemsVisible >= options.itemsLength || (options.itemsVisible + (-options.currentPos) == options.itemsLength)) {
			that.switchElement(rightArrow, 0);
		}

	}, 

	switchElement: function(el, dir) {

		if (dir) {

			if (el.getStyle('display') != 'block') {
				el.setStyle('display', 'block');
			}

		} else {

			if (el.getStyle('display') != 'none') {
				el.setStyle('display', 'none');
			}

		}

	}, 

	setElementOpacity: function(el, dir) {

		var opacity = dir == 'on' ? this.options.maxOpacity : this.options.minOpacity;
		el.setStyle('opacity', opacity);

	}, 

	setElementOpacityEffect: function(el, dir) {

		if (dir == 'on') {
			el.set('tween', {duration: this.options.fadeSpeed});
			el.tween('opacity', this.options.extraOpacity);


		} else {
			el.set('tween', {duration: this.options.fadeSpeed});
			el.tween('opacity', this.options.maxOpacity);
		}


	}

});