//////////////////////////////////
// CTopItems
	
	function CTopItems(rootElement, nWidth, nHeight, nDelay, imageArray, hrefArray) 
	{		
		var hiddenImagesElement = document.getElementById("hiddenimages");
		this.rootElement = rootElement;
		this.nFadeTime = 1000.0;
		this.nImageIndex = 0;		// Shown image index
		this.nNextImageIndex = 1;	// Next image index to show
		this.nDelay = nDelay;		// How many seconds image will be shown on the page
		this.Images = new Array();	
		this.ImageIndexOrderArray = new Array(); // Array of image indexes in loaded order
		for (var nIndex = 0; nIndex < imageArray.length; nIndex++) 
		{
			this.Images[this.Images.length] = new CResizedImage(
				hiddenImagesElement,
				document.getElementById("hiddentopItems"),
				nWidth, nHeight,
				imageArray[nIndex],
				CTopItems_OnImageLoaded
				);
			this.Images[this.Images.length - 1].TopItems = this;
			this.Images[this.Images.length - 1].nImageIndex = nIndex;
			this.Images[this.Images.length - 1].sHref = hrefArray[nIndex];
		}
			
		this.SetImageOpacity =
			function(nIndex, fOpacity)
			{
				var image = this.Images[nIndex].ImageElement;
				image.style.opacity = fOpacity;
				image.style.filter = 'alpha(opacity=' + fOpacity * 100 + ')'; 
			}
			
		this.SetImageZIndex =
			function(nIndex, nZIndex)
			{
				this.Images[nIndex].ImageElement.style.zIndex = nZIndex;
			}
			
		this.OnImagesLoaded = CTopItems_OnImagesLoaded;
		this.BeginFade = CTopItems_BeginFade;
		this.ContinueFade = CTopItems_ContinueFade;
	}
	
		function Debug(sText)
		{
			if (true)
			{
				var debugElement = document.getElementById("map"); // TODO: Temporary
				debugElement.appendChild(document.createTextNode(sText));
				debugElement.appendChild(document.createElement("br"));
			}
		}
	
		function CTopItems_OnImageLoaded() 
		{
			this.style.display = "block";
			var topItems = this.ResizedImageOwner.TopItems;			
			Debug("CTopItems_OnImageLoaded: nImageIndex " + this.ResizedImageOwner.nImageIndex);
			topItems.ImageIndexOrderArray[topItems.ImageIndexOrderArray.length] = this.ResizedImageOwner.nImageIndex;
			if (topItems.ImageIndexOrderArray.length < topItems.Images.length)
				return;
			topItems.OnImagesLoaded();
		}

		function CTopItems_OnImagesLoaded()
		{
			Debug("CTopItems_OnImagesLoaded()");
			if (true)
			{
				// Debug
				for (var nIndex = 0; nIndex < this.Images.length; nIndex++)
				{
					var imageElement = this.Images[nIndex].ImageElement;
					var offset = $(imageElement).offset();
					var position = $(imageElement).position();
					Debug("nIndex " + nIndex + ": offset { " + offset.left + ", " + offset.top + " }, position { " + position.left + ", " + position.top + " } width " + $(imageElement).width() + ", height " + $(imageElement).height());					
				}
			}
			
			Debug("Calculating positions: this.ImageIndexOrderArray.length " + this.ImageIndexOrderArray.length);			
			
			var firstImageOffset;
			var maximalHeight = 0;
			for (var nIndex = 0; nIndex < this.ImageIndexOrderArray.length; nIndex++)
			{				
				var nImageIndex = this.ImageIndexOrderArray[nIndex];
				var imageElement = this.Images[nImageIndex].ImageElement;
				var offset = $(imageElement).offset();
				Debug("nIndex " + nIndex + ", nImageIndex " + nImageIndex + ", offset (" + offset.left + ", " + offset.top + ")");
				var height = $(imageElement).height();
				if (height > maximalHeight)
					maximalHeight = height;
				if (nIndex == 0)
				{
					firstImageOffset = offset;
				}
				else
				{
					imageElement.style.position = "relative";
					imageElement.style.top = (firstImageOffset.top - offset.top) + "px";
					Debug("imageElement.style.top " + imageElement.style.top);
				}
			}
			Debug("maximalHeight " + maximalHeight);
			
			for (var nIndex = 0; nIndex < this.ImageIndexOrderArray.length; nIndex++)
			{
				var nImageIndex = this.ImageIndexOrderArray[nIndex];
				var nZIndex = nImageIndex == 0 ? 1 : 0;
				var nImageOpacity = nImageIndex == 0 ? 1.0 : 0.0;
				if (nImageIndex == 0)
					this.rootElement.setAttribute("href", this.Images[this.nImageIndex].sHref);
				this.SetImageZIndex(nImageIndex, nZIndex);
				this.SetImageOpacity(nImageIndex, nImageOpacity);
			}
			
			var topItemsRootElement = document.getElementById("topItems_root");
			var topItemsElement = document.getElementById("topItems");	
			topItemsRootElement.maxHeight = maximalHeight;
			
			Debug($(topItemsElement).height());
			Debug($(topItemsRootElement).height());
			
			if (true)
			{
				var nRootWidth = 0, nRootHeight = 0;
				for (var nIndex = 0; nIndex < this.ImageIndexOrderArray.length; nIndex++)
				{
					var nImageIndex = this.ImageIndexOrderArray[nIndex];
					var imageElement = this.Images[nImageIndex].ImageElement;
					topItemsElement.appendChild(imageElement);
					if (nIndex == 0)
					{
						nRootWidth = $(topItemsRootElement).width();
						nRootHeight = $(topItemsRootElement).height();
						continue;
					}
					imageElement.style.display = "none";
				}
				//topItemsRootElement.style.width = nRootWidth + "px";
				//topItemsRootElement.style.height = maximalHeight + "px";
				
				
				//topItemsElement.style.height = maximalHeight + "px";
				//topItemsElement.height = maximalHeight + "px";
				//topItemsRootElement.style.height = maximalHeight + "px";
				//topItemsRootElement.height = maximalHeight + "px";
				
				
				
				$(topItemsRootElement).height(maximalHeight + 30);
				$(topItemsElement).height(maximalHeight + 30);
				
				Debug($(topItemsElement).height());
				Debug($(topItemsRootElement).height());
			}
			
			for (var nIndex = 0; nIndex < this.ImageIndexOrderArray.length; nIndex++)
			{
				var imageElement = this.Images[nImageIndex].ImageElement;
				imageElement.style.display = "inline-block";
			}

			var thisPointer = this;
			setTimeout(
				function()
				{
					thisPointer.BeginFade()
				},
				this.nDelay * 1000);			
		}		
		
		function CTopItems_BeginFade()
		{			
			this.nNextImageIndex = this.nImageIndex + 1;
			if (this.nNextImageIndex >= this.Images.length)
				this.nNextImageIndex = 0;
			
			this.FadeTimeLeft = this.nFadeTime;
			var time = new Date().getTime();
			var thisPointer = this;
			setTimeout
				(
					function()
					{
						thisPointer.ContinueFade(time);
					},
					33
				);
		}		
		
		function CTopItems_ContinueFade(lastTime) 
		{
			var currentTime = new Date().getTime();
			var elapsedTime = currentTime - lastTime;
			
			var image = this.Images[this.nImageIndex].ImageElement;			
			//Debug("image.x " + image.x + ", image.y " + image.y);
			var nextImage = this.Images[this.nNextImageIndex].ImageElement;
			
			if (this.FadeTimeLeft < elapsedTime)
			{
				this.SetImageZIndex(this.nImageIndex, 0);
				this.SetImageOpacity(this.nImageIndex, 0.0);						
				
				this.SetImageZIndex(this.nNextImageIndex, 1);
				this.SetImageOpacity(this.nNextImageIndex, 1.0);					

				this.nImageIndex = this.nNextImageIndex;				
				this.rootElement.setAttribute("href", this.Images[this.nImageIndex].sHref);
				
				var thisPointer = this;
				setTimeout(
					function()
					{
						thisPointer.BeginFade();
					},
					this.nDelay * 1000);
				return;
			}
			this.FadeTimeLeft -= elapsedTime;
			var fNewOpacityValue = this.FadeTimeLeft / this.nFadeTime;
			
			this.SetImageOpacity(this.nImageIndex, fNewOpacityValue);
			//this.rootElement.appendChild(document.createTextNode("fNewOpacityValue " + (1.0 - fNewOpacityValue) + ", "));
			this.SetImageOpacity(this.nNextImageIndex, (1.0 - fNewOpacityValue));
			
			var thisPointer = this;
			setTimeout
				(
					function()
					{
						thisPointer.ContinueFade(currentTime);
					},
					75
				);
		}

//////////////////////////////////
// Main

var mygallery4;
		
function UpdateTopItems(xmlDoc)
{	
	var topItemsXmlNodes = GetChildNodesByTagName(xmlDoc, "topitems");
	if (topItemsXmlNodes.length == 0) // Data base isn't updated
		return;
	var topItemsXmlNode = topItemsXmlNodes[0];
	var visibilityNodes = GetChildNodesByTagName(GetChildNodesByTagName(topItemsXmlNode, "topitems_visibility")[0], "iv_category");	
	var bVisible = GetPage() == "index" || GetPage() == "";	
	if (bVisible && sSelectedCategory.length > 0)
	{
		bVisible = false;
		for (var nIndex = 0; nIndex < visibilityNodes.length; nIndex++)
		{
			if (GetAttribute(visibilityNodes[nIndex], 'id') != sSelectedCategory)
				continue;
			bVisible = true;
			break;
		}
	}		
	if (!bVisible)
		return;
		
	var topItemsRootElement = document.getElementById("topItemsRoot");
	topItemsRootElement.style.display = "block";
	
	var imageNodes = GetChildNodesByTagName(topItemsXmlNode, "image");
	var imageArray = new Array();
	var hrefArray = new Array();
	for (var nIndex = 0; nIndex < imageNodes.length; nIndex++)
	{
		var sImageSource = GetAttribute(imageNodes[nIndex], "src");
		var sItemIdentifier = GetAttribute(imageNodes[nIndex], "item_id");
		var sCategoryIdentifier = GetAttribute(imageNodes[nIndex], "category_id");
		if (!sItemIdentifier.length && !sCategoryIdentifier.length)
			continue;
		var sHref = sItemIdentifier.length > 0 ? GetItemHref(sItemIdentifier) : GetCategoryHref(sCategoryIdentifier);
		//alert("sImageSource " + sImageSource + ",  sHref " +  sHref);
		imageArray[imageArray.length] = sImageSource;
		hrefArray[hrefArray.length] = sHref;
	}
	if (imageArray.length < 2)
		alert("Error: topItems images count must be more than 2");
	var nDelay = GetAttribute(topItemsXmlNode, "delay");	
	var galleryImages = new Array();
	for (var nIndex = 0; nIndex < imageArray.length; nIndex++)
		galleryImages[galleryImages.length] = [ imageArray[nIndex], hrefArray[nIndex], "", "" ];
		
	mygallery4=new fadeSlideShow({
		wrapperid: "topItems", //ID of blank DIV on page to house Slideshow
		dimensions: [640, 260], //width/height of gallery in pixels. Should reflect dimensions of largest image
		imagearray: galleryImages,
		displaymode: {type:'auto', pause:nDelay * 1000, cycles:0, wraparound:false},
		persist: false, //remember last viewed slide and recall within same session?
		fadeduration: 1000, //transition duration (milliseconds)
		descreveal: "ondemand",
		togglerid: ""
	})	

	
		
		
	/*
		
	var topItemsRootElement = document.getElementById("topItems_root");
	topItemsRootElement.style.display = "block";
	
	var imageNodes = GetChildNodesByTagName(topItemsXmlNode, "image");
	var imageArray = new Array();
	var hrefArray = new Array();
	for (var nIndex = 0; nIndex < imageNodes.length; nIndex++)
	{
		var sImageSource = GetAttribute(imageNodes[nIndex], "src");
		var sItemIdentifier = GetAttribute(imageNodes[nIndex], "item_id");
		var sCategoryIdentifier = GetAttribute(imageNodes[nIndex], "category_id");
		if (!sItemIdentifier.length && !sCategoryIdentifier.length)
			continue;
		var sHref = sItemIdentifier.length > 0 ? GetItemHref(sItemIdentifier) : GetCategoryHref(sCategoryIdentifier);
		//alert("sImageSource " + sImageSource + ",  sHref " +  sHref);
		imageArray[imageArray.length] = sImageSource;
		hrefArray[hrefArray.length] = sHref;
	}
	if (imageArray.length < 2)
		alert("Error: topItems images count must be more than 2");
		
	var nDelay = GetAttribute(topItemsXmlNode, "delay");		
	var topItems = new CTopItems(
		document.getElementById("topItems"),
		640, 260, 
		nDelay, 
		imageArray, hrefArray);
	*/
}