/*******************************************************************************
 * ThumbnailManager v1.00 12.02.2014 © Daniel Schulz
 * 
 * 	Changelog:
 *		v1.00 12.02.2014
 *			initial release
 *
 *		Example XSLT:
<div class="box width-2x product-images" data-tn="root">
	<div class="box product-images-main" data-tn="target">
		<xsl:for-each select="$imageList[1]">
			<img src="{@_href}" alt="{@displayname}" title="{@displayname}"/>
		</xsl:for-each>
		<xsl:if test="not(count($imageList))">
			<strong><xsl:value-of select="$currentArticle/@article_name"/></strong>
		</xsl:if>
	</div>
	<ul class="box product-images-thumbnails">
		<li data-tn="rewind">
			<button type="button" data-icon="">
				<img src="{$config/@image-button-up}" alt="▲"/>
			</button>
		</li>
		<li data-tn="list">
			<xsl:for-each select="$imageList">
				<img src="{@_href}" alt="{@displayname}" title="{@displayname}"/>
			</xsl:for-each>
		</li>
		<li data-tn="forward">
			<button type="button" data-stock="{@id}" data-articleFunc-add="-1" title="##lang/button/dec##" data-icon="">
				<img src="{$config/@image-button-down}" alt="▼"/>
			</button>
		</li>
	</ul>
</div>
 ******************************************************************************/

var ThumbnailManager = {
	rootList : undefined,
	init : function() {
		var i, list;
		this.rootList = [];
		list = $("*[data-tn = 'root']");
		for (i = 0; i < list.length; i++) {
			this.initRoot(list[i]);
		}
	},
	initRoot : function(rootNode) {
		var i, list;
		list = $("*[data-tn = 'target']", rootNode);
		if (list[0]) {
			list[0].tnOwnerNode = rootNode;
			rootNode.tnTargetNode = list[0];
			
			rootNode.tnSetImage = function(imgNode) {
				this.tnIndex = imgNode.tnIndex;
				while (this.tnTargetNode.hasChildNodes()) {
					this.tnTargetNode.removeChild(this.tnTargetNode.lastChild);
				}
				this.tnTargetNode.appendChild(imgNode.cloneNode(true));
				if ($(this.tnTargetNode).closest("*[data-image-popup = 'root']")[0]) {
					$("img", this.tnTargetNode).click(clickPopup);
				}
			};
			rootNode.tnScrollInterval = 0;
			rootNode.tnScrollStart = function(offset) {
				this.tnScrollStop();
				this.tnScrollInterval = window.setInterval(
					function(tnNode, offset) {
						$("*[data-tn = 'list']", tnNode).scrollTop(
							$("*[data-tn = 'list']", tnNode).scrollTop() + offset
						);
					},
					10,
					this,
					offset
				);
			};
			rootNode.tnScrollStop = function() {
				if (this.tnScrollInterval) {
					window.clearInterval(this.tnScrollInterval);
					this.tnScrollInterval = 0;
				}
			};
			
			list = $("*[data-tn = 'list'] > *", rootNode);
			rootNode.tnIndex = 0;
			rootNode.tnList = [];
			for (i = 0; i < list.length; i++) {
				list[i].tnOwnerNode = rootNode;
				rootNode.tnList.push(list[i]);
				$(list[i]).hover(
					function(eve) {
						this.tnOwnerNode.tnSetImage(this);
					}
				);
			}
			if (rootNode.tnList[0]) {
				rootNode.tnSetImage(rootNode.tnList[0]);
			}
			this.rootList.push(rootNode);
			
			list = $("*[data-tn = 'rewind'] > *", rootNode);
			for (i = 0; i < list.length; i++) {
				list[i].tnOwnerNode = rootNode;
				$(list[i]).mousedown(
					function(eve) {
						this.tnOwnerNode.tnScrollStart(-2);
					}
				);
				$(list[i]).mouseup(
					function(eve) {
						this.tnOwnerNode.tnScrollStop();
					}
				);
			}
			list = $("*[data-tn = 'forward'] > *", rootNode);
			for (i = 0; i < list.length; i++) {
				list[i].tnOwnerNode = rootNode;
				$(list[i]).mousedown(
					function(eve) {
						this.tnOwnerNode.tnScrollStart(2);
					}
				);
				$(list[i]).mouseup(
					function(eve) {
						this.tnOwnerNode.tnScrollStop();
					}
				);
			}
		}
	},
};

$(document).ready(
	function() {
		ThumbnailManager.init();
	}
);

function setThumbnail(eve) {
	//bigPic = $(".shopFormProductPicture > img", this.parentNode.parentNode.parentNode)[0];
	//if (!bigPic) {
		bigPic = $(".shopFormProductPicture > img", this.parentNode.parentNode.parentNode.parentNode.parentNode)[0];
	//}
	bigPic.setAttribute("src", this.getAttribute("src"));
	bigPic.setAttribute("alt", this.getAttribute("alt"));
	bigPic.setAttribute("title", this.getAttribute("title"));
}