var targetContent = -1;
	var contentDiv, infoDiv, picDiv, thumbsDiv, loadingMsg, lightbox, lightboxPic, lightboxPicImg;
	var morphFx, contentFadeFx, pAppearFx, infoFadeFx, loadingFx;
	var morphDuration = 0.1;
	var fadeInDuration = 0.5;
	var lightboxFadeInDuration = 0.2;
	var lightboxPicFadeInDuration = 0.3;
	var lightboxPicFadeInDelay = 0.1;
	var lightboxFadeOutDuration = 0.2;
	var fps=60;

	document.observe("dom:loaded", init);

	function thumbOn(tid) {
		
		var ElsA = $A($$('img.thumb.on'));
		ElsA.each( function(El){ Element.removeClassName(El, 'on') });
		
		var t = $('t'+tid);
		if (t) t.addClassName('on');

	}

	function closeLightbox(event) {
				
		
		lightboxPicFadeFx = new Effect.Fade(lightboxPic, { duration:lightboxFadeOutDuration, fps:fps });
		lightboxFadeFx = new Effect.Fade(lightbox, { duration:lightboxFadeOutDuration, fps:fps });
	
	}
	
	function pickImage(event)  {
		
		var loc = event.element();
		
		if ( loc.tagName == 'IMG' ) {
			
			if  ( loc.hasClassName('thumb') ) {

				// clicked on thumb - get thumb ID number 
				var thumbID = (loc.id).slice(1);
				
				// what's current pic?
				var pic = $('image').down('IMG');
				var picID = (pic.id).slice(1);
				
				if (picID!=thumbID) {
					targetContent = thumbID;
					contentDiv.fire("content:fade", { pic:pic, newContent:thumbID });
					thumbOn(thumbID);
				}

			} else if (  loc.hasClassName('pic') ) {

				/*
				// clicked on pic - get next ID number 
				var picID = (loc.id).slice(1);
				var thumbID = parseInt( picID ) + 1;
				
				// whats the highest thumb ID here? ... (wont work with old pages style)              
				var lastThumbID =  thumbsDiv.descendants().size()-1;

				if (thumbID>lastThumbID) thumbID = 1;
				
				targetContent = thumbID;
				contentDiv.fire("content:fade", { pic:loc, newContent:thumbID });
				thumbOn(thumbID);
				*/
				
				lightboxFadeFx = new Effect.Appear(lightbox, { duration:lightboxFadeInDuration, fps:fps, to:0.8 });
				lightboxPicFadeFx = new Effect.Appear(lightboxPic, { duration:lightboxPicFadeInDuration, delay:lightboxPicFadeInDelay, fps:fps });
				
			}
		}
	}
	
	

	function noJS(){
		var Els = $$('.noJS');
		var ElsA = $A(Els);
		ElsA.each( function(El){ El.replace(El.innerHTML); });
	}

	function init() {
		noJS();

		//$('imageNav').observe ('click', pickGroup)
		
		infoDiv = $("info");
		picDiv = $("image");
		contentDiv = $("content");
		contentDiv.observe ('click', pickImage);
		thumbsDiv = $("thumbs");
		
		picDiv.insert ( new Element('p', { 'id':'loading' }).update("loading..."));
		loadingMsg = $("loading");
		loadingMsg.setOpacity(0);
		
		lightboxPic = $("lightboxPic");
		lightbox = $("lightbox");
		lightboxPicImg  = $("lightboxPicImg");
		lightboxPic.observe ('click', closeLightbox);
	
		// fade stuff in and out
	   
		contentDiv.observe("content:fade", function(event) {

			var pic = event.memo.pic;
			var dimensions = pic.getDimensions();

			infoFadeFx = new Effect.Fade (infoDiv, { duration:0.1,  fps:fps });
			
			contentFadeFx = new Effect.Fade (pic, { duration:0.1, fps:fps, afterFinish:function(){
				contentDiv.fire("content:morph", { pic:pic, newContent:event.memo.newContent });
			}});

		});

		// size morph

		contentDiv.observe("content:morph", function(event) {
			
			//if (morphFx) morphFx.cancel();
			//if (contentFadeFx) contentFadeFx.cancel();

			var info = works[event.memo.newContent-1];
			
			var w = info[2];
			var h = info[3];
			$('name').update(info[0]);
			$('date').update(info[4]);
			$('media').update(info[5]);
			$('size').update(info[6]);
			
			if (info.length>7) $('extra').update(info[7]); else $('extra').update('');
			
			morphFx = new Effect.Morph(picDiv,{style: 'width:'+w+'px;height:'+h+'px', duration:morphDuration, fps:fps, afterFinish:function(){
				contentDiv.fire("content:new", { w:w, h:h, pic:event.memo.pic, newContent:event.memo.newContent  });
			}});
		});   


		contentDiv.observe("content:new", function(event) {
			
			var iPath = ((((document.URL).split('#'))[0]).split('?'))[0];
			var iSrc = iPath+'images/'+works[event.memo.newContent-1][1]+".jpg";
			var aSrc = iPath+'images-fullsize/'+works[event.memo.newContent-1][1]+".jpg";
			
			var pic = event.memo.pic;
			pic.id="p"+event.memo.newContent;
			
			
			
			lightboxPicImg.src = aSrc;
			
			// hack to work out offset of vert floater
			
			var lightBoxHeightOffset=0;
			
			if (event.memo.h > event.memo.w)
				lightBoxHeightOffset = -400;
			else 
				lightBoxHeightOffset = ((event.memo.h/event.memo.w) * 900) * -0.5

			lightboxPic.down().setStyle({ marginTop: (lightBoxHeightOffset-5)+"px" });
			    
			
			if (pic.src == iSrc) {

				pic.style.width=event.memo.w+"px";
				pic.style.height=event.memo.h+"px";
				
				infoFadeFx = new Effect.Appear(infoDiv, { duration:fadeInDuration, fps:fps });     
				
				contentFadeFx = new Effect.Appear(pic, { duration:fadeInDuration, fps:fps, afterFinish:function(){         
					//contentDiv.fire("image:loading", { loaded: true });
				}});

			} else { 

				pic.src = iSrc;
				contentDiv.fire("image:loading", { loaded: false });

				pic.onload = function(){ 
				    
					// just in case this is no longer the right image...
					
					if (event.memo.newContent == targetContent) {
					
						pic.style.width=event.memo.w+"px";
						pic.style.height=event.memo.h+"px";
						
						infoFadeFx = new Effect.Appear(infoDiv, { delay:0.1, duration:fadeInDuration, fps:fps });     
						
						contentFadeFx = new Effect.Appear(pic, { delay:0.1, duration:fadeInDuration, fps:fps, beforeStart:function(){
							contentDiv.fire("image:loading", { loaded: true });
						}});
					}
				}   
			}

		});
		
		// loading thang

		document.observe("image:loading", function(event) {

			if (loadingFx) loadingFx.cancel();
			
			if (event.memo.loaded) {
				loadingFx = new Effect.Fade(loadingMsg,{ delay:0.0, duration:0.1, fps:fps });
			} else {
				loadingFx = new Effect.Appear(loadingMsg,{ delay:0.0, duration:0.5, fps:fps }); 
			}

		}); 

	}