/**
 * <br> $Header: /home/sclark/cvs2svn/cvsroot/website/scripts/siras.widgets.imagescroller.js,v 1.4 2010-05-04 19:56:01 doconnor Exp $
 *
 * Author: J. Myron Smith
 *
 * <br> Copyright 1999-2010 by SiRAS.com.
 * <br> All rights reserved. "SIRAS' technology is protected by one or more of U.S. Patents."
 *
 */
siras.widgets.ImageScroller = function(config) {
  var mCfg;
  var mIdScrollingRegion;
  var mIdScrollingRegionImageTable;
  var mCurPosition = 0;
  var mInitialized = false;
  var mSelectedImageId;
  var mLowShowingImageIndex;
  var mHighShowingImageIndex;
  var mPrevBtnClass = null;
  var mPrevBtn;
  var mNextBtnClass = null;
  var mNextBtn;
  var mImageIdPrefix = 'scrollerImage';
  var mImgClickHandlers;
  var mLockoutUi = false;
  var mShowing;
  var mMarginR = 10;
  var mScrollableWidth;
  var mBtnTravel = 2;
  var isIE = siras.env.getBrowser() === 'IE' ? true : false;
  var browserVer = siras.env.getBrowserVersion();

	if (config) {
		configure(config);
	}

	function initialized() {
		if (!mInitialized) {
			alert('siras.widgets.ImageScroller object instance not initialized!');
		}
		return mInitialized;
	}

	function configure(config) {
		if (config) {
			mCfg = config;
		}
		else if (mCfg == null) {
			alert('no configuration object for siras.widgets.ImageScroller');
			return;
		}

		if (mCfg.id == null) {
			alert('required siras.widgets.ImageScroller confuration parameter: id missing');
			return;
		}
		else {
			mIdScrollingRegion = mCfg.id + '_ScrollingRegion';
			mIdScrollingRegionImageTable = mIdScrollingRegion + "_ImageTableRowData";
		}

		mCfg.useDefaultBtnImages = 		mCfg.useDefaultBtnImages != null ? mCfg.useDefaultBtnImages : true;
		mCfg.backgroundColor =			mCfg.backgroundColor ||			'#FFFFFF';
		mCfg.scrollRgnBgColor =  		mCfg.scrollRgnBgColor ||		'#FFFFFF';
		mCfg.scrollRgnBorderWidth = 	mCfg.scrollRgnBorderWidth ||	0;
		mCfg.scrollRgnBorderColor =  	mCfg.scrollRgnBorderColor ||	'#FFFFFF';
		mCfg.scrollRgnBorderStyle =		mCfg.scrollRgnBorderStyle || 	'none';

		// set the public properties
		mCfg.onClickHandler = 			mCfg.onClickHandler || 			null;
		mCfg.onKeypressHandler = 		mCfg.onKeypressHandler || 		null;

		mCfg.enabled = 					mCfg.enabled != null ? mCfg.enabled : true;
		if (isIE && browserVer < 8) {
		  mCfg.effectsEnabled = false; // disable effects even if they are enabled when IE 7 or less
		}

		// set the optional configurables
		mCfg.btnWidth           =     mCfg.btnWidth              ||   50;
		mCfg.scrollRgnMarginTop =		  mCfg.scrollRgnMarginTop    ||		6;
		mCfg.scrollRgnMarginBottom =	mCfg.scrollRgnMarginBottom || 	0;
		mCfg.scrollRgnMarginLeft = 		mCfg.scrollRgnMarginLeft   ||		0;
		mCfg.scrollRgnMarginRight = 	mCfg.scrollRgnMarginRight  ||		0;
    mCfg.scrollRgnPaddingSides =  mCfg.scrollRgnPaddingSides ||   4;
    mCfg.width = 					        mCfg.width                 || 	320;
		mCfg.height = 					      mCfg.height                || 	60;
		mCfg.fontSize = 				      mCfg.fontSize              ||		'10pt';
		mCfg.fontWeight = 				    mCfg.fontWeight            ||		'normal';
		mCfg.fontFamily = 				    mCfg.fontFamily            ||		'sans-serif';
		mCfg.marginLeft = 				    mCfg.marginLeft            ||		0;
		mCfg.marginTop =	 			      mCfg.marginTop             ||		0;
		mCfg.marginRight =				    mCfg.marginRight           ||		0;
		mCfg.marginBottom =				    mCfg.marginBottom          ||		0;
		mCfg.borderColor = 				    mCfg.borderColor           || 	'#E0E0E0';
		mCfg.borderWidth = 				    mCfg.borderWidth           ||	 	0;
		mCfg.borderStyle = 				    mCfg.borderStyle           || 	'solid';
		mCfg.selectedBorderColor = 		mCfg.selectedBorderColor   ||		'#0000FF';
		mCfg.imageBorderColor =       mCfg.imageBorderColor      ||  	'#E0E0E0';
		mCfg.visibleEntries =			    mCfg.visibleEntries        ||		3;
		mCfg.imageBorderWidth =       mCfg.imageBorderWidth      ||  	2;
		//mCfg.imageBoxSpacing =			  mCfg.imageBoxSpacing       ||   21;
		mCfg.imageBoxWidth =			    mCfg.imageBoxWidth         ||		60;
		mCfg.imageArray = 				    mCfg.imageArray            || 	null;
		mCfg.moveFudFactorPerImage =  mCfg.moveFudFactorPerImage ||   0;
		//mCfg.paddingLeft =				  mCfg.paddingLeft           ||		0;
		//mCfg.paddingTop =				    mCfg.paddingTop            ||		0;
		//mCfg.paddingRight =				  mCfg.paddingRight          ||		0;
		//mCfg.paddingBottom =			  mCfg.paddingBottom         ||		0;
		mCfg.extStyle = 				      mCfg.extStyle              ||		'';

    mScrollableWidth = mCfg.width - 2 * mCfg.scrollRgnPaddingSides - 2 * mBtnTravel - 2 * mCfg.borderWidth;
    if (mCfg.effectsEnabled) {
      mScrollableWidth -= 2 * mCfg.btnWidth;
    }
    else {
      mCfg.visibleEntries += 1;
    }

		if (mCfg.visibility != 'hidden' && mCfg.imageArray == null) {
			alert('required siras.widgets.ImageScroller configuration parameter: imageArray missing');
			return;
		}

		/*
		if (mCfg.useDefaultBtnImages == true) {
			mPrevBtnUrl = 'url(images/pageBwdUp.png)';
			mNextBtnUrl = 'url(images/pageFwdUp.png)';
		}
		else {
			if (mCfg.mCfg.prevBtnImageUrl == null || mCfg.mCfg.nextBtnImageUrl == null ) {
				alert('required siras.widgets.ImageScroller confuration parameter: prevBtnImageUrl or nextBtnImageUrl missing');
				return;
			}
			mPrevBtnUrl = 'mCfg.prevBtnImageUrl';
			mPrevBtnUrl = 'mCfg.nextBtnImageUrl';
		}
		*/

		mInitialized = true;
	}

	function onClick() {
		if (!mLockoutUi && mCfg.onClickHandler != null) {
			if (typeof mCfg.onClickHandler == 'function') {
				mCfg.onClickHandler();
			}
			else if (typeof mCfg.onClickHander == 'string' ) {
				eval(mCfg.onClickHander);
			}
		}
	}

	function onKeypress(event) {
		if (!mLockoutUi) {
			eval(mCfg.onKeypressHandler);
		}
	}

	function onMouseover(event) {
	}

	function onMouseout(event) {
	}

	function onMousedown(event) {
	}

	function onMouseup(event) {
		//var nextItem = mSelectedImageIndex+1;

		//if (nextItem > mHighShowingImageIndex) nextItem = mLowShowingImageIndex;
		//setSelection(nextItem);
	}

	function generateStyle() {
		var html = new Array(0);

		mShowing = mCfg.imageArray && (mCfg.imageArray.length > 1) ?  true : false;

		html.push('visibility:', mShowing ? 'visible' : 'hidden', '; ');
		html.push('background-color:', mCfg.backgroundColor, '; ');
    html.push('margin:', mCfg.marginTop, 'px ', mCfg.marginLeft, 'px ', mCfg.marginBottom, 'px ', mCfg.marginRight, 'px; ');
    html.push('border:', mCfg.borderWidth, 'px ', mCfg.borderStyle, ' ', mCfg.borderColor, '; ');

		return html.join('');
	}

	function generateImagesHtml() {
		var htmlArray = new Array(0);
		var html = '';
		if (mCfg.imageArray && mCfg.imageArray.length > 1) {
			var imagesShown = mCfg.imageArray.length < mCfg.visibleEntries ? mCfg.imageArray.length : mCfg.visibleEntries;
			mSelectedImageId = mImageIdPrefix + 0;
			mLowShowingImageIndex = 0;
			mHighShowingImageIndex = imagesShown-1;

			htmlArray.push('<tr>');
      var visImages_widthNeeded = // mCfg.scrollRgnMarginLeft + mCfg.scrollRgnMarginRight +
                                  mCfg.scrollRgnPaddingSides +
                                  (mCfg.imageBoxWidth + 2*mCfg.imageBorderWidth) * mCfg.visibleEntries +
                                  mMarginR * (mCfg.visibleEntries - 1);
			while ((mMarginR > mCfg.scrollRgnMarginLeft) && (Math.abs(visImages_widthNeeded - mScrollableWidth) > (mCfg.visibleEntries-1)) ) {

			  visImages_widthNeeded > mScrollableWidth ? mMarginR -= 1 : mMarginR += 1;
        visImages_widthNeeded = // mCfg.scrollRgnMarginLeft + mCfg.scrollRgnMarginRight +
                                mCfg.scrollRgnPaddingSides +
                                (mCfg.imageBoxWidth + 2*mCfg.imageBorderWidth) * mCfg.visibleEntries +
                                mMarginR * (mCfg.visibleEntries - 1);
			}

			for (var i = 0; i < mCfg.imageArray.length; i++) {
				var nameAndId;
				var ar = 60.0/45.0;
				var imgStyle;
				var marginAdded = 0;
				var divDimStyle;
				var imgW = mCfg.imageBoxWidth;
				var imgH = parseInt(mCfg.imageBoxWidth/ar, 10);
				if (mCfg.imageArray[i].imageY * ar > mCfg.imageArray[i].imageX) {
          marginAdded = parseInt( (imgW + .5 - (imgH * mCfg.imageArray[i].imageX / mCfg.imageArray[i].imageY)) / 2 );
          imgStyle = ['height:', imgH, 'px; margin-left:', marginAdded, 'px; '].join('');
					if (isIE && (marginAdded > 0)) {
						marginAdded = mCfg.imageBorderWidth * 2;
            divDimStyle = ['width:', parseInt(imgW + marginAdded), 'px; height:', imgH, 'px; '].join('');
					}
					else {
	          divDimStyle = ['height:', imgH, 'px; width:', imgW, 'px; '].join('');
					}
				}
				else {
          marginAdded = parseInt( (imgH + .5 - (imgW * mCfg.imageArray[i].imageY / mCfg.imageArray[i].imageX)) / 2 );
          imgStyle = ['width:', imgW, 'px; margin-top:', marginAdded, 'px; '].join('');
					if (isIE && (marginAdded > 0)) {
						marginAdded = mCfg.imageBorderWidth * 2;
						divDimStyle = ['height:', parseInt(imgH + marginAdded), 'px; width:', imgW,'px; '].join('');
					}
					else {
            divDimStyle = ['height:', imgH, 'px; width:', imgW, 'px; '].join('');
					}
				}
				nameAndId = mImageIdPrefix + i;
				if (isIE && !mCfg.effectsEnabled) {
				  var h = mCfg.height + 28;
				  htmlArray.push('<td valign="top" style="');
				  htmlArray.push('height:', h, 'px; ');
				}
				else {
				  htmlArray.push('<td style="');
				}
		    htmlArray.push('margin-left:0;margin-right:0; padding-left:0; padding-right:0;">');
				htmlArray.push('<div id="', nameAndId,'" name="', nameAndId,'" style="', divDimStyle, 'cursor:pointer; border-style:solid; ');
				htmlArray.push(' border-color:', i != 0 ? mCfg.imageBorderColor : mCfg.selectedBorderColor, ';');
				htmlArray.push(' border-width:', mCfg.imageBorderWidth, 'px;');
				htmlArray.push(' margin-left:0px; margin-right:', mMarginR, 'px;">');
				htmlArray.push('<img style="', imgStyle, '" src="', mCfg.imageBaseUri, mCfg.imageArray[i].thumb, '"/>');
				htmlArray.push('</div>');
				//htmlArray.push('<div style="text-align:center; width:60px; font-size:7pt; font-family:', mCfg.fontFamily, '; font-weight:bold; border:none; margin-left:0px; margin-right:', mMarginR, 'px;">');
				//htmlArray.push(mCfg.imageArray[i].date);
				//htmlArray.push('</div>');
				htmlArray.push('</td>');
			}
			htmlArray.push('</tr>');
			html = htmlArray.join('');
		}

		return html;
	}

	function generateImageClientAreaHtml() {
		var html = new Array(0);

    html.push('<div id="', mIdScrollingRegion, '" style="margin:0px 0px; padding: 0px 0px; width:', mScrollableWidth, 'px;',
        // height: 100%;', //mCfg.height,
        '; overflow-x:', (isIE && browserVer < 8) || !mCfg.effectsEnabled ?  'auto; ' : 'hidden; ');
    html.push('background-color:', mCfg.scrollRgnBgColor, ';">');
		html.push('<table id="', mIdScrollingRegionImageTable, '" cellpadding="0px" cellspacing="0px" rules="none" frame="void"');

		//html.push(' style="height:100%; '); //padding-left:', mCfg.scrollRgnMarginLeft,'; padding-top:', mCfg.scrollRgnMarginTop,'; padding-right:', mCfg.scrollRgnMarginRight,'; padding-bottom:', mCfg.scrollRgnMarginBottom, ';');
		var bwL = bwR = bwT = bwB = 0;
		var bsL = bsR = bsT = bsB = 'solid';
		var bC = mCfg.scrollRgnBorderColor;
		switch (mCfg.scrollRgnBorderStyle) {
			case 'vsides':
				bwL = bwR = mCfg.scrollRgnBorderWidth;
				break;
			case 'filmsides':
        bsT = bsB = 'dotted';
        bwT = bwB = mCfg.scrollRgnBorderWidth;
			  break;
			case 'hsides':
			  bwT = bwB = mCfg.scrollRgnBorderWidth;
			  break;
			case 'box':
				bwL = bwT = bwR = bwB = mCfg.scrollRgnBorderWidth;
				break;
			case 'top':
				bwT = mCfg.scrollRgnBorderWidth;
				break;
			case 'bottom':
				bwB = mCfg.scrollRgnBorderWidth;
				break;
			case 'left':
				bwL = mCfg.scrollRgnBorderWidth;
				break;
			case 'right':
				bwR = mCfg.scrollRgnBorderWidth;
				break;
			case 'none':
			default:
				break;
		}
    html.push(' border-left:', bwL, 'px ', bsL, ' ', bC, '; ');
    html.push(' border-right:', bwR, 'px ', bsR, ' ', bC, '; ');
    html.push(' border-top:', bwT, 'px ', bsT, ' ', bC, '; ');
    html.push(' border-bottom:', bwB, 'px ', bsB, ' ', bC, ';');
		html.push(' position:static;"><tbody>');
		html.push(generateImagesHtml());
		html.push('</tbody></table>');
		html.push('</div>')

		return html.join('');
	}

	function generateInnerHtml() {
		var html = new Array(0);

		if (mCfg.effectsEnabled) {
  		var imgBtnItem = siras.widgets.ImageButton;
  		if (!mPrevBtnClass) {
  			mPrevBtnClass = Class.create(new imgBtnItem);
  		}
  		mPrevBtn = new mPrevBtnClass({
  		    enabled: false,
  			id: 'prevBtn',
  			height: mCfg.height,
  			enabledImageUrl: mCfg.btnImageUri + "pageBwdUp.png",
  			animatePress: 'W',
  			horzTravel: mBtnTravel,
  			onClickHandler: prevPage
  		});
  		if (!mNextBtnClass) {
  			mNextBtnClass = Class.create(new imgBtnItem);
  		}
  		mNextBtn = new mNextBtnClass({
  			enabled: false,
  			id: 'nextBtn',
  			height: mCfg.height,
  			enabledImageUrl:  mCfg.btnImageUri + "pageFwdUp.png",
  			animatePress: 'E',
  			horzTravel: mBtnTravel,
  			onClickHandler: nextPage
  		});
		}

		html.push('<table cellpadding="0px" cellspacing="0px" rules="none"');
		html.push( mCfg.border != null ? 'frame="box"': 'frame="void"');
		html.push('><tr>');

		if (!(isIE && browserVer < 8) && mCfg.effectsEnabled) {
		  html.push('<td align="center" valign="middle" style="width:', mCfg.btnWidth, '; background-color:', mCfg.backgroundColor, ';">');
		  html.push(mPrevBtn.getHtml());
		  html.push('</td>');
		}

		html.push('<td valign="middle" style="margin: 0px 0px; padding: 0px ', mCfg.scrollRgnPaddingSides, 'px; background-color:',
		    mCfg.scrollRgnBgColor, ';">');
		html.push(generateImageClientAreaHtml());
		html.push('</td>');

    if (!(isIE && browserVer < 8) && mCfg.effectsEnabled) {
      html.push('<td align="center" valign="middle" style="width:', mCfg.btnWidth, '; background-color:', mCfg.backgroundColor, ';">');
      html.push(mNextBtn.getHtml());
      html.push('</td>');
    }

		html.push('</tr></table>');

		return html.join('');
	}

	function createHtml() {
		var allArray = new Array(0);
		allArray.push('<div id="', mCfg.id, '" ');

		if (mCfg.enabled && mCfg.tabIndex) {
			allArray.push(' tabIndex=');
			allArray.push(mCfg.tabIndex);
			allArray.push(' ');
		}

		if (mCfg.enabled && mCfg.onClickHandler) {
			allArray.push(' onclick="',mCfg.onClickHandler, '" ');
		}

		if (mCfg.enabled && mCfg.onKeypressHandler) {
			allArray.push(' onkeypress="',mCfg.onKeypressHandler, '" ');
		}

		allArray.push(' style="', generateStyle(), '">');

		if (mCfg.imageArray && mCfg.imageArray.length > 1) {
			allArray.push(generateInnerHtml());
		}
		allArray.push('</div>');

		return allArray.join('');
	}

	function updateImagesHtml() {
		mLockoutUi = true;
		var elemTable = $(mIdScrollingRegionImageTable);

		if (mCurPosition != 0) {
			mCurPosition = 0;
			elemTable.style.left = mCurPosition;
		}
		elemTable.update(generateImagesHtml());

		mLockoutUi = false;
	}

	function updateControlVisibility(show) {
		//if (mCfg.imageArray && mCfg.imageArray.length > 1) {
		// to get here we have transitioned from either not showing to showing or vice versa
		var elem = document.getElementById(mCfg.id);
		elem.innerHTML = generateInnerHtml();
		//}
		var visibilty = (show ? 'visible' : 'hidden');
		document.getElementById(mCfg.id).style.visibility = visibilty;
		mShowing = show;
		enableChildControls(mShowing);
	}

	function setSelection(imageVar) {
		var curSelElem = document.getElementById(mSelectedImageId);

		curSelElem.style.borderColor = mCfg.imageBorderColor;
		curSelElem.style.borderWidth = mCfg.imageBorderWidth;

		if (typeof imageVar == 'number') {
			mSelectedImageId = mImageIdPrefix+imageVar;
		}
		else if (typeof imageVar == 'object' ) {
			// should be an event object
			var elem = imageVar.target;
			var id = elem.getAttribute('id');

			if (id == null || id == '') { // need to get the parent element
				var parentNode = elem.parentNode;
				if (parentNode != null) {
				  id = parentNode.id;
				}
			}

			if (id != null) {
				mSelectedImageId = id;
				onClick();
			}
		}

		var newSelElem = document.getElementById(mSelectedImageId);
		newSelElem.style.borderColor = mCfg.selectedBorderColor;
	}

	function prevPage() {
		if (!mLockoutUi && mCfg.imageArray) {
			mLockoutUi = true;
			var imagesToMove;
			if (mLowShowingImageIndex >= mCfg.visibleEntries) {
				imagesToMove = mCfg.visibleEntries;
			}
			else { // (mLowShowingImageIndex < mCfg.visibleEntries)
				imagesToMove = mCfg.visibleEntries - (mCfg.visibleEntries - mLowShowingImageIndex);
			}

			var pixelsToMove = imagesToMove * (mCfg.moveFudFactorPerImage + mCfg.imageBoxWidth + mMarginR + 2*mCfg.imageBorderWidth);

			if (mCfg.effectsEnabled) {
			  new Effect.MoveBy(
			      mIdScrollingRegionImageTable, 0, pixelsToMove,
			      {duration: 0.5,	transition: Effect.Transitions.sinoidal, afterFinish:
			        function() {
			          mCurPosition = document.getElementById(mIdScrollingRegionImageTable).style.left;
			          mLockoutUi = false;
			        }
			      });
			}
			else {
			  var elem = document.getElementById(mIdScrollingRegionImageTable);
			  mCurPosition += pixelsToMove;
			  elem.style.left  = mCurPosition;
			  mLockoutUi = false;
			}
			mLowShowingImageIndex -= imagesToMove;
			mHighShowingImageIndex -= imagesToMove;
			if (mHighShowingImageIndex < mCfg.imageArray.length-1) mNextBtn.setEnabled(true);
			if (mLowShowingImageIndex <= 0)	mPrevBtn.setEnabled(false);
		}
	}

	function nextPage() {
		if (!mLockoutUi && mCfg.imageArray) {
			mLockoutUi = true;
			var imagesToMove;
			if (mHighShowingImageIndex <= (mCfg.imageArray.length-1) - mCfg.visibleEntries) {
				imagesToMove = mCfg.visibleEntries;
			}
			else { // mHighShowingImageIndex > (mCfg.imageArray.length - mCfg.visibleEntries)
				imagesToMove = (mCfg.imageArray.length-1) - mHighShowingImageIndex;
			}

			var pixelsToMove = imagesToMove * (mCfg.moveFudFactorPerImage + mCfg.imageBoxWidth + mMarginR + 2*mCfg.imageBorderWidth);

      if (mCfg.effectsEnabled) {
        new Effect.MoveBy(mIdScrollingRegionImageTable, 0, -pixelsToMove,
            {duration: 0.5,	transition: Effect.Transitions.sinoidal, afterFinish: function() {
						  mCurPosition = document.getElementById(mIdScrollingRegionImageTable).style.left;
						  mLockoutUi = false;
					  }
        });
      }
      else {
        var elem = document.getElementById(mIdScrollingRegionImageTable);
        mCurPosition -= pixelsToMove;
        elem.style.left = mCurPosition;
        mLockoutUi = false;
      }

			mLowShowingImageIndex += imagesToMove;
			mHighShowingImageIndex += imagesToMove;
			if (mHighShowingImageIndex >= mCfg.imageArray.length-1) mNextBtn.setEnabled(false);
			if (mLowShowingImageIndex > 0) mPrevBtn.setEnabled(true);
		}
	}

	function clearImgClickObservers() {
		if (mCfg.imageArray && mCfg.imageArray.length > 1) {
			for (var i = 0; i < mCfg.imageArray.length; i++) {
				var imgElemId = mImageIdPrefix + i;
				var imgElem = $(imgElemId);
				if (imgElem != null) {
					Event.stopObserving(imgElem, 'click', mImgClickHandlers[i]);
				}
			}
		}
	}

	function setImgClickObservers() {
		if (mCfg.imageArray && mCfg.imageArray.length > 1) {
			mImgClickHandlers = new Array(mCfg.imageArray.length);
			for (var i = 0; i < mCfg.imageArray.length; i++) {
				var imgElemId = mImageIdPrefix + i;
				var imgElem = $(imgElemId);
				if (imgElem != null) {
					imgElem.observe('click', mImgClickHandlers[i] = function(event) {
						if (!mLockoutUi) setSelection(event);
					});
				}
			}
		}
	}

	function enableChildControls(enable) {
		if (mCfg.enabled != enable) {
			mCfg.enabled = enable;
			var len;
			if (mCfg.enabled && mCfg.imageArray) {
				len = mCfg.imageArray.length;
				for (var i = 0; i < len; i++ ) {
					var nameAndId = mImageIdPrefix + i;
					var elem = document.getElementById(nameAndId);
					if (elem) {
						elem.style.cursor = "pointer";
					}
				}
				setImgClickObservers();
			}
			else if (mCfg.imageArray) {
				len = mCfg.imageArray.length;
				for (var i = 0; i < len; i++ ) {
					var nameAndId = mImageIdPrefix + i;
					var elem = document.getElementById(nameAndId);
					if (elem) {
						elem.style.cursor = "default";
					}
				}
				clearImgClickObservers();
			}
			if (enable && (mCfg.imageArray != null) && mCfg.imageArray.length > mCfg.visibleEntries) {
				mNextBtn.setEnabled(mHighShowingImageIndex < mCfg.imageArray.length-1);
				mPrevBtn.setEnabled(mLowShowingImageIndex > 0);
			}
			else {
				mNextBtn.setEnabled(false);
				mPrevBtn.setEnabled(false);
			}
		}
	}

	return {
		initialize : function(config) {
			configure(config);
		},
		getId : function() {
			if (initialized()) {
				return mCfg.id;
			}
		},
		getHtml : function() {
			if (initialized()) {
				return createHtml();
			}
			else {
				return '';
			}
		},
		updateImageArray : function(newImageArray) {
		    // if the old array had more then 1 element clear the click observers
			var oldLen = 0;
			if (mCfg.imageArray) {
				oldLen = mCfg.imageArray.length;
				if (oldLen > 1) {
					clearImgClickObservers();
				}
			}

			mCfg.imageArray = newImageArray;
			var newLen = 0;
			if (mCfg.imageArray) {
				newLen = mCfg.imageArray.length;
			}

			var makeVisible = ((mCfg.imageArray != null) && (newLen > 1)) ? true : false;

			if (makeVisible) {
				if (makeVisible != mShowing) {
					// following line forces all html to get rebuilt
					updateControlVisibility(makeVisible);
				}
				else {
					updateImagesHtml();

					// disable the prev button
					mPrevBtn.setEnabled(false);
					// determine if we need to enable or disable next button and do so
					var oldNextBtnState = mNextBtn.isEnabled();
					var newNextBtnState = mCfg.imageArray.length > mCfg.visibleEntries ? true : false;
					if (oldNextBtnState != newNextBtnState) {
						mNextBtn.setEnabled(newNextBtnState);
					}
				}

				setImgClickObservers();
			}
			else if (makeVisible != mShowing) {
				updateControlVisibility(makeVisible);
			}
		},
		getSelectedImageIndex : function() {
			if (mSelectedImageId != null) {
				var numberChrs = mSelectedImageId.slice(mImageIdPrefix.length);
				return parseInt(numberChrs, 10);
			}
			else return null;
		},
		setSelectedImageIndex : function(index) {
			if (typeof index == 'number') setSelection(index);
		},
		finishInit : function() {
			var elem = document.getElementById(mIdScrollingRegion);
			if (mCfg.enabled && mShowing) {
				if (elem) {
					elem.onmouseup = onMouseup;
					elem.onmousedown = onMousedown;
					elem.onmouseout = onMouseout;
					elem.onmouseover = onMouseover;
				}
				if (mNextBtn != null && mCfg.imageArray && mCfg.imageArray.length > mCfg.visibleEntries) {
					mNextBtn.setEnabled(true);
				}
			}
			else {
				if (elem) {
					elem.onmouseup = null;
					elem.onmousedown = null;
					elem.onmouseout = null;
					elem.onmouseover = null;
				}
			}

			setImgClickObservers();
		},
		setOnClickHandler : function(obj) {
			mCfg.onClickHandler = obj;
		},
		isEnabled : function() {
			return (initialized() && mCfg.enabled && mShowing);
		},
		setEnabled : function(enable) {
			enableChildControls(enable);
		}
	}
}