var current_slide=0;
var page=0;
var mode=0; // 0 - initial, 1 - all pictures, 2 - by pages, 3 - by sections  --- only in normal view
var view=0; // 0 - normal view, 1 - slideshow view
var thumbs_per_page=0;
var showDescriptions=false;

function init(){
	if(sectionsViewBy){
		showDescriptions=true;
	}
	else for(i=0;i<descriptions.length;i++){
		if(descriptions[i]!=""){
			showDescriptions=true;
			break;
		}
	}
}

function generateNormalView(){
	var body=document.getElementById("htmlbody");
	var str="";

	init();

	str+="<div class=\"main\">\n";
	str+="<h2>"+albumName+"</h2>";
	if(albumDate) str+="<p>Date: "+albumDate+"</p>";
	str+="<p>"+albumDescription+"</p>";

	if(mode!=0){
		str+="<hr> "+(strPageNumbers=showPageNumbers());

		if(mode==3) str+=sectionDescription(page);

		str+="<ol class=\"photos\">\n";

		if(mode==1){ start=0; end=filenames.length;}
		else if(mode==3){
			if(page==0) start=0; 
			else start=sectionsImg[page-1]; 
			end=sectionsImg[page]; 
		}
		else {start=page*thumbs_per_page; end=Math.min(filenames.length,(page+1)*thumbs_per_page); }

		for(var i=start;i<end;i++){
			str+="<li><img src=\"thumbs/"+filenames[i]+"\" onmousemove=\"mouse_move("+i+");\" onmouseout=\"mouse_out();\" onclick=\"switchImage(this);\"></li>\n";
		}
		str+="</ol>\n";

		str+=strPageNumbers+"<hr>";
	}

	str+="<div class=\"topleft\"><span class=\"coollink\" onclick=\"view=1; generateSlideShowView();return false;\">switch to slideshow view</span></div>";


	str+="There are "+filenames.length+" pictures in this album. You can <a href=\"#\" onclick=\"mode=1;generateNormalView();return false;\">view all</a> of them on one page";
	if(sectionsViewBy) str+=", view them by <a href=\"#\" onclick=\"mode=3;page=0;generateNormalView();return false\">"+sectionsViewBy+"</a>";
	str+=" or view <select onchange=\"mode=2;thumbs_per_page=this.options[this.selectedIndex].text;page=0;generateNormalView();\">"+(thumbs_per_page<=0?"<option>--":"");
	for(i=1;i<=4;i++) str+="<option "+(i==thumbs_per_page/10?"selected":"")+">"+i*10;
	str+="</select> pictures per page";

	str+="</div>";
	body.innerHTML=str;

	if(mode!=0) showDescription(-1);

	window.scrollTo(0,0);		
}

function generateSlideShowView(){
	var body=document.getElementById("htmlbody");
	var str="";

	if(thumbs_per_page>0) current_slide=page*thumbs_per_page;


	str+="<div class=\"topleft\"><span class=\"coollink\" onclick=\"clearLeftColumn();mode=0;generateNormalView();return false;\">switch to normal view</span></div>";

	str+="<div class=\"main\">\n";
	str+="<h2>"+albumName+"</h2>";
	str+="<div class=slide id=\"slidediv\"><img src=\"normal/"+filenames[current_slide]+"\"></div>";
	str+="</div>";


	body.innerHTML=str;
	showSlideShowControls();
	showDescription(current_slide);
	window.scrollTo(0,0);
}

function showPageNumbers(){
	var pages=0;
	var str="";

	if(mode!=2 && mode!=3) return "";

	if(mode==2) pages=Math.ceil(filenames.length/Math.max(thumbs_per_page,10));
	else pages=sectionsName.length;
	
	if(pages!=1){
		str+="<p class=pageno>";
		if(page!=0) str+="<span class=\"coollink\" onclick=\"page--;generateNormalView();\">Previous</span>&nbsp;&nbsp;";
		for(i=0;;i++){
			if(i!=page) str+="<span class=\"coollink\" onclick=\"page="+i+";generateNormalView();\">"+(i+1)+"</span>";
			else str+="["+(i+1)+"]";
			if(i<pages-1) str+="&nbsp;-&nbsp;";
			else break;
		}
		if(page!=pages-1) str+="&nbsp;&nbsp;<span class=\"coollink\" onclick=\"page++;generateNormalView();\">Next</span>&nbsp;&nbsp;";
		str+="</p>";
	}

	return str;
}

function changeSlide(){
	var slideDiv=document.getElementById("slidediv");
	slideDiv.innerHTML="<img src=\"normal/"+filenames[current_slide]+"\">";
	showDescription(current_slide);
	document.getElementById("slideSelect").options.selectedIndex=current_slide;
}

function preload(img_index){
	if (img_index<filenames.length-1 && img_index>=0){
		var dummy = new Image();
		dummy.src="normal/"+filenames[img_index];
	}
}

function next(){
	if (current_slide==filenames.length-1) return false;
	current_slide++;
	changeSlide();
	preload(current_slide+1);
}

function previous(){
	if (current_slide==0) return false;
	current_slide--;
	changeSlide();
	preload(current_slide-1);
}

function first(){
	current_slide=0;
	changeSlide();
}

function last(){
	current_slide=filenames.length-1;
	changeSlide();
}

function getElementTop(el){
	top=0;
	while (el!=null){
		top+=el.offsetTop;
		el=el.offsetParent;
	}
	return top;
}

function image_onload(){
	this.style.cursor="pointer";
}

function switchImage(img){
	//if(!img.complete) return;
	if((i=img.src.indexOf("/thumbs/"))!=-1){
		img.style.cursor="wait";
		img.onload = image_onload;
		img.src=img.src.substr(0,i)+"/normal/"+img.src.substr(i+8,img.src.length);
	}
	else{
		i=img.src.indexOf("/normal/");
		img.src=img.src.substr(0,i)+"/thumbs/"+img.src.substr(i+8,img.src.length);
		var imgTop=getElementTop(img);
		var windowScrollY;

		if (self.pageYOffset) windowScrollY = self.pageYOffset;
		else if (document.documentElement && document.documentElement.scrollTop) windowScrollY = document.documentElement.scrollTop;
		else if (document.body) windowScrollY = document.body.scrollTop;
		if(imgTop<windowScrollY) window.scrollTo(0,imgTop-100);
	}
}

function clearLeftColumn(){
	var leftColumn=document.getElementById("leftColumn");
	leftColumn.innerHTML="<div id=\"imgDescr\"></div>";
}

function showSlideShowControls(){
	var leftColumn=document.getElementById("leftColumn");
	var buttons_html="<div class=\"buttons\"><span class=\"coollink\" onclick=\"first()\">first</span> - <span class=\"coollink\" onclick=\"previous()\">previous</span> - <span class=\"coollink\" onclick=\"next()\">next</span> - <span class=\"coollink\" onclick=\"last()\">last</span><br><hr>";
	buttons_html+="Slide: <select id=\"slideSelect\" onchange=\"current_slide=this.selectedIndex;changeSlide();\">";
	for(i=0;i<filenames.length;i++) buttons_html+="<option "+(i==current_slide?"selected":"")+">"+(i+1);
	buttons_html+="</select></div><br>";
	buttons_html+="<div id=\"imgDescr\"></div>";
	leftColumn.innerHTML=buttons_html;
}

function showDescription(img_index){

	if(!showDescriptions) return;

	var div_descr=document.getElementById("imgDescr");

	if(img_index==-1) descr="Move mouse over an image to see its description here";
	else{
		descr=descriptions[img_index];

		if(sectionsViewBy && !(mode==3 && view==0)){
			//show description of the section that this image belongs to
			for(sec=0;img_index>=sectionsImg[sec] && sec<sectionsImg.length-1;sec++){}
			descr+="<hr>"+sectionDescription(sec);
		}
	}
	
	if(descr!="") div_descr.innerHTML="<div class=\"imgDescription\">"+descr+"</div>";
	else div_descr.innerHTML="";

	var h=window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
	h=h ? h : 0;
	var leftColumn=document.getElementById("leftColumn");
	leftColumn.style.top=h+80+"px";

}

function sectionDescription(sec){
  return "<p class=\"section_descr\"><span class=\"section_name\">"+sectionsName[sec]+".</span> "+sectionsDescr[sec]+"</p>";
}

var timeout_set=false;
var timeout_id=0;

function mouse_move(img_index){
	if(timeout_set) window.clearTimeout(timeout_id);
	timeout_set=true;
	timeout_id=window.setTimeout('mouse_stop('+img_index+')',50);
}

function mouse_out(){
	if(timeout_set){
		window.clearTimeout(timeout_id);
		timeout_set=false;
	}
}

function mouse_stop(img_index){
	timeout_set=false;
	showDescription(img_index);
}