var imgArray = new Array();	
var date = new Date();
var index;
var pointer;

function addImage(img_x, img_y, img_url, th_url, full_url)
{
	imgArray.push(new Array(img_x, img_y, img_url, th_url, full_url));
}

function showThumbs()
{
	document.getElementById('album-thumb').style.display = 'block';
	document.getElementById('album-image').style.display = 'none';
	document.getElementById('album-image-img').src = 'img/trans.gif';
}

function nextThumb()
{
	if( index*9 < imgArray.length )
	{
		pointer[index % 3].style.display = 'none';		
		pointer[(index+1) % 3].style.display = 'block';		
		pointer[(index-1) % 3].innerHTML = htmltext(index+2);
		index++;
		thumbnavUpdate();
	}
}

function prevThumb()
{
	if( index > 1 )
	{
		pointer[index % 3].style.display = 'none';		
		pointer[(index-1) % 3].style.display = 'block';		
		pointer[(index+1) % 3].innerHTML = htmltext(index-2);
		index--;		
		thumbnavUpdate();
	}
}

function changeThumbs(idx)
{
	var p, t = '', u, ll = null, rl = null;
	index = ((idx-1)*9 > imgArray.length || idx < 1) ? 1 : idx;

	pointer[0].innerHTML = htmltext((index-1) % 3);
	pointer[1].innerHTML = htmltext((index+0) % 3);
	pointer[2].innerHTML = htmltext((index+1) % 3);
	
	pointer[1].style.display = 'block';
	thumbnavUpdate();
}

function htmltext(idx)
{
	var t = '';
	
	if(idx > 0)
	{
		t = '<table id="thumbtable" cellpadding="0" cellspacing="0" border="0"><tr>';
		for(var i=0; i < 9 && (idx-1)*9 + i < imgArray.length; i++)
		{
			t += '<td><a href="javascript: showImage('+((idx-1)*9 + i)+');">'
			t += '<img src="' + imgArray[(idx-1)*9 + i][3] + '" /></a></td>'
			
			if(i%3 == 2 && i < 8)
				t += '</tr><tr>';
		}
		t += '</tr></table>';
	}
	return t;
}

function thumbnavUpdate()
{
	var ll = null, rl = null, max = index*9;
	
	if(index>1) ll = "javascript: prevThumb();"
	if(index*9 < imgArray.length) { rl = "javascript: nextThumb();" } else { max = imgArray.length; }
	
	navUpdate(
		'album-thumb-nav',
		ll,
		'Visar bilder ' + (index*9 - 8) + '-' + max + ' av ' + imgArray.length,
		rl
	);	
}

function navUpdate(id, leftlink, text, rightlink)
{
	var t = '<table cellpadding="0" cellspacing="0" border="0"><tr><td class="l">';

	if(leftlink != null)
		t += '<a class="button" href="'+leftlink+'">«</a>';
			
	t += '</td><td class="c">' + text + '</td><td  class="r">';

	if(rightlink != null)
		t += '<a class="button" href="'+rightlink+'">»</a>';

	t += '</td></tr></table>';

	document.getElementById(id).innerHTML = t;
}

function showImage(idx)
{
	if(0 <= idx && idx < imgArray.length)
	{
		document.getElementById('album-thumb').style.display = 'none';
		document.getElementById('album-image').style.display = 'block';
		document.getElementById('album-image-img').width = imgArray[idx][0];
		document.getElementById('album-image-img').height = imgArray[idx][1];
		document.getElementById('album-image-img').src = imgArray[idx][2];

		var p, ll=null, rl=null;

		// Update navigation table
		if(idx > 0) ll = 'javascript: showImage('+(idx-1)+');';
		if(idx < imgArray.length - 1) rl = 'javascript: showImage('+(idx+1)+');';
		navUpdate('album-image-nav', ll, 'Visar bild ' + (idx+1) + ' av ' + imgArray.length, rl);

		// update fullsize link
		p = document.getElementById('album-image-fullsize');
		if(imgArray[idx][4] != null)
		{
			p.style.display = 'inline';
			p.href = imgArray[idx][4];
		} else {
			p.style.display = 'none';
			p.href = null;
		}
				
		// Download images before klient see them
		t = '';
		if(idx > 0)						t += '<img src="'+ imgArray[idx-1][2] +'" />';
		if(idx < imgArray.length - 1)	t += '<img src="'+ imgArray[idx+1][2] +'" />';
		document.getElementById('album-image-cache').innerHTML = t;

		// Update thumbs if nessecary
		var newIndex = Math.floor(idx/9) + 1;
		if(index < newIndex)
			nextThumb();
		else if(index > newIndex)
			prevThumb();
	}
}

function initAlbum()
{
	pointer = new Array
	(
		document.getElementById('album-thumb-d1'),
		document.getElementById('album-thumb-d2'),
		document.getElementById('album-thumb-d3')
	);
	
	changeThumbs(1);
	showThumbs();
}