/**
 * dataArray: multi-dimensional array that has the following keys:
 *		- 'large'		: the url of the large image
 *		- 'small'		: the url of the small image (thumbnail)
 *		- 'caption'	: the caption of the image
 */
function SlideShow(objName, elementId, dataArray, autoPlay, highRes, onClickFunction, showThumbnails, showLeftArrow, showRightArrow, containerWidth, imageWidth, imageHeight) {

	this.mOnClickFunction = onClickFunction;
	this.mShowThumbnails = showThumbnails;
	this.mObjName = objName; 
	this.mElementId = elementId;
	this.mGalLrgInnerId = elementId + 'LargeInner';
	this.mMainPrevButtonId = elementId + 'MainPrev';
	this.mMainNextButtonId = elementId + 'MainNext';
	this.mShowLeftArrow = showLeftArrow;
	this.mShowRightArrow = showRightArrow;
	this.mCaptionId = this.mElementId + 'caption';
	this.mCaptionBgOpacity = 60;

	this.mDataArray = dataArray;
	this.mAutoPlay = autoPlay;
	this.mImageContainerWidth = containerWidth; //689;
	this.mImagePadding = 7;
	this.mImageWidth = imageWidth;
	this.mImagePosition = (this.mImageWidth == 496) ? -937 : -878;
	this.mImagePositionFixed = this.mImagePosition;
	this.mCurImgLrgId = 0;
	this.mClickable = true;
	this.mPlayDelay = 6500;
	
	// image properties
	this.mCurViewingImg = 0;
	this.mCurViewingBox = 0;
	this.mTotalImgBox = 5;
	this.mGalleryHeight = imageHeight;

	this.mGalLrgObj = gebi(this.mElementId);

	var caption_width = this.mImageWidth - 50;
	var caption_height = 75;
	var arrow_top = this.mGalleryHeight - 43;		
	var caption_left = parseInt((this.mImageContainerWidth - this.mImageWidth) / 2 + this.mImagePadding + 1);
	var caption_top = this.mGalleryHeight - caption_height + 8;
	this.mArrowRight = '/images/shared/arrow_right_ss.gif';
	this.mArrowRightHover = '/images/shared/arrow_right_ss_hover.gif';

	// gallery large
	change_style(this.mElementId, 'width', this.mImageContainerWidth + 'px');
	change_style(this.mElementId, 'position', 'relative');
	this.mGalLrgObj.innerHTML = '<table id="' + this.mCaptionId + 'Table" cellspacing="0" cellpadding="0" style="position:absolute; top:' + caption_top + 'px; left:' + caption_left + 'px; width:' + caption_width + 'px; height:' + caption_height + 'px; z-index:11;"><tr><td valign="middle" style="padding:0px 10px;"><div id="' + this.mCaptionId + '" class="textWhite"></div></td></tr></table>';
	this.mGalLrgObj.innerHTML += '<div id="' + this.mCaptionId + 'Bg" style="display:none; background:black; position:absolute; top:' + caption_top + 'px; left:' + caption_left + 'px; width:' + this.mImageWidth + 'px; height:' + caption_height + 'px; z-index:10;"></div>';
	this.mGalLrgObj.innerHTML += '<div style="width:' + this.mImageContainerWidth + 'px; overflow:hidden; height:' + this.mGalleryHeight + 'px; position:relative; top:0px; left:0px; z-index:9;"><div id="' + this.mGalLrgInnerId + '0" style="width:4000px; position:absolute; left:0px; z-index:15; background:white;"></div><div id="' + this.mGalLrgInnerId + '1" style="width:4000px; position:absolute; left:0px; top:0px; background:white; z-index:10; display:none;"></div>';
	if (this.mShowLeftArrow) {
		this.mGalLrgObj.innerHTML += '<div style="position:absolute; left:33px; top:' + arrow_top + 'px; z-index:12;"><a href="javascript: ' + this.mObjName + '.Stop(); ' + this.mObjName + '.StartScrollImage(1);"><img id="' + this.mMainPrevButtonId + '" src="/images/shared/arrow_left_ss.gif" onMouseOver="change_opacity(this, \'100\'); this.src=\'/images/shared/arrow_left_ss_hover.gif\'" onMouseOut="change_opacity(this, \'60\'); this.src=\'/images/shared/arrow_left_ss.gif\'"></a></div>';
		this.mMainPrevButtonObj = gebi(this.mMainPrevButtonId);
		change_opacity(this.mMainPrevButtonObj, '60');
	}
	if (this.mShowRightArrow) {
		this.mGalLrgObj.innerHTML += '<div style="position:absolute; left:' + (this.mImageContainerWidth - 46) + 'px; top:' + arrow_top + 'px; z-index:12;"><a href="javascript: ' + this.mObjName + '.Stop(); ' + this.mObjName + '.StartScrollImage(-1);"><img id="' + this.mMainNextButtonId + '" src="' + this.mArrowRight + '" onMouseOver="change_opacity(this, \'100\'); this.src=\'' + this.mArrowRightHover + '\'" onMouseOut="change_opacity(this, \'60\'); this.src=\'' + this.mArrowRight + '\'"></a></div>';
		this.mMainNextButtonObj = gebi(this.mMainNextButtonId);
		change_opacity(this.mMainNextButtonObj, '60');		
	}
	if (this.mShowThumbnails) {
		this.mGalLrgObj.innerHTML += '<div id="' + this.mThumbnailContainerId + '" class="bgLightOlive" style="width:' + this.mImageContainerWidth + 'px; padding:10px 0px; position:absolute; left:0px; z-index:20; display:none;"><table cellpadding="0" style="margin:auto;"><tr><td id="' + this.mPrevButtonId + '"><div style="width:5px; height:10px; display:block; padding:10px;"/></td><td><div style="width:557px; overflow:hidden; margin:auto;"><div id="' + this.mThumbnailId + '" style="width:4000px;"></div></div></td><td id="' + this.mNextButtonId + '"></td><td></tr></table></div></div>';
	}
	
	change_opacity(gebi(this.mCaptionId + 'Bg'), this.mCaptionBgOpacity);

	// preloading containers
	this.mGalLrgInnerObj0 = gebi(this.mGalLrgInnerId + '0');
	this.mGalLrgInnerObj1 = gebi(this.mGalLrgInnerId + '1');
	this.mGalLrgImg = new Array();
	for (var i = 0; i < this.mTotalImgBox; i++) {
		this.mGalLrgImg[i] = new Array();
		this.mGalLrgImg[i]['id'] = [this.mElementId + '0' + i, this.mElementId + '1' + i];
		this.mGalLrgInnerObj0.innerHTML += '<a id="link' + this.mGalLrgImg[i]['id'][0] + '"><img id="' + this.mGalLrgImg[i]['id'][0] + '" style="margin-right:7px; width:' + this.mImageWidth + 'px; height:' + this.mGalleryHeight + 'px;"/></a>';
		this.mGalLrgInnerObj1.innerHTML += '<a id="link' + this.mGalLrgImg[i]['id'][1] + '"><img id="' + this.mGalLrgImg[i]['id'][1] + '" style="margin-right:7px; width:' + this.mImageWidth + 'px; height:' + this.mGalleryHeight + 'px;"/></a>';
	}
	// preloading images
	for (var i = 0; i < this.mDataArray.length; i++) {
		this.mDataArray[i]['image'] = new Image();
		this.mDataArray[i]['image'].src = this.mDataArray[i]['large']; 
	}
	this.SetLargeImages(this.mCurViewingImg, false);
	this.Debug();
}

SlideShow.prototype.GetImageKey=function(currentKey, totalKey, offsetKey) {
	offsetKey = (typeof(offsetKey) == 'undefined') ? 1 : offsetKey;
	if (offsetKey == 0) {
		return currentKey;
	}
	currentKey = (offsetKey > 0) ? this.GetNext(currentKey, totalKey) : this.GetPrev(currentKey, totalKey);
	offsetKey = (offsetKey > 0) ? offsetKey - 1 : offsetKey + 1;
	return this.GetImageKey(currentKey, totalKey, offsetKey);
}

SlideShow.prototype.ToggleGalLrgInner=function() {
	change_style(this.mGalLrgInnerId + this.mCurImgLrgId, 'zIndex', '15');
	var fromId = this.mCurImgLrgId;
	this.mCurImgLrgId = (this.mCurImgLrgId == 0) ? 1 : 0;
	this.SetLargeImages(this.mCurViewingImg);
	change_style(this.mGalLrgInnerId + this.mCurImgLrgId, 'zIndex', '10');
	change_style(this.mGalLrgInnerId + this.mCurImgLrgId, 'display', '');
	this.Fade(this.mGalLrgInnerId + fromId, this.mGalLrgInnerId + this.mCurImgLrgId);
}

SlideShow.prototype.SetLargeImages=function(currentKey) {
	setTimeout(this.mOnClickFunction, 0);
	this.mCurViewingBox = Math.ceil(this.mTotalImgBox/2) - 1;
	var offset_to_start = -Math.floor(this.mTotalImgBox/2);
	var currentKey = this.GetImageKey(currentKey, this.mDataArray.length, offset_to_start);
	var temp_image = new Image();
	var this_obj = this;
	for (var i = 0; i < this.mTotalImgBox; i++) {
		if (i == this.mCurViewingBox) {
			change_opacity(gebi(this.mGalLrgImg[i]['id'][this.mCurImgLrgId]), 100);
			if (this.mDataArray[currentKey]['caption'] != '') {
				gebi(this.mCaptionId).innerHTML = this.mDataArray[currentKey]['caption'];
				setTimeout(function(){this_obj.FadeInCaption();}, 600);
			} else {
				gebi(this.mCaptionId).innerHTML = '';
				change_style(this.mCaptionId + 'Bg', 'display', 'none');
				change_style(this.mCaptionId + 'Table', 'display', 'none');
			}
		} else {
			change_opacity(gebi(this.mGalLrgImg[i]['id'][this.mCurImgLrgId]), 10);
		}
		gebi(this.mGalLrgImg[i]['id'][this.mCurImgLrgId]).onload = function(){this_obj.SetLargeImages2();};
		gebi(this.mGalLrgImg[i]['id'][this.mCurImgLrgId]).src = this.mDataArray[currentKey]['image'].src;
		if (this.mDataArray[currentKey]['link']) {
			gebi('link' + this.mGalLrgImg[i]['id'][this.mCurImgLrgId]).href = this.mDataArray[currentKey]['link'];
		}
		currentKey = this.GetNext(currentKey, this.mDataArray.length);
	}
}

SlideShow.prototype.SetLargeImages2=function() {
	this.mImagePosition = this.mImagePositionFixed;
	change_style(this.mGalLrgInnerId + this.mCurImgLrgId, 'marginLeft', this.mImagePosition + "px");
}

SlideShow.prototype.FadeInCaption=function() {
	change_style(this.mCaptionId, 'display', '');
	this.FadeIn(this.mCaptionId + 'Bg', this.mCaptionBgOpacity);
	this.FadeIn(this.mCaptionId + 'Table', 100);
}

SlideShow.prototype.Debug=function(currentKey) {
}

SlideShow.prototype.ShowImage=function(currentKey) {
	if (this.mClickable) {
		this.mClickable = false;
		if (this.mShowThumbnails) {
			this.ToggleShowThumbnail();
		}
		this.mCurViewingImg = currentKey;
		var fromId = this.mCurImgLrgId;
		this.mCurImgLrgId = (this.mCurImgLrgId == 0) ? 1 : 0;
		this.SetLargeImages(currentKey);
		this.Fade(this.mGalLrgInnerId + fromId, this.mGalLrgInnerId + this.mCurImgLrgId);
		if (gebi(this.mStartSlideshowId).innerHTML == 'Stop Slideshow') {
			this.Stop();
		}
	}
}

SlideShow.prototype.ShowThumbnail=function() {
	this.mViewThumbnailsObj.innerHTML = 'Hide Thumbnails';
	this.mViewThumbnailsArrowObj.innerHTML = '<img src="/images/shared/arrow_up_thumbnail.gif"/>';
}

SlideShow.prototype.HideThumbnail=function() {
	this.mViewThumbnailsObj.innerHTML = 'Show Thumbnails';
	this.mViewThumbnailsArrowObj.innerHTML = '<img src="/images/shared/arrow_red.gif"/>';
}

SlideShow.prototype.GetPrev=function(currentKey, total) {
	return (currentKey - 1 < 0) ? total - 1 : currentKey - 1;
}
SlideShow.prototype.GetNext=function(currentKey, total) {
	return (currentKey + 1 > total - 1) ? 0 : currentKey + 1;
}

SlideShow.prototype.StartScrollImage=function(direction) {
	this.Debug();
	if (this.mClickable) {
		this.Debug();
		this.mClickable = false;
		change_style(this.mCaptionId, 'display', 'none');
		change_style(this.mCaptionId + 'Bg', 'display', 'none');
		prev_img_width_pad = parseInt((this.mImageContainerWidth - gebi(this.mGalLrgImg[this.mCurViewingBox]['id'][this.mCurImgLrgId]).width) / 2) - this.mImagePadding;
		if (direction > 0) {
			this.mCurViewingImg = this.GetPrev(this.mCurViewingImg, this.mDataArray.length);
			this.mCurViewingBox = this.GetPrev(this.mCurViewingBox, this.mTotalImgBox);
		} else {
			this.mCurViewingImg = this.GetNext(this.mCurViewingImg, this.mDataArray.length);
			this.mCurViewingBox = this.GetNext(this.mCurViewingBox, this.mTotalImgBox);
		}
		var scroll_timer = new Array();
		var this_obj = this;
		var delay;
		scroll_width = this.mImageContainerWidth - (((this.mImageContainerWidth - gebi(this.mGalLrgImg[this.mCurViewingBox]['id'][this.mCurImgLrgId]).width) / 2) + prev_img_width_pad);
		for (var i = 0; i < scroll_width; i++) {
			delay = parseInt(i * 2);
			scroll_timer[i] = setTimeout(function(){this_obj.ScrollImage(direction)}, delay);
		}
		scroll_timer[i] = setTimeout(function(){this_obj.ToggleGalLrgInner(); this_obj.Debug();}, delay + 1);
	}
}

SlideShow.prototype.ScrollImage=function(direction) {
	if (direction > 0) {
		this.mImagePosition++;
	} else {
		this.mImagePosition--;
	}
	change_style(this.mGalLrgInnerId + this.mCurImgLrgId, 'marginLeft', this.mImagePosition + "px");
}

SlideShow.prototype.Fade=function(fromId, toId) {
	change_style(toId, 'zIndex', '10');
	change_style(toId, 'display', '');
	change_style(fromId, 'zIndex', '15');
	change_opacity(gebi(toId), 100);
	change_opacity(gebi(fromId), 100);
	
	var this_obj = this;
	var fadeTimer1 = new Array(), fadeTimer2 = new Array(), opacity1, opacity2, delay;
	for (var i = 1; i <= 20; i++) {
		opacity1 = 100 - parseInt(i*5);
		delay = parseInt(i * 15);
		fadeTimer1[i] = setTimeout('change_opacity(gebi("' + fromId + '"), ' + opacity1 + ')', delay);
	}
	fadeTimer1[i] = setTimeout(function(){change_style(fromId, 'display', 'none'); this_obj.mClickable=true; this_obj.Debug();}, delay + 1);
}

SlideShow.prototype.Play=function() {
	this.StartScrollImage(-1);
	var this_obj = this;
	this.PlayTimer = setTimeout(function(){this_obj.Play();}, this.mPlayDelay);
}

SlideShow.prototype.Stop=function() {
	clearTimeout(this.PlayTimer);
}

SlideShow.prototype.FadeIn=function(elementId, opacity) {
	change_opacity(gebi(elementId), 0);
	change_style(elementId, 'display', '');
	
	var this_obj = this;
	var fadeTimer1 = new Array(), opacity1, delay;
	for (var i = 1; i <= opacity; i++) {
		opacity1 = parseInt(i);
		delay = parseInt(i*15);
		fadeTimer1[i] = setTimeout('change_opacity(gebi("' + elementId + '"), ' + opacity1 + ')', delay);
	}
}