function rel_to_abs(base, url) {
	if(url.match(/^(\w+:)?\//))
		return url;
	return base.replace(/\/+$/,'')+'/'+url;
}

function clear_element(element) {
	while (element.firstChild) 
	{
		//The list is LIVE so it will re-index each call
		element.removeChild(element.firstChild);
	}
 }


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

 	initialize: function(base, items, navClass, infoDiv) {
		this.pageitems = items;
 		this.trigger = navClass;
		this.infoDiv=infoDiv;
		this.onWindowResize=this.setPopPositionXOnly.bindAsEventListener(this);
		this.onKeyDown=this.handleKeyDown.bindAsEventListener(this);
		this.closeOnPageClick=this.close.bindAsEventListener(this);
		this.closeButtonHandler=this.close.bindAsEventListener(this);
		this.galleryBase=base;

		if (!base && this.pageitems.length>0) {
			this.galleryBase = items[0].href.replace(/\/[^\/]+$/,'');
		}
		
		 this.loadGalleryData();
	},

	order: 0,
	
	loadGalleryData: function() {
		var thisdate = new Date();  // cache buster
		var url=rel_to_abs(this.galleryBase,'gallery-index.json?'+thisdate.getTime());
		new Ajax.Request(url, { 
			method:'get' ,
			onSuccess: this.loadGalleryDataOnSuccess.bind(this),
			onFailure: function() {
				window.status="Could not load gallery data from "+url;
				if(this.infoDiv)
					this.infoDiv.innerHTML="Could not load gallery data from "+url;
			}
		});
		
	},
	
	loadGalleryDataOnSuccess: function(transport) {
     			var json = transport.responseText.evalJSON();
				this.items = json.items;
				
				/*var s="";
				for(i = 0; i <= this.items.length; i++) {
					for (j in this.items[i])
						s += (i+" "+j+": "+ this.items[i][j] +"\n");
					s+="\n";
				}
				alert(s+transport.responseText);*/
				this.defaultByline = json.defaultByline||'';
     			this.createPopup();
				this.setDefaults();
				this.setItemAttributes();
				
				if(this.infoDiv) {
				
					clear_element(this.infoDiv); ;
					var desc=Builder.node('p');
					desc.innerHTML=json.description;
					var items = [Builder.node('h3','Gallery')];
					for(var i=0; i<3 && i< this.items.length; i++) {
						var navlink = Builder.node('a', {'href': rel_to_abs(this.galleryBase,this.items[i].src) , 'class': 'popupthumb'}, 
						Builder.node('img', {'src': rel_to_abs(this.galleryBase,this.items[i].thumbnail),
							'alt': this.items[i].title
							} )
						);
						this.setEvent(navlink, i);
						items.push( navlink );
					}
					var list=[
						Builder.node('div',{'class':'inl-gallery'},items)
					];
					if(json.links) {
						for(var i=0; i<json.links.length; i++) {
							list.push( Builder.node('a', {href:rel_to_abs(this.galleryBase,json.links[i].link), 'class':'more'}, json.links[i].title));
						}
					}
					var table = Builder.node('table', {'class':'galleryinfo'},
						Builder.node('tbody', 
							Builder.node('tr', [
								Builder.node('td', [
									Builder.node('h2',json.title),
									desc
								]),
								Builder.node('td', list )])));
												
					this.infoDiv.appendChild(table);

				}
   	},

 	createPopup: function() {
	
		if(!PopupGallery.popup) {
			PopupGallery.popup={};
			PopupGallery.popup.closeBtn = Builder.node('a', {href:'#close', 'class':'close'}, 'Close');

			PopupGallery.popup.popupimgnode = Builder.node('td');
			PopupGallery.popup.popuptitle = Builder.node('th', {});
			PopupGallery.popup.popupnav = Builder.node('td', {'class':'popupnav'});
			PopupGallery.popup.popupbyline = Builder.node('td', {'class':'byline'});
			// Yes we center using plain old table tricks.... no room for CSS purists in UTech
			PopupGallery.popup.popupcontents = Builder.node('table', {'class':'popupcontents' }, [ 
				Builder.node('thead', [
					Builder.node('tr', PopupGallery.popup.popuptitle)
				]),
				Builder.node('tbody', [
					Builder.node('tr',PopupGallery.popup.popupimgnode),
					Builder.node('tr', PopupGallery.popup.popupbyline),
					Builder.node('tr', PopupGallery.popup.popupnav )
				])
			]);
			

			PopupGallery.popup.popup = Builder.node('div', {'id':'gallery', 'class':'gallery'}, [
				PopupGallery.popup.closeBtn,
				PopupGallery.popup.popupcontents
			]);
			
			PopupGallery.popup.popupshadow = Builder.node('div', {id:'gallery-shadow', 'class':'gallery-shadow'}, [
				Builder.node('img', {src:Browser.SiteRoot()+'/images/gallery_back.png', alt:'', border:0, 'class':'pngfix'})
			]);

			Event.observe(PopupGallery.popup.popup, 'click', this.eatEvent.bindAsEventListener(this));
			document.body.appendChild(PopupGallery.popup.popupshadow);
			document.body.appendChild(PopupGallery.popup.popup);
		}

		this.closeBtn = PopupGallery.popup.closeBtn;
		this.popupimgnode = PopupGallery.popup.popupimgnode;
		this.popuptitle = PopupGallery.popup.popuptitle;
		this.popupnav = PopupGallery.popup.popupnav;
		this.popupbyline = PopupGallery.popup.popupbyline;
		this.popupcontents = PopupGallery.popup.popupcontents;
		this.popup = PopupGallery.popup.popup;
 		this.popupshadow = PopupGallery.popup.popupshadow;
		

 	},

 	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 = rel_to_abs(this.galleryBase,item.src);
			item.img.alt = item.title;

			item.nav = this.getNav(i);

 		}
 		for (var i=0; i<this.pageitems.length; i++) {
 			var pageitem = this.pageitems[i]; 
			this.setEvent(pageitem, i);
 		}

	},

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

 	eatEvent: function(evt) {
		// stop the default event
 		Event.stop(evt);
	},
	
 	onClick: function(evt, i) {
		this.width = 80;
		this.height = 80;

 		// 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.top = 80 - this.height;
		this.top = evt.pageY || evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
		this.top -= this.height/2;		
		
		if (Browser.IsiPhone()) {
		    this.left = 3;
			this.top = 200;
		}
		
		// stop the default event
 		Event.stop(evt);

		// do the image
		this.prepPop(evt, i);
 	},
	
	handleKeyDown: function(evt) {
		var code;
		if (evt.keyCode) code = evt.keyCode;
		else if (evt.which) code = evt.which;

		if(code == 32 || code==39 || code==40) { // space, right and down arrow : next image
			var next=this.active + 1;
			if (next >= this.items.length)
				next = 0;
			this.swapImage(evt,next);
		}
		else if(code==37 || code==38) { // left and up arror : previous image
			var next=this.active - 1;
			if (next < 0)
				next = this.items.length-1;
			this.swapImage(evt,next);
		}
		else if(code>=48 && code<58) { // number key: show image having the number selected. 0 is the 10th image
			var next=code-49;
			if (next < 0) next=9;
			if (next >= this.items.length)
				next = this.active;
			this.swapImage(evt,next);
		}
		else	// any other key closes the window
			this.close();
 	},

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

 			var navlink = Builder.node('a', {'href': rel_to_abs(this.galleryBase,this.items[i].src) }, 
 				Builder.node('img', {'src': rel_to_abs(this.galleryBase,this.items[i].navigation),
 					'alt': this.items[i].title
 					} )
 			);
 			if (index == i) Element.addClassName(navlink, 'active');
			Event.observe(navlink, 'click', this.swapImage.bindAsEventListener(this, i))
			items.push( navlink );
 		}

		var list = Builder.node('div', {'class':'w'+items.length}, items);
		
 		return list;
 	},

	setNav: function(i) {
		//this.popupnav.innerHTML = '';
		clear_element(this.popupnav);

		// set up the nav
		this.popupnav.appendChild(this.items[i].nav);
	},

 	swapImage: function(evt, j) {
		Event.stop(evt);
		// swap the nav
 		this.setNav(j);

		this.setImage(j);
 	},
 	
 	setImage: function(i) {
		if(this.active == i) return;
		Element.setOpacity(this.popupimgnode, 1); // Setting opacity to 1 fixes a render glitz in Firefox where the page text is drawn on top of the popup background
		
		clear_element(this.popupimgnode);
		this.active=i;
		var selected = this.items[i];
		// swap the image		
		this.popupimgnode.appendChild(Builder.node('img',{
			'src' : selected.img.src,
			'alt' : selected.title
		}));
		this.popuptitle.innerHTML=selected.title;
		this.popupbyline.innerHTML=selected.byline||this.defaultByline||'&nbsp;';
		
		Element.setOpacity(this.popupcontents, 1); // Again, a fix for the firefox render bug
 	},

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

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

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

 	setPopPositionXOnly: function() {
		// set the position/offset of the image
		var left = 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);

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

 	},
	
 	prepPop: function(evt, i) {
		// set the source for image in the popup
		this.setImage(i);

		// set up the nav
		this.setNav(i);
		
		// call the effect
		this.pop();
	},

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

 	pop: function(w) {

		this.setPopPosition();
		Event.observe(window, 'resize', this.onWindowResize);
		Event.observe(window, 'keydown', this.onKeyDown);
		Event.observe(window, 'click', this.closeOnPageClick);
		Event.observe(this.closeBtn, 'click', this.closeButtonHandler, false);
		
		Element.setOpacity(this.popup, 0);
		Element.setOpacity(this.popupshadow, 0);

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

 	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);
		Event.stopObserving(window, 'resize', this.onWindowResize);
		Event.stopObserving(window, 'keydown', this.onKeyDown);
		Event.stopObserving(window, 'click', this.closeOnPageClick);
		Event.stopObserving(this.closeBtn, 'click', this.closeButtonHandler);

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

};

GalleryLoader = Class.create();
GalleryLoader.prototype = {

 	initialize: function(galleries, target) {
		this.galleries=galleries;
		this.target=target;
		for(var i=0; i<this.galleries.length; i++) {
			var base=this.galleries[i].href;
			Event.observe(this.galleries[i], 'click', this.loadGallery.bindAsEventListener(this, base));
		}
	},
	
	loadGallery: function(evt, base) {
		Event.stop(evt);
		new PopupGallery(base, [], 'popupthumb', this.target);
	}


};

Event.observe(window, 'load', function() {
	var galleryLinks = $$('.gallery_link');
	if(galleryLinks.length > 0 ) 
		new GalleryLoader(galleryLinks,$('gallery-subpage'));
	
	var galleryItems = $$('.popupthumb');
	var galleries={};
	for (var i=0; i < galleryItems.length; i++) {
		var base=galleryItems[i].href.replace(/\/[^\/]+$/,'');
		if(! galleries[base] )
			galleries[base]=[];
		galleries[base].push(galleryItems[i]);
	} 
	
	// Each "base" shares a common gallery window:
	for( base in galleries ) {
		new PopupGallery(base, galleries[base], 'popupthumb');
	}
}, false);