var overlay              = $('overlay-control-triggers'),
			triggers             = overlay.getElementsBySelector('a.control-trigger'),
			effects              = $A(),
			hoveringOverTriggers = false,
			introEffects         = $A(),
			fadeInDuration       = 0.2,
			fadeOutDelay         = 0.5,
			fadeOutDuration      = 0.5, 
			hoverFadeDuration    = 0.1;

		triggers.each(function(trigger) {
			trigger.setOpacity(0.5);
			trigger.addClassName('hover');
			trigger.img = trigger.down('img');
			trigger.img.setOpacity(0);
		});

		introEffects.push(new Effect.Opacity(triggers[0], { duration:fadeInDuration, from:0.5, to:1.0, beforeUpdate:function(effect){ effect.element.down('img').setOpacity(effect.position*2-1); }, queue:'end', delay:fadeOutDelay }));
		introEffects.push(new Effect.Opacity(triggers[0], { duration:fadeOutDuration, from:1.0, to:0.5, beforeUpdate:function(effect){ effect.element.down('img').setOpacity(effect.position*2-1); }, queue:'end', delay:fadeOutDelay }));

		introEffects.push(new Effect.Opacity(triggers[1], { duration:fadeInDuration, from:0.5, to:1.0, beforeUpdate:function(effect){ effect.element.down('img').setOpacity(effect.position*2-1); triggers[3].setOpacity(effect.position); }, queue:'end' }));
		introEffects.push(new Effect.Opacity(triggers[1], { duration:fadeOutDuration, from:1.0, to:0.5, beforeUpdate:function(effect){ effect.element.down('img').setOpacity(effect.position*2-1); triggers[3].setOpacity(effect.position); }, queue:'end', delay:fadeOutDelay }));

		introEffects.push(new Effect.Opacity(triggers[2], { duration:fadeInDuration, from:0.5, to:1.0, beforeUpdate:function(effect){ effect.element.down('img').setOpacity(effect.position*2-1); }, queue:'end' }));
		introEffects.push(new Effect.Opacity(triggers[2], { duration:fadeOutDuration, from:1.0, to:0.5, beforeUpdate:function(effect){ effect.element.down('img').setOpacity(effect.position*2-1); }, queue:'end', delay:fadeOutDelay }));

		introEffects.push(new Effect.Opacity(triggers[0], { duration:fadeInDuration, from:0.5, to:1.0, beforeUpdate:function(effect){ triggers.each(function(trigger){ trigger.setOpacity(effect.position); }); }, queue:'end'}));

		$('MASKED-overlay-controls').observe('mousemove', function(event) {
			var hoveredTriggers = $A(), span;
			triggers.each(function(trigger, index) {
				if (Position.within(trigger, Event.pointerX(event),Event.pointerY(event))) {
					hoveredTriggers.push(index);
					// break loop if this is volume up/down
					if (index == 0 || index == 2) throw $break;
				}
			});

			if (hoveredTriggers.length) {

				introEffects.each(function(effect) {
					effect.cancel();
				});

				triggers.each(function(trigger, index) {
					if (hoveredTriggers.indexOf(index) != -1) {
						if (!trigger.hasClassName('hover') || !hoveringOverTriggers) {
							trigger.addClassName('hover');
							new Effect.Opacity(trigger, { duration:hoverFadeDuration, from:trigger.getOpacity(), to:1.0 });
							new Effect.Opacity(trigger.img, { duration:hoverFadeDuration, from:trigger.img.getOpacity(), to:1.0 });
						}
					}
					else {
						if (trigger.hasClassName('hover') || !hoveringOverTriggers) {
							trigger.removeClassName('hover');
							new Effect.Opacity(trigger, { duration:hoverFadeDuration, from:trigger.getOpacity(), to:0.5 });
							new Effect.Opacity(trigger.img, { duration:hoverFadeDuration, from:trigger.img.getOpacity(), to:0 });
						}
					}
				});
				hoveringOverTriggers = true;
			}
			else if (hoveringOverTriggers) {
				hoveringOverTriggers = false;
				triggers.each(function(trigger, index) {
					if (trigger.hasClassName('hover')) {
						trigger.removeClassName('hover');
					}
					new Effect.Opacity(trigger, { duration:hoverFadeDuration, from:trigger.getOpacity(), to:1.0 });
					new Effect.Opacity(trigger.img, { duration:hoverFadeDuration, from:trigger.img.getOpacity(), to:0 });
				});
			}
		});