/**********************************************************************************************************************

	Thumbnail Image Scroller control using jQuery by Ryan Andersen (c)2009
	
 **********************************************************************************************************************/
	
	var gMainControlWidth = 651;
	var gMainControlBkgColor = "#FFF";
	var DisplaySetID = 0;
	var MaxThumbsToShow = 10;	// based on width of client (see SetupWIndow)
	var ThumbBegin = 0;
	var ThumbEnd = 0;
	var ThumbCount = 0;
	var ImgsLoaded = [];
	var tmpS = "";
	var LastPhotoSelected = 0;
	var DefaultThumbSize = 140;
	var DefaultThumbPadding = 2;
	var LastSlideDirection = "";
	
	var gAutoScroll = true;
	
	function ClientInfo(){
		this.Width
		this.Height
	}
	
	function getClientInfo(cltInfo){
		if($.browser.msie){
			cltInfo.Height = document.documentElement.clientHeight;
			cltInfo.Width = document.documentElement.clientWidth;
		} else {
			cltInfo.Height = window.innerHeight;
			cltInfo.Width = window.innerWidth;
		}		
	}	
	function ImgPhoto(pID, pHash, pWidth, pHeight){
		this.photoID = pID;
		this.SetID = 0;
		this.photoHash = pHash;
		this.photoWidth = pWidth;
		this.photoHeight = pHeight;
		this.originalWidth = pWidth;
		this.originalHeight = pHeight;
		this.photoStyle = "padding: 5px; opacity: 0; filter:alpha(opacity=0);";
		this.DisplaySizeOnImage = false;
		this.name = "CurrentPhoto";
		this.border = 0;
		this.MaxScale = 600;
		this.AutoScale = false;
		this.winHeight = 0;	// only works with AutoScale
		this.winWidth = 0;  // only works with AutoScale
		this.Filename = "";
		this.Filesize = "";
		this.Rating = 0;
		this.alt = "";
		this.Owner = "";
		this.stdSrc = "/PhotoGallery/PhotoScaler.asp?ID=";
		this.UseTableToCenter = true;
		this.Description = "";
		this.buildTag = function() {
				
				var sImg = "<img";
				if(this.photoID.length > 0 || eval(this.photoID) > 0)
					sImg += " id=^" + this.photoID + "^";
				if(this.photoStyle.length > 0)
					sImg += " style=^" + this.photoStyle + "^";
				if(this.name.length > 0)
					sImg += " name=^" + this.name + "^";
					
				// src
				sImg += " src=^" + this.stdSrc + this.alt;	// note: we uswe alt for the database img id 
				if(eval(this.MaxScale) > 0)
					sImg += "&MaxScale=" + this.MaxScale;
				if(this.DisplaySizeOnImage)
					sImg += "&DisplaySizeOnImage=y";
				if(this.AutoScale){
					sImg += "&AutoScale=y";	// will scale height first, then width
					if(this.winHeight > 0 && this.winWidth)
						sImg += "&w=" + this.winWidth + "&h=" + this.winHeight;
				}
				sImg += "^";
				
				if(eval(this.photoWidth) > 0)
					 sImg += " width=^" + this.photoWidth + "^";
				if(eval(this.photoHeight) > 0)
					sImg += " height=^" + this.photoHeight + "^";
				
				sImg += " alt=^" + this.alt +  "^";
				sImg += " border=^" + this.border + "^";
				sImg += " />";
				return sImg.replace(/\^/g, '"');
			}
	}
	
	function PhotosLoaded(data)
	{
		$("#ScrollArea").html(data);

		//show the first MaxThumbsToShow
		ThumbBegin = 0;
		ThumbEnd = ThumbBegin + MaxThumbsToShow -1;
		for(var i = ThumbBegin; i <= ThumbEnd; i++){
			sAlt = ImgsLoaded[i].alt;
			$("img[alt='" + sAlt + "']").fadeTo(300, 0.80).css("display", "");
		}
		
		// set up mouse events for the thumbs nails
		$("img[id='Thumbnails']").mouseover(function (){
			$(this).fadeTo(300, 1).mouseleave(function (){
				$(this).fadeTo(300, 0.80)
			});
		});
		
		/*$("img[id='Thumbnails']").click(function (){
			var i = $(this).attr("alt");
			PhotoSelected(i);
		});*/

		var imgs = $("img[id='Thumbnails']");
		$.each(imgs, function(p){
			$(this).click( function() {
				doViewPhoto(ImgsLoaded[p].photoID, ImgsLoaded[p].photoHash, ImgsLoaded[p].SetID, '')
			});
		});
		
	}

	function doViewPhoto(rID, xzhash, zSetID, Cat){
		window.location = "/PhotoGallery/PhotoSetView.asp?s=" + zSetID;
	}
	
	function SlideThumbs(whichWay, UserClicked){
		var sAlt;
		var iB = ThumbBegin;
		var iE = ThumbEnd;
		var iM = MaxThumbsToShow;
		
		if (UserClicked == true) gAutoScroll = false;
		if(gAutoScroll == true){
			// hide existing displayed photos
			for(var i = ThumbBegin; i <= ThumbEnd; i++){
				sAlt = ImgsLoaded[i].alt;
				$("img[alt='" + sAlt + "']").fadeTo(300, 0.0).css("display", "none");
			}
			if(ThumbEnd + MaxThumbsToShow > ThumbCount){
				ThumbBegin = 0;
				ThumbEnd = ThumbBegin + MaxThumbsToShow -1;			
			}
			window.setTimeout(function () { if(gAutoScroll) SlideThumbs(1, UserClicked)}, 8000);	
		}
				
		if(whichWay < 0){ // prev
			if(ThumbBegin > 0){
				// hide existing displayed photos
				for(var i = ThumbBegin; i <= ThumbEnd; i++){
					sAlt = ImgsLoaded[i].alt;
					$("img[alt='" + sAlt + "']").fadeTo(300, 0.0).css("display", "none");
				}
	
				if(ThumbBegin - MaxThumbsToShow > 0){
					ThumbBegin -= MaxThumbsToShow;
					ThumbEnd = ThumbBegin + MaxThumbsToShow -1;
					$("#btnPrev").mouseover(function(){ 
						$(this).attr("src", "/images/btnThumbPrevOver.png").mouseleave(function (){
							$(this).attr("src", "/images/btnThumbPrev.png")
						});
					});
				} else {
					ThumbBegin = 0;
					ThumbEnd = ThumbBegin + MaxThumbsToShow -1;
					$("#btnPrev").mouseover(function(){ 
						$(this).attr("src", "/images/btnThumbPrev.png").mouseleave(function (){
							$(this).attr("src", "/images/btnThumbPrev.png")
						});
					});
				}
	
				// show the new set
				for(var i = ThumbBegin; i <= ThumbEnd; i++){
					sAlt = ImgsLoaded[i].alt;
					$("img[alt='" + sAlt + "']").fadeTo(300, 0.70).css("display", "");
				}
			}
		
		} else if(whichWay > 0) { // next
			if (ThumbEnd < ThumbCount -1){
				// hide existing displayed photos
				for(var i = ThumbBegin; i <= ThumbEnd; i++){
					sAlt = ImgsLoaded[i].alt;
					$("img[alt='" + sAlt + "']").fadeTo(300, 0.0).css("display", "none");
				}
				
				if(ThumbEnd + MaxThumbsToShow < ThumbCount){
					ThumbBegin += MaxThumbsToShow;
					ThumbEnd = ThumbBegin + MaxThumbsToShow -1;
					$("#btnNext").mouseover(function(){ 
						$(this).attr("src", "/images/btnThumbNextOver.png").mouseleave(function (){
							$(this).attr("src", "/images/btnThumbNext.png")
						});
					});
				} else {
					ThumbEnd = ThumbCount -1;
					ThumbBegin = ThumbEnd - MaxThumbsToShow +1;
					$("#btnNext").mouseover(function(){ 
						$(this).attr("src", "/images/btnThumbNext.png").mouseleave(function (){
							$(this).attr("src", "/images/btnThumbNext.png")
						});
					});
				}
			
				// show the new set
				for(var i = ThumbBegin; i <= ThumbEnd; i++){
					sAlt = ImgsLoaded[i].alt;
					$("img[alt='" + sAlt + "']").fadeTo(300, 0.70).css("display", "");
				}
			}
		}
	}
	
	function reloadPage(){
		//window.location = document.location.href;
	}

	$(window).load(function() {
		//window.setTimeout("reloadPage()", 660000);
		SetupWindow();
		//$(window).resize(SetupWindow);
	});

	function SetupWindow(){
		

		DefaultThumbSize = 110;
		var PrevNextTop = 0;
		var ScrollerBkgColor = gMainControlBkgColor;
		if (DefaultThumbSize > 100) PrevNextTop = Math.floor( (DefaultThumbSize - 100)/2);
		var ScrollDivWidth = gMainControlWidth;
		var ScrollAreaLeft = 31;	// the prev/next arrow icons are 31 pixels wide
		var ScrollAreaWidth = ScrollDivWidth - 62;
		
		// figure out how many photos will fit
		MaxThumbsToShow = Math.floor(ScrollAreaWidth / (DefaultThumbSize + 2));
		ThumbEnd = ThumbBegin + MaxThumbsToShow -1;
		
		// now figure out what size the thumb padding needs to be to even space the photos without wrapping in the div
		DefaultThumbPadding = Math.floor( ((ScrollAreaWidth / MaxThumbsToShow) - DefaultThumbSize) / 2 ) -2;
		if(DefaultThumbPadding <= 1) DefaultThumbPadding = 0;
		
		$("#ThumbContainer").html("");
		with($("#ThumbContainer")){
			empty();
			controlWidthStr = gMainControlWidth + "px;"
			css("position", "relative");
			css("background-color", gMainControlBkgColor);
			css("height", "100%").css("width", controlWidthStr);
			append("<div id=\"ScrollDiv\"></div>");
		}
		var sPrev = "<img id=^btnPrev^ src=^/images/btnThumbPrev.png^ width=^31^ height=^100^ alt=^^ onclick=^SlideThumbs(-1, true)^ />"
		var sNext = "<img id=^btnNext^ src=^/images/btnThumbNext.png^ width=^31^ height=^100^ alt=^^ onclick=^SlideThumbs(1, true)^ />"
		with($("#ScrollDiv")){
			css("position", "relative");
			css("overflow", "hidden");
			//css("top", 0).css("left", 0);
			css("height", DefaultThumbSize).css("width", ScrollDivWidth);
			css("background-color", ScrollerBkgColor);
			css("color", "#DEDEDE");
			append(sPrev.replace(/\^/g, '"'))
			append("<div id=\"ScrollArea\"></div>")
			append(sNext.replace(/\^/g, '"'))
		}
		with($("#btnPrev")){
			css("position", "absolute");
			css("top", PrevNextTop).css("left", 0);
		}
		with($("#btnNext")){
			css("position", "absolute");
			css("top", PrevNextTop).css("left",  ScrollDivWidth-31);
		}
		with($("#ScrollArea")){
			css("position", "absolute");
			css("overflow", "hidden");
			//css("border", "1px solid #cccccc")
			css("top", 0).css("left", 31);
			css("height", DefaultThumbSize).css("width", ScrollAreaWidth);
			css("background-color", ScrollerBkgColor);
			css("color", "#DEDEDE");
		}
		
		$("#btnPrev").mouseover(function(){ 
			$(this).attr("src", "/images/btnThumbPrev.png").mouseleave(function (){
				$(this).attr("src", "/images/btnThumbPrev.png")
			});
		});
		
		$("#btnNext").mouseover(function(){ 
			$(this).attr("src", "/images/btnThumbNextOver.png").mouseleave(function (){
				$(this).attr("src", "/images/btnThumbNext.png")
			});
		});
		
		var sPs = "DisplaySetID=" + DisplaySetID + "&PhotoSize=" + DefaultThumbSize + "&ThumbPadding=" + DefaultThumbPadding;
		$.post("/PhotoGallery/getLatestPhotos.asp", sPs, PhotosLoaded);
		
		window.setTimeout(function () { SlideThumbs(1, false)}, 8000);	
	}