﻿/**************************************************************

	Script		: mooScroll
	Version		: 1.1
	Usage		: window.addEvent('domready', function(){
					  var initScroller = new mooScroll({
						  container: 'mooScroll',//container from which html is grabbed (will act as window pane)
						  windowHeight: 50,//height of the window pane you see the content through (set as false to auto calculate)
						  speed: 40,//scroll speed
						  direction: 'up',//direction (only 'top' and 'bottom' allowed)
						  stopOnHover: true//scrolling stops when you hover over news item
					  });
				  });

**************************************************************/

//start mooScroll class
var mooScroll = new Class({

	//implements
	Implements: Options,

	//options
	options:{
		container: 'mooScroll',//container from which html is grabbed (will act as window pane)
		speed: 60,//scroll speed
		direction: 'up'//direction (only 'top' and 'bottom' allowed)
	},
	
	initialize: function(options){
		//set options
		this.setOptions(options);
		
		//declare global variables
		this.tempHTML;
		this.contHgt = 0;
		this.myWrappers = [];
		this.myHider;
		this.myTimer;
		this.myWrapper;
		
		//start class
		if($(this.options.container)){this.start()};
	},
	
	start: function(){
		//grab and store height of the container
		this.contHgt = $(this.options.container).setStyle('overflow','hidden').getHeight();
		
		//grab the html fromthe container and store it
		this.tempHTML = $(this.options.container).get('html');
		$(this.options.container).set('html','');
		
		//create and inject new div that will hide the overflow
		this.myHider = new Element('div', {'class': 'hider'}).inject($(this.options.container),'inside').setStyles({
			height: this.options.windowHeight || this.contHgt,
			overflow: 'hidden',
			position: 'relative'
		});
		
		//see if stopOnHover option is true
		if($chk(this.options.stopOnHover)){
			//add event listener
			this.myHider.addEvents({
				'mouseover': function(){
					this.myHider.setStyle('cursor','pointer');
					$clear(this.myTimer);
				}.bind(this),
				'mouseout': function(){
					this.createTimer();
				}.bind(this)
			},this);
		};
		
		//create a new div to hold the original html and inject it inside the hider
		this.myWrapper = new Element('div',{'class':'wrapper'}).inject(this.myHider,'inside').setStyles({
			position: 'absolute',
			left: 0,
			top: 0
		});
		this.myWrapper.set('html',this.tempHTML);
		this.myWrappers.push(this.myWrapper);
		
		//clone the wrapper as we need 2 of them to give constant scrolling effect and inject it after the original
		this.myClone = this.myWrapper.clone().inject(this.myWrapper,'after');
		this.myWrappers.push(this.myClone);
		if(this.options.direction == 'up'){
			this.myClone.setStyle('top',this.contHgt);
		}else{
			this.myClone.setStyle('top',-(this.contHgt.toInt()));
		};
		
		//call next function
		this.createTimer();
	},
		
	createTimer: function(){
		//install looping timer
		$clear(this.myTimer);
		this.myTimer = this.beginScroll.periodical(this.options.speed,this);
	},
		
	beginScroll: function(){
		//check to see which direction is set in options
		if(this.options.direction == 'up'){
			//the code that slides the wrappers
			this.myWrappers[0].setStyle('top',this.myWrappers[0].getStyle('top').toInt()-1);
			this.myWrappers[1].setStyle('top',this.myWrappers[1].getStyle('top').toInt()-1);
			
			//if 2nd wrapper has reached final poistion reset it
			if(this.myWrappers[1].getStyle('top').toInt() <= 0){
				this.myWrappers[0].setStyle('top',0);
				this.myWrappers[1].setStyle('top',this.contHgt);
			};
		}else{
			//the code that slides the wrappers
			this.myWrappers[0].setStyle('top',this.myWrappers[0].getStyle('top').toInt()+1);
			this.myWrappers[1].setStyle('top',this.myWrappers[1].getStyle('top').toInt()+1);
			
			//if 2nd wrapper has reached final poistion reset it
			if(this.myWrappers[1].getStyle('top').toInt() >= 0){
				this.myWrappers[0].setStyle('top',0);
				this.myWrappers[1].setStyle('top',-(this.contHgt));
			};
		};
	}
});
