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

	controller: null,

 	initialize: function(itemClass) {
 		this.trigger = itemClass;
		this.items = $$('.'+this.trigger);
		
		if (this.items.length>0) {
			this.createPopup();
			this.setDefaults();
			this.setItemAttributes();
		}
	},

 	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:'images/popup/popup_black_shadow.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);

 			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.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.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.afterClose();

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

 	getNav: function(item) {
 		var wrapper = item.up('ul');
 		var siblings = wrapper.getElementsByClassName(this.trigger);
 		
 		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+' .'+this.trigger);

 		for (var j=0; j<items.length; j++) {
 			Event.observe(items[j], 'click', this.swapImage.bindAsEventListener(this, items[j], i))
		}
	},

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

 		var items = $$('.'+this.popupnav.className+' .'+this.trigger);
 		for (var j=0; j<items.length; j++) {
 			if (items[j].href==item.href) {
 				var clicked = items[j];
		 		Element.addClassName(clicked, 'active');
 			} else {
	 			Element.removeClassName(items[j], 'active')
	 		}
 		}

 		this.popupimg.src = clicked.href;
 		this.popupimg.alt = clicked.down().alt.replace(/: click to enlarge/i, '')
 	},

	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(942);
			height = parseInt(1212);
		}

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

 	setPopPosition: function(width, top, height, left) {
		// 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(item, i) {
		Element.addClassName(this.popup, '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);

		// 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, scaleMode:{ originalWidth:this.width, originalHeight:this.height }, scaleY:false, scaleContent:false }),
				new Effect.Scale(this.popupshadow, ((width+this.padleft+this.padleft)/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.Scale(this.popupshadow, ((height+this.padtop+this.padbottom)/this.height)*100, { sync:true, scaleMode:{ originalWidth:this.width, originalHeight:this.height }, scaleX:false, scaleContent:false }),
				new Effect.Appear(this.popup, { sync:true }),
				new Effect.Appear(this.popupshadow, { sync:true })
			],
			{ duration:.2, beforeStart:this.beforePop.bind(this, item, i), afterFinish:this.afterPop.bind(this, item, i) }
		);
	},

 	afterPop: function(item, i) {
		Element.removeClassName(this.popup, 'isanim');
		Element.addClassName(this.popup, '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.removeClassName(this.popup, '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;

		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, scaleMode:{ originalWidth:width, originalHeight:height }, scaleY:false, scaleContent:false }),
			new Effect.Scale(this.popupshadow, (this.width/(width+this.padleft+this.padleft))*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.Scale(this.popupshadow, (this.height/(height+this.padtop+this.padbottom))*100, { sync:true, scaleMode:{ originalWidth:width, originalHeight:height }, 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) });
	},

 	afterClose: function(item, i) {
		Element.removeClassName(this.popup, '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);
 	}

}

Event.observe(window, 'load', function() {
	new PopupGallery('popupthumb');
}, false);