function imageGallery(gallerytitle)
{
	this.title = gallerytitle;
	
	//Methods
	this.init = init;  //initialize
	this.center = center;  //Centergallery
	this.openGallery = openGallery; //openGallery
	this.addImage = addImage; //openGallery
	this.nextImage = nextImage; // nextImage
	this.prevImage = prevImage; // nextImage
	this.transition = transition; // Transision
	
	this.initthumbs = initthumbs;  //initialize thumbnails
	this.showthumbs = showthumbs;  //show thumbnails
	this.hidethumbs = hidethumbs;  //hide thumbnails	
	
	//Background Div
	var bgDiv = document.createElement('div');
	bgDiv.id = 'thickbox_bg';
	//Image Div
	var imgDiv = document.createElement('div');
	imgDiv.id = 'imagebox';
	
	//Image Preloader
	var preloadImg = document.createElement('div');
	
	//First Image
	var imageHolder = document.createElement('div');
	var imagePrev = document.createElement('img');
	
	//Array to holdimages
	var imgs = new Array();
	
	//current image index
	var currentIndex = 0;
	
	//Set Gallery Name
	var galleryName = document.createElement('div');
	
	//thumbs div
	var img_rollover= document.createElement('div');
	var thumbs_wrapper = document.createElement('div');
	var thumbROver_timeout = null;
	var thumbROut_timeout = null;
	

	function init()
	{
		document.body.appendChild(preloadImg);
		
		imageHolder.id = 'holder_img';
	
		//imageHolder.src = imgs[currentIndex].src;
		//imageHolder.style.backgroundImage = 'url("'+imgs[currentIndex].src+'")';
		imagePrev.src = imgs[currentIndex].src;
		imageHolder.appendChild(imagePrev);
						
		imgDiv.appendChild(galleryName);
		
		img_rollover.appendChild(imageHolder);
		imgDiv.appendChild(img_rollover);
		
		Event.observe(bgDiv, 'click', closeGallery); 
		if(imgs.length > 1)
		{
			var btn_wrapper = document.createElement('div');
			btn_wrapper.className = 'img_btns';
			
			var next = document.createElement('div');
			next.innerHTML = 'next >>';
			next.className = 'img_next';
			
			var prev = document.createElement('div');
			prev.innerHTML = '<< previous';
			prev.className = 'img_prev';
			
			var closeBtn = document.createElement('div');
			closeBtn.innerHTML = '(x) Close';
			closeBtn.className = 'img_close';
			
			//click actions for gallery controls
			Event.observe(next, 'click', nextImage); 
			Event.observe(prev, 'click', prevImage); 
			Event.observe(closeBtn, 'click', closeGallery); 
			Event.observe(img_rollover, 'click', nextImage);
			
			//mouseovers/out
			Event.observe(next, 'mouseover', function () { next.className = 'img_next_over';} );
			Event.observe(next, 'mouseout', function () { next.className = 'img_next';} );
			Event.observe(prev, 'mouseover', function () { prev.className = 'img_prev_over';} );
			Event.observe(prev, 'mouseout', function () { prev.className = 'img_prev';} );
			Event.observe(closeBtn, 'mouseover', function () { closeBtn.className = 'img_close_over';} );
			Event.observe(closeBtn, 'mouseout', function () { closeBtn.className = 'img_close';} );
			
			btn_wrapper.appendChild(next);
			btn_wrapper.appendChild(prev);
			btn_wrapper.appendChild(closeBtn);
			
			
			initthumbs();
			imgDiv.appendChild(btn_wrapper);
		}
		
		
		document.body.appendChild(bgDiv);
		document.body.appendChild(imgDiv);
	}
	
	function initthumbs()
	{

		thumbs_wrapper.className = 'thumbnail_wrapper';
		//thumbs_wrapper.innerHTML = 'this is where thumbnails go.'
		thumbs_wrapper.style.width = imgs[currentIndex].width + 'px';
		thumbs_wrapper.style.visibility = 'hidden';
		
		
		var thumbsbg = document.createElement('div');
		thumbsbg.className = 'thumbnail_bg';
		thumbs_wrapper.appendChild(thumbsbg);
		
		var thumbscontainer = document.createElement('div');
		thumbscontainer.className = 'thumbnail_container';
		
		for(i=0; i<imgs.length; i++)
		{
			var ratio = (40 / imgs[i].height);

			var imageNode = document.createElement('img');	
			imageNode.style.height = 40 + 'px';
			imageNode.style.width = (imgs[i].width * ratio) + 'px';
			imageNode.src = imgs[i].src;

			imageNode.setAttribute('alt', i);
			
			imageNode.onclick = function (e)
			{
				if (!e) var e = window.event;
				currentIndex = parseInt(this.getAttribute('alt'));
				transition();	
			}		
			if (imageNode.captureEvents) imageNode.captureEvents(Event.CLICK);
			
			thumbscontainer.appendChild(imageNode);
		}
		
		thumbs_wrapper.appendChild(thumbscontainer);
		
		
			
		//Events for the thumbnails	
		Event.observe(img_rollover, 'mouseover', 
			function ()
			{
				clearTimeout(thumbROut_timeout);
				showthumbs();
			});
			
		Event.observe(img_rollover, 'mouseout',
			function ()
			{
				clearTimeout(thumbROver_timeout);
				hidethumbs();
			});
		
			
		Event.observe(thumbs_wrapper, 'mouseover', 
			function ()
			{
				clearTimeout(thumbROut_timeout);	//CLEARS HIDE
				clearTimeout(thumbROver_timeout);
			});
		Event.observe(thumbs_wrapper, 'mouseout', 
			function ()
			{
				clearTimeout(thumbROut_timeout);	//CLEARS HIDE
				clearTimeout(thumbROver_timeout);	
				hidethumbs();
			});
		
		imgDiv.appendChild(thumbs_wrapper);
		
	}
	
	
	function showthumbs()
	{
		thumbROver_timeout = setTimeout(function ()
		{
			if(thumbs_wrapper.style.visibility=='hidden')
			{
				thumbs_wrapper.style.visibility='visible';
				new Effect.Opacity(thumbs_wrapper,
				{ 
				duration: .3, 
				transition: Effect.Transitions.linear, 
				from: 0.0, to: 1.0,
				afterFinish: function ()
					{
						thumbs_wrapper.style.visibility='visible';
						thumbs_wrapper.style.filter='alpha(opacity=100)';
						thumbs_wrapper.style.MozOpacity='1.0';
						thumbs_wrapper.style.opacity='1.0';
					}
				});
				new Effect.Morph(thumbs_wrapper,{
				  style:'height:50px; margin-top:-50px',
				  duration:0.3,
				  afterFinish: function ()
				  	{
						thumbs_wrapper.style.height='50px';
						thumbs_wrapper.style.marginTop='-50px';
				  }
				  
				});
			}
		}, 300); 
		
	}
	
	function hidethumbs()
	{
		thumbROut_timeout = setTimeout(function ()
		{
			new Effect.Opacity(thumbs_wrapper,
			{ duration: .3, 
			  transition: Effect.Transitions.linear, 
			  from: 1.0, to: 0.0,
			  afterFinish: function ()
				{
					thumbs_wrapper.style.visibility = 'hidden';
				}	
			 });
			 new Effect.Morph(thumbs_wrapper,{
				  style:'height:0px; margin-top:0px',
				  duration:0.3
				});
	
		}, 300); 
		
		
		
	}
	
	
	
	function nextImage()
	{
		if(currentIndex >= imgs.length-1)
		{
			currentIndex = 0;
		}
		else
		{
			currentIndex++;
		}
		transition();
	}
	
	function prevImage()
	{
		if(currentIndex <= 0)
		{
			currentIndex = imgs.length-1;
		}
		else
		{
			currentIndex--;
		}
		transition();
	}
	
	function transition()
	{
		
		new Effect.Opacity(imageHolder,
		{ duration: .5, 
		  transition: Effect.Transitions.linear, 
		  from: 1.0, to: 0.0,
		  afterFinish:  function ()
			  {
				new Effect.Opacity(imgDiv,
				{
				  duration: .5, 
				  transition: Effect.Transitions.linear, 
				  from: 1.0, to: 0.0,
				  afterFinish:  function ()
					  {
						//center();
						galleryName.innerHTML = 'Image ' + (currentIndex + 1) + ' of ' + imgs.length;
						galleryName.className = 'galleryHdr';
						thumbs_wrapper.style.width = imgs[currentIndex].width + 'px';
						imageHolder.style.width = imgs[currentIndex].width + 'px'; 
						imageHolder.style.height = imgs[currentIndex].height + 'px';
						new Effect.Opacity(imgDiv,
							{
								duration: .5, 
								transition: Effect.Transitions.linear, 
								from: 0.0, to: 1.0,
								afterFinish: function ()
								{
									$('imagebox').style.visibility='visible';
									$('imagebox').style.filter='alpha(opacity=100)';
									$('imagebox').style.MozOpacity='1.0';
									$('imagebox').style.opacity='1.0';
									//imageHolder.style.backgroundImage = 'url("'+imgs[currentIndex].src+'")';
									imagePrev.src = imgs[currentIndex].src;
									imagePrev.width = imgs[currentIndex].width;
									imagePrev.height = imgs[currentIndex].height;
									//center();
									new Effect.Opacity(imageHolder,
									{
									  duration: .5, 
									  transition: Effect.Transitions.linear, 
									  from: 0.0, to: 1.0
									});	
								}
							});
					  }


				});
			  }
		 });
		 
	}
	
	function center()
	{
		imgDiv.style.left = document.body.clientWidth/2 - imgs[currentIndex].width/2 + 'px'; 
		imgDiv.style.top = 25 + 'px'; 
		imgDiv.style.width = imgs[currentIndex].width + 'px';
		
		var width = imgs[currentIndex].width;
		var left = document.body.clientWidth/2 - imgs[currentIndex].width/2;
		
	}
	
	function openGallery()
	{
		
		
		galleryName.innerHTML = 'Image ' + (currentIndex + 1) + ' of ' + imgs.length;
		galleryName.className = 'galleryHdr';
		
		imagePrev.src = imgs[currentIndex].src;
		imagePrev.width = imgs[currentIndex].width;
		imagePrev.height = imgs[currentIndex].height;
		
		imageHolder.style.height = imgs[currentIndex].height + 'px';
		imageHolder.style.width = imgs[currentIndex].width + 'px';
		center();
		

		new Effect.Opacity('imagebox',
		{ duration: .5, 
		  transition: Effect.Transitions.linear, 
		  from: 0.0, to: 1.0,
		  beforeStart: function ()
			  {
				 $('imagebox').style.display='block';
			  },
		  afterFinish:  function ()
			  {
				$('imagebox').style.visibility='visible';
				$('imagebox').style.filter='alpha(opacity=100)';
				$('imagebox').style.MozOpacity='1.0';
				$('imagebox').style.opacity='1.0';
			  }
		 });
		 new Effect.Opacity('thickbox_bg',
		{ duration: .5, 
		  transition: Effect.Transitions.linear, 
		  from: 0.0, to: 0.4,
		  beforeStart:  function ()
			  {
				$('thickbox_bg').style.display='block';
			  }
		 });
	}
	
	function closeGallery()
	{
		new Effect.Opacity('imagebox',
		{ duration: .5, 
		  transition: Effect.Transitions.linear, 
		  from: 1.0, to: 0.0,
		  afterFinish:  function ()
			  {
				$('imagebox').style.display='none';
			  }
		 });
		 new Effect.Opacity('thickbox_bg',
		{ duration: .5, 
		  transition: Effect.Transitions.linear, 
		  from: 0.4, to: 0.0,
		  afterFinish:  function ()
			  {
				$('thickbox_bg').style.display='none';
			  }
		 });
	}
	
	function addImage(Imgsrc, width, height)
	{
		var resizeratio = (700 / width);
		var temp = new Image(700, height * resizeratio);
		temp.src = Imgsrc;

		imgs.push(temp);
	}
}