if (typeof(AC) == "undefined") AC = {};



AC.OverlayInit = function(overlaysArray) {
	for (var i=0; i<overlaysArray.length; i++) {
		Event.observe(overlaysArray[i], 'beforePop', function(evt) {
			var except = this.overlays.without(this.thisOverlay);
			except.each(function(overlay) {
				overlay.close();
			});
		}.bind({ thisOverlay:overlaysArray[i], overlays:overlaysArray }));
	}
};



AC.Overlay = Class.create(
{
	controller: null,

	closeBtn: null,
	overlay: null,
	overlayShadow: null,

	overlayId: '',
	overlayClasses: '',
	overlayContents: '',
	overlayShadowId: '',
	overlayShadowClasses: '',
	overlayShadowSrc: '',

	// -- empty functions --
	buildContents:     function() {},  // called from createOverlay()
	setItemAttributes: function() {},  // called from initialize()
	prepPop:           function() {},  // called from onClick()

	// -- custom events --
	//     - latch onto these events using this expample code:
	//       `document.observe(this.id+':beforePop', this.handleBeforePop.bind(this));`
	//     - using Event.fire rather than calling functions explicitly allows
	//       multiple decendent classes to latch onto the same event.
	//
	//    beforePop    -- called from onClick()
	//    afterPop     -- called from afterPop()
	//    beforeClose  -- called from beforeClose()
	//    afterClose   -- called from afterClose()


	initialize: function(items, options) {
		this.id = 'overlay'+AC.Overlay.counter;
		AC.Overlay.counter++;
		this.items = items;

		this.options = options || {};
		if (this.options.overlayShadowSrc) this.overlayShadowSrc = this.options.overlayShadowSrc;
		
		if (this.items.length>0) {
			this.createOverlay();
			this.setDefaults();
			this.setItemAttributes(); // empty by default
		}

		if (location.hash) {
			var initial = location.hash.substring(location.hash.indexOf('#')+1, location.hash.length);
			initial = initial.toQueryParams();
			this.showInitial(initial);
		}
	},

	createOverlay: function() {
		this.closeBtn = Builder.node('a', {href:'#close', 'class':'close'}, 'Close');
		Event.observe(this.closeBtn, 'click', this.close.bindAsEventListener(this));

		this.buildContents(); // empty by default

		this.overlay = Builder.node('div', {'id':this.overlayId, 'class':'overlay '+this.overlayClasses}, this.overlayContents);

		this.overlayshadow = Builder.node('div', {id:this.overlayShadowId, 'class':'overlayshadow '+this.overlayShadowClasses}, [
			Builder.node('img', {src:this.overlayShadowSrc, alt:'', border:0})
		]);
 
		document.body.appendChild(this.overlayshadow);
		document.body.appendChild(this.overlay);
	},

	setDefaults: function() {
		this.defaultWidth = this.overlay.offsetWidth;
		this.padleft = parseInt(Element.getStyle(this.overlay, 'marginLeft').replace(/px/i,''));
		this.padright = parseInt(Element.getStyle(this.overlay, 'marginRight').replace(/px/i,''));

		this.defaultHeight = this.overlay.offsetHeight;
		this.padtop = parseInt(Element.getStyle(this.overlay, 'marginTop').replace(/px/,''));
		this.padbottom = parseInt(Element.getStyle(this.overlay, 'marginBottom').replace(/px/,''));
	},

	showInitial: function(index) {
		index = Object.values(index);
		index = parseInt(index[0]);

		// store the small size and position for later
		this.width = 50;
		this.left = this.windowSize().x+(this.windowSize().width/2);
		this.height = 50;
		this.top = this.windowSize().y+(this.windowSize().height/2)

		// do the movie or the image
		if (this.items[index]) {
			this.prepPop(null, this.items[index], index);
		}
	},
 
	setEvent: function(item, i) {
		if (typeof(item) == 'object') {
			if (item.nodeType == 1) Event.observe(item, 'click', this.onClick.bindAsEventListener(this, item, i));
		}
	},

	onClick: function(evt, item, i) {
		this.setDimensions(evt, item, i);
 
		// stop the default event
		evt.stop();
 
		// dispatch beforePop in case anything needs to be closed
		document.fire(this.id+':beforePop');
 
		// do the image
		this.prepPop(evt, item, i); // empty by default
	},

	setDimensions: function(evt, item, i) {
		// store the small size and position for later
		this.width = (item.offsetWidth>80) ? 80 : item.offsetWidth;
		this.left = evt.pageX || evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
		this.left -= this.width/2;
		this.left = this.left || document.body.getDimensions().width / 2;
		this.height = item.offsetHeight;
		this.top = evt.pageY || evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
		this.top -= this.height/2;
	},

	windowSize: function() {
		var width = document.clientWidth || (document.documentElement.clientWidth || document.body.clientWidth);
		var height = document.clientHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
		var x = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
		var y = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);

		return {'width':width, 'height':height, 'x':x, 'y':y}
	},

	setPopPosition: function() {
		// set the position/offset of the image
		var left, top = null;

		left = this.windowSize().x+(this.windowSize().width-this.defaultWidth-this.padleft-this.padright)/2;
		if (this.windowSize().width<this.defaultWidth+this.padleft+this.padright) left = this.windowSize().x-(this.padtop-this.closeBtn.offsetWidth);

		top = this.windowSize().y+(this.windowSize().height-this.defaultHeight-this.padtop-this.padbottom)/2;
		if (this.windowSize().height<this.defaultHeight+this.padtop+this.padbottom) top = this.windowSize().y-(this.padtop-this.closeBtn.offsetHeight);

		return { left:left, top:top };
	},

	beforePop: function() {
		Element.addClassName(this.overlay, 'isanim');
		Element.addClassName(this.overlayshadow, 'isanim');
	},

	pop: function(width, top, height, left, item, i) {
		// prep the overlay/shadow for the effect
		this.overlay.style.width = this.width+'px';
		this.overlayshadow.style.width = this.width+'px';

		this.overlay.style.height = this.height+'px';
		this.overlayshadow.style.height = this.height+'px';

		this.overlay.style.left = this.left+'px';
		this.overlayshadow.style.left = this.left+'px';

		this.overlay.style.top = this.top+'px';
		this.overlayshadow.style.top = this.top+'px';

		Element.setOpacity(this.overlay, 0);
		Element.setOpacity(this.overlayshadow, 0);

		if (!AC.Detector.isMobile()) {
			// do the craziness
			new Effect.Parallel([
					new Effect.MoveBy(this.overlay, top-this.top, left-this.left, { sync:true }),
					new Effect.MoveBy(this.overlayshadow, top-this.top, left-this.left, { sync:true }),
					new Effect.Scale(this.overlay, (width/this.width)*100, { sync:true, scaleY:false, scaleContent:false }),
					new Effect.Scale(this.overlayshadow, ((width+this.padleft+this.padleft)/this.width)*100, { sync:true, scaleY:false, scaleContent:false }),
					new Effect.Scale(this.overlay, (height/this.height)*100, { sync:true, scaleX:false, scaleContent:false }),
					new Effect.Scale(this.overlayshadow, ((height+this.padtop+this.padbottom)/this.height)*100, { sync:true, scaleX:false, scaleContent:false }),
					new Effect.Appear(this.overlay, { sync:true }),
					new Effect.Appear(this.overlayshadow, { sync:true })
				],
				{ duration:.3, beforeStart:this.beforePop.bind(this), afterFinish:this.afterPop.bind(this, item, i) }
			);
		} else {
			this.beforePop();

			this.overlay.style.left = parseInt(left)+'px';
			this.overlayshadow.style.left = parseInt(left)+'px';

			this.overlay.style.top = parseInt(top)+'px';
			this.overlayshadow.style.top = parseInt(top)+'px';

			this.afterPop(item, i);
		}
	},

	afterPop: function(item, id) {
		this.setPoppedClass();

		// dispatch afterPop event in case anything else needs to be reset
		document.fire(this.id+':afterPop', { item:item, id:id });

		this.resetOverlay();
	},
 
	beforeClose: function() {
		this.setIsanimClass();

		//dispatch beforeClose event in case anything else needs to be closed
		document.fire(this.id+':beforeClose');
	},

	resetOverlay: function() {
		// reset the effect inline styles
		this.overlay.style.width = '';
		this.overlayshadow.style.width = '';

		this.overlay.style.height = '';
		this.overlayshadow.style.height = '';

		Element.setOpacity(this.overlay, '');
		Element.setOpacity(this.overlayshadow, '');
	},

	setPoppedClass: function() {
		Element.removeClassName(this.overlay, 'isanim');
		Element.removeClassName(this.overlayshadow, 'isanim');
		Element.addClassName(this.overlay, 'popped');
		Element.addClassName(this.overlayshadow, 'popped');
	},

	setIsanimClass: function() {
		Element.addClassName(this.overlay, 'isanim');
		Element.addClassName(this.overlayshadow, 'isanim');
		Element.removeClassName(this.overlay, 'popped');
		Element.removeClassName(this.overlayshadow, 'popped');
	},

	close: function(evt) {
		if (evt) evt.stop();

		var width = this.defaultWidth;
		var left = this.overlay.offsetLeft;
		var height = this.defaultHeight;
		var top = this.overlay.offsetTop;

		if (!AC.Detector.isMobile()) {
			// do the craziness
			new Effect.Parallel([
				new Effect.MoveBy(this.overlay, this.top-top, this.left-left, { sync:true }),
				new Effect.MoveBy(this.overlayshadow, this.top-top, this.left-left, { sync:true }),
				new Effect.Scale(this.overlay, (this.width/width)*100, { sync:true, scaleY:false, scaleContent:false }),
				new Effect.Scale(this.overlayshadow, (this.width/(width+this.padleft+this.padleft))*100, { sync:true, scaleY:false, scaleContent:false }),
				new Effect.Scale(this.overlay, (this.height/height)*100, { sync:true,scaleX:false, scaleContent:false }),
				new Effect.Scale(this.overlayshadow, (this.height/(height+this.padtop+this.padbottom))*100, { sync:true, scaleX:false, scaleContent:false }),
				new Effect.Fade(this.overlay, { sync:true }),
				new Effect.Fade(this.overlayshadow, { sync:true })
			],
			{ duration:.3, beforeStart:this.beforeClose.bind(this), afterFinish:this.afterClose.bind(this) });
		} else {
			this.beforeClose();
			this.afterClose();
		}
	},

	afterClose: function() {
		Element.removeClassName(this.overlay, 'isanim');
		Element.removeClassName(this.overlayshadow, 'isanim');

		// reset everything
		this.overlay.style.width = '';
		this.overlayshadow.style.width = '';

		this.overlay.style.height = '';
		this.overlayshadow.style.height = '';

		this.overlay.style.left = '';
		this.overlayshadow.style.left = '';

		this.overlay.style.top = '';
		this.overlayshadow.style.top = '';

		this.overlay.style.display = '';
		this.overlayshadow.style.display = '';

		// dispatch afterClose in case anything else needs to be reset
		document.fire(this.id+':afterClose');

		if (AC.Detector.isWebKit()) this.fixSafarisScrollBars();
	},

	fixSafarisScrollBars: function() {
		scrollTo = 1;
		window.scroll(this.windowSize().x+scrollTo, this.windowSize().y+scrollTo);
		scrollTo = -scrollTo;
		window.scroll(this.windowSize().x+scrollTo, this.windowSize().y+scrollTo);
	}
});
AC.Overlay.counter = 0;



AC.ImageOverlay = Class.create( AC.Overlay,
{
	overlayId: 'ACOverlayImage',
	overlayShadowId: 'ACOverlayImageShadow',
	overlayShadowSrc: 'http://images.apple.com/global/elements/overlay/overlay_shadow20070807.png',

	buildContents: function() {
		this.overlayimg = Builder.node('img', {'class':'overlayimg', border:0});
		this.overlaynav = Builder.node('div', {'class':'overlaynav'});

		this.overlayContents = [
			this.closeBtn,
			this.overlayimg,
			this.overlaynav
		];
	},

	setItemAttributes: function() {
		for (var i=0; i<this.items.length; i++) {
			var item = this.items[i];

			item.img = new Image();
			item.img.src = item.href;
			item.img.alt = (Element.down(item, 'img')) ? Element.down(item, 'img').alt : item.innerHTML;
			item.img.alt = item.img.alt.replace(/: click to enlarge/i, '');

			item.nav = this.getNav(item);

			item.img.shortsrc = item.img.src.substring(item.img.src.lastIndexOf('/')+1, item.img.src.length);

			this.setEvent(item, i);
		}

	},

	getNav: function(item) {
		var wrapper = Element.up(item, 'ul');
		var siblings = wrapper.getElementsByClassName('overlaythumb');

		var items = [];
		for (var i=0; i<siblings.length; i++) {
			var cloned = siblings[i].cloneNode(true);
			if (item == siblings[i]) Element.addClassName(cloned, 'active')
	 		items.push(Builder.node('li', cloned));
		}

		var list = Builder.node('ul', {'class':'w'+siblings.length}, items)
		return list;
	},

	setNav: function(item, i) {
		this.overlaynav.innerHTML = '';

		// set up the nav
		this.overlaynav.appendChild(item.nav);
		var items = $$('.'+this.overlaynav.className+' .'+'overlaythumb');
		items.each(function(item, index) {
			item.observe('click', this.swapImage.bindAsEventListener(this, item, index, i));
		}.bind(this));
	},

	swapImage: function(evt, item, j, i) {
		evt.stop();

		// swap the nav
		var items = $$('.'+this.overlaynav.className+' .'+'overlaythumb');
		for (var k=0; k<items.length; k++) {
			if (items[k].href==item.href) {
				var clicked = items[k];
		 		Element.addClassName(clicked, 'active');
			} else {
	 			Element.removeClassName(items[k], 'active')
	 		}
		}


		// swap the image
		this.overlayimg.src = clicked.href;
		this.overlayimg.alt = Element.down(clicked).alt.replace(/: click to enlarge/i, '');
	},
 
	prepPop: function(evt, item, i) {
		// set the source for image in the overlay
		this.overlayimg.src = item.img.src;
		this.overlayimg.alt = item.img.alt;

		// set up the nav
		this.setNav(item, i);

		// call the effect
		this.pop(this.defaultWidth, this.setPopPosition().top, this.defaultHeight, this.setPopPosition().left, item, i);
	}

});



AC.MovieOverlay = Class.create( AC.Overlay,
{
	movieController: false,

	overlayId: 'ACOverlayMovie',
	overlayClasses: 'movie',
	overlayShadowId: 'ACOverlayMovieShadow',
	overlayShadowClasses: 'movieshadow',
	overlayShadowSrc: 'http://images.apple.com/global/elements/overlay/overlay_movieshadow20070807.png',
	
	itemIdsByMovieUrl: {},
	
	initialize: function($super, items, options) {
		$super(items, options);
		document.observe(this.id+':beforePop', this.handleBeforePop.bind(this));
		document.observe(this.id+':afterPop', this.handleAfterPop.bind(this));
		document.observe(this.id+':beforeClose', this.handleBeforeClose.bind(this));
	},

	buildContents: function() {
		this.displayPanel = Builder.node('div', {'class':'overlaymovie'});
		this.controllerPanel = Builder.node('div', {'class':'overlaycontroller'});
		this.descriptionPanel = Builder.node('div');
		var descriptionPanel = Builder.node('div', {'class':'overlaydescription'}, [
			Builder.node('div', [this.descriptionPanel])
		]);

		this.overlayContents = [
			this.closeBtn,
			descriptionPanel,
			this.displayPanel,
			this.controllerPanel
		];
	},

	setItemAttributes: function() {
		for (var i=0; i<this.items.length; i++) {
			var item = this.items[i];

			item.movieLink = Element.down(item, 'a.overlaymovielink');
			item.movieUrl = item.movieLink.href;
			this.itemIdsByMovieUrl[item.movieUrl] = i;
			item.description = Element.down(item, '.overlaydescription');

			var posterFrame = Element.down(item, '.overlayposter');
			if (posterFrame) item.posterFrameUrl = posterFrame.innerHTML.match(/src="(.*)"/)[1];

			this.setEvent(item, i);
		}
	},

	handleBeforePop: function() {
		this.beforeClose();
		this.afterClose();
	},

	handleAfterPop: function(evt) {
		var i = evt.memo.id;
		var item = evt.memo.item;
		// reset movie & static content
		this.setMovie(item, i);
		this.descriptionPanel.innerHTML = item.description.innerHTML;
	},

	handleBeforeClose: function() {
		// stop the movie and unplug the controller
		if (this.movieController) {
			this.movieController.Stop.bind(this.movieController);
			this.movieController.detachFromMovie.bind(this.movieController);
			this.movieController = false;
		}

		// reset the containers
		this.displayPanel.style.display = 'none';
		this.displayPanel.innerHTML = '';
		this.displayPanel.style.display = '';

		this.controllerPanel.innerHTML = '';

		this.descriptionPanel.innerHTML = '';
	},

	prepPop: function(evt, item, i) {
		// call the effect
		this.pop(this.defaultWidth, this.setPopPosition().top, this.defaultHeight, this.setPopPosition().left, item, i);
	},

	setMovie: function(item, i) {
		this.movieOptions = {
			width: (this.options.moviewidth) ? this.options.moviewidth : 480,
			height: (this.options.movieheight) ? this.options.movieheight : 360,
			controller: false,
			showlogo: false,
			background: '#ffffff',
			cache: true
		};

		// if we're Mobile or Opera, use the standard movie controller
		if (AC.Detector.isMobile() || AC.Detector.isOpera()) this.movieOptions.controller = true;
		// if we're Opera, add the height for the controller
		if (AC.Detector.isOpera()) this.movieOptions.height += 16;


		this.packageMovie(item);
		this.connectMovieController();

		//this.movie = null; // for IE
	},

	packageMovie: function(item) {
		if (!AC.Detector.isQTInstalled()) {
			this.displayPanel.innerHTML =
				'<div id="noqt">\
					<a href="http://www.apple.com/quicktime/download/"><img src="/main/images/overlay/movie_qt7required.gif" alt="QuickTime 7 Required" width="88" height="31" border="0" class="across"></a>\
					<p>Download <a href="http://www.apple.com/quicktime/download/">QuickTime</a>.</p>\
				</div>';
		} else {
			if (item.posterFrameUrl) this.movieOptions.posterFrame = item.posterFrameUrl;
			this.movie = AC.Quicktime.packageMovie('overlaymovie', item.movieUrl, this.movieOptions);
			this.displayPanel.appendChild(this.movie);
		}
	},

	connectMovieController: function() {
		if (AC.Detector.isQTInstalled()) {
			if (!this.movieOptions.controller) {
				this.movieController = new AC.QuicktimeController();
				this.movieController.render(this.controllerPanel);
				this.movieController.attachToMovie(this.movie, {
					onMoviePlayable: function() {
						this.movieController.monitorMovie();
					}.bind(this)});
			}
		}
	}
});



AC.MovieGalleryOverlay = Class.create( AC.MovieOverlay,
{
	overlayId: 'ACOverlayMovieGallery',
	overlayClasses: 'movie tour',
	overlayShadowId: 'ACOverlayMovieGalleryShadow',
	overlayShadowClasses: 'movieshadow tourshadow',
	overlayShadowSrc: '/main/images/overlay/shadow_moviegallery.png',
	
	initialize: function($super, items, options) {
		$super(items, options);
		document.observe('document:afterPop', this.handleAfterPop.bind(this));
	},

	movieLinks: function(item, i) {
		if (AC.Detector.isOpera()) {
			this.previous = true;
			this.next = true;
		} else {
			if (!this.next && !this.previous) {
				this.previous = Builder.node('a', {'class':'previous'}, 'Previous');
				this.next = Builder.node('a', {'class':'next'}, 'Next');
				var overlaynav = Builder.node('div', {'class':'overlaynav'}, [this.previous, this.next]);
				this.controllerPanel.parentNode.appendChild(overlaynav);
			}
			this.setMovieLinks(i);
		}
	},

	setMovieLinks: function(i) {
		var onclick = function(item, i) {
			this.swapMovie(item);
			this.setMovieLinks(i);
			return false;
		}

		var pindex = (i==0) ? this.items.length-1 : i-1;
		var previous = this.items[pindex];
		this.previous.innerHTML = previous.title;
		this.previous.href = previous.movieUrl;
		this.previous.onclick = onclick.bind(this, previous, pindex);

		var nindex = (i==this.items.length-1) ? 0 : i+1;
		var next = this.items[nindex];
		this.next.innerHTML = next.title;
		this.next.href = next.movieUrl;
		this.next.onclick = onclick.bind(this, next, nindex);
	},

	swapMovie: function(item) {
		this.descriptionPanel.innerHTML = item.description.innerHTML;

		if (this.movieController) {
			this.movieController.SetURL(item.movieUrl);
		} else {
			this.displayPanel.innerHTML = '';
			this.packageMovie(item);
		}
	},

	handleAfterPop: function(evt) {
		this.initializeMovie(evt.memo.id);
	},
	
	initializeMovie: function(id) {
		// reset movie & static content
		var item = this.items[id]
		this.setMovie(item, id);
		this.descriptionPanel.innerHTML = item.description.innerHTML;
		this.movieLinks(item, id);
	}
});



AC.MovieGallerySelectOverlay = Class.create( AC.MovieGalleryOverlay,
{
	overlayId: 'MovieGalleryOptionOverlay',
	overlayShadowId: 'MovieGalleryOptionShadow',

	movieLinks: function(item, i) {
		if (!this.select) {
			this.select = Builder.node('select');

			var label = (this.options.overlaynavLabel) ? this.options.overlaynavLabel : 'Watch another video:';
			label += ' ';
			label = Builder.node('label', [label, this.select]);

			var overlaynav = Builder.node('div', {'class':'overlaynav'}, [label]);
			this.controllerPanel.parentNode.appendChild(overlaynav);
		}
		this.setMovieLinks(i);
	},

	setMovieSelect: function(id) {
		this.select.innerHTML = '';
		this.selectOptions = [];

		if (this.options.blankOption) {
			var blankOption = Builder.node('option', { value:'' }, this.options.blankOptionTitle || '');
			this.select.appendChild(blankOption);
		}
		for (var i=0; i<this.items.length; i++) {
			var item = this.items[i];

			var option = Builder.node('option', { value:i }, item.title);
			this.selectOptions.push(option);

			var optgroup = this.createOptGroup(item);
			if (optgroup) {
				optgroup.appendChild(option);
			} else {
				this.select.appendChild(option);
			}
		}
		if (id && this.selectOptions[id]) this.selectOption(id);
		else if (blankOption) blankOption.selected = true;
	},
	
	selectOption: function(id) {
		this.selectOptions[id].disabled = true;
		this.selectOptions[id].selected = true;
		this.selectOptions[id].className = 'selected';
	},

	createOptGroup: function(item) {
		var optgroup = false;

		if (item.up('ul')) {
			var optgroup = item.up('ul').previous('.overlaymovieheader');
			if (optgroup) {
				var optgroup = optgroup.innerHTML;
				var optgroupId = optgroup.replace(' ', '-').camelize();
				if ($(optgroupId)) {
					optgroup = $(optgroupId);
				} else {
					optgroup = Builder.node('optgroup', { id:optgroupId, label:optgroup });
					this.select.appendChild(optgroup);
				}
			}
		}

		return optgroup;
	},

	setMovieLinks: function(id) {
		this.setMovieSelect(id);

		this.select.onchange = this.onSelectChange.bind(this);
	},
	
	onSelectChange: function() {
		var boo = function() {
			var id = this.select.value;
			if (id) this.swapMovieAndSetLinks(id);
			return false;
		}
		setTimeout(boo.bind(this), 10); // fixes IE 6 not changing properly, just needs a delay
	},
	
	swapMovieAndSetLinks: function(id) {
		this.swapMovie(this.items[id]);
		this.setMovieLinks(id);
	}

});



AC.MovieGallerySelectOverlayWithIndex = Class.create( AC.MovieGallerySelectOverlay,
{
	initialize: function($super, items, screen, options) {
		$super(items, options);
		this.options.blankOption = true;
		
		this.indexScreen = Builder.node('div', {'class':'overlayindex'});
		this.controllerPanel.parentNode.appendChild(this.indexScreen);
		
		this.indexScreen.innerHTML = $(screen).innerHTML;
		Element.select(this.indexScreen, 'a').each(function(a) {
			var id = this.itemIdsByMovieUrl[a.href];
			a.observe('click', function(evt) {
				evt.stop();

				this.selectOption(id);
				this.indexScreen.hide();
				this.initializeMovie(id);
			}.bindAsEventListener(this));
		}.bind(this));
		this.indexScreen.hide();
		document.observe(this.id+':beforeClose', function() { this.indexScreen.hide(); }.bind(this));
	},
	
	handleAfterPop: function() {
		this.indexScreen.show();
		this.movieLinks();
	},
	
	onSelectChange: function() {
		var boo = function() {
			if (!this.select.value) {
				this.handleBeforeClose();
				this.handleAfterPop();
				this.indexScreen.show();
			}
			else {
				var id = this.select.value;
				if (this.indexScreen.visible()) {
					this.indexScreen.hide();
					this.initializeMovie(id);
				}
				else {
					this.swapMovieAndSetLinks(id);
				}
			}
			return false;
		}
		setTimeout(boo.bind(this), 10); // fixes IE 6 not changing properly, just needs a delay
	}
});



AC.HTMLOverlay = Class.create( AC.Overlay,
{
	overlayId: 'ACOverlayHTML',
	overlayShadowId: 'ACOverlayHTMLShadow',
	overlayShadowSrc: 'http://images.apple.com/global/elements/overlay/overlay_movieshadow20070807.png',
	
	initialize: function($super, items, options) {
		$super(items, options);
		document.observe(this.id+':afterPop', this.handleAfterPop.bind(this));
		document.observe(this.id+':beforeClose', this.handleBeforeClose.bind(this));
	},

	buildContents: function() {
		this.descriptionPanel = Builder.node('div', {'class':'overlaydescription'});

		this.overlayContents = [
			this.closeBtn,
			this.descriptionPanel
		];
	},

	setItemAttributes: function() {
		for (var i=0; i<this.items.length; i++) {
			var item = this.items[i];

			item.htmlLink = Element.down(item, 'a.overlayhtmllink');
			item.description = Element.down(item, '.overlaydescription');

			this.setEvent(item, i);
		}
	},

	handleAfterPop: function(evt) {
		var i = evt.memo.id;
		var item = evt.memo.item;
		// reset content
		this.descriptionPanel.innerHTML = item.description.innerHTML;
	},

	handleBeforeClose: function(evt) {
		// reset the containers
		this.descriptionPanel.innerHTML = '';
	},

	prepPop: function(evt, item, i) {
		// call the effect
		this.pop(this.defaultWidth, this.setPopPosition().top, this.defaultHeight, this.setPopPosition().left, item, i);
	}
});