PopupMovie = Class.create();
PopupMovie.prototype = {
	defaultImageWidth: 980,
	previous: null,
	next: null,
	items: [],

 	initialize: function(containerId, trigger2) {
 		this.container = $(containerId);
 		this.trigger2 = $(trigger2);

		if (this.container) {
			this.createPopup();
			this.setMovAttributes();
		}

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

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

		this.descriptionPanel = Builder.node('div', {'class':'description'});
		this.displayPanel = Builder.node('div', {'class':'movie'});
		this.controllerPanel = Builder.node('div', {'class':'moviecontroller'});
		var middle = [this.descriptionPanel, this.displayPanel, this.controllerPanel];
		
 		this.popup = Builder.node('div', {id:'popup'}, [
 			Builder.node('div', {'class':'topleft'}),
 			Builder.node('div', {'class':'top'}, [
	 			Builder.node('div', {'class':'topmiddlecap'}, [this.closeBtn]),
	 			Builder.node('div', {'class':'topleftcap'}),
	 			Builder.node('div', {'class':'toprightcap'})
 			]),
 			Builder.node('div', {'class':'topright'}),
 			Builder.node('div', {'class':'left'}),
 			Builder.node('div', {'class':'middle'}, middle),
 			Builder.node('div', {'class':'right'}),
 			Builder.node('div', {'class':'bottomleft'}),
 			Builder.node('div', {'class':'bottom'}),
 			Builder.node('div', {'class':'bottomright'})
 		]);

 		document.body.appendChild(this.popup, document.body.firstChild);
 	},

 	setMovAttributes: function() {
		var item = this.container.getElementsByClassName('watch')[0];

		this.movieUrl = item.href;
		this.description = item.parentNode.getElementsByClassName('description')[0];

		this.setEvent();
	},

 	setEvent: function() {
		Event.observe(this.container, 'click', this.onClick.bindAsEventListener(this), false);
		Event.observe(this.trigger2, 'click', this.onClick.bindAsEventListener(this), false);
	},

	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);
		return {'width':width, 'height':height, 'x':x, 'y':y}
	},

 	showDemo: function() {
 		for (var i=0; i<this.items.length; i++) {
 			if (Element.hasClassName(this.items[i].parentNode, 'demo')) {
 				var index = i;
 				var item = this.items[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 (item.movieUrl && item && typeof(index)=='number') {
			this.popMovie(null, item, index);
 		}
 	},

 	onClick: function(evt) {
		var item = this.container;
		// store the small size and position for later
		this.width = item.offsetWidth;
		this.left = evt.pageX || evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
		this.left -= this.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;

		// stop the default event
 		Event.stop(evt);

		// unset the click events
		this.resetMovie();
		this.afterClose();

		// call the pop
		this.popMovie();
 	},

 	popMovie: function() {
 		var item = this.container;

		// we're the movie so look like it
 		Element.addClassName(this.popup, 'video');
 		
		// movie size
		var width = 980;
		this.padleft = (this.popup.offsetWidth-width);
		var height = 488;
		this.padtop = (this.popup.offsetHeight-height);

		// if we're Opera, use the standard movie controller, otherwise attach movie controller
		var movieheight = 416;
		if (AC.Detector.isFirefox() || AC.Detector.isOpera()) {
			var controllerstatus = true;
			movieheight += 16;
	 		this.displayPanel.style.height = movieheight+'px';
		} else {
			var controllerstatus = false;
		}

		// set up what we're going to do after the effect
		var after = function() {
			Element.removeClassName(this.popup, 'isanim');
			Element.addClassName(this.popup, 'popped');

			// set the description
			this.descriptionPanel.innerHTML = this.description.innerHTML;

			if (AC.Detector.isQTInstalled()) {
				this.movieController = new AC.QuicktimeController();

				// initalize the movie
				var movie = AC.Quicktime.packageMovie('movie', this.movieUrl, {
					width: 672,
					height: movieheight,
					autoplay: true,
					controller: controllerstatus,
					cache: true
				});
				this.displayPanel.appendChild(movie);
	
				if (!AC.Detector.isFirefox() && !AC.Detector.isOpera()) { this.movieController.render(this.controllerPanel); }
				this.movieController.attachToMovie(movie);
				this.movieController.monitorMovie();
				
				var movie = null;
			} else {
				this.displayPanel.innerHTML = '<a href="/quicktime/download/"><img src="http://images.apple.com/safari/images/popup_quicktimerequired20070611.gif" alt="QuickTime 7 Required." width="672" height="438" border="0" class="getquicktime"></a>';
			}
		}.bind(this)

		// set the position of the image according to the height/width we just found
		var left = this.windowSize().x+(this.windowSize().width-width)/2;
		if (left<this.closeBtn.offsetWidth/2) left = this.closeBtn.offsetWidth/2;
		var top = this.windowSize().y+(this.windowSize().height-height)*.6;
		if (top<this.padtop/4) top = this.padtop/4;

		// call the effect
		this.pop(width, top, height, left, after);
 	},

 	pop: function(width, top, height, left, after) {
		// prep the popup for the effect
		this.popup.style.width = this.width+'px';
		this.popup.style.height = this.height+'px';
		this.popup.style.left = this.left+'px';
		this.popup.style.top = this.top+'px';

		this.popup.style.zIndex = '999';
 		Element.setOpacity(this.popup, 0);

		// do the craziness
		new Effect.Parallel([
				new Effect.MoveBy(this.popup, top-this.top, left-this.left, { sync:true }), 
				new Effect.Scale(this.popup, (width/this.width)*100, { sync:true, scaleMode:{ originalWidth:this.width, originalHeight:this.height }, scaleY:false, scaleContent:false }),
				new Effect.Scale(this.popup, (height/this.height)*100, { sync:true, scaleMode:{ originalWidth:this.width, originalHeight:this.height }, scaleX:false, scaleContent:false }),
				new Effect.Appear(this.popup, { sync:true })
			],
			{ duration:.2, beforeStart:function() { Element.addClassName(this.popup, 'isanim'); }.bind(this), afterFinish:after }
		);
	},

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

		var width = this.popup.offsetWidth - this.padleft;
		var left = this.popup.offsetLeft + this.padleft/2;
		var height = this.popup.offsetHeight - this.padtop/2;
		var top = this.popup.offsetTop + this.padtop/2;

		new Effect.Parallel([
				new Effect.MoveBy(this.popup, this.top-top, this.left-left, { sync:true }), 
				new Effect.Scale(this.popup, (this.width/width)*100, { sync:true, scaleMode:{ originalWidth:width, originalHeight:height }, scaleY:false, scaleContent:false }),
				new Effect.Scale(this.popup, (this.height/height)*100, { sync:true, scaleMode:{ originalWidth:width, originalHeight:height }, scaleX:false, scaleContent:false }),
				new Effect.Fade(this.popup, { sync:true })
			],
			{ duration:.3, beforeStart:this.resetMovie.bind(this), afterFinish:this.afterClose.bind(this) }
		);
	},

 	resetMovie: function(evt) {
 		Element.addClassName(this.popup, 'isanim');
 		Element.removeClassName(this.popup, 'popped');

		if (this.movieController) {
			this.movieController.Stop();
			this.movieController.detachFromMovie();
		}

		this.displayPanel.style.display = 'none';
		this.displayPanel.innerHTML = '';
		this.displayPanel.style.display = '';
		this.descriptionPanel.innerHTML = '';
		this.controllerPanel.innerHTML = '';
 	},

 	afterClose: function(evt) {
		// reset everything
		this.popup.style.width = '';
		this.popup.style.height = '';
		this.popup.style.left = '';
		this.popup.style.top = '';
		this.popup.className = '';

		this.popup.style.zIndex = '-10';
		this.popup.style.display = '';
		this.popup.style.visibility = '';
		Element.setOpacity(this.popup, '');
		
		if (AC.Detector.isWebKit()) {
			if (!this.scrollTo) this.scrollTo = 1;
			window.scroll(this.windowSize().x+this.scrollTo, this.windowSize().y+this.scrollTo);
			this.scrollTo = -this.scrollTo;
			window.scroll(this.windowSize().x+this.scrollTo, this.windowSize().y+this.scrollTo);
			this.scrollTo = -this.scrollTo;
		}
		
		this.resetVar();
 	},

 	resetVar: function(evt) {
		this.width, this.padleft, this.left, this.height, this.padtop, this.top, this.movieController = null;
 	}

}

Event.observe(window, 'load', function() {
	new PopupMovie('popupbutton', 'popupbutton2');
}, false);