/* 
 * Image gallery script.
  hideFullscale()            -- hides the fullscale pop-up
	showFullscale()            -- shows the fullscale pop-up 
	resizeFullscaleFade()      -- resizes the fade div which changes the bg color to 
	                              partly-transparent dark gray
	resizeFullscalePopup()     -- resizes the fullscale pop-up
	initializeFullscalePopup() -- initializes preloading of fullscale images

	turnPic()                       -- Turns a pic on the main page or on the fullscale pop up
	swapImages(curId, fgSrc, bgSrc) -- Just swaps two images
	changePic()                     -- changes the main pic on the left
	changeText (id, text)           -- changes the text in a object with the given id
	setOpacity(opacity)             -- set the opacity of the current object
	fadeIn(opacity)                 -- shows the fading animation
	loadmainpage()
	loadimages(imagenames)          -- shows the preloading bar and starts loading the images given as an argument
	setPreloadBarVisible()          -- changes the visibility of the preload bar
	checkload(index)                -- this constantly checks if preloading images is done and calls showFullscale() then
	prm()                           -- this is responsible for the animation in the preload bar
 */

var currentId = 'mainpic';

// hides the div containing a fullscale img
function hideFullscale() { 

	currentId = 'mainpic'
	document.getElementById('fullscale').style.visibility = 'hidden'; 
	document.getElementById('hideshow').style.visibility = 'hidden'; 
	document.getElementById('popup').style.visibility = 'hidden';
	document.getElementById('popup_block').style.visibility = 'hidden';
	document.getElementById('fade').style.visibility = 'hidden';
	document.getElementById('turnfullscale').style.visibility = 'hidden'; 
	window.onresize = null
	window.onscroll = null;
}

function showFullscale() {
	currentId = 'fullscale'
  // hide turn around link if there's only one image to show
	var picNumber = document.getElementById('turn' + currentId).href.split("&")[1];
	if (imgsfullscalebg[picNumber] == '')
	  document.getElementById('turnfullscale').style.visibility = 'hidden'; 
	else
	  document.getElementById('turnfullscale').style.visibility = 'visible'; 

	document.getElementById('hideshow').style.visibility = 'visible'; 
	document.getElementById('fullscale').style.visibility = 'visible';
	document.getElementById('popup').style.visibility = 'visible';
	document.getElementById('popup_block').style.visibility = 'visible';
	window.onresize = resizeFullscaleFade
//	window.onscroll = resizeFullscaleFade;
}

// resizes the div which is used to change the background color to faded dark gray
function resizeFullscaleFade() {
	obj = document.getElementById('fade');
	obj.style.width=document.body.clientWidth + 'px'; 
//	obj.style.height=Math.max(obj.style.height, document.body.clientHeight) + 'px';
	resizeFullscalePopup(null, null);
}

// Resizes the pop up containing the fullscale image
function resizeFullscalePopup(width, height) {
	// move the pop up to the center
	obj = document.getElementById('popup');
	obj2 = document.getElementById('popup_block');

	if (width == null)
  	width = document.getElementById('fullscale').clientWidth;

  browserwidth = document.body.clientWidth;
	leftX = browserwidth-width - 60; // border width = ~100
	if (leftX <= 0)
		leftX = 10
	else
		leftX = leftX / 2;
	obj2.style.left = leftX + 'px';


	if (height == null)
  	height = document.getElementById('fullscale').clientHeight;

  browserHeight = document.body.clientHeight;
	topY = browserHeight-height-100; // border width = ~100
	if (topY <= 0)
		topY = 5 
	else
		topY = topY / 2;
	obj2.style.top = topY + document.body.scrollTop + 'px';

	// change the width of the popup
	browserWidth=document.body.clientWidth + 'px'; 
	if (width == null)
  	width = document.getElementById('fullscale').clientWidth;

	if (width >= browserWidth)
		width = browserWidth;
	obj.style.width= width + 'px';
	obj2.style.width= width + 60 + 'px';
	
	// height of the current fullscale img
	browserHeight=document.body.clientHeight; 
	if (height == null)
		height = document.getElementById('fullscale').clientHeight;
	height += 70;
	obj.style.height = height;
	if (height >= browserHeight) {
		obj2.style.height = browserHeight- 20 + 'px';
	} else {
		//obj2.style.height = obj.style.height;
		obj2.style.height = height + 10;
	}
}

// this initializes preloading of the images in the fullscale pop-up
function initializeFullscalePopup() { 
	resizeFullscalePopup(null, null);
	var picNumber = document.getElementById('enlarge').href.split("&")[1];
	document.getElementById('fullscale').src=imgsfullscale[picNumber];
	document.getElementById('turnfullscale').href=imgsfullscalebg[picNumber] + "&" + picNumber + "&fullscale";

	if (imgsfullscalebg[picNumber] == '')
		var preload = [imgsfullscale[picNumber]];
	else
    var preload = [imgsfullscale[picNumber], imgsfullscalebg[picNumber]];

	currentId = 'fullscale';
	loadimages(preload);
	return false;
}
	

function turnPic() {
	var picNumber = document.getElementById('turn' + currentId).href.split("&")[1];
	var picId = document.getElementById('turn' + currentId).href.split("&")[2];
	currentId = picId 

	var curImg = document.getElementById(picId);
	setOpacity(0, picId);
	curImg.style.visibility = 'hidden';
	
	if (picId == 'mainpic') {
		swapImages(picId, imgs[picNumber], imgsbg[picNumber]);
	} else {
		obj = document.getElementById('popup');
		obj2 = document.getElementById('popup_block');
		src = swapImages(picId, imgsfullscale[picNumber], imgsfullscalebg[picNumber]);	
		img = new Image();
		img.src = src;
		width = img.width;
		height = img.height;

		resizeFullscalePopup(width, height);
	}
	
  curImg.style.visibility = 'visible';
	fadeIn(0);
}

function swapImages(curId, fgSrc, bgSrc) {
	var curSrc = document.getElementById(curId).src;
	var idx = curSrc.lastIndexOf('/') - "gallery".length;
	var curLogicPath = curSrc.substring(idx, curSrc.length);
	
	if (curLogicPath == fgSrc) {
		document.getElementById(curId).src = bgSrc;
		return bgSrc;
	} else {
		document.getElementById(curId).src = fgSrc;
		return fgSrc;
	}

}

// changes the large pic on the left
function changePic() {
	var picNumber = arguments[0];

	// disable or enable the hover border whether there's a fullscale img
	document.getElementById('turn' + currentId).href=imgs[picNumber] + "&" + picNumber + "&mainpic";
	if (imgsfullscale[picNumber] == '') {
		obj = document.getElementById('mainpic_td');
		obj.className = 'mainpic_hover_off';

		document.getElementById('enlarge').removeAttribute("href");
		document.getElementById('enlarge').onclick="javascript:void(0);";
	} else {
		obj = document.getElementById('mainpic_td');
	  obj.className = 'mainpic_hover_on';

	  document.getElementById('enlarge').href=imgsfullscale[picNumber] + "&" + picNumber;
		document.getElementById('enlarge').onclick=initializeFullscalePopup;
	}

	var mainImg = document.getElementById('mainpic');
	var curSrc = mainImg.src;
	var newSrc = imgs[picNumber];

	var idx = curSrc.lastIndexOf('/') - "gallery/images".length;
	var curLogicPath = curSrc.substring(idx, curSrc.length);
 
	if (newSrc != curLogicPath) {
		for (i = 0; i < labelIDs.length; i++)
			changeText(labelIDs[i], desc[picNumber][i]);

		var mainImg = document.getElementById('mainpic');
		mainImg.style.visibility = 'hidden';
		mainImg.src = imgs[picNumber];
		mainImg.style.visibility = 'visible';
		setOpacity(mainImg, 0);
		fadeIn(0, 'mainpic');
	}
}

function changeText (id, text){
	var obj = document.getElementById(id);
	obj.innerHTML = text;
}


function setOpacity(opacity) {
	var obj = document.getElementById(currentId);
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}

function fadeIn(opacity) {
	if (opacity <= 100) {
		setOpacity(opacity);
		opacity += 10;
		window.setTimeout("fadeIn("+opacity+")", 50);
	}
}

function loadmainpage() {
  loadimages(imgs);
  loadimages(imgsbg);
}

// this first shows the preloading bar and then starts loading images given as an argument
var loaded=0;
var done=0;
var images = new Array();

function loadimages(imagenames){
	done = 0;

	setPreloadBarVisible();

  prm();
  for (i = 0; i < imagenames.length; i++) {
		img = new Image();
		img.src = imagenames[i];
		images.push(img);
  }

	for(n=0;n<imagenames.length;n++){
		setTimeout('checkload('+n+')' ,n*10);
	}
}

function setPreloadBarVisible() {

  pre = document.getElementById('preload');
  obj2 = document.getElementById('descriptionen');
  obj3 = document.getElementById('descriptionfi');

	heightOffset = obj2.offsetHeight;
	if (obj3.offsetHeight > heightOffset)
	  heightOffset = obj3.offsetHeight;

	pre.style.visibility = 'visible';
	if (currentId == 'mainpic') {
		pre.style.left = 250 + 'px';
		pre.style.top = 300 + heightOffset + document.body.scrollTop + 'px';
	}

  if (currentId == 'fullscale') {
		// show the fade only if the fullscale img is being showed
	  pre.style.left=document.body.clientWidth / 2 - 175 + 'px'; 
		pre.style.top = document.body.clientHeight / 2 - 50 + document.body.scrollTop + 'px';
		obj2 = document.getElementById('fade');
		obj2.style.width=document.body.clientWidth  + 'px'; 
		obj2.style.height=document.body.scrollHeight;
		obj2.style.top = 0;
	  obj2.style.visibility = 'visible';
	}

}

// this constantly checks if image preloading is done, and shows the fullscale image
// if it's selected. 
function checkload(index){
  if (images[index].complete) {
    loaded++;
	} else {
	  setTimeout('checkload('+index+')', 100);
	}
	
	if (loaded >= images.length) {
	   if (currentId == 'fullscale') {
			 // scale the pop up showing the fullscale img when preloaded imgs are fully loaded
			resizeFullscalePopup(null, null);
			showFullscale();
		
      obj = document.getElementById('preload');
			obj.style.visibility = 'hidden';
		 }
		done = 1;
		loaded = 0;
		images = new Array();
		document.getElementById('thumbnails').style.visibility="visible";
		document.getElementById('mainpic').style.visibility="visible";
		document.getElementById('turnmainpic').style.visibility="visible";
		document.getElementById('details').style.visibility="visible";

		document.getElementById('preload').style.visibility="hidden";
  }
}

// this is responsible for the animation in the preload bar
var number = 1;
function prm() {
  document.getElementById('pr').src="img/d" + number + ".png";
  number++;
  if (number > 3)
    number = 1;

  if (done == 0)
    setTimeout('prm()' ,700);
	else
		number = 1;
}