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();
Object.extend(AC.Overlay.prototype, Event.Listener);
Object.extend(AC.Overlay.prototype, Event.Publisher);
Object.extend(AC.Overlay.prototype, {

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

	overlayId: '',
	overlayClasses: '',
	overlayContents: '',
	overlayShadowId: '',
	overlayShadowClasses: '',
	overlayShadowSrc: '',
	
	order: 0,
	
	initialize: function(items, options) {
		this.items = items;
		
		if (this.items.length>0) {
			this.createOverlay();
			this.setDefaults();
			this.setItemAttributes();
		}

		this.options = options || {};

		if (location.hash) {
			var initial = location.hash.substring(location.hash.indexOf('#')+1, location.hash.length);
			if (initial=='demo') this.showDemo();
		}
	},
	
	createOverlay: function() {
		this.closeBtn = Builder.node('a', {href:'#close', 'class':'close'}, 'Close');
		Event.observe(this.closeBtn, 'click', this.close.bindAsEventListener(this), false);	
		
		this.buildContents();

		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);
	},
	
	buildContents: function() {},
	
 	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/,''));
 	},

 	setItemAttributes: function() {},

 	showDemo: function() {
 		for (var i=0; i<this.items.length; i++) {
			var item = this.items[i];
 			if (item.movieUrl) {
 				var index = i;
 			}
 		}

		// 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 (typeof(index)=='number') {
			this.prepPop(null, this.items[index], index);
 		}
 	},
 	
 	setEvent: function(item, i) {
		Event.observe(item, 'click', this.onClick.bindAsEventListener(this, item, i), false);
	},

 	onClick: function(evt, item, i) {
 		this.setDimensions(evt, item, i);
 		this.fixiPhoneDimensions();
 		
 		// stop the default event
 		Event.stop(evt);
 		
 		// track the click
 		if (item.trackClick) item.trackClick();
 		
 		// dispatch beforePop in case anything needs to be closed
		var data = { item:item, i:i };
 		this.dispatchEvent('beforePop', data);
 		
 		// do the image
		this.prepPop(evt, item, i);
 	},

	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;
	},
	
	fixiPhoneDimensions: function() {
		// fix the dimensions for the iPhone
		if (AC.Detector.isMobile()) {
			this.left = 3;
			this.top = 200;
		}	
	},

	windowSize: function() {
		var width = document.clientWidth || (document.documentElement.clientWidth || document.body.clientWidth);
		var height = document.clientHeight || (document.documentElement.clientHeight || 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);
		
		if(AC.Detector.isMobile()) {
			width = parseInt(980);
			height = parseInt(1212);
		}

		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 };
 	},

 	prepPop: function() {},

 	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-this.padleft+'px';
		this.overlayshadow.style.left = this.left+'px';

		this.overlay.style.top = this.top-this.padtop+'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+this.padtop, left-this.left+this.padleft, { 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.overlay.style.left = this.left+'px';
			this.overlay.style.top = this.top+'px';

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

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

		// dispatch	afterPop event in case anything else needs to be reset
		var data = {
			item: item,
			i: i
		};
		this.dispatchEvent('afterPop', data);

		this.resetOverlay();
 	},
 	
 	beforeClose: function() {
 		this.setIsanimClass();
 		
 		//dispatch beforeClose event in case anything else needs to be closed
 		this.dispatchEvent('beforeClose', this);
 	},

	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) Event.stop(evt);

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

		if (left>0 && top>0) { // if we are actually showing at the point of closure

			if (!AC.Detector.isMobile()) {
				// do the craziness
				new Effect.Parallel([
					new Effect.MoveBy(this.overlay, this.top-this.padtop-top, this.left-this.padleft-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
		this.dispatchEvent('afterClose', this);

		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.SingleImageOverlay = Class.create();
Object.extend(AC.SingleImageOverlay.prototype, AC.Overlay.prototype);
Object.extend(AC.SingleImageOverlay.prototype, {

	overlayId: 'ACOverlaySingleImage',
	overlayShadowId: 'ACOverlaySingleImageShadow',
	overlayShadowSrc: 'http://images.apple.com/la/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
		];
	},
	
	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.img.shortsrc = item.img.src.substring(item.img.src.lastIndexOf('/')+1, item.img.src.length);
			
			item.trackClick = function() {
				AC.Tracking.trackClick({prop1: ''}, this.img.src, 'o', document.title+' - '+item.img.alt+' - '+this.img.shortsrc);
			}

 			this.setEvent(item, 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;

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

});



AC.ImageOverlay = Class.create();
Object.extend(AC.ImageOverlay.prototype, AC.SingleImageOverlay.prototype);
Object.extend(AC.ImageOverlay.prototype, {

	overlayId: 'ACOverlayImage',
	overlayShadowId: 'ACOverlayImageShadow',
	overlayShadowSrc: 'http://images.apple.com/la/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);
			
			item.trackClick = function() {
				AC.Tracking.trackClick({prop1: ''}, this.img.src, 'o', document.title+' - '+item.img.alt+' - '+this.img.shortsrc);
			}

 			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.innerHTML = Builder.node('div', item.nav).innerHTML;
 		var items = $$('.'+this.overlaynav.className+' .overlaythumb');
 		for (var j=0; j<items.length; j++) {
 			Event.observe(items[j], 'click', this.swapImage.bindAsEventListener(this, items[j], j, i))
		}
	},

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

		// 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)) ? Element.down(clicked).alt.replace(/: click to enlarge/i, '') : clicked.innerHTML;

		// track the click
		clicked.shorthref = clicked.href.substring(clicked.href.lastIndexOf('/')+1, clicked.href.length);		
		AC.Tracking.trackClick({prop1: ''}, clicked.href, 'o', document.title+' - '+this.overlayimg.alt+' - '+clicked.shorthref);
 	},
 	
 	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();
Object.extend(AC.MovieOverlay.prototype, AC.Overlay.prototype);
Object.extend(AC.MovieOverlay.prototype, {
	movieController: false,

	overlayId: 'ACOverlayMovie',
	overlayShadowId: 'ACOverlayMovieShadow',
	overlayShadowSrc: 'http://images.apple.com/la/global/elements/overlay/overlay_movieshadow20070807.png',
	
	buildContents: function() {
		this.displayPanel = Builder.node('div', {'class':'overlaymovie'});
		this.controllerPanel = Builder.node('div', {'class':'overlaycontroller'});
		this.descriptionPanel = Builder.node('div', {'class':'overlaydescription'});
		
		this.overlayContents = [
			this.closeBtn,
			this.descriptionPanel,
			this.displayPanel,
			this.controllerPanel
		];
	},
	
	track: function(item, state) {
		
		if (state == 'Start') {
			this.order++;
		}

		var movieName = item.movieUrl.match(/([^\/]+)\.\S\S\S$/)[1];
		var tracking = document.title + ' ' + movieName + ' ' + state;

		AC.Tracking.trackClick({
			pageName: document.title + ' - ' + item.title + ' Watch The Demo (US)',
			prop4: item.movieUrl,
			prop6: movieName,
			prop13: tracking,
			pageUrl: item.movieUrl}, this, 'o', item.title + ' Watch The Demo (US)');
		
	},

	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;
			item.description = Element.down(item, '.overlaydescription');

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

 			this.setEvent(item, i);
 			
		}
		
	 	this.listenForEvent(this, 'beforePop', false, function(evt) {
			this.handleBeforePop(evt);
		}.bindAsEventListener(this));
		
		this.listenForEvent(this, 'afterPop', false, function(evt) {
			this.handleAfterPop(evt);			
		}.bindAsEventListener(this));
		
		this.listenForEvent(this, 'beforeClose', false, function(evt) {
			this.handleBeforeClose(evt);
		}.bindAsEventListener(this));
	},
	
	handleBeforePop: function(evt) {
		if (this.controllerPanel && !this.controllerPanel.innerHTML == '') {
			this.beforeClose();
			this.afterClose();
		}	
	},

	handleAfterPop: function(evt) {
		// reset movie & static content
		var item = evt.event_data.data.item;
		var i = evt.event_data.data.i;
		this.packageMovie(item, i);
		this.descriptionPanel.innerHTML = item.description.innerHTML;	
	},
	
	handleBeforeClose: function(evt) {
		// stop the movie and unplug the controller
		if (this.movieController) {
			this.movieController.Stop();
			this.movieController.detachFromMovie();
			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);
 	},

 	packageMovie: function(item, i) {
		var controllerstatus = false;
		var moviewidth = (this.options.moviewidth) ? this.options.moviewidth : 640;
		var movieheight = (this.options.movieheight) ? this.options.movieheight : 360;

		this.currentItem = item;

		// if we're Opera, set this flag (in essence now) to true
		if (AC.Detector.isMobile()) controllerstatus = true;

		// if we're Opera, use the standard movie controller & add the height for it
		if (AC.Detector.isOpera()) {
			controllerstatus = true;
			movieheight += 16;
		}

		if (AC.Detector.isQTInstalled()) {
			var movie = AC.Quicktime.packageMovie('overlaymovie', item.movieUrl, {
				width: moviewidth,
				height: movieheight,
				posterFrame: item.posterFrameUrl,
				controller: controllerstatus,
				showlogo: false,
				background: '#ffffff',
				cache: true
			});
			this.displayPanel.appendChild(movie);

			if (!controllerstatus) {
				this.movieController = new AC.QuicktimeController();
				this.movieController.render(this.controllerPanel);
				this.movieController.attachToMovie(movie, {
					onMovieFinished: function() {
						this.track(this.currentItem, 'End');
					}.bind(this)});
				this.movieController.monitorMovie();
			}
		}
		
		this.track(item, 'Start');

		// for IE
		var movie = null;
 	}
});



AC.VrOverlay = Class.create();
Object.extend(AC.VrOverlay.prototype, AC.MovieOverlay.prototype);
Object.extend(AC.VrOverlay.prototype, {
	movieController: false,

	overlayId: 'ACOverlayVr',
	overlayShadowId: 'ACOverlayVrShadow',
	overlayShadowSrc: 'http://images.apple.com/mx/global/elements/overlay/overlay_shadow_vr20080109.png',
	
	buildContents: function() {
		this.displayPanel = Builder.node('div', {'class':'overlaymovie'});
		
		this.overlayContents = [
			this.closeBtn,
			this.displayPanel
		];
	},
	
	track: function(item, state) {
		
		if (state == 'Start') {
			this.order++;
		}

		var movieName = item.movieUrl.match(/([^\/]+)\.\S\S\S$/)[1];
		var tracking = document.title + ' ' + movieName + ' ' + state;

		AC.Tracking.trackClick({
			pageName: document.title + ' - QuickTime VR (US)',
			prop4: item.movieUrl,
			prop6: movieName,
			prop13: tracking,
			pageUrl: item.movieUrl}, this, 'o', 'QuickTime VR (US)');
		
	},

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

			item.movieLink = (item.href) ? item : Element.down(item, 'a');
			item.movieUrl = item.movieLink.href;

			var iphoneAlt = Element.down(item, '.overlayiphonealt');
			item.iphoneAlt = iphoneAlt.innerHTML.match(/href="(.*)"/)[1];

 			this.setEvent(item, i);
		}
		
	 	this.listenForEvent(this, 'beforePop', false, function(evt) {
			this.handleBeforePop(evt);
		}.bindAsEventListener(this));
		
		this.listenForEvent(this, 'afterPop', false, function(evt) {
			this.handleAfterPop(evt);			
		}.bindAsEventListener(this));
		
		this.listenForEvent(this, 'beforeClose', false, function(evt) {
			this.handleBeforeClose(evt);
		}.bindAsEventListener(this));
	},
	
	handleBeforePop: function(evt) {
		if (this.controllerPanel && !this.controllerPanel.innerHTML == '') {
			this.beforeClose();
			this.afterClose();
		}	

		if (AC.Detector.isMobile()) {
			this.iphoneAlt(evt.event_data.data.item);
		}
	},
	
 	prepPop: function(evt, item, i) {
 		if (AC.Detector.isMobile()) return;

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

	iphoneAlt: function(item) {
		var shorturl = item.movieUrl.substring(item.movieUrl.lastIndexOf('/')+1, item.movieUrl.length);
		 document.location = item.iphoneAlt+'?movie='+shorturl;
	},
	
	handleAfterPop: function(evt) {
		// reset movie & static content
		var item = evt.event_data.data.item;
		var i = evt.event_data.data.i;
		this.packageMovie(item, i);
	},

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

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

 	packageMovie: function(item, i) {
 		if (AC.Detector.isMobile()) return;

		var moviewidth = (this.options.moviewidth) ? this.options.moviewidth : 512;
		var movieheight = (this.options.movieheight) ? this.options.movieheight : 552;

		this.currentItem = item;

		if (AC.Detector.isQTInstalled()) {
			var movie = AC.Quicktime.packageMovie('overlaymovie', item.movieUrl, {
				width: moviewidth,
				height: movieheight,
				controller: false,
				showlogo: false,
				background: '#ffffff',
				cache: true
			});
			this.displayPanel.appendChild(movie);

			this.movieController = new AC.QuicktimeController();
			this.movieController.attachToMovie(movie, {
				onMovieFinished: function() {
					this.track(this.currentItem, 'End');
				}.bind(this)});
			this.movieController.monitorMovie();
		}
		
		this.track(item, 'Start');

		// for IE
		var movie = null;
 	}
});



AC.MovieGalleryOverlay = Class.create();
Object.extend(AC.MovieGalleryOverlay.prototype, AC.MovieOverlay.prototype);
Object.extend(AC.MovieGalleryOverlay.prototype, {

	overlayId: 'ACOverlayMovieGallery',
	overlayClasses: 'tour',
	overlayShadowId: 'ACOverlayMovieGalleryShadow',
	overlayShadowClasses: 'tourshadow',
	overlayShadowSrc: 'http://images.apple.com/la/global/elements/overlay/overlay_movieshadow_nav20070807.png',
	
	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 links = Builder.node('div', {'class':'links'}, [this.previous, this.next]);
				this.controllerPanel.parentNode.appendChild(links);
			}
			this.setMovieLinks(i);
		}
	},

	setMovieLinks: function(i) {
		var onclick = function(item, i) {
			this.descriptionPanel.innerHTML = item.description.innerHTML;
			if (this.movieController) this.movieController.SetURL(item.movieUrl);
			this.setMovieLinks(i);
			this.currentItem = item;
			this.track(item, 'Start');
			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);
	},

 	handleAfterPop: function(evt) {
		// reset movie & static content
		var item = evt.event_data.data.item;
		var i = evt.event_data.data.i;
		this.packageMovie(item, i);
		this.descriptionPanel.innerHTML = item.description.innerHTML;
		this.movieLinks(item, i);
 	}
});



AC.AudioOverlay = Class.create();
Object.extend(AC.AudioOverlay.prototype, AC.MovieOverlay.prototype);
Object.extend(AC.AudioOverlay.prototype, {
	audioController: false,

	overlayId: 'ACOverlayAudio',
	overlayShadowId: 'ACOverlayAudioShadow',
	overlayShadowSrc: 'http://images.apple.com/la/global/elements/overlay/overlay_movieshadow20070807.png',
	
	buildContents: function() {
		this.overlayimg = Builder.node('img', {'class':'overlayimg', border:0});
		this.descriptionPanel = Builder.node('div', {'class':'overlaydescription'});
		
		this.overlayContents = [
			this.closeBtn,
			this.descriptionPanel,
			this.overlayimg
		];
	},

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

			item.img = new Image();
			item.img.src = Element.down(item, 'a.overlayimagelink').href;
			item.img.alt = (Element.down(item, 'img')) ? Element.down(item, 'img').alt : item.innerHTML;
			item.img.alt = item.img.alt.replace(/: listen/i, '');

			item.description = Element.down(item, '.overlaydescription');
			
			item.img.shortsrc = item.img.src.substring(item.img.src.lastIndexOf('/')+1, item.img.src.length);
			item.trackClick = function() {
				AC.Tracking.trackClick({prop1: ''}, this.img.src, 'o', document.title+' - '+item.img.alt+' - '+this.img.shortsrc);
			}

 			this.setEvent(item, i);
 		}
 		
 		this.listenForEvent(this, 'beforePop', false, function(evt) {
			this.handleBeforePop(evt);
		}.bindAsEventListener(this));
		
		this.listenForEvent(this, 'afterPop', false, function(evt) {
			this.handleAfterPop(evt);			
		}.bindAsEventListener(this));
		
		this.listenForEvent(this, 'beforeClose', false, function(evt) {
			this.handleBeforeClose(evt);
		}.bindAsEventListener(this));
	},

 	setNav: function(item, i) {
		this.descriptionPanel.innerHTML = item.description.innerHTML;
	},

 	fixAudioLinks: function() {
		var moviewidth = 195;
		var movieheight = 16;

 		var links = Element.getElementsByClassName(this.descriptionPanel, 'overlayaudiolink');
 		if (links.length>0) this.audioController = [];
 		
 		for (var i=0; i<links.length; i++) {
 			var item = links[i];
 			item.movieUrl = item.href;

			var movie = AC.Quicktime.packageMovie('overlayaudiomovie'+1, item.movieUrl, {
				width: moviewidth,
				height: movieheight,
				controller: true,
				autoplay: false,
				showlogo: false,
				cache: true
			});
			Element.up(links[i], 'li').appendChild(movie);

			this.audioController[i] = new AC.QuicktimeController();
			this.audioController[i].attachToMovie(movie, {
				onMovieFinished: function() {
					this.track(this.currentItem, 'End');
				}.bind(this)
			});
			this.audioController[i].monitorMovie();

 			Event.observe(links[i], 'click', function(evt, item) {
 				Event.stop(evt);

				// for tracking
 				this.currentItem = item;

				// set the audio clip
				if (this.audioController[i]) {
					if (!this.audioController[i].isPlaying()) {
						this.audioController[i].Play();
						this.track(item, 'Start');
					}
				}
 			}.bindAsEventListener(this, links[i], i));

			// for IE
			var movie = null;
 		}
 	},

 	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);
	},
	
 	handleAfterPop: function(evt) {
		// fix audio links
		var item = evt.event_data.data.item;
		var i = evt.event_data.data.i;
		this.fixAudioLinks();
 	},

 	handleBeforeClose: function(evt) {
		// stop the movie and unplug the controller
		if (this.audioController && this.audioController.length>0) {
			for (var i=0; i<this.audioController.length; i++) {
				if (this.audioController[i].isPlaying()) this.audioController[i].Stop();
				this.audioController[i].detachFromMovie();
				this.audioController[i] = false;
			}
			this.audioController = false;
		}

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

});



AC.AudioVrGalleryOverlay = Class.create();
Object.extend(AC.AudioVrGalleryOverlay.prototype, AC.AudioOverlay.prototype);
Object.extend(AC.AudioVrGalleryOverlay.prototype, AC.MovieGalleryOverlay.prototype);
Object.extend(AC.AudioVrGalleryOverlay.prototype, {

	overlayId: 'ACOverlayAudioVrGallery',
	overlayShadowId: 'ACOverlayAudioVrGalleryShadow',
	
	buildContents: function() {
		this.overlaynav = Builder.node('div', {'class':'overlaynav'});
		this.displayPanel = Builder.node('div', {'class':'overlaymovie'});
		this.descriptionPanel = Builder.node('div', {'class':'overlaydescription'});
		
		this.overlayContents = [
			this.closeBtn,
			this.descriptionPanel,
			this.displayPanel,
			this.overlaynav
		];
	},
	
	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 links = Builder.node('div', {'class':'links'}, [this.previous, this.next]);
				this.overlaynav.appendChild(links);
			}
			this.setMovieLinks(i);
		}
	},

	setMovieLinks: function(i) {
		var onclick = function(item, i) {
			if (this.audioController && this.audioController.length>0) {
				for (var j=0; j<this.audioController.length; j++) {
					if (this.audioController[j].isPlaying()) this.audioController[j].Stop();
					this.audioController[j].detachFromMovie();
					this.audioController[j] = false;
				}
				this.audioController = false;
			}

			if (this.movieController) {
				this.movieController.SetURL(item.movieUrl);
			} else if (AC.Detector.isMobile()) {
				this.displayPanel.innerHTML = '';
				this.displayPanel.appendChild(Builder.node('img', {src:item.posterFrame, alt:'', border:''}));
			}

			this.descriptionPanel.innerHTML = item.description.innerHTML;
			this.movieLinks(item, i);
			this.fixAudioLinks();

			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)
	},

 	fixAudioLinks: function() {
		var moviewidth = 142;
		var movieheight = 60;

 		var links = Element.getElementsByClassName(this.descriptionPanel, 'overlayaudiolink');
 		if (links.length>0) this.audioController = [];
 		
 		for (var i=0; i<links.length; i++) {
 			var item = links[i];
 			item.movieUrl = item.href;

			var movie = AC.Quicktime.packageMovie('overlayaudiomovie'+1, item.movieUrl, {
				width: moviewidth,
				height: movieheight,
				controller: false,
				autoplay: false,
				showlogo: false,
				cache: true
			});
			Element.up(links[i], 'li').appendChild(movie);

			this.audioController[i] = new AC.QuicktimeController();
			this.audioController[i].attachToMovie(movie, {
				onMovieFinished: function() {
					this.track(this.currentItem, 'End');
				}.bind(this)
			});
			this.audioController[i].monitorMovie();

 			Event.observe(links[i], 'click', function(evt, item) {
 				Event.stop(evt);

				// for tracking
 				this.currentItem = item;

				// set the audio clip
				if (this.audioController[i]) {
					if (!this.audioController[i].isPlaying()) {
						this.audioController[i].Play();
						this.track(item, 'Start');
					}
				}
 			}.bindAsEventListener(this, links[i], i));

			// for IE
			var movie = null;
 		}
 	},

 	packageMovie: function(item, i) {
		if (AC.Detector.isMobile()) {
			this.displayPanel.appendChild(Builder.node('img', {src:item.posterFrame, alt:'', border:''}));
		} else {

			if (AC.Detector.isQTInstalled()) {
				var moviewidth = 640;
				var movieheight = 416;
	
				var movie = AC.Quicktime.packageMovie('overlayvrmovie', item.movieUrl, {
					width: moviewidth,
					height: movieheight,
					controller: true,
					showlogo: false,
					background: '#ffffff',
					cache: true
				});
				this.displayPanel.appendChild(movie);

				this.movieController = new AC.QuicktimeController();
				this.movieController.attachToMovie(movie);
			}
	
			// for IE
			var movie = null;
		}
 	},
 	
	handleAfterPop: function(evt) {
		// movie
		var item = evt.event_data.data.item;
		var i = evt.event_data.data.i;
		this.packageMovie(item, i);
		this.descriptionPanel.innerHTML = item.description.innerHTML;
		this.movieLinks(item, i);
		this.fixAudioLinks();	
	},
	
	handleBeforeClose: function(evt) {
		// stop the movie and unplug the controllers
		if (this.audioController && this.audioController.length>0) {
			for (var i=0; i<this.audioController.length; i++) {
				if (this.audioController[i].isPlaying()) this.audioController[i].Stop();
				this.audioController[i].detachFromMovie();
				this.audioController[i] = false;
			}
			this.audioController = false;
		}

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

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

		this.descriptionPanel.innerHTML = '';

	}
});



AC.HTMLOverlay = Class.create();
Object.extend(AC.HTMLOverlay.prototype, AC.Overlay.prototype);
Object.extend(AC.HTMLOverlay.prototype, {

	overlayId: 'ACOverlayHTML',
	overlayShadowId: 'ACOverlayHTMLShadow',
	overlayShadowSrc: 'http://images.apple.com/la/global/elements/overlay/overlay_movieshadow20070807.png',
	
	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);
 			
		}
		
		this.listenForEvent(this, 'afterPop', false, function(evt) {
			this.handleAfterPop(evt);			
		}.bindAsEventListener(this));
		
		this.listenForEvent(this, 'beforeClose', false, function(evt) {
			this.handleBeforeClose(evt);
		}.bindAsEventListener(this));
	},
	
	handleAfterPop: function(evt) {
		// reset content
		var item = evt.event_data.data.item;
		var i = evt.event_data.data.i;
		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);
 	}
});