function markPic(pic) {
	if (imageList=='') {
		return;
	}
	var end = imageListStart+imageListNum;

	if (end > numberOfPics%imageListNum+1)
		end = numberOfPics%imageListNum+1;

	for (var i=imageListStart;i<end;i++)
		document.getElementById("pic_"+i).style.color = '#666';
	document.getElementById("pic_"+pic).style.color = '#b69d03';
}

function markAlbum() {

	if (albumList=='') {
		return;
	}
	var end = albumListStart+(imageListNum*albumListNum)-1;
	if (end > numberOfPics)
	{
		end = numberOfPics;
	}

	if (end < 1)
		end = 1;
	for (var i=albumListStart;i<end;i=i+imageListNum) {
		if (document.getElementById("album_"+i))
			document.getElementById("album_"+i).className = 'album';
		else 
			alert("album_"+i);
	}

	if (document.getElementById("album_"+(imageListStart)))
		document.getElementById("album_"+(imageListStart)).className = 'album albumActive active';
}


function genAlbumList(pic,updateStuff) {

	var num = albumListNum;
	var interval = imageListNum;
	var where = albumList;
	var list = '';
	var totalNum = num*interval;
	

	var diff = numberOfPics%num;
	
	if (albumList=='') {
		return;
	}

	//var start = Math.floor((pic - (numberOfPics%totalNum) + totalNum - 1) / totalNum) * totalNum + (numberOfPics%totalNum);
	var start = Math.floor((pic-1) / totalNum) * totalNum + 1;

	albumListStart = start;
	
	var listStart = '<div class="boxTabs">';
	for (var i=0;i<num;i++) {
		var values = "";
		value1 = start + (i*interval);
		value2 = value1 + interval - 1;
		if (value2 > numberOfPics) {
			value2 = numberOfPics;
		}
		values = value1 + '-' + value2;

		list += '<a class="album" id="album_'+ (value1) +'" href="javascript:showImageList(' + (value1) + ',\'imageList\',0,1);">' + values + '<\/a>';
		if (value2 == numberOfPics)
			break;
	}
	var listEnd = '<a class="overview" href="/'+username+'/'+travelname+'/images:album='+folder+'">'+ overview +'</a></div><div style="clear:both;float:left;margin:5px 0px 0px 17px;;display:inline;width:400px;">';
	
	var listTotal = listStart + list + listEnd;

	if (pic == 1)
		listTotal += '<span class="prev_noicon" style="float:left;" href="javascript:shiftpic(1);">&laquo; '+oldest_word+'</span>	';
	else
		listTotal += '<a class="prev_noicon" style="float:left;" href="javascript:shiftpic(1);">&laquo; '+oldest_word+'</a>	';
	if (start > totalNum)
		listTotal += '<a class="prev_noicon" style="float:left;margin-left:10px;" href="javascript:genAlbumList(' + (start-totalNum) + ',1);">&laquo; ' + prev_word + ' ' + totalNum + '<\/a>'; 
	else 
		listTotal += '<span class="prev_noicon" style="float:left;margin-left:10px;" href="javascript:genAlbumList(' + (start-totalNum) + ',1);">&laquo; ' + prev_word + ' ' + totalNum + '<\/span>'; 

	if (pic != numberOfPics)
		listTotal += '<a class="next_noicon" style="float:right;" href="javascript:shiftpic('+numberOfPics+');">'+newest_word+' &raquo;</a>	';
	else	
		listTotal += '<span class="next_noicon" style="float:right;" href="javascript:shiftpic('+numberOfPics+');">'+newest_word+' &raquo;</span>	';
	if (value2 < numberOfPics)
		listTotal += '<a class="next_noicon" style="float:right;" href="javascript:genAlbumList(' + (start+totalNum) + ',1);">' + next_word + ' ' + totalNum + ' &raquo;<\/a>';
	else
		listTotal += '<span class="next_noicon" style="float:right;" href="javascript:genAlbumList(' + (start+totalNum) + ',1);">' + next_word + ' ' + totalNum + ' &raquo;<\/span>';
	
	
	list += '<\/div>';
	if (DOM2){
	    		document.getElementById(where).innerHTML=listTotal;
	} else if (ie4) {
			document.all.where.innerHTML=listTotal;
	}
	if (updateStuff) {
		showImageList(start,imageList,0,1);
	}
	markAlbum();
}


function showImageList(pic,where,updateAlbum,updatePic) {
	var list = "";
	var num = imageListNum;
	
	if (imageList=='') {
		return;
	}
	
	var start = Math.floor((pic-1) / num) * num + 1;
	var end = start + num - 1;

	if (end > numberOfPics)
		end = numberOfPics;
	if (start < 1)
		start = 1;
	if (start > imageListNum)
		list += '<a class="prev_noicon" href="javascript:showImageList(' + (start-1) + ',' + where + ',1,1);"> &laquo; ' + prev_word + ' '+num+'<\/a>';

	for (var i=start;i<=end;i++) {
		list += '<div style="margin:6px;width:150px;" id="pic_' + i + '"><a class="nohover" href="javascript:shiftpic(' + i + ');"><img src="/images/travels/'+travelid+'/small_'+img_name[i-1] + '" alt="" \/><br /><\/a><p style="text-align:right;margin:3px;font-weight:bold;">' + (i) + '<\/p><\/div>';
	}
	if (end < numberOfPics)
		list += '<a class="next_noicon" style="margin-bottom:5px;" href="javascript:showImageList(' + (end+1) + ',' + where + ',1,1);">' + next_word + ' '+num+' &raquo;<\/a>';
	
	if (DOM2){
		document.getElementById(where).innerHTML=list;
	} else if (ie4) {
		document.all.where.innerHTML=list;
	}
	imageListStart = start;

	if (updateAlbum)
		genAlbumList(pic,0);
	else
		markAlbum();
	if (updatePic)
		shiftpic(start);
}



function shiftpic(pic) {
	var number=pic;
	if (pic > max_pic)
	{
		max_pic = pic;
	}
	global_pic = pic;
	pic = pic-1;
	
	if (DOM2){
		document.getElementById("text").innerHTML='<p style="margin:2px 0px 0px 10px;text-align:left;"><b>'+number+' ' + of_word + ' '+numberOfPics+' | '+folders[img_folder[pic]]+' | <\/b> '+img_text[pic]+'<\/p>';
		var nav1 = '';
		
		if (pic > 0)
			nav1 += '<a class="prev_noicon" href="javascript:shiftpic(' + (number-1) + ');">&laquo; ' + prev_word + '<\/a>';
		if (number < numberOfPics)
			nav1 += '<a class="next_noicon" href="javascript:shiftpic(' + (number+1) + ');">' + next_word + ' &raquo;<\/a>';

		var nav2 = '';
		nav2 += '<a class="size" href="javascript:OpenWindow(\'/openpic.html?travel=' + travelid + '\&amp;pic=' + img_name[pic] + '&size=orginal\',\'500\',\'470\');">' + size_word + '<\/a>';
		var link = 'http://'+site+'/'+username+'/'+travelname+'/images:imageid=' + number + ':folder='+folder;
		nav2 += '<a class="size" href="'+link+'" onclick="javascript:prompt(\''+link_text+'\',\'\\n '+link+'\');">' + link_word + '<\/a>';
		// Kommentarer
		nav2 += '<a class="icon iconGuest bold" style="margin-left:11px;" href="javascript:window.open(\'/'+username+'/'+travelname+'/comment:ref_id='+img_id[pic]+':type=P\',\'comment\',\'toolbar=no,scrollbars=yes,width=500,height=450\');void(0);">' + comments_word + ':</a> ' + img_comments[pic];

		document.getElementById("nav1").innerHTML=nav1;
		document.getElementById("nav2").innerHTML=nav2;
		
		showImageList(number,imageList,1,0);
		markPic(number);

	} 
	document.getElementById("showpic").src='/images/travels/'+travelid+'/large_'+img_name[pic];
	document.getElementById("showpic").style.width='auto';
	document.getElementById("showpic").width='100%';

	
	//window.scrollTo(0,300);

}

function gallerikeys(e)
{
	var evtobj = window.event ? event : e; 
	var unicode = evtobj.charCode ? evtobj.charCode : evtobj.keyCode;	
	
	if(unicode == 37){	
		if (global_pic > 1) {
			shiftpic(global_pic-1);	
		}
	}
	if(unicode == 39){
		if (global_pic<numberOfPics) {
			shiftpic(global_pic+1);	
		}	
	}
}
document.onkeydown = gallerikeys;
