/** 
 * @description		| Prototype Rotator
 * @author			| All Code Written by John Dyer (Dallas Theological Seminary)
 * @use				| Permission to use code given by John Dyer (Dallas Theological Seminary) ** Thank you John! ** 
 * @date			| Updated for Xavier University - 5/12/09
 * @requires		| Prototype 1.6, Scriptaculous 1.8.2
*//***************************************************************************************************************/

if (!window.edu) window.edu = {};
if (!window.edu.xu) window.edu.xu = {};

edu.xu.RotatorDefaults = {
	transitionTime: 4500,
	clickTransitionTime: 10000,
	itemClass: 'rotator-item',
	previewClass: 'rotator-preview',
	textClass: 'rotator-text',
	highligherOffsetLeft: 11,
	highligherOffsetTop: 1
};

edu.xu.Rotator = Class.create({
	
	id: '',	
	options: null,
	isRunning: false,
	
	currentIndex: 1,
	totalItems: 5,
	
	highlighter: null,
	currentTimeout: null,
	
	initialize: function(id, total, options) {
		this.id = id;
		this.totalItems = total;
		this.options = Object.extend(Object.extend({ },edu.xu.RotatorDefaults), options || { });
		this.highlighter = $(this.id + '-highlighter');
		
		// position highlighter
		var pos = this.getPosition(1);
        this.highlighter.style.top =  pos.top  + 'px';
        this.highlighter.style.left = pos.left + 'px';
		this.highlighter.style.display = '';
		
		// attach click events to smaller images
		this._previewClick = this.previewClick.bindAsEventListener(this);
		
		//attach rotation-stopping event to large images to allow for videos in the rotator. <Created by Chris 06-03-09>
		this._largeClick = this.largeClick.bindAsEventListener(this);
		
		for (var i=1; i<=this.totalItems; i++) {
			 var preview = $(this.id + '-item' + i.toString() + '-preview');
			 preview.index = i;
			 Event.observe(preview, 'click', this._previewClick);
			 Event.observe(preview, 'mouseover', function(e) { e.target.style.cursor = 'pointer';  });
			 Event.observe(preview, 'mouseout', function(e) { e.target.style.cursor = '';  });
			 
			//From here to the bracket was added by Chris on 6-03-09 for the stop effect for videos.
			var large = $(this.id + '-item' + i.toString() + '-large');
			large.index = i;
			Event.observe(large, 'click', this._largeClick);
			Event.observe(large, 'mouseover', function(e) { e.target.style.cursor = 'pointer';  });
			Event.observe(large, 'mouseout', function(e) { e.target.style.cursor = '';  });
		}
		
		this.start(this.options.transitionTime);
	},
	
	getPosition: function(index) {
		var pos = $(this.id + '-item' + index + '-preview').positionedOffset();	
		
		return {top: pos.top  - this.options.highligherOffsetTop, 
				left: pos.left - this.options.highligherOffsetLeft};
			
	},
	
	previewClick:function(e) {
		var parent = $(e.target);
		while (parent != null && parent.hasClassName && ! (parent.hasClassName('rotator-preview') || parent.hasClassName('rotator-preview-first')) ) {
			parent = parent.parentNode;
		}
		
		//the key is here. Something here will be the key to stopping the rotator. <Chris Marker>
		if (parent != null) {		
			var index = parseInt(parent.index);	
			if (!isNaN(index)) {
				this.stop();
				this.showItem(index, this.options.clickTransitionTime);
			}
		}
		
	},
	
	//Created by Chris on 06-03-09. Event for large images in the rotator to stop their rotation when clicked.
	//Allows for the inclusion of videos in the large images of a rotator.
	//Does not affect rotator in any other way: clicking other previews restores regular rotation pattern.
	largeClick:function(e)
	{
		//alert("Rotation Stopped.");
		this.stop();
	},
		
	start: function(pause) {
		this.stop();
		this.isRunning = true;
		
		var x = this;
		
		this.currentTimeout = setTimeout(function() { x.increment() }, pause);
	},
	
	stop: function() {
		
		this.isRunning = false;
		
		clearTimeout(this.currentTimeout);
		delete this.currentTimeout;
	},
	
	increment: function() {
		var next = this.currentIndex+1;
		if (next > this.totalItems)
			next = 1;
			
		this.showItem(next, this.options.transitionTime);
	},
	
	showItem: function(newItemIndex, pause) {				
		var from = this.currentIndex;
		var to = newItemIndex;
				
		// fade the large image
		new Effect.Fade(  $(this.id + '-item' + from.toString() + '-large'),  { duration:1, from:1.0, to:0.0 });
		new Effect.Appear($(this.id + '-item' + to.toString() +   '-large'),  { duration:1, from:0.0, to:1.0 });
		
		// fade text area
		new Effect.Fade(  $(this.id + '-item' + from.toString() + '-text'),  { duration:1, from:1.0, to:0.0 });
		new Effect.Appear($(this.id + '-item' + to.toString() +   '-text'),  { duration:1, from:0.0, to:1.0 });
		
		// move the highlighter into position
		var targetPos = $(this.id + '-item' + to.toString() +   '-preview').positionedOffset();	
		var currentX = parseFloat(this.highlighter.getStyle('left'));
		var currentY = parseFloat(this.highlighter.getStyle('top'));	
        new Effect.Move(this.highlighter, {y: targetPos.top-currentY-this.options.highligherOffsetTop, x: targetPos.left-currentX-this.options.highligherOffsetLeft, duration: 0.7} );    		
		
		// setup for next round
		this.currentIndex = newItemIndex;		
		this.start(pause);
	}
	
});
Rotator = edu.xu.Rotator;