var blueHenGalleryData = {
	panelSizex : 600,
	panelSizey : 600,
	smallSizex : 100,
	smallSizey : 100,
	captionTop : 28,
	filmstripmargin: 8,
	infoPanelHeight: 120,
	infoPanelForeground: 'white',
	infoPanelBackground: '#151530',
	infoPanelOpacity: .95, 
	filmstripCellsWidth: 4,
	scrollRemaining: 0,
	scrollIncrement: 0,
	scrollPosition: 0,
	scrollVelocity: 10,
	tag : '',
	currentImage: 0,
	numImages:0,
	thumbnaildx:0,
	thumbnaildy:0,
	thumbnailcurrentx:0,
	thumbnailcurrenty:0,
	thumbnaildestx:0,
	thumbnaildesty:0,
	thumbnaildestheight:0,
	thumbnailcurrentheight:0,
	thumbnailheightdx:0
};

function blueHenGallery( csstag )
{
	blueHenGalleryData.tag = csstag;

	var baseTag =  csstag + ' .panels';

	blueHenGalleryData.numImages = $( baseTag + ' .panelplane .panel' ).size();

	$( baseTag ).css( 'overflow', 'hidden' );
	$( baseTag ).width( blueHenGalleryData.panelSizex );
	$( baseTag ).height( blueHenGalleryData.panelSizey );
	$( baseTag ).css( 'border', '2px solid black' );

	$( csstag + ' .filmstrip' ).css( 'float', 'left' )
				   .css( 'margin-left', '0px' )
				   .width( blueHenGalleryData.filmstripCellsWidth * (blueHenGalleryData.smallSizex + blueHenGalleryData.filmstripmargin * 4) + 20 );

	$( csstag + ' .thumbnailwrapper' ).css( 'display', 'inline-block' )
					.css( 'overflow', 'hidden' )
					.css( 'vertical-align', 'top' )
					.css( 'margin-right', '16px')
					.css( 'margin-bottom', '16px')
					.css( 'border', '1px solid #c0c0c0' )
					.css( 'position', 'relative' )
					.css( '-webkit-box-shadow', '4px 4px 3px #888' )
					.css( '-moz-box-shadow', '4px 4px 3px #888' )
					.width( blueHenGalleryData.smallSizex )
					.height( blueHenGalleryData.smallSizey +  blueHenGalleryData.captionTop  );

	$( csstag + 'img:hover' ).css( 'border', '5px solid black' );

	$( '#thumbnailcursor').width( blueHenGalleryData.smallSizex )
		.height( blueHenGalleryData.smallSizey )
		.width( blueHenGalleryData.smallSizex )
		.css( 'position', 'absolute' )
		.css( 'background-color', 'blue' )
		.css( 'border', '1px solid black' )
		.css( 'opacity', .15 );

	var counter = 0;
	var positionx = 0;

	$( baseTag + ' .filmstrip' ).css( 'position', 'relative' );
	$( baseTag + ' .panel' ).css( 'position', 'relative' );
	$( baseTag + ' .panelplane' ).css( 'position', 'relative' );

	$( baseTag + ' .panel-overlay' ).css( 'position', 'absolute' )
			.css( 'top',  blueHenGalleryData.panelSizey - blueHenGalleryData.infoPanelHeight)
			.css( 'background',  blueHenGalleryData.infoPanelBackground )
			.css( 'color',  blueHenGalleryData.infoPanelForeground )
			.height( blueHenGalleryData.infoPanelHeight )
			.width( blueHenGalleryData.panelSizex - 16 )
			.css( 'padding', '8pt' )
			.css( 'font-size', '12px' )
			.css( 'opacity', blueHenGalleryData.infoPanelOpacity );

	$( baseTag + ' .panel-overlay a' ).css( 'color', 'white' );

	$( csstag + ' .thumbnailcaption' ).css( 'color', 'white' )
				   .css( 'background-color', '#202040' )
				   .css( 'font-size', '10px' )
				   .css( 'padding', '4px' )
				   .css( 'position', 'absolute')
				   .css ('bottom', '0px' )
				   .css('z-index', '2' )
				   .height( blueHenGalleryData.captionTop )
				   .width( blueHenGalleryData.smallSizex - 8 );

	$( baseTag + ' .panelplane .panel' ).each ( function() {
		$( this ).css( 'position', 'absolute' ).css( 'left', positionx + 'px' );
		positionx += blueHenGalleryData.panelSizex;
	});

	counter = 0;

	$( csstag + ' .filmstrip img').each ( function() {
		this.galleryIndex = counter;

		if (counter == 0) {
			var tp = $(this).offset();
			var height = $(this).height();
			if (height == 0) height = blueHenGalleryData.smallSizey;

			blueHenGalleryData.thumbnailcurrentx = tp.left;
			blueHenGalleryData.thumbnailcurrenty = tp.top;
			blueHenGalleryData.thumbnailcurrentheight =  height < blueHenGalleryData.smallSizey ? height - 1 : blueHenGalleryData.smallSizey;

			$( '#thumbnailcursor').css( 'top', tp.top ).css( 'left', tp.left ).height( blueHenGalleryData.thumbnailcurrentheight );

		}
		counter ++;
	});

	$( csstag + ' .filmstrip img' ).bind( 'click', function () {
		if (blueHenGalleryData.scrollRemaining == 0) {
			if (blueHenGalleryData.currentImage < this.galleryIndex) {
				blueHenGalleryData.scrollIncrement = -blueHenGalleryData.scrollVelocity * (this.galleryIndex- blueHenGalleryData.currentImage);
				blueHenGalleryData.scrollRemaining = blueHenGalleryData.panelSizex / blueHenGalleryData.scrollVelocity;
				scrollGallery();
			} else if (blueHenGalleryData.currentImage > this.galleryIndex) {
				blueHenGalleryData.scrollIncrement = +blueHenGalleryData.scrollVelocity * (blueHenGalleryData.currentImage - this.galleryIndex);
				blueHenGalleryData.scrollRemaining = blueHenGalleryData.panelSizex / blueHenGalleryData.scrollVelocity;
				scrollGallery();
			}
			var tp = $(this).offset();
			if (blueHenGalleryData.currentImage != this.galleryIndex) {
				blueHenGalleryData.thumbnaildestx = tp.left;
				blueHenGalleryData.thumbnaildesty = tp.top;
				blueHenGalleryData.thumbnaildx =  ( blueHenGalleryData.thumbnaildestx - blueHenGalleryData.thumbnailcurrentx ) / blueHenGalleryData.scrollRemaining;  			
				blueHenGalleryData.thumbnaildy =  ( blueHenGalleryData.thumbnaildesty - blueHenGalleryData.thumbnailcurrenty ) / blueHenGalleryData.scrollRemaining;  			
				blueHenGalleryData.currentImage = this.galleryIndex;
				blueHenGalleryData.thumbnaildestheight = $(this).height() < blueHenGalleryData.smallSizey ? $(this).height() - 1 : blueHenGalleryData.smallSizey;
				blueHenGalleryData.thumbnailheightdx = (blueHenGalleryData.thumbnaildestheight - blueHenGalleryData.thumbnailcurrentheight ) / blueHenGalleryData.scrollRemaining;
			}
		}
	});
}

function scrollGallery()
{
	if (blueHenGalleryData.scrollRemaining > 0) {
		blueHenGalleryData.scrollPosition += blueHenGalleryData.scrollIncrement;
		blueHenGalleryData.scrollRemaining --;
		$( blueHenGalleryData.tag + ' .panelplane'  ).css( 'left', blueHenGalleryData.scrollPosition + 'px' );
		blueHenGalleryData.thumbnailcurrentx += blueHenGalleryData.thumbnaildx;
		blueHenGalleryData.thumbnailcurrenty += blueHenGalleryData.thumbnaildy;
		setTimeout( "scrollGallery()", 2 );
		blueHenGalleryData.thumbnailcurrentheight += blueHenGalleryData.thumbnailheightdx;
		$( '#thumbnailcursor').css( 'top', blueHenGalleryData.thumbnailcurrenty).css( 'left', blueHenGalleryData.thumbnailcurrentx).height( blueHenGalleryData.thumbnailcurrentheight );
	} else {
		blueHenGalleryData.thumbnailcurrentx = blueHenGalleryData.thumbnaildestx;
		blueHenGalleryData.thumbnailcurrenty = blueHenGalleryData.thumbnaildesty;	
	}
}