PopupGallery = Class.create();
PopupGallery.prototype = {
	controller: null,

 	initialize: function(items) {
		this.items = items;

		if (this.items.length>0) {
			this.createPopup();
			this.setDefaults();
			this.setItemAttributes();
		}
	},

	order: 0,

	track: function(item, state) {
		
		if (typeof(s_gi) == 'undefined' || !s_gi) {
			return;
		}

		if (typeof(s_account) == 'undefined' || !s_account) {
			return;
		}

		if (state == "Start") {
			this.order++;
		}
		
		s = s_gi(s_account);

		s.prop4 = "";
		s.g_prop4 = "";
		s.prop6 = "";
		s.g_prop6 = "";
		s.pageName = "";
		s.g_pageName = "";
		s.pageURL = "";
		s.g_pageURL = "";
		s.g_channel = "";

		var movieName = item.movieUrl.match(/([^\/]+)\.mov$/)[1];
		var tracking = "Tour - iLife - " + movieName + " " + state;

		// try {console.debug(tracking, this.order);} catch(e) {}

		s.linkTrackVars="prop4,prop6,prop13,prop14";
		s.prop4 = item.movieUrl;
		s.prop6 = tracking;
		s.prop13 = tracking;
		s.prop14 = this.order;
		s.tl(this,'o','iLife Movies');
		
	},

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

		this.popupimg = Builder.node('img', {'class':'popupimg', border:0});
		this.popupnav = Builder.node('div', {'class':'popupnav'});

		this.popup = Builder.node('div', {'id':'popup', 'class':'popup'}, [
			this.closeBtn,
			this.popupimg,
			this.popupnav
		]);
		
 		this.popupshadow = Builder.node('div', {id:'popupshadow', 'class':'popupshadow'}, [
 			Builder.node('img', {src:'/ilife/images/popup_shadow20070807.png', alt:'', border:0})
 		]);

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

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

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

 	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 = item.down().alt;
			item.img.alt = item.img.alt.replace(/: click to enlarge/i, '');

			item.nav = this.getNav(item);

			item.trackClick = function() {
				clickTracking(this.img.src, AC.Tracking.pageName() +' - '+ this.img.src);
			}

 			this.setEvent(item, i);
 		}

	},

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

 	onClick: function(evt, item, i) {
 		// store the small size and position for later
		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.width = (item.offsetWidth>80) ? 80 : item.offsetWidth;
		this.height = item.offsetHeight;
		this.top = evt.pageY || evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
		this.top -= this.height/2;
		
		if (AC.Detector.isiPhone()) {
		    this.left = 3;
			this.top = 200;
		}
		
		// stop the default event
 		Event.stop(evt);

		// track this click
	 	if (item.trackClick) item.trackClick();

		// do the image
		this.prepPop(evt, item, i);
 	},

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

 		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.popupnav.innerHTML = '';

		// set up the nav
		this.popupnav.appendChild(item.nav);
 		var items = $$('.'+this.popupnav.className+' .'+'popupthumb');
 		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.popupnav.className+' .'+'popupthumb');
 		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.popupimg.src = clicked.href;
 		this.popupimg.alt = clicked.down().alt.replace(/: click to enlarge/i, '');

		// track the click
		clickTracking(clicked.href, AC.Tracking.pageName() +' - '+ clicked.href);
 	},

	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(evt, item, i) {
		// set the source for image in the popup
 		this.popupimg.src = item.img.src;
 		this.popupimg.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);
	},

 	beforePop: function() {
		Element.addClassName(this.popup, 'isanim');
		Element.addClassName(this.popupshadow, 'isanim');
 	},

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

		this.popup.style.height = this.height+'px';
		this.popupshadow.style.height = this.height+'px';

		this.popup.style.left = this.left+'px';
		this.popupshadow.style.left = this.left+'px';

		this.popup.style.top = this.top+'px';
		this.popupshadow.style.top = this.top+'px';

		Element.setOpacity(this.popup, 0);
		Element.setOpacity(this.popupshadow, 0);

		if (!AC.Detector.isiPhone()) {
			// do the craziness
			new Effect.Parallel([
					new Effect.MoveBy(this.popup, top-this.top, left-this.left, { sync:true }), 
					new Effect.MoveBy(this.popupshadow, top-this.top, left-this.left, { sync:true }), 
					new Effect.Scale(this.popup, (width/this.width)*100, { sync:true, scaleY:false, scaleContent:false }),
					new Effect.Scale(this.popupshadow, ((width+this.padleft+this.padleft)/this.width)*100, { sync:true, scaleY:false, scaleContent:false }),
					new Effect.Scale(this.popup, (height/this.height)*100, { sync:true, scaleX:false, scaleContent:false }),
					new Effect.Scale(this.popupshadow, ((height+this.padtop+this.padbottom)/this.height)*100, { sync:true, scaleX:false, scaleContent:false }),
					new Effect.Appear(this.popup, { sync:true }),
					new Effect.Appear(this.popupshadow, { 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) {
		Element.removeClassName(this.popup, 'isanim');
		Element.removeClassName(this.popupshadow, 'isanim');
		Element.addClassName(this.popup, 'popped');
		Element.addClassName(this.popupshadow, 'popped');

		this.popup.style.width = '';
		this.popupshadow.style.width = '';

		this.popup.style.height = '';
		this.popupshadow.style.height = '';

		Element.setOpacity(this.popup, '');
		Element.setOpacity(this.popupshadow, '');
 	},

 	beforeClose: function() {
		Element.addClassName(this.popup, 'isanim');
		Element.addClassName(this.popupshadow, 'isanim');
 		Element.removeClassName(this.popup, 'popped');
 		Element.removeClassName(this.popupshadow, 'popped');
 	},

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

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

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

 	afterClose: function() {
		Element.removeClassName(this.popup, 'isanim');
		Element.removeClassName(this.popupshadow, 'isanim');

		// reset everything
		this.popup.style.width = '';
		this.popupshadow.style.width = '';

		this.popup.style.height = '';
		this.popupshadow.style.height = '';

		this.popup.style.left = '';
		this.popupshadow.style.left = '';

		this.popup.style.top = '';
		this.popupshadow.style.top = '';

		this.popup.style.display = '';
		this.popupshadow.style.display = '';

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

}