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

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

edu.dts.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.dts.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);
		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 = '';  });
		}
		
		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;
		}
		
		if (parent != null) {		
			var index = parseInt(parent.index);	
			if (!isNaN(index)) {
				this.stop();
				this.showItem(index, this.options.clickTransitionTime);
			}
		}
		
	},
		
	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.dts.Rotator;