// BEGINFILE ThumbNailsArea.js ------------------------------------------------------------------------>
ThumbNailsArea.prototype = new AreaBase();
function ThumbNailsArea(container, containingWindow, ID)
{
	this.m_debugLevel = SfDebug.Verbose;
//	this.m_debugLevel = SfDebug.Information;

	this.InitializeArea(container, containingWindow, ID);

	// kinda private variables
	this.NumSlidesPerPage = 5;
	this.RestartButton = "";
	
	this.ThumbNailsDiv = "";	
	this.m_slides = new Array();
	this.SlidesInitialized = false;
	this.CurrentPage = -1;
	this.OriginalThumbNailWidth = null;
	this.OriginalThumbNailHeight = null;
	this.ShowSlider = true;//from page
	
	this.ShowEvery = 1;  
	
	this.OnLoad = function()
	{
		this.Debug("OnLoad()");
		this.InitializeThumbNailDimensions();
		this.InitializeNumSlidesPerPage();
		this.InitializeShowEvery();
		this.RegisterEvents();
		this.DrawPageIfShowing();
		this.Debug("Done OnLoad()");
	}

	this.ReInitialize = function()
	{
		this.Debug("Reinitialize()");
		
		this.ReDrawBlankPage();
		
		this.DrawPage(this.CalculatePageToRedraw());

	}
	
	this.CalculatePageToRedraw = function()
	{
		var currentPage = this.CalculateCurrentSlidePage();
		if (currentPage == -1)
		{
			return 1;
		}
		else
		{
			return currentPage;
		}
	}
	
	this.OnUnLoad = function()
	{
		MainHelper.EventPlayBegin.RemoveHandler(this.PlayBeginEventHandler);
		MainHelper.EventScript.RemoveHandler(this.ScriptEventHandler);
		MainHelper.EventOptionsChangeToAreas.RemoveHandler(this.OptionsChangeToAreasEventHandler);
	}

	this.InitializeThumbNailDimensions = function()
	{
		this.Debug("InitializeThumbNailDimensions()");

		this.SetPresentationThumbNailDimensions();
		this.RememberOriginalThumbNailSize();
	}
	
	this.SetPresentationThumbNailDimensions = function()
	{
		MainHelper.Presentation.ImageDimensions.ThumbNail.Width = Math.floor(this.ThumbNailWidth);
		MainHelper.Presentation.ImageDimensions.ThumbNail.Height = Math.floor(this.ThumbNailHeight);
	}
	
	this.RememberOriginalThumbNailSize = function()
	{
		this.OriginalThumbNailWidth = this.ThumbNailWidth;
		this.OriginalThumbNailHeight = this.ThumbNailHeight;
	}
	
	this.DrawPageIfShowing = function()
	{
		if (this.IsShowing())
		{
			this.DrawPage(1);
		}
	}

	this.RegisterEvents = function()
	{
		this.ScriptEventHandler = new SfEventHandler(this.Container);
		this.ScriptEventHandler.Container = this.Container;
		this.ScriptEventHandler.MethodName = "OnScriptEvent";
		MainHelper.EventScript.AddHandler(this.ScriptEventHandler);
		
		this.PlayBeginEventHandler = new SfEventHandler(this.ID);
		this.PlayBeginEventHandler.MethodName = "OnPlayBeginEvent";
		this.PlayBeginEventHandler.Container = this.Container;
		MainHelper.EventPlayBegin.AddHandler(this.PlayBeginEventHandler);
		
		this.OptionsChangeToAreasEventHandler = new SfEventHandler(this.Container);
		this.OptionsChangeToAreasEventHandler.MethodName = "OnOptionsChangeToAreasEvent";
		this.OptionsChangeToAreasEventHandler.Container = this.Container;
		MainHelper.EventOptionsChangeToAreas.AddHandler(this.OptionsChangeToAreasEventHandler);
	}

	this.OnPlayBeginEvent = function()
	{
		this.Debug("OnPlayBeginEvent");
		if (this.LastHilitedSlideNumber != -1)
		{
			this.UnHiliteSlide(this.LastHilitedSlideNumber);
		}
	}

	this.OnScriptEvent = function(args)
	{
		this.Debug("OnScriptEvent called: " + args.Command);
		if (args.Command != SfScriptCommandType.ShowSlide)
		{
			return;
		}
		
		var index = args.Index;
		if (index < 1)
		{
			this.Debug("Resetting");
			if (this.LastHilitedSlideNumber != -1)
			{
				this.UnHiliteSlide(this.LastHilitedSlideNumber);
				this.LastHilitedSlideNumber = -1;
			}
			return;
		}

		if (this.IsShowing() == false)
		{
			return;
		}

		var pageNumber = this.CalculateSlidePage(index);
		
		if (this.CurrentPage != pageNumber)
		{
			// the user is probably just skipping around
			if (this.LastHilitedSlideNumber != -1)
			{
				this.UnHiliteSlide(this.LastHilitedSlideNumber);
			}
			return;
		}
		
		if (MainHelper.DynamicAdd == true)
		{
			// always draw page
			this.DrawPage(pageNumber);
		}
		
		this.HiliteSlide(index);
	}
	
	this.OnOptionsChangeToAreasEvent = function(args)
	{
		if (args.OptionType == OptionType.ThumbNailsPerPage)
		{
			this.UpdateSlidesPerPage(args.Val);
		}
		else if (args.OptionType == OptionType.ShowEvery)
		{
			this.UpdateShowEvery(args.Val);
		}
	}
	
	this.Show = function()
	{
		this.Debug("Show()");
		var currentPage = this.CalculateCurrentSlidePage();
		if (currentPage != -1)
		{
			this.Debug("Drawing page: " + currentPage);
			this.DrawPage(currentPage);
		}
		else if (MainHelper.MaxSlideTimings > 0)
		{
			this.Debug("Drawing page: " + 1);
			this.DrawPage(1);
		}
		var div = this.GetDiv();
		div.style.display = '';
	}
	
	this.InitializeSlides = function()
	{
		this.Debug("InitializeSlides called");
		this.DrawBlankPage();		
		this.SlidesInitialized = true;  
	}

	this.InitializeNumSlidesPerPage = function()
	{
		this.Debug("Initialize NumSlidesPerPage called");
		var cookie = new SfCookie("NumSlidesPerPage");
		var value = cookie.Get();
		this.Debug("cookie Value: " + value);
		if (value)
		{
			this.NumSlidesPerPage = Number(value);
		}
	}

	this.InitializeShowEvery = function()
	{
		this.Debug("InitializeShowEvery()");
		var cookie = new SfCookie("ShowEvery");
		var value = cookie.Get();
		this.Debug("cookie Value: " + value);
		if (value)
		{
			this.ShowEvery = Number(value);
		}
	}

	this.CalculateSlidePage = function(slideNumber)
	{
		this.Debug("CalculateSlidePage, slideNumber: " + slideNumber);
		if (slideNumber < 0 || slideNumber > 10000)
		{
			SfDebug.DPF(SfDebug.ErrMsgCritical, "slideNumber < 0 || slideNumber > 10000. returning 1 as slidePage");
			return 1;
		}

		return Math.ceil(slideNumber / (this.NumSlidesPerPage * this.ShowEvery));
	}

	// returns the pagenumber where the current playing slide belongs
	this.CalculateCurrentSlidePage = function()
	{
		this.Debug("CalculateCurrentSlidePage called");
		var currentSlideNumber = MainHelper.CurrentSlideNumber;
		this.Debug("CurrentSlideNumber: " + currentSlideNumber);
		if (currentSlideNumber == -1)
		{
			return -1;
		}
		return this.CalculateSlidePage(currentSlideNumber);
	}
	
	this.DrawBlankPage = function()
	{
		this.Debug("DrawBlankPage called");
		this.ThumbNailsDiv = document.createElement("div");
		this.ThumbNailsDiv.setAttribute("id", "thumbNailsDiv");
		SfDOM.SetCssText(this.ThumbNailsDiv, "overflow:hidden; width: " + this.Width + "; height: " + this.Height + ";");

		var buttonContainer = document.createElement("span");
		this.ReplayButton = new ReplayButton(this, this.Container + ".ReplayButton");
		buttonContainer.appendChild(this.ReplayButton.CreateButtonArea());
		buttonContainer.className = "thumbNailReplayButtonContainer";
	
		var pagerContainer = document.createElement("span");
		this.PageLinkManager = new PageLinkManager(this);
		pagerContainer.appendChild(this.PageLinkManager.CreateTopPageLinks());

		this.ThumbNailsDiv.appendChild(buttonContainer);
		this.ThumbNailsDiv.appendChild(pagerContainer);

		var slidesContainer = document.createElement("div");
		slidesContainer.setAttribute("id", this.ID + "SlidesContainer");
		slidesContainer.className = 'thumbNailSlidesContainer';
		this.ThumbNailsDiv.appendChild(slidesContainer);

		for (var i=0; i<this.NumSlidesPerPage; ++i)
		{
			// add the element
			// have to create everytime because of freakin mac
			this.m_slides[i] = new SingleSlide(this, this.Container + ".m_slides[" + i + "]", i+1);
			slidesContainer.appendChild(this.m_slides[i].CreateBlankElement());
		}
		
		var oldElement = SfDOM.FindElementFromID(document, "thumbNailsDiv");
		this.GetDiv().replaceChild(this.ThumbNailsDiv, oldElement);

		if ((this.ShowSlider == true) && (this.IsMacSafari() == false))
		{
			this.Slider = new SizingSlider(this.Container + ".Slider", this, sliderTemplate);
			this.ThumbNailsDiv.appendChild(this.Slider.CreateSlider());
			this.Slider.Initialize();
		}
		this.Debug("finished drawing blank page");
	}
	
	this.IsMacSafari = function()
	{
		if (MainHelper.PlayerDetect.SystemInfo.Browser.Agent.indexOf("safari") > -1)
		{
			return true;
		}
		return false;
	}
	
	this.ReDrawBlankPage = function()
	{
		this.Debug("ReDrawBlankPage called");

		this.PageLinkManager.UpdatePageLinks();

		var slidesContainer = SfDOM.FindElementFromID(document, this.ID + "SlidesContainer");
		var firstChild = slidesContainer.firstChild;
		while (firstChild)
		{
			slidesContainer.removeChild(firstChild);
			firstChild = slidesContainer.firstChild;
		}

		this.m_slides = new Array();
		for (var i=0; i<this.NumSlidesPerPage; ++i)
		{
			// add the element
			// have to create everytime because of freakin mac
			this.m_slides[i] = new SingleSlide(this, this.Container + ".m_slides[" + i + "]", i+1);
			slidesContainer.appendChild(this.m_slides[i].CreateBlankElement());
		}

		this.Debug("finished redrawing blank page");
	}

	this.DrawPage = function(pageNumber)
	{
		this.Debug("Drawpage called: " + pageNumber);
		if (this.SlidesInitialized == false)
		{
			this.InitializeSlides();
		}		


		this.PageLinkManager.UpdatePageLinks(pageNumber);

		if (this.LastHilitedSlideNumber != -1)
		{
			this.UnHiliteSlide(this.LastHilitedSlideNumber);
		}

		var pageStartIndex = pageNumber * this.NumSlidesPerPage * this.ShowEvery - this.NumSlidesPerPage * this.ShowEvery;
		var pageEndIndex = pageNumber * this.NumSlidesPerPage * this.ShowEvery;
		// i = slidenumber, counter = position in page
		var counter = 0;
		var currentSlideNumber = MainHelper.CurrentSlideNumber;
		for (var i=pageStartIndex; i<pageEndIndex && i< MainHelper.MaxSlideTimings; i+=this.ShowEvery)
		{
			this.m_slides[counter].SlideNumberPortionInstance.SetSlideNumber(i+1);
			this.m_slides[counter].ImageElement.setAttribute("src", MainHelper.GetImageLocation(i+1, SlideType.ThumbNail));
			this.m_slides[counter].PreviewLinkInstance.Element.onclick = new Function("", this.Container + ".ShowBigSlide(" + (i+1) + ");");
			if (MainHelper.Presentation.Status != PresentationStatus.CaptureInProgress)
			{
				this.m_slides[counter].PlayLinkInstance.Element.onclick = new Function("", this.Container + ".NavigateToSlide(" + (i+1) + ");");			
			}
			this.m_slides[counter].Element.style.visibility = 'visible';

			if (i+1 == currentSlideNumber)
			{
				this.HiliteSlide(i+1);
			}
			++counter;
		}
		for (var i=counter; i<this.NumSlidesPerPage; ++i)
		{
			this.m_slides[i].Element.style.visibility = 'hidden';
		}
		
		this.CurrentPage = pageNumber;
		this.ThumbNailsDiv.scrollTop = 0;

		this.Debug("finished drawing page: " + pageNumber);
	}
	
	this.ChangeImageSize = function()
	{
		for (var i=0; i<this.NumSlidesPerPage; ++i)
		{
			this.m_slides[i].Element.style.width = this.ThumbNailWidth;
			this.m_slides[i].ImageElement.style.width = this.ThumbNailWidth;
			this.m_slides[i].ImageElement.style.height = this.ThumbNailHeight;
		}
	}

	this.LastHilitedSlideNumber = -1;
	this.HiliteSlide = function(slideNumber)
	{
		this.Debug("HiliteSlide: " + slideNumber);
		
		this.GetSlideObject(slideNumber).SlideNumberPortionInstance.Element.className = 'thumbNailSlideNumberCurrent';
		
		if (this.LastHilitedSlideNumber != -1 && this.LastHilitedSlideNumber != slideNumber)
		{
			this.UnHiliteSlide(this.LastHilitedSlideNumber);
		}
		this.LastHilitedSlideNumber = slideNumber;
	}
	
	this.UnHiliteSlide = function(slideNumber)
	{
		this.Debug("UnHiliteSlide: " + slideNumber);
		this.GetSlideObject(slideNumber).SlideNumberPortionInstance.Element.className = 'thumbNailSlideNumber';
	}
	
	this.GetSlideObject = function(slideNumber)
	{
		var pagePosition = (slideNumber - 1) % (this.NumSlidesPerPage * this.ShowEvery);
		var position = Math.floor( pagePosition / this.ShowEvery);
		return this.m_slides[position];
	}
	
	this.Debug = function(str)
	{
		SfDebug.DPF(this.m_debugLevel, "ThumbNailsArea: " + str);
	}

	this.ShowBigSlide = function(slideNumber)
	{
		MainHelper.CurrentPreviewImage = MainHelper.GetImageLocation(slideNumber, SlideType.FullSize);
		
		var areaManager = GetAreaManager();
		if (!areaManager)
		{
			this.Debug("could not find AreaManager");
			return;
		}	
			
		if (WindowHelper.IsOpen(MainHelper.PopupWindows.PreviewSlide) == true)
		{
			var previewSlide = areaManager.GetArea(AreaNames.PreviewSlideArea);
			if (previewSlide)
			{
				previewSlide.ChangeImage(MainHelper.CurrentPreviewImage);
			}
		}
		else
		{
			var width = MainHelper.DefaultFullSizeWidth + 2;
			var height = MainHelper.DefaultFullSizeHeight + 2;

			MainHelper.PopupWindows.PreviewSlide =

				WindowHelper.CreateNamedPopup(PopupNames.PreviewSlide, "PreviewSlide", width, height, true, true);
		}
	}

	// remember number is 1 indexed and not 0
	this.NavigateToSlide = function(slideNumber)
	{
		this.Debug("NavigateToSlide(slideNumber: " + slideNumber + ") called");
		var args = new CommandArgs(SfCommandType.NavigateToSlide);
		args.SlideNumber = slideNumber;
		MainHelper.EventCommand.Post(args);
	}
	
	this.UpdateThumbNailSize = function(ratio)
	{
		this.UpdateSlidesPerPage(this.GetRatioToNumSlidesMapping(ratio));
		
		this.ThumbNailWidth = Math.floor(this.OriginalThumbNailWidth*ratio);
		this.ThumbNailHeight = Math.floor(this.OriginalThumbNailHeight*ratio);
		this.ChangeImageSize();
		
		var args = new Object();
		args.OptionType = OptionType.ThumbNailsPerPage;
		args.Val = this.NumSlidesPerPage;
		MainHelper.EventOptionsChangeFromAreas.Post(args);
	}
	
	this.GetRatioToNumSlidesMapping = function(ratio)
	{
		if (ratio == 0.50)
		{
			return 20;
		}
		else if (ratio == 0.70)
		{ 
			return 15;
		}
		else if (ratio == 0.85)
		{
			return 10;
		}
		else if (ratio == 1)
		{
			return 5;
		}
		else
		{
			return 10;
		}
	}
	
	this.UpdateSlidesPerPage = function(numSlidesPerPage)
	{
		this.NumSlidesPerPage = numSlidesPerPage;//!!note: refactor
		var cookie = new SfCookie("NumSlidesPerPage");
		cookie.Set(numSlidesPerPage);
		cookie.Persist();
		this.ReInitialize();
	}
	
	this.UpdateShowEvery = function(showEvery)
	{
		this.ShowEvery = showEvery;
		var cookie = new SfCookie("ShowEvery");
		cookie.Set(showEvery);
		cookie.Persist();
		this.ReInitialize();
	}
	
	// A single slide represents one thumbnail
	// It contains a "PreviewLink" and a "PlayLink"
	// ParentArea is the ThumbNails area instance
	function SingleSlide(parentArea, container, position)
	{
		this.ParentArea = parentArea;
		this.Container = container;
		this.Position = position;
		this.PreviewLinkInstance = new PreviewLink(this.ParentArea, this.Container + ".PreviewLinkInstance", this.Position);
		this.PlayLinkInstance = new PlayLink(this.ParentArea, this.Container + ".PlayLinkInstance", this.Position);
		this.SlideNumberPortionInstance = new SlideNumberPortion();
		this.Hilite = false;

		this.CreateBlankElement = function()
		{
			var height = this.ParentArea.ThumbNailHeight + 'px';
			var width = this.ParentArea.ThumbNailWidth + 'px';
			
			var singleSlideElement = document.createElement("div");
			singleSlideElement.className = "thumbNailSlide";
			SfDOM.SetStyleAttribute(singleSlideElement, SfStyleAttributeType.Float, 'left');
			SfDOM.SetStyleAttribute(singleSlideElement, SfStyleAttributeType.Width, width);
			singleSlideElement.setAttribute("id", this.ID); 

			var imgContainer = document.createElement("div");
			singleSlideElement.appendChild(imgContainer);
			var imgElement = document.createElement("img");
			imgContainer.appendChild(imgElement);
			imgElement.style.width = width;
			imgElement.style.height = height;
			imgElement.style.left = '0px';
			this.ImageElement = imgElement;

			var bottomDiv = document.createElement("div");
			bottomDiv.className = "thumbNailBottomDiv";
			singleSlideElement.appendChild(bottomDiv);
			
			var slideNumberElement = this.SlideNumberPortionInstance.CreateBlankElement();
			bottomDiv.appendChild(slideNumberElement);

			var playLinkElement = this.PlayLinkInstance.CreateBlankElement();
			bottomDiv.appendChild(playLinkElement);

			var previewLinkElement = this.PreviewLinkInstance.CreateBlankElement();
			bottomDiv.appendChild(previewLinkElement);

			singleSlideElement.style.visibility = 'hidden';

			this.Element = singleSlideElement;			
			return singleSlideElement;
		}
		
		function SlideNumberPortion()
		{
			this.Element = null;
			
			var m_textNode = null;
			
			this.CreateBlankElement = function()
			{
				this.Element = document.createElement("div");
				this.Element.className = "thumbNailSlideNumber";
				SfDOM.SetStyleAttribute(this.Element, SfStyleAttributeType.Width, '20%');
				SfDOM.SetStyleAttribute(this.Element, SfStyleAttributeType.Float, 'left');
				return this.Element;
			}
			
			this.SetSlideNumber = function(slideNumber)
			{
				var newTextNode = document.createTextNode("" + slideNumber); 
				if (m_textNode == null)
				{
					this.Element.appendChild(newTextNode);
				}
				else
				{
					this.Element.replaceChild(newTextNode, m_textNode);
				}
				m_textNode = newTextNode;
			}
		}
		
		function PreviewLink(parentArea, container, position)
		{
			this.ParentArea = parentArea;
			this.Container = container;
			this.position = position;
			this.Element = null;
			
			this.CreateBlankElement = function()
			{
				this.Element = document.createElement("div");

				SfDOM.SetToolTip(this.Element, this.ParentArea.PreviewSlideToolTip);
				this.Element.className = "thumbNailPreviewLinkNormal";
				SfDOM.SetStyleAttribute(this.Element, SfStyleAttributeType.Float, 'right');
				Util.SetCursor(this.Element, CursorType.Hand);
				this.AddEvents(this.Element);

				return this.Element;
			}

			this.AddEvents = function(link)
			{
				link.onmouseover = new Function("", this.Container + ".OnMouseOver();");
				link.onmouseout = new Function("", this.Container + ".OnMouseOut();");
			}
			
			this.OnMouseOver = function()
			{
				this.Element.className = "thumbNailPreviewLinkOver";
			}

			this.OnMouseOut = function()
			{
				this.Element.className = "thumbNailPreviewLinkNormal";
			}
			
		}
		
		function PlayLink(parentArea, container, position)
		{
			this.ParentArea = parentArea;
			this.Container = container;
			this.Position = position;
			this.Element = null;

			this.CreateBlankElement = function()
			{
				this.Element = document.createElement("div");

				SfDOM.SetToolTip(this.Element, this.ParentArea.PlayFromSlideToolTip);
				this.Element.className = "thumbNailPlayLinkNormal";
				SfDOM.SetStyleAttribute(this.Element, SfStyleAttributeType.Float, 'right');
				
				if (MainHelper.Presentation.Status != PresentationStatus.CaptureInProgress)
				{
					Util.SetCursor(this.Element, CursorType.Hand);
					this.AddEvents(this.Element);
				}

				return this.Element;
			}

			this.AddEvents = function(link)
			{
				link.onmouseover = new Function("", this.Container + ".OnMouseOver();");
				link.onmouseout = new Function("", this.Container + ".OnMouseOut();");
			}
			
			this.OnMouseOver = function()
			{
				this.Element.className = "thumbNailPlayLinkOver";
			}

			this.OnMouseOut = function()
			{
				this.Element.className = "thumbNailPlayLinkNormal";
			}
		}
	}

	function ReplayButton(parentArea, container)
	{
		this.ParentArea = parentArea;
		this.Container = container;
		this.Element = null;

		this.CreateButtonArea = function()
		{			
			this.Element = document.createElement("div");
			SfDOM.SetToolTip(this.Element, this.ParentArea.ReplayButtonToolTip);
			Util.SetCursor(this.Element, CursorType.Hand);

			if (MainHelper.Presentation.Status == PresentationStatus.ReplayReady ) 
			{

				this.Element.className = 'thumbNailReplayButtonNormal';
				this.AddEvents(this.Element);
			}
			else 
			{
				this.Element.style.display = "none";
			}

			return this.Element;
		}
		
		this.AddEvents = function(link)
		{
			link.onmouseover = new Function("", this.Container + ".OnMouseOver();");
			link.onmouseout = new Function("", this.Container + ".OnMouseOut();");
		    link.onclick = new Function("", this.Container + ".OnClick()");
		}
		
		this.OnMouseOver = function()
		{
			this.Element.className = 'thumbNailReplayButtonOver';
		}

		this.OnMouseOut = function()
		{
			this.Element.className = 'thumbNailReplayButtonNormal';
		}

		this.OnClick = function()
		{
			var args = new CommandArgs(SfCommandType.NavigateToSlide);
			args.SlideNumber = "0";
			MainHelper.EventCommand.Post(args);
		
			MainHelper.CurrentSlideNumber = -1;
			MainHelper.EventPlayBegin.Post(new Object());
		}
	}

	function PageLinkManager(parentArea)
	{
		this.ParentArea = parentArea;
		this.SelectedPage = -1;
		this.DebugLevel = SfDebug.Verbose;
		  
		this.Debug = function(msg)
		{
			SfDebug.DPF(this.DebugLevel, "PageLinkManager: " + msg);
		}
						
		this.CreateTopPageLinks = function()
		{
			this.TopPageLinkChain = new PageLinkChain(this.ParentArea);
			var pageLinkElement = this.TopPageLinkChain.CreateElement();
			pageLinkElement.setAttribute("id", "pageLinkTop");
			SfDOM.SetCssText(pageLinkElement, 'text-align:right; width: 100%;');
			
			return pageLinkElement;
		}
		
		this.UpdatePageLinks = function(pageNumber)
		{
			this.SelectPage(pageNumber);
		}
		
		this.SelectPage = function(pageNumber)
		{
			this.TopPageLinkChain.SelectPage(pageNumber);
			this.SelectedPage = pageNumber;
		}

		function PageLinkChain(parentArea)
		{
			this.ParentArea = parentArea;
			this.NumLinks = 11;
			this.Element = null;
									
			this.CreateElement = function()
			{
				this.Element = document.createElement("div");
				this.Element.className = "thumbNailPager";
				var spanElement = document.createElement("span");
				this.Element.appendChild(spanElement);
				spanElement.className = "thumbNailPageLabel";
				var textNode = document.createTextNode(this.ParentArea.PagerPageText +  ": ");
				spanElement.appendChild(textNode);
				
				this.PageLinks = new Array(this.NumLinks + 4);
				for (var i=0; i<this.NumLinks+4; ++i)
				{
					this.AppendOneLink(spanElement, i);
				}
				
				return this.Element;
			}
			
			this.AppendOneLink = function(spanElement, index)
			{
				var onePageLink = new OnePageLink();
				spanElement.appendChild(onePageLink.CreateElement());
				this.PageLinks[index] = onePageLink;
			}
			
			function PageIndexCalculator(pageNumber, totalPages, toEachSide)
			{
				this.PageNumber = pageNumber;
				this.TotalPages = totalPages;
				this.ToEachSide = toEachSide;
				
				this.GetLeftOverFromEnd = function()
				{
					if ((this.TotalPages - this.PageNumber)  >= this.ToEachSide)
					{
						return 0;
					}
					else
					{
						return this.ToEachSide - (this.TotalPages - this.PageNumber);
					}
				}
				
				this.GetLeftOverFromStart = function()
				{
					if (this.PageNumber > this.ToEachSide)
					{
						return 0;
					}
					else
					{
						return this.ToEachSide - this.PageNumber + 1;
					} 
				}
				
				this.GetStartIndex = function()
				{
					return Math.max(1,  this.PageNumber - this.ToEachSide - this.GetLeftOverFromEnd());	
				}
				
				this.GetEndIndex = function()
				{
					return Math.min(this.TotalPages, this.PageNumber + this.ToEachSide + this.GetLeftOverFromStart());
				}
			}
			
			this.SelectPage = function(pageNumber)
			{
				var totalPages = this.GetTotalPages();
				var toEachSide = (this.NumLinks - 1) / 2;
				var pageIndexCalculator = new PageIndexCalculator(pageNumber, totalPages, toEachSide);
				var startIndex = pageIndexCalculator.GetStartIndex();
				var endIndex = pageIndexCalculator.GetEndIndex();

				var counter = 0;
				if (pageNumber > 1)
				{
					this.PageLinks[counter].SetTextAndPageNumber("<" + this.ParentArea.PagerPreviousText, pageNumber-1);
					this.PageLinks[counter].Show();
					this.PageLinks[counter].MakeLinkClickable();
					++counter;
				}
				for (var i=startIndex; i<=endIndex; ++i)
				{
					this.PageLinks[counter].SetTextAndPageNumber(i, i);
					this.PageLinks[counter].Show();
					if (i == pageNumber)
					{
						this.PageLinks[counter].MakeLinkUnClickable();
					}
					else
					{
						this.PageLinks[counter].MakeLinkClickable();
					}
					++counter;
				}
				this.PageLinks[counter].SetTextAndPageNumber(this.ParentArea.PagerOfText, null);
				this.PageLinks[counter].Show();
				this.PageLinks[counter].MakeLinkUnClickable();
				++counter;
				this.PageLinks[counter].SetTextAndPageNumber(this.GetTotalPages(), null);
				this.PageLinks[counter].Show();
				this.PageLinks[counter].MakeLinkUnClickable();
				++counter;
				
				if (pageNumber < totalPages)
				{
					this.PageLinks[counter].SetTextAndPageNumber(this.ParentArea.PagerNextText + ">", pageNumber+1);
					this.PageLinks[counter].Show();
					this.PageLinks[counter].MakeLinkClickable();
					++counter;
				}
				
				for (var i=counter; i<this.PageLinks.length; ++i)
				{
					this.PageLinks[i].Hide();
				}
			}

			this.GetTotalPages = function()
			{			
				if (MainHelper.MaxSlideTimings <= 0)
				{
					return 1;
				}
				return Math.ceil(MainHelper.MaxSlideTimings / (this.ParentArea.NumSlidesPerPage * this.ParentArea.ShowEvery));
			}
			
		}
		
		function OnePageLink()
		{
			this.Element = null;
			this.TextNode = null;
			this.Text = null;
			this.PageNumber = null;
			
			this.CreateElement = function()
			{
				this.Element = document.createElement("span");
				this.Element.className = "thumbNailPageNormal";
				var textNode = document.createTextNode("");
				this.Element.appendChild(textNode);
				this.TextNode = textNode;
				return this.Element;
			}
			
			this.SetTextAndPageNumber = function(text, pageNumber)
			{
				this.TextNode.nodeValue = text;
				this.Text = text;
				this.PageNumber = pageNumber;
			}

			this.MakeLinkUnClickable = function()
			{
				this.Element.className = "thumbNailPageCurrent";
				this.Element.style.textDecoration='none';
				Util.SetCursor(this.Element, CursorType.Default);
				this.Element.onclick = '';
			}

			this.MakeLinkClickable = function()
			{
				this.Element.className = "thumbNailPageNormal";
				this.Element.style.textDecoration='underline';
				Util.SetCursor(this.Element, CursorType.Hand);
				
				this.Element.onclick = new Function("", "ThumbNailsAreaInstance.DrawPage(" + this.PageNumber + ");");
			}
			
			this.Hide = function()
			{
				this.Element.style.visibility = 'hidden';
			}
	
			this.Show = function()
			{
				this.Element.style.visibility = 'visible';
			}
		}
	}
	
	function SizingSlider(container, parentArea, template)
	{
		this.Container = container;
		this.ParentArea = parentArea;
		this.Template = template;
		this.NamePrefix = 'thumbNailSlider';
		
		var m_debugLevel = SfDebug.Verbose;
//		var m_debugLevel = SfDebug.Information;

		var m_slider = null;
		var m_sliderClickEventHandler = null;
		var m_sliderDragEventHandler = null;
		var m_this = this;
		var m_currentPointNumber = 3;

		var Debug = function(msg)
		{
			SfDebug.DPF(m_debugLevel, "ThumbNailSlider: " + msg);
		}

		this.CreateSlider = function()
		{
			this.Element = document.createElement('div');
			this.Element.setAttribute('id', this.Container + 'Div');
			this.Element.style.position = 'absolute';
			this.Element.style.top = this.Template.Top + 'px';
			this.Element.style.left = this.Template.Left + 'px';
			this.Element.setAttribute('title', this.ParentArea.ChangeThumbNailSizeToolTip);
			var positionGuideDiv = document.createElement('div');
			positionGuideDiv.setAttribute('id', this.NamePrefix + '_positionGuide');
			positionGuideDiv.style.position = 'absolute';
			positionGuideDiv.style.zIndex = 1;
			positionGuideDiv.style.width = this.Template.Width + 'px';
			positionGuideDiv.style.height = this.Template.Height + 'px';
			this.Element.appendChild(positionGuideDiv);
			var backgroundImage = document.createElement('img');
			backgroundImage.style.width = this.Template.Width + 'px';
			backgroundImage.style.height = this.Template.Height + 'px';
			backgroundImage.setAttribute('src', this.ParentArea.ImageBase + '/slider_bkg.gif');
			backgroundImage.setAttribute('title', this.ParentArea.ChangeThumbNailSizeToolTip);
			Util.SetCursor(this.Element, CursorType.Hand);
			positionGuideDiv.appendChild(backgroundImage);
			var thumbNailDiv = document.createElement('div');
			thumbNailDiv.setAttribute('id', this.NamePrefix + '_thumb');
			thumbNailDiv.style.position = 'absolute';
			thumbNailDiv.style.zIndex = 2;
			thumbNailDiv.style.width = this.Template.ThumbNailWidth + 'px';
			thumbNailDiv.style.height = this.Template.ThumbNailHeight + 'px';
			thumbNailDiv.style.left = '0px';
			thumbNailDiv.style.top = '0px';
			this.Element.appendChild(thumbNailDiv);
			var thumbNailImage = document.createElement('img');
			thumbNailImage.style.width = this.Template.ThumbNailWidth + 'px';
			thumbNailImage.style.height = this.Template.ThumbNailHeight + 'px';
			thumbNailImage.setAttribute('src', this.ParentArea.ImageBase + '/thumb.gif');
			thumbNailImage.setAttribute('title', this.ParentArea.ChangeThumbNailSizeToolTip);
			Util.SetCursor(this.Element, CursorType.Hand);
			thumbNailDiv.appendChild(thumbNailImage);
			return this.Element;
		}
		
		this.Initialize = function()
		{
			Debug("Initialize()");
			m_slider = new SfDiscreteSlider(this.NamePrefix, SfSliderOrientation.Horizontal, 4);
			m_slider.OnLoad();
			m_slider.SetPointNumber(m_currentPointNumber);
			AddEventHandlers();
		}
		
		var AddEventHandlers = function()
		{
			Debug("AddEventHandlers()");

			m_sliderClickEventHandler = new SfEventHandler(m_this.Container);
			m_sliderClickEventHandler.MethodName = "OnSliderClick";
			m_sliderClickEventHandler.Container = m_this.Container;
			m_slider.ClickEvent.AddHandler(m_sliderClickEventHandler);

			m_sliderDragEventHandler = new SfEventHandler(m_this.Container);
			m_sliderDragEventHandler.MethodName = "OnSliderDrag";
			m_sliderDragEventHandler.Container = m_this.Container;
			m_slider.DragEvent.AddHandler(m_sliderDragEventHandler);
		}
	
		var RemoveEventHandlers = function()
		{
			Debug("RemoveEventHandlers()");
			m_slider.ClickEvent.RemoveHandler(m_sliderClickEventHandler);
			m_slider.DragEvent.RemoveHandler(m_sliderDragEventHandler);
		}
		
		this.OnSliderClick = function(args)
		{
			Debug("OnSliderClick(): " + args.Position);
			ChooseClosestPoint(args.Position);
		}
		
		this.OnSliderDrag = function(dragArgs)
		{
			Debug("OnSliderDrag(): , type: " +  dragArgs.DragEventType + ", position: " + dragArgs.Position);

			if (dragArgs.DragEventType == SfSliderDragEventType.DragMove)
			{
				m_slider.SetPosition(dragArgs.Position);  
			}
			else if (dragArgs.DragEventType == SfSliderDragEventType.BeginDrag)
			{
			}
			else if (dragArgs.DragEventType == SfSliderDragEventType.EndDrag)
			{
				ChooseClosestPoint(dragArgs.Position);
			}
		}
	
		var ChooseClosestPoint = function(pos)
		{
			var closestPoint = m_slider.FindClosestPointNumber(pos);
			ChoosePoint(closestPoint);
		}
		
		var ChoosePoint = function(pointNumber)
		{
			m_slider.SetPointNumber(pointNumber);
			if (pointNumber != m_currentPointNumber)
			{
				m_currentPointNumber = pointNumber;
				OnSliderPointChange();
			}
		}
		
		var OnSliderPointChange = function()
		{
			switch (m_currentPointNumber)
			{
				case 0:
					m_this.ParentArea.UpdateThumbNailSize(0.50);
					break;
				case 1:
					m_this.ParentArea.UpdateThumbNailSize(0.70);
					break;
				case 2:
					m_this.ParentArea.UpdateThumbNailSize(0.85);
					break;
				case 3:
					m_this.ParentArea.UpdateThumbNailSize(1);
					break;
				case 4:
					m_this.ParentArea.UpdateThumbNailSize(1.25);
					break;
				case 5:
					m_this.ParentArea.UpdateThumbNailSize(1.5);
					break;
			}
		}
	}
}
// ENDFILE ThumbNailsArea.js -------------------------------------------------------------------------->