window.onload = function()
 {
   xImgGallery();
 };

/* Development Notes and Script Assumptions:

1) Optional URL arguments: g = 'gallery first num', s = 'slideshow img num'.
   For example:
   img_gallery_2.php?g=21
   img_gallery_2.php?s=30

2) IMG IDs begin with 'g' (for gallery) or 's' (for slideshow)
   then are numbered sequentially beginning with 1. No leading zeros.

3) Gallery (thumbnail) image pathnames: gPath + gPrefix + seq_num + gSuffix + gExt
   SlideShow (large image) pathnames:   sPath + sPrefix + seq_num + sSuffix + sExt
   Leading zeros (as part of seq_num) are optional.

4) The captions array initializations could be generated server-side.

5) This file does not have to be a PHP file - I use it here for my page-template, not for this demo.
*/

/* xImgGallery, Copyright (C) 2004,2005 Michael Foster (Cross-Browser.com)
   Distributed under the terms of the GNU LGPL.
*/

// don't change these:
var galMode = false;
var autoSlide = false;
var slideTimer = null;
var slideCounter = 0;
var currentSlide = 1;

function xImgGallery()
{
  if (document.getElementById && document.getElementById('navigation').style) {
    var n = 1, a = xGetURLArguments();
    if (a.length) {
      var arg = a['g'] || a['s'];
      if (arg) {
        n = parseInt(arg, 10);
        if (n <= 0 || n > imgsMax) { n = 1; } 
        if (a['s']) { galMode = false; }
      }
    }
   if ( imgsMax > 0) 
	  {
	      gal_paint(n);
		  gal_setNav(n);
		  document.getElementById('time').style.display = 'none';
      }
  }
}
function gal_paint(n)
{
  gal_setImgs(n);
  gal_setNav(n);
  /*document.getElementById("order").innerHTML = n+"/"+(captions.length-1);*/
}
function gal_setImgs(n)
{
	//alert(n);
	iMGsrcReplayser(gallery[n-1]);
}
function o_gal_setImgs(n)
{
  var ssEle = document.getElementById('slideshow');
  var galEle = document.getElementById('gallery');
  var i, imgTitle, pth, img, id, src, ipp, idPrefix, imgSuffix, imgPrefix;
  var zeros, digits, capEle, capPar;
  if (galMode) {
    ipp = imgsPerPg;
    idPrefix = 'g';
    imgPrefix = gPrefix;
    imgSuffix = gSuffix + gExt;
    imgTitle = 'Click to view large image';
    ssEle.style.display = 'none';
    galEle.style.display = 'block';
    pth = gPath;
    zeros = gZeros;
    digits = gDigits;
  }
  else {
    currentSlide = n;
    ipp = 1;
    idPrefix = 's';
    imgPrefix = sPrefix;
    imgSuffix = sSuffix + sExt;
    imgTitle = '';
    ssEle.style.display = 'block';
    galEle.style.display = 'none';
    pth = sPath;
    zeros = sZeros;
    digits = sDigits;
  }
  for (i = 0; i < ipp; ++i) {
    id = idPrefix + (i + 1);
    img = document.getElementById(id);
    capEle = document.getElementById((galMode ? 'gc':'sc') + (i + 1));
    if (capEle) capPar = capEle.parentNode;
    if ((n + i) <= imgsMax) {
      if (zeros) src = xPad(n + i, digits, '0', true);
      else src = (n + i) + "";
      img.title = imgTitle;
      img.alt = src;
      img.src = pth + imgPrefix + src + imgSuffix; // img to load now
      img.onerror = imgOnError;
      if (galMode) {
        img.style.cursor = 'pointer';
        img.slideNum = n + i; // slide img to load onclick
        img.onclick = imgOnClick;
      }
      if (capEle) {
		capEle.innerHTML = captions[i + n];
        if (capPar) capPar.style.display = 'block';
      }
      img.style.display = 'inline';
    }
    else {
      img.style.display = 'none';
      if (capEle) {
        if (capPar) capPar.style.display = 'none';
      }
    }
  }  
}
function imgOnClick()
{
  galMode = false;
  gal_paint(this.slideNum);
}
function imgOnError()
{
  var p = this.parentNode;
  if (p) p.style.display = 'none';
}
function gal_setNav(n)
{
  var ipp = galMode ? imgsPerPg : 1;
  // Next
  var e = document.getElementById('next');
  if (n + ipp <= imgsMax) {
    e.nextNum = n + ipp;
    e.onclick = next_onClick;
    e.style.display = 'inline';
  }
  else {
    e.nextNum = 1;
  }
  // Previous
  e = document.getElementById('prev');
  e.style.display = 'inline';
  e.onclick = prev_onClick;
  if (n > ipp) {
    e.prevNum = n - ipp;
  }
  else {
    e.prevNum = galMode ? normalize(imgsMax) : imgsMax;
  }

  // Auto Slide
  e = document.getElementById('auto');
  if (!galMode) {
    e.onclick = auto_onClick;
    e.style.display = 'inline';
  }
  else {
    e.style.display = 'none';
  }
}
function normalize(n)
{
  return 1 + imgsPerPg * (Math.ceil(n / imgsPerPg) - 1);
}
function next_onClick(e)
{
  gal_paint(this.nextNum);
}
function prev_onClick(e)
{
  gal_paint(this.prevNum);
}

function auto_onClick(e)
{
  var ele = document.getElementById('time');
  autoSlide = !autoSlide;
  if (autoSlide) {
	this.getElementsByTagName("IMG")[0].src="/images/pl_stop.gif";
    slideCounter = 0;
    slideTimer = setTimeout("slide_OnTimeout()", slideTimeout);
    ele.style.display = 'inline';
  }
  else if (slideTimer) {
	this.getElementsByTagName("IMG")[0].src="/images/pl_play.gif";
    clearTimeout(slideTimer);
    ele.style.display = 'none';
  }
}
function slide_OnTimeout()
{
  slideTimer = setTimeout("slide_OnTimeout()", 1000);
  ++slideCounter;
  //document.getElementById('time').innerHTML = slideCounter + '/' + pairs.length;
  if (slideCounter == slideTimeout) {
    if (++currentSlide > imgsMax) currentSlide = 1; 
    gal_paint(currentSlide);
    slideCounter = 0;
  }
}

/* xGetURLArguments and xPad are part of the X library,
   distributed under the terms of the GNU LGPL,
   and maintained at Cross-Browser.com.
*/
function xGetURLArguments()
{
  var idx = location.href.indexOf('?');
  var params = new Array();
  if (idx != -1) {
    var pairs = location.href.substring(idx+1, location.href.length).split('&');
    for (var i=0; i<pairs.length; i++) {
      nameVal = pairs[i].split('=');
      params[i] = nameVal[1];
      params[nameVal[0]] = nameVal[1];
    }
  }
  return params;
}
function xPad(str, finalLen, padChar, left)
{
  if (typeof str != 'string') str = str + '';
  if (left) { for (var i=str.length; i<finalLen; ++i) str = padChar + str; }
  else { for (var i=str.length; i<finalLen; ++i) str += padChar; }
  return str;
}


 function openGL(){
	 if (document.getElementById('contGalery').style.display == 'block'){
	 
	 document.getElementById('contGalery').style.display = 'none';
	  document.getElementById('toplevelGalery').style.display = 'none';
	document.getElementById('opnText').innerHTML='<img src="images/ic_plas.gif" id="pl" alt="" /><span>розгорнути</span>';
	 
	 }else{
	  document.getElementById('contGalery').style.display = 'block';
	   document.getElementById('toplevelGalery').style.display = 'block';  
	   document.getElementById('opnText').innerHTML='<img src="images/ic_min.gif" id="pl" alt="" /><span>згорнути</span>';
	    
	 }
 }
 
 
 
 function iMGsrcReplayser (urlSrc){
	 document.getElementById('s1').src = urlSrc; 
	 //alert(urlSrc);
	 }
 
 /*********** scroler  ***********/
 
 
 
 // JavaScript Document
/* image map */
function overIm(nameIm,img){
 	var a = document.getElementById(nameIm);
	a.src="images/"+img;
}
function outIm(nameIm,img){
 	var a =  document.getElementById(nameIm);
	a.src="images/"+img;
}

/* scrolling text */
window.scrollStep = 20;
window.timer = null;
window.currentTop = 0;

function scrollContainer(id, dir){
	var div = document.getElementById(id);
	var parentHeight = div.parentNode.offsetHeight;
	var divHeight = div.offsetHeight;
	var maxTop = parentHeight - divHeight;
	var maxBottom = 0;
	//if(isNaN(parseInt(div.style.top))) div.style.top="0";
	if(window.currentTop<=maxTop && dir=="up"){
		div.style.top = maxTop+"px";
		return;
	}
	if(window.currentTop>=0 && dir=="down"){
		div.style.top = "0px";
		return;
	}
	if(dir=="up"){
		window.currentTop -= window.scrollStep;
		div.style.top = window.currentTop + "px";
	}else if(dir=="down"){
		window.currentTop += window.scrollStep;
		div.style.top = window.currentTop + "px";
	}
	window.timer = window.setTimeout(function(){scrollContainer(id, dir)},100);
}

function stopScrolling(){
	window.allowScrolling = false;
	clearTimeout(window.timer);
}

function fadeImage(counter, imageArray) {
	var multiplier = 50;
	var delay = 200;

	document.getElementById('bottom_img').src = imageArray[counter];
	document.getElementById('top_div').style.visibility = 'hidden';
	counter++;
	if (counter == imageArray.length) {
		counter = 0;
	}
	document.getElementById('top_img').src = imageArray[counter];
	
	if (typeof document.getElementById('top_div').style.opacity != 'undefined') {
		// This section is for Firefox, Netscape, and other good browsers
		document.getElementById('top_div').style.opacity = 0;
		setTimeout('document.getElementById(\'top_div\').style.visibility = \'visible\';', delay);
		for (var i=0; i < multiplier; i++) {
			setTimeout('document.getElementById(\'top_div\').style.opacity = '+i+'/' + multiplier + ';', delay + i * multiplier);
		}
	} else {
		// This section is for IE
		if (document.getElementById('top_div').style.filter.indexOf("alpha") == -1) {
			// Attempt to preserve existing filters
			var existingFilters='';
			if (document.getElementById('top_div').style.filter) {
				existingFilters = document.getElementById('top_div').style.filter+' ';
			}
			document.getElementById('top_div').style.filter = existingFilters+"alpha(opacity="+this.opacity+")";
		}

		document.getElementById('top_div').style.filter['alpha'] = 'opacity = 0';
		setTimeout('document.getElementById(\'top_div\').style.visibility = \'visible\';', delay);
		for (var i=0; i < multiplier; i++) {
			setTimeout('document.getElementById(\'top_div\').style.filter = \'alpha(opacity = '+(i*100/multiplier)+'\';', delay + (i * multiplier));
		}
	}
	arrayString = '[';
	for (var i=0; i < imageArray.length; i++) {
		if (i != 0) {
			arrayString += ',';
		}
		arrayString += '\''+imageArray[i]+'\'';
	}
	arrayString += ']';
	setTimeout('fadeImage('+counter+', '+arrayString+')', 9000);
}