var spotlight;

var Spotlight = new Class({
	initialize: function (id, delay) {
		this.spotlightRoot = $(id);
		
		this.links = $ES('.playlist ul li', this.spotlightRoot);
		this.panels = $ES('.panels .panel', this.spotlightRoot);
		this.panelCount = this.panels.length;
		this.defaultDelay = delay;
		this.isPlaying = false;
		
		// Quick Error Checking
		if (this.links.length != this.panels.length) {
			alert('Inconsistent number of links and panels');
			return;
		}
		
		this.activePanel = 0;
		this.links[this.activePanel].addClass('active');
		
		var localThis = this;
		
		this.links.each(function (item, index) {
			$E('a', item).addEvent('click', function (e) {
				var event = new Event(e);
				event.stop();
				localThis.pause();

				localThis.showPanel(index);
			});
		});
		
		this.fadeIn(this.activePanel);
		this.scrollToLink(this.activePanel);
		this.pause();
		
	},
	showPanel: function(panelId) {
	   var localThis = this;
	
		if (panelId != this.activePanel) {
			this.fadeOut(this.activePanel);
			this.fadeIn(panelId);                      
			this.activePanel = panelId;	
		}
		
		// get the delay
		if (this.isPlaying) {
		  var activePanelDiv = $E('div', this.panels[panelId]);
		  var panelClass = activePanelDiv.getProperty('class');
		  if (panelClass != '') {
		      var delay = panelClass.replace('delay_', '');
		      localThis.pause();
		      //localThis.play.delay((delay * 1000) - localThis.defaultDelay, localThis);
		      (function() { if (localThis.isPlaying) {localThis.play()} }).delay((delay * 1000) - localThis.defaultDelay, localThis);
		  }
		}
	},
	fadeIn: function(panelId) {
		var localThis = this;
		var fadePanel = this.panels[panelId];
	
		var fx = new Fx.Style(fadePanel, 'opacity', {
			duration: 450,
			fps: 8,
			onStart: function () {
				fadePanel.setStyle('opacity', 0);
				fadePanel.setStyle('display', 'block');
				fadePanel.getElements('.movie').setStyle('visibility', 'hidden');
				
				var panelSize = $E('.panels', localThis.spotlightRoot).getSize();
				fadePanel.setStyle('height', panelSize.size.y);
				fadePanel.setStyle('width', panelSize.size.x);
				var innerDiv = $E('div', fadePanel);
				var innerDivPadding = innerDiv.getStyle('padding-top').toInt() + innerDiv.getStyle('padding-bottom').toInt();
				var innerDivHeight = panelSize.size.y - innerDivPadding + 'px';
				innerDiv.setStyle('height', innerDivHeight);
				localThis.links[panelId].addClass('active');
			},
			onComplete: function() {
				fadePanel.getElements('.movie').setStyle('visibility', 'visible');
			}
		});
		fx.start(0, 1);
	},
	fadeOut: function(panelId) {
		var localThis = this;
		var fadePanel = this.panels[panelId];
		
		var fx = new Fx.Style(fadePanel, 'opacity', {
			duration: 500,
			onStart: function() {
				fadePanel.getElements('.movie').setStyle('visibility', 'hidden');
				localThis.links.each(function (item) { item.removeClass('active') });
			},
			onComplete: function () {
				fadePanel.setStyle('display', 'none');
			}
		});
		fx.start(1, 0);
	},
	play: function() {
		var playControl = this.spotlightRoot.getElement('.playlist .playControl');
		playControl.removeEvents();
		var localThis = this;
		playControl.addEvent('click', function (event) { localThis.next(); localThis.pause();  });
		playControl.setHTML('<img src="http://www.umbc.edu/images_ad/next.png" height="28" width="100" alt=""/>');
		this.animation = this.next.periodical(this.defaultDelay, this);
		this.isPlaying = false;
	},
	pause: function() {
		var playControl = this.spotlightRoot.getElement('.playlist .playControl');
		playControl.removeEvents();
		var localThis = this;
		
		$clear(this.animation);
		this.isPlaying = false;
	},
	
	previous: function() {
		var nextPanel = this.activePanel - 1;
		if (nextPanel < 0) {
			nextPanel = this.panelCount - 1;
		}
		this.showPanel(nextPanel);
		this.scrollToLink(nextPanel);
	},
	next: function() {
		var nextPanel = this.activePanel + 1;
		if ((nextPanel + 1) > this.panelCount) {
			nextPanel = 0;
		}
		this.showPanel(nextPanel);
		this.scrollToLink(nextPanel);
	},
	scrollToLink: function(panelId) {
		panelId = panelId - 2;
		if (panelId < 0) panelId = 0;
		var linkPos = this.links[panelId].getCoordinates();
		var link2Pos = $E('.playlist ul', this.spotlightRoot).getCoordinates();
		//console.log(linkPos.top - link2Pos.top);
		//alert(linkPos.top);
		$E('.playlist ul', this.spotlightRoot).scrollTo(0, linkPos.top - link2Pos.top);
	}
});

window.addEvent('domready', function () {
	spotlight = new Spotlight('moduleSpotlight', 7000);
});