function $(id){
    return document.getElementById(id);
}

function $$(el, name){
    if (el)
     return el.getElementsByTagName(name);
    else
	return false;
}

function init(){
    slideShow();
    gallery();
}

function gallery(){

var current = 0;
var currenttext = '';
var currentPage = 1;
var currentImages = new Array();
    if (!$('gallery'))
	return;

    setGallery();

function setGallery(){
    $('gallery').innerHTML='';
    var ul = document.createElement('ul');
    $('gallery').appendChild(ul);
    imgs = galleryArray.slice( (currentPage-1)*7, (currentPage*7));
    capt = captionArray.slice( (currentPage-1)*7, (currentPage*7));
    loadImage(imgs, capt, ul,  0);
    
    if (galleryArray.length > (currentPage*7)) {
	$('nextpage').style.display = 'block';
	$('nextpage').onclick = function(){changePage(currentPage+1);};
    }
    else {
	$('nextpage').style.display = 'none';
    }
    
    if (currentPage>1) {
	$('previouspage').style.display = 'block';
	$('previouspage').onclick = function(){changePage(currentPage-1);};
    }
    else {
	$('previouspage').style.display = 'none';
    }


}

function loadImage(imgs, capt, ul, c){
    if (c == imgs.length) return;
    var img= new Image();
    img.src = imgs[c];
    img.alt = capt[c];
    var li = document.createElement('li');
    li.appendChild(img);
    ul.appendChild(li);
    img.onclick = change;
    img.onmouseover = change;
    img.onmouseout = restore;
    currentImages[c]=img;


    //now test if image is loaded and resize it
    if (img.complete) iter();

    else img.onload= iter;
	
    function iter(){
	resize (img, parseInt($('gallery').className));
	if (c==0){
	    current = imgs[c]; // I suppose the first image is the one I show
	    currenttext = capt[c];
	    $('showimg').src = current;
	    center($('showimg'));
	    $('dida').innerHTML = '<p>'+ currenttext+'</p>';
	}

	loadImage(imgs, capt, ul, c+1);
    }

}
    

function center(img){
    img.style.marginTop = ((396/2)-(parseInt(img.height)/2))+'px';
    img.style.marginLeft = ((528/2)-(parseInt(img.width)/2))+'px';
}

function changePage(page){
    currentPage = page;
    setGallery();
}

function resize(img , newdim){
    var w = img.width;
    var h = img.height;
    if (w<h)
	r = newdim/w;
    else
	r = newdim/h;
    nw = r * w;
    nh = r * h;
    img.width = nw;
    img.height = nh;
}

function change(e){
    if (!e) var e = window.event;
    var img = $('showimg');
    img.src = this.src;
    center(img);
    
    $('dida').innerHTML = '<p>'+ this.alt+'</p>';
    /*    if (e.type == 'click') {
	current = this.src;
	currenttext = this.alt;
	}*/
    current = this.src;
    currenttext = this.alt;

}

function restore(e){

    if (!e) var e = window.event;
    var img = $('showimg');
    img.src = current;
    center(img);
    $('dida').innerHTML = '<p>'+ currenttext+'</p>';
}    
}
function slideShow(){
var currentSlide = 0;
var oldSlide = 0;
var slides = false;
var stopFlag = false;
var slidesTimer = 0;
var fadeOutTimer = 0;
    if (!$('slide'))
	return;
    setSlide();

function setSlide(){
    var slideEl= $('slide');

    slideEl.onmouseover = stopSlideShow;
    slideEl.onmouseout = restartSlideShow;
    var imgs = $$($('slide'), 'li');
    if (!imgs)
	return false;
    for (var i = 0; i< imgs.length; i++){
	if (i!=currentSlide)
	    setOpacity(imgs[i], 0);
    }
    slides = imgs;
    runSlide();
}


function runSlide(){
    if (!stopFlag){
	oldSlide = currentSlide;
	currentSlide+=1;
	if (currentSlide==slides.length)
	    currentSlide = 0;
	slides[currentSlide].style.zIndex=0;
	slides[oldSlide].style.zIndex=10;
	setOpacity(slides[currentSlide], 100);
	fadeOut(oldSlide, 2500, 30, 100);
    }
    slidesTimer = window.setTimeout(runSlide, 6000);
}

function stopSlideShow(e){
    if (!e) var e = window.event;
    //window.clearTimeout(slidesTimer);
    //slidesTimer = 0;
    stopFlag = true;
}

function restartSlideShow(e){
    stopFlag=false;
}
function setOpacity(el, value){
    el.style.filter = 'alpha(opacity=' + value +')';
    el.style.MozOpacity = value/100;
    el.style.opacity = value/100;
}


function fadeOut(el, time, iter, start){
    steplen = time/iter;
    if (start <= 0){
	window.clearTimeout(fadeOutTimer);
	setOpacity(slides[el], 0);
	slides[oldSlide].style.zIndex=0;
	slides[currentSlide].style.zIndex=10;
	return;
    }
    setOpacity(slides[el], start - 100/iter);
    fadeOutTimer = window.setTimeout(function(){fadeOut(el, time, iter, (start- 100/iter));}, steplen);
}
}

window.onload = init;