/*=============================================================================
    GALLERY LIBRARY
==============================================================================*/
function initGallery()
{
	var thumb = document.getElementById("thumbnails");
	if(!thumb)
		return;
	
	var generate = checkLength();

	// image enlarge and select functions
	var spaceWidth = 3;
	var borderWidth = 3;
	
	var images = thumb.getElementsByTagName("a");
	for(var i = 0; i < images.length; i++ )
	{
		createLens(images[i]);
		if(images[i].className == "active" )
			makeActive(images[i]);
		images[i].onclick = changeImage;
	}

	// TODO: fix this	
	function createLens(element)
	{
		var lens = document.createElement("div");
		lens.className = "lens";
		var opacity = 60;
		lens.style.opacity = opacity / 100;
		lens.style.filter = "alpha(opacity=" + opacity + ")";
		element.appendChild(lens);
	}
	
	function makeActive(element)
	{
		var li = element.parentNode;
		var img = li.getElementsByTagName("img").item(0);
		var border = document.createElement("div");

		var ver = navigator.appVersion;
		var fix = ver.indexOf("MSIE 5.") != -1 ? 11 : 0;

		border.id = "active_border";
		border.style.position = "absolute";
		border.style.zIndex = 5;
		border.style.top = "-" + ( li.offsetTop + ( spaceWidth * 2 ) ) + "px";
		border.style.left = ( li.offsetLeft - ( spaceWidth * 2 ) ) + "px";
		border.style.width = ( fix + img.offsetWidth - ( spaceWidth * 2 ) ) + "px";
		border.style.height = ( fix + img.offsetHeight - ( spaceWidth * 2 ) ) + "px";
		border.style.border = borderWidth + "px #ddd solid";
		li.parentNode.appendChild(border);
		
		img.style.padding = "0";
		img.style.border = "none";
		img.style.margin = "0";
		
	}
	
	function bigIcons()
	{
		var bigImage = document.getElementById("big_image");
		var icons = bigImage.parentNode.getElementsByTagName("a");
		var left = bigImage.offsetLeft + 10; 
		var top = bigImage.offsetTop + 10;
		for(var i = 0; i < icons.length; i++)
		{
			icons[i].style.left = left + (61*i) + "px";
			icons[i].style.top = top + "px";
		}
		var href = bigImage.src.slice(bigImage.src.indexOf("&image")+7);
		icons[0].href = href;
		type = (location.href.indexOf("gallery")!=-1) ? "gallery" : "product";
		icons[1].href = type + "," + href.slice(href.indexOf("file")+4,-4) + ",get.xml";
	}
	
	bigIcons();
	
	var changeImageAnimation = 0;
	var changeImageStatus = false;
	function changeImage()
	{
		changeImageStatus = true;
		var bigImage = document.getElementById("big_image");
		hideIcons(bigImage);
		clearInterval(changeImageAnimation);
		this.blur();
		var border = document.getElementById("active_border");
		var img = this.parentNode.getElementsByTagName("img").item(0);
		var newLeft = ( this.parentNode.offsetLeft - ( spaceWidth * 2 ) ) + "px";
		
		var direction = parseInt(newLeft) < parseInt(border.style.left) ?
						-1 : 1;
		setOpacity(40);
		changeImageAnimation = setInterval( function() {
			if( ( (parseInt(border.style.left)*direction) + (10*direction) ) >= (parseInt(newLeft) * direction))
			{
				border.style.left = newLeft;
				clearInterval(changeImageAnimation);
				setOpacity(100);
				return false;
			}
			border.style.left = (parseInt(border.style.left) + (5*direction)) + "px";
		}, 15 );
		
		bigImage.style.display = "none";
		var src = bigImage.src;
		var dimension = src.substring(src.indexOf("w="),src.indexOf("&image"));
		
		bigImage.src = img.getAttribute("src").slice(0,-6).replace(/w=70&h=70/i,dimension);
		bigImage.onload = function()
		{
			this.style.display = "inline";
			showIcons();
			changeImageStatus = false;
		}
		
		return false;
		
		function setOpacity(opacity)
		{
			border.style.opacity = opacity / 100;
			border.style.filter = "alpha(opacity=" + opacity + ")";
		}
		
		function hideIcons()
		{
			var icons = bigImage.parentNode.getElementsByTagName("a");
			for(var i = 0; i < icons.length; i++)
				icons[i].style.display = "none";
		}
		
		function showIcons()
		{
			var icons = bigImage.parentNode.getElementsByTagName("a");
			var left = bigImage.offsetLeft + 10; 
			var top = bigImage.offsetTop + 10;
			for(var i = 0; i < icons.length; i++)
			{
				var opacity = 60;
				icons[i].style.left = left + (61*i) + "px";
				icons[i].style.top = top + "px";
				//icons[i].style.opacity = opacity / 100;
				//icons[i].style.filter = "alpha(opacity=" + opacity + ")";
			}
			var href = bigImage.src.slice(bigImage.src.indexOf("&image")+7);
			icons[0].href = href;
			type = (location.href.indexOf("gallery")!=-1) ? "gallery" : "product";
			icons[1].href = type + "," + href.slice(href.indexOf("file")+4,-4) + ",get.xml";
		}
	}
	
	
	// big image
	var bigImg = document.getElementById("big_image");
	bigImg.parentNode.onmouseover = function()
	{
		if(changeImageStatus)
			return;
		var a = this.getElementsByTagName("a");
		for(var i = 0; i < a.length; i++)
			a[i].style.display = "block";
	}
	bigImg.parentNode.onmouseout = function()
	{
		if(changeImageStatus)
			return;
		var a = this.getElementsByTagName("a");
		for(var i = 0; i < a.length; i++)
			a[i].style.display = "none";
	}
	
	if(!generate)
	{
		showHideGallery(true);
		return;
	}
	
	// scroll function
	var layer = document.getElementById("thumbnails");
	var wrapper = document.getElementById("thumbnails_container");
	var button = document.getElementById("button");
	if(!button)
	{
		// create scrollbar
		var sc = document.createElement("div");
		sc.setAttribute("id","scroll");
		document.getElementById("photo_navi").appendChild(sc);
		var scb = document.createElement("div");
		scb.setAttribute("id","button");
		scb.title = "Z?ap i przesu?..."
		sc.appendChild(scb);
		button = scb;
	}
	
	var buttonLeft = document.getElementById("pn_prev");
	if(!buttonLeft)
	{
		var a = document.createElement("a");
		a.className = "n";
		a.id = "pn_prev";
		a.setAttribute("href","#");
		document.getElementById("photo_navi").appendChild(a);
		buttonLeft = a;
	}
	buttonLeft.title = "Przewi? w lewo";
	
	var buttonRight = document.getElementById("pn_next");
	if(!buttonRight)
	{
		var a = document.createElement("a");
		a.className = "n";
		a.id = "pn_next";
		a.title = "Przewi? w prawo";
		a.setAttribute("href","#");
		document.getElementById("photo_navi").appendChild(a);
		buttonRight = a;
	}
	buttonRight.title = "Przewi? w prawo";
	
	var layerElements = layer.getElementsByTagName("li");
	for(var i = 0; i < layerElements.length; i++ )
		layerElements[i].className = "visible";
	layer.style.width = layerElements.length * (layerElements[0].offsetWidth + 16) + "px";

	buttonRight.onmousedown = moveRight;
	buttonLeft.onmousedown = moveLeft;
	buttonRight.onmouseup = moveStop;
	buttonLeft.onmouseup = moveStop;
	buttonRight.onmouseout = moveStop;
	buttonLeft.onmouseout = moveStop;
	buttonRight.onclick = function() { return false; }
	buttonLeft.onclick = function() { return false; }
	
	var interval;
	
	function moveLeft()
	{
		layer.style.left = layer.offsetLeft + "px";
		interval = setInterval(function()
		{
			if(parseInt(layer.style.left) + 3 > 0)
			{
				layer.style.left = "0"; // set to 0
				clearInterval(interval);
				return;
			}
			
			try {
				layer.style.left = (parseInt(layer.style.left) + 3) + "px !important";	
			} catch (e) {
				layer.style.left = (parseInt(layer.style.left) + 3) + "px";
			}
			
			synchronize(false);
		}, 10 );
		return false;
	}
	
	function moveRight() 
	{
		var loffW = layer.offsetWidth;
		var woffW = wrapper.offsetWidth;
		layer.style.left = layer.offsetLeft + "px";
		interval = setInterval(function()
		{
			if( (layer.offsetLeft*(-1)) + 3 > loffW - woffW)
			{
				layer.style.left = (woffW - loffW) + "px";
				clearInterval(interval);
				return;
			}
			
			try {
				layer.style.left = (parseInt(layer.style.left) - 3) + "px !important";	
			} catch (e) {
				layer.style.left = (parseInt(layer.style.left) - 3) + "px";
			}
			
			
			synchronize(false);
		}, 10 );
		return false;
	}
	
	function moveStop()
	{
		clearInterval(interval);
		return false;
	}
	
	
	// scroll button functions
	var scrollStatus = false;
	var startX = 0;
	var buttonX;
	button.onmousedown = function(e)
	{
		e = e||event;
		scrollStatus = true;
		startX = e.clientX;
		buttonX = this.offsetLeft;
	}
	button.onmouseup = function() { scrollStatus = false; }
	document.onmouseup = function() { scrollStatus = false; }
	
	// if mousedown on button scroll button
	document.onmousemove = function(e)
	{
		e = e||event;
		if(scrollStatus)
		{
			if(buttonX + (e.clientX - startX) < 0 )
			{
				button.style.left = 0;
				return;
			}
			if( buttonX + (e.clientX - startX + button.offsetWidth) > button.parentNode.offsetWidth )
			{
				button.style.left = (button.parentNode.offsetWidth-button.offsetWidth) + "px";
				return;
			}
			else
			{
				button.style.left = (buttonX + (e.clientX - startX)) + "px";
				synchronize(true);
			}
		}
	}

	// dont select text while moving
	document.onselectstart = function() { if(scrollStatus); return false; }

	// synchronize layer position with button position and vice versa
	function synchronize(direction)
	{
		var layerScroll = layer.offsetWidth - layer.parentNode.offsetWidth;
		var buttonScroll = button.parentNode.offsetWidth;
		
		var scale = ( layer.parentNode.offsetWidth - layer.offsetWidth ) / (button.parentNode.offsetWidth - button.offsetWidth/2);

		if(direction) // button -> layer
		{
			var adjustment = 1.05;
			// try to fix adjustment
			var tmp = button.offsetLeft * scale * adjustment;
			if(tmp >= 0)
				layer.style.left = "0";
			else if(  button.offsetLeft  >= button.parentNode.offsetWidth - button.offsetWidth )
			{
				try {
					layer.style.left = ( layer.parentNode.offsetWidth - layer.offsetWidth ) + "px !important";					
				} catch (e) {
					layer.style.left = ( layer.parentNode.offsetWidth - layer.offsetWidth ) + "px";
				}
			}
			else
			try {
				layer.style.left = tmp + "px !important";
			} catch (e) {
				layer.style.left = tmp + "px";
			}

		}
		else // layer -> button
		{
			var tmp = layer.offsetLeft / scale;
			if(tmp < 0 || layer.offsetLeft > -2 )
				button.style.left = "0";
			else if(tmp + button.offsetWidth  > button.parentNode.offsetWidth)
				button.style.left = (button.parentNode.offsetWidth - button.offsetWidth) + "px";
			else
				button.style.left = tmp + "px";
		}
	}
	
	function checkLength()
	{
		var tmp1 = document.getElementById("thumbnails_container").offsetWidth;
		var tmp2 = 0;
		for(var i = 0; i < document.getElementById("thumbnails").childNodes.length; i++)
		{
			if(document.getElementById("thumbnails").childNodes.item(i).nodeName.toUpperCase()=="LI")
				tmp2 += 86;
		}
		return tmp1 <= tmp2;
	}
	
	showHideGallery(true);
}

function showHideGallery(status)
{
	status = status ? "visible" : "hidden";
	var bigImage = document.getElementById("big_image");
	var photoNavi = document.getElementById("thumbnails_container");
	setVisibility(bigImage, status);
	setVisibility(photoNavi, status);
	
	function setVisibility(object, status)
	{
		var objects = object.parentNode.childNodes;
		for(var i = 0; i < objects.length; i++)
		{
			if(objects.item(i).style)
				objects.item(i).style.visibility = status;
		}
	}
}

addEvent(window, 'load', initGallery);