if (typeof(AC) == "undefined") { AC = {}; }


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);
 		
 		
 		// dispatch beforePop in case anything needs to be closed
 		this.dispatchEvent('beforePop', this);
 		
 		// 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.isiPhone()) {
			this.left = 3;
			this.top = 200;
		}	
	},

	windowSize: function() {
		var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
		var height = window.innerHeight || (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);
		
		if(AC.Detector.isiPhone()) {
			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+'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.isiPhone()) {
			// 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.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 (!AC.Detector.isiPhone()) {
			// 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
		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.ImageOverlay = Class.create();
Object.extend(AC.ImageOverlay.prototype, AC.Overlay.prototype);
Object.extend(AC.ImageOverlay.prototype, {

	overlayId: 'ACOverlayImage',
	overlayShadowId: 'ACOverlayImageShadow',
	overlayShadowSrc: 'img/overlay_shadow.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');
 		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).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();
Object.extend(AC.MovieOverlay.prototype, AC.Overlay.prototype);
Object.extend(AC.MovieOverlay.prototype, {
	movieController: false,

	overlayId: 'ACOverlayMovie',
	overlayShadowId: 'ACOverlayMovieShadow',	
	overlayShadowSrc: 'img/overlay_shadow.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;
	
	},

	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 : 800;
//		var movieheight = (this.options.movieheight) ? this.options.movieheight : 600;
		var moviewidth = 800;
		var movieheight = 618;

		this.currentItem = item;

		// if we're Opera, set this flag (in essence now) to true
		if (AC.Detector.isiPhone()) 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();
//			}
//		}
		
		if (AC.Detector.isFlashInstalled()) {
			var movie = AC.Flash.packageMovie('overlaymovie', item.movieUrl, {
				width: moviewidth,
				height: movieheight,
				posterFrame: item.posterFrameUrl,
				controller: controllerstatus,
				showlogo: false,
				background: '#ffffff',
				cache: true,
				flashvars: 'autostart=true',
				allowFullScreen: true
			});
			this.displayPanel.appendChild(movie);			
		} else {
			this.displayPanel.innerHTML = '<p style="padding: 5px;">Macromedia Flash plugin is not installed. If you want to see this video, please install Macromedia Flash plugin. It is avaliable <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&P2_Platform=Win32" onclick="window.open(this.href);return false;">here</a></p>';			
		}
		
		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: 'img/overlay_movieshadow_nav.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);
 	}
});
