if (typeof PImage == "undefined") {

	var pgallery_stopclick = function(e) {
	    Event.stop(e);
	};
	
	var loadingDiv = new Element('div', {
		'style': 'width: 500; padding-top: 158px; padding-bottom: 159px;text-align: center; border: 1px solid #999;'
	});
	var loadingImage = new Image();
	loadingImage.src = 'http://www.posterous.com/images/loading.gif';
	loadingImage.width = 16;
	loadingImage.height = 16;
	Element.extend(loadingImage).setAttribute('id', 'mainImage');
	Element.extend(loadingImage).setAttribute('style', 'border: none;');
	loadingDiv.appendChild(loadingImage);
	
	var PImage = Class.create({
		initialize: function(fields){
			this.url = fields['main'];
			this.width = fields['width'];
			this.height = fields['height'];
			
			this.largeUrl = fields['large'];
			this.largeWidth = fields['largeWidth'];
			this.largeHeight = fields['largeHeight'];
			
			if (fields['thumb'] == null) {	/* set default */
				this.thumbUrl = 'http://posterous.com/images/spacer.gif';
				this.thumbWidth = 36;
				this.thumbHeight = 36;
			} else {
				this.thumbUrl = fields['thumb'];
				this.thumbWidth = fields['thumbWidth'];
				this.thumbHeight = fields['thumbHeight'];
			}
			
			this.imageObj = Element.extend(new Image());
			this.imageObj.observe('load', this.imageLoaded.bindAsEventListener(this));
			this.imageObj.src = this.url;
			this.imageObj.width = this.width;
			this.imageObj.height = this.height;
			this.loaded = false;
			
			Element.extend(this.imageObj).setAttribute('id', 'mainImage')
		},
		imageLoaded: function(){
			this.loaded = true;
			if (this.loadCallback != null) {
				this.loadCallback(this.imageObj, this.loadCallback_meref);
				this.loadCallback = null;
			}
		},
		getMainImage: function(callback, callingObj){
			if (this.loaded == true) {
				callback(this.imageObj, callingObj);
				//  for test of loading div only
				//			callback(loadingDiv, callingObj);
			}
			else {
				callback(loadingDiv, callingObj);
				this.loadCallback = callback;
				this.loadCallback_meref = callingObj;
			}
		}
		
	})
	
	var PSlideGallery = Class.create({
		initialize: function(galleryDiv, urls){
			this.galleryDiv = galleryDiv;
			this.galleryDiv.innerHTML = '';	// clear nojs fallback html
			this.imageList = new Array();
			for (var i = 0; i < urls.length; i++) {
				this.imageList.push(new PImage(urls[i]));
			}
			this.idx = 0;
			this.generateGallery();
		},
		
		generateGallery: function(){
		
		
			var controlDiv = new Element('div', {
				'style': 'margin-bottom: 3px;'
			});
			
			var leftLink = new Element('a', {
				'href': '#',
				'onclick': 'return false;',
				'style': 'vertical-align: middle;'
			});
			var leftArrow = "<img src='/images/arrowleft.gif' border=0>";
			leftLink.innerHTML = leftArrow;
			controlDiv.appendChild(leftLink);
			
			var spacer = document.createTextNode(" ")
			controlDiv.appendChild(spacer);
			
			var rightLink = new Element('a', {
				'href': '#',
				'onclick': 'return false;',
				'style': 'vertical-align: middle;'
			});
			var rightArrow = "<img src='/images/arrowright.gif' border=0>";
			rightLink.innerHTML = rightArrow;
			controlDiv.appendChild(rightLink)
			
			this.labelSpan = new Element('span', {
				'class': 'galleryLabel'
			});
			this.labelSpan.innerHTML = "1 of " + this.imageList.length;
			controlDiv.appendChild(this.labelSpan);
			
			this.registerPrev(leftLink);
			this.registerNext(rightLink);
			
			this.galleryDiv.appendChild(controlDiv);
			
			
			// set up thumbnails
			var thumbDiv = new Element('div', {
				'style': 'margin-bottom: 2px'
			});
			this.galleryDiv.appendChild(thumbDiv);
			for (var i = 0; i < this.imageList.length; i++) {
				var img = this.imageList[i];
				if (img == null) // || img.thumbUrl == null)  handle null thumb
					continue;
				var thumbLink = new Element('a', {
					'href': '#',
					'onClick': 'return false;',
					'style': 'margin-right: 5px;'
				});
				var thumbImg = new Element('img', {
					'src': 		img.thumbUrl,
					'width': 	img.thumbWidth,
					'height': 	img.thumbWidth
				});
				thumbLink.appendChild(thumbImg);
				thumbDiv.appendChild(thumbLink);
				img.thumbLink = thumbLink;
				this.registerThumb(i, thumbLink);
				
				if (i == 0) {
					thumbLink.addClassName('gallerySelectedImage');
				}
				
			}
			
			// set up main
			this.mainLink = new Element('a', {
				'href': '#',
				'onclick': 'return false;'
			});
			Event.observe(this.mainLink, 'click', pgallery_stopclick, false);									
			this.mainImage = this.imageList[this.idx].imageObj;
			this.mainLink.appendChild(this.mainImage);
			this.galleryDiv.appendChild(this.mainLink);
			this.registerMainImage(this.mainImage);
			
		},
		registerThumb: function(idx, thumbLink){
			thumbLink.observe('mousedown', this.handleThumbClick.bindAsEventListener(this, idx));
			Event.observe(thumbLink, 'click', pgallery_stopclick, false);			
		},
		handleThumbClick: function(){
			var clickedIdx = $A(arguments)[1];
			this.setIndex(clickedIdx);
		},
		getCurrentPImage: function(){
			return this.imageList[this.idx];
		},
		registerMainImage: function(mainImage){
			if (this.clickHandler == null) {
				this.clickHandler = this.handleClick.bindAsEventListener(this);
			}
			mainImage.observe('mousedown', this.clickHandler);
		},
		unregisterMainImage: function(mainImage){
			mainImage.stopObserving('mousedown', this.clickHandler);
		},
		handleClick: function(){
			var current = this.getCurrentPImage();
			if (current.largeUrl != null) {
				var modal = Control.Modal.open(
					"<a href='#' onClick='Control.Modal.close();return false;'><img src='" + current.largeUrl + "'" +
					" width='" +
					current.largeWidth +
					"'" +
					" height='" +
					current.largeHeight +
					"'" +
					"></a>", 
					{ opacity: 0.6 });
			}
			
		},
		
		registerPrev: function(prevLink){
			prevLink.observe('mousedown', this.prevButtonClick.bindAsEventListener(this));
			Event.observe(prevLink, 'click', pgallery_stopclick, false);

			
		},
		prevButtonClick: function(){
			this.prev();
		},
		prev: function(){
			//		me.FadeEffect(me.mainImage);
			
			if (this.idx == 0) 
				this.setIndex(this.imageList.length - 1);
			else 
				this.setIndex(this.idx - 1);
			
			//		me.ShowEffect(me.mainImage);
		
		
		},
		registerNext: function(nextLink){
			nextLink.observe('mousedown', this.nextButtonClick.bindAsEventListener(this));
			Event.observe(nextLink, 'click', pgallery_stopclick, false);						
		},
		nextButtonClick: function(){
			this.next();
		},
		next: function(){
		
			//		me.FadeEffect(me.mainImage);
			
			if (this.idx == this.imageList.length - 1) 
				this.setIndex(0);
			else 
				this.setIndex(this.idx + 1);
			
			//		me.ShowEffect(me.mainImage);
		
		
		},
		setIndex: function(nextIndex){
		
			if (this.imageList[nextIndex].thumbUrl != null) {
				this.imageList[this.idx].thumbLink.removeClassName('gallerySelectedImage');
				this.imageList[nextIndex].thumbLink.addClassName('gallerySelectedImage');
			}
			this.idx = nextIndex;
			this.labelSpan.innerHTML = (this.idx + 1) + " of " + this.imageList.length;
			
			this.imageList[this.idx].getMainImage(this.setMainImage, this);
			
		},
		setMainImage: function(nextImage, me){
			if (me == null) 
				me = this;
			me.unregisterMainImage(me.mainImage);
			//		new Effect.SwapImage(me.mainImage, nextImage, { queue: 'end'});		
			Element.extend(me.mainImage).replace(nextImage);
			me.mainImage = nextImage;
			me.registerMainImage(me.mainImage);
		}
		//	,
		//   FadeEffect: function (element){
		//       new Effect.Opacity(element, 
		//       {duration:0.4, from:1.0, to:0.0, queue: 'end'});
		//   },
		//   ShowEffect: function(element){
		//       new Effect.Opacity(element, 
		//       {duration:0.4, from:0.0, to:1.0, queue: 'end'});
		//   }
	
	});
	

	
}