var galleryViewerObject; 

function galleryViewer(images)
{
	this.galleryPictures={};//the pictures
	this.galleryIsSetUp=false;
	this.currentSelectedIndex=null;
	galleryViewerObject=this;
	this.config=
	{
		popupHeight:	300,
		popupWidth:		550,
		viewerWidth:	400,
		viewerHeight:	400,
		normalViewerHeight:	400,
		minViewerHeight:	250,
		viewerMargin: 	10,
		topMargin:		25,
		escapeOnKeyPress:		true,	//whether pressing escape key cancels gallery
		escapeOnClick:	true	//whether clicking on the grey area cancels the gallery
	}
	
	this.setupGallery=function()
	{
		overlay = $('<div></div>').prependTo($('body')).attr('id','gallery_overlay').hide();
		if(this.config.escapeOnClick) $(overlay).click(function(){galleryViewerObject.hideGallery();});

		container = $("<div id='gallery_container' style='margin-top:"+this.config.topMargin+"px; min-height:"+this.config.popupHeight+"px; width:"+this.config.popupWidth+"px;'><a id='gallery_close' alt='Close gallery' title='Close gallery' href='#' onclick='galleryViewerObject.hideGallery();return false;'></a><center><img src='/images/logos/logo_quality_products.jpg' width=380 height=80 style='margin-bottom:5px;'><table cellspacing=0 cellpadding=0><tr><td id='viewer' width='"+(this.config.viewerWidth+this.config.viewerMargin)+"' height='"+(this.config.viewerHeight+this.config.viewerMargin)+"' align=center ><img id='mainImage' class='rescaledImage' src=''></td></tr></table><div id='gallery_caption'></div><div id='gallery_thumbnails'></div></center></div>").prependTo($('body')).hide();
		$('#mainImage').bind("contextmenu",function(e){return false;});//remove context menu
		this.galleryIsSetUp=true;
		
	}
	
	this.preloadImages=function()
	{
		$('#gallery_caption').text("");
		jQuery.each(this.galleryPictures, function(i,img)
		{
			imgobj = new Image();
			imgobj.src=img.url;

			if(!galleryViewerObject.galleryPictures[i].width)//if we don't already have dims for this pic
			{
				$(imgobj).load(function()
				{
					galleryViewerObject.galleryPictures[i].width=this.width;
					galleryViewerObject.galleryPictures[i].height=this.height;
				});
			}
		});
	}
	
	this.setGalleryPictures=function(images, doPreload)//sets new set of pictures
	{
		if(doPreload==undefined)doPreload=true;
		this.galleryPictures=images;
		this.preloadImages();
	}
	this.reset = function()//removes main pic and thumbnails, ready for next set
	{
		$('#mainImage').attr("src","");
		$('#gallery_thumbnails').empty();
		$('#gallery_caption').empty();
	}
	
	this.checkPopupFitsInScreen=function()//read screen height, make a guess as to whether we need to shrink our image
	{
		est_contentHeight=190;//the content of the popup that's not the main pic ie thumnails, logo etc
		
		est_normalHeight=est_contentHeight+this.config.normalViewerHeight+this.config.topMargin;
		screenHeight=$(window).height();
		if(screenHeight<est_normalHeight)
		{
			topMargin=5;
			newPicHeight=Math.max(screenHeight-est_contentHeight-topMargin,this.config.minViewerHeight);
			$('#gallery_container').css("margin-top",topMargin);
			$('#viewer').attr({height:newPicHeight+this.config.viewerMargin});
			this.config.viewerHeight=newPicHeight;
		}
		else 
		{
			//reset margin
			//reset config picture height
			this.config.viewerHeight=this.config.normalViewerHeight;
			$('#gallery_container').css("margin-top",this.config.topMargin);
			$('#viewer').attr({height:this.config.viewerHeight+this.config.viewerMargin});
		}
	}
	
	this.showGallery=function(newImageSet)//sets gallery to visible and shows initial pic
	{
		if(! this.galleryIsSetUp) this.setupGallery();//creates gallery elements
		else this.reset();//clears the content of key gallery elements
		
		//check if we've been passed new pictures. If so, don't do preload because we're showing the thumbnails anyway
		if(arguments.length<1 || newImageSet.length<1) newImageSet=false;
		if(newImageSet) this.setGalleryPictures(newImageSet,false);
		
		if(this.galleryPictures.length <1) return;//we have no pictures
		
		this.checkPopupFitsInScreen();
		$('#gallery_overlay').show().css("height",$(document).height());
		$('#gallery_container').show().css("top",$(window).scrollTop());
		
		this.setPicture(0);
		jQuery.each(this.galleryPictures, function(i,img)
		{
			newImg = $("<img>").appendTo($('#gallery_thumbnails')).attr({"src":img.url,height:50,width:50}).hover(function(){$(this).toggleClass('currentlySelected');galleryViewerObject.swapPicture(i);},function(){$(this).toggleClass('currentlySelected')}).bind("contextmenu",function(e){return false;});
		});

		if(this.config.escapeOnKeyPress) $(document).keydown(function (e) {
			if(e.keyCode==27) galleryViewerObject.hideGallery();
		});
	}
	this.hideGallery=function()//hides the picture gallery & overlay
	{
		$('#gallery_overlay').hide();
		$('#gallery_container').hide();
		$(document).unbind('keypress');
	}
	
	this.setPicture=function(newPicIndex)//sets main pictures (end caption, etc)
	{	
		$('#mainImage').attr("src",galleryViewerObject.galleryPictures[newPicIndex].url);
		
		//set dimensions - set by height if we've got them, or constrain AFTER the image has loaded
		if(galleryViewerObject.galleryPictures[newPicIndex].width!=undefined)
		{
			newDims=galleryViewerObject.constrainXY(galleryViewerObject.galleryPictures[newPicIndex].width,galleryViewerObject.galleryPictures[newPicIndex].height);
			$('#mainImage').attr({width:newDims.width,height:newDims.height});
		}
		else $('#mainImage').unbind('load').load(function(){galleryViewerObject.maintainDimensions();});
		
		$('#gallery_caption').text(galleryViewerObject.galleryPictures[newPicIndex].caption);
		galleryViewerObject.currentSelectedIndex=newPicIndex;
	}
	this.swapPicture=function(newPicIndex)//handle transition from one pic to next
	{
		if(galleryViewerObject.currentSelectedIndex==newPicIndex) return;
		$('#mainImage').fadeOut(100,function(){
			galleryViewerObject.setPicture(newPicIndex);
			$('#mainImage').fadeIn(100);
		});
	}
	
	this.constrainXY=function(picWidth,picHeight)//utilitiy for determining best output dimensions
	{
		maxHeight=this.config.viewerHeight;
		maxWidth=this.config.viewerWidth;
		if(picHeight>maxHeight || picWidth>maxWidth)//rescale calculations
		{
			if(picWidth>maxWidth){picHeight=Math.round((maxWidth/picWidth)*picWidth); picWidth=maxWidth;}
			if(picHeight>maxHeight){picWidth=Math.round((maxHeight/picHeight)*picWidth); picHeight=maxHeight;}
		}
		return{width:picWidth,height:picHeight,0:picWidth,1:picHeight}
	}
	
	this.maintainDimensions=function()//prevents pictures from getting too big
	{
		picHeight = this.galleryPictures[this.currentSelectedIndex].height>0?this.galleryPictures[this.currentSelectedIndex].height:$('#mainImage').height();
		picWidth = this.galleryPictures[this.currentSelectedIndex].width>0?this.galleryPictures[this.currentSelectedIndex].width:$('#mainImage').width();
		
		newDims = this.constrainXY(picWidth,picHeight);
		$('#mainImage').attr({height:newDims.height,width:newDims.width});
	}

	if(arguments.length==1)
	{
		//a collection of image info passed
		this.setGalleryPictures(images);
	}
	//what if multiple args?	
	
	
}