function recenter() {
        var pageBounds = document.getElementById("pageBounds");
        var newleft = Math.max(0,(getWindowWidth()-parseInt(pageBounds.style.width))/2);
        var newtop =Math.max(0,(getWindowHeight()-parseInt(pageBounds.style.height))/2);
        pageBounds.style.left=newleft + 'px';
        pageBounds.style.top=newtop+ 'px';
}
function initTcdPage() {
    recenter();
    window.onresize=recenter;
    var firstThumbSrc = getFirstThumbSrc();
    registerThumbClick();
    preloadArrows();
    addArrowsIfNeeded();
    filterDetailsFor(firstThumbSrc);
    makePageVisible();
}
function initHPage() {
    recenter();
    window.onresize=recenter;
    makePageVisible();
}


var arrowImages;
function preloadArrows() {
    arrowImages=new Array();
    var arrowSrcs = new Array();
    arrowSrcs[0] = '/immagini/up.png';
    arrowSrcs[1] = '/immagini/uplit.png';
    arrowSrcs[2] = '/immagini/updisabled.png';
    arrowSrcs[3] = '/immagini/down.png';
    arrowSrcs[4] = '/immagini/downlit.png';
    arrowSrcs[5] = '/immagini/downdisabled.png';
    
    for (i=0;i<6;i++){
        arrowImages[i]=new Image();
        arrowImages[i].src=arrowSrcs[i];
    }
}

function addArrowsIfNeeded() {
    var thumbColumn = document.getElementById("thumbColumn");
    var imgCount =0;
    for (i=0; i < thumbColumn.childNodes.length; i++) {
        var node = thumbColumn.childNodes[i];
        if (node.nodeName == 'IMG'){
            imgCount++;
        }
    }
    if (imgCount > 5) {
        // aggiungo le frecce:
        // in su
        
        var spanDivider = document.createElement('span');
        spanDivider.style.visibility = 'hidden';
        thumbColumn.insertBefore(spanDivider, thumbColumn.firstChild);
        
        var imgUp = document.createElement('img');
        thumbColumn.insertBefore(imgUp, spanDivider);
        imgUp.src = '/immagini/up.png';
        imgUp.id = 'imgUp';
        imgUp.onmouseover=arrowOver;
        imgUp.onmouseout=arrowOut;
        imgUp.onclick=arrowClick;
        var brAfterArrowUp = document.createElement('br');
        brAfterArrowUp.id = 'brAfterArrowUp';
        thumbColumn.insertBefore(brAfterArrowUp, imgUp.nextSibling);
        // in giù        
        var imgDown = document.createElement('IMG');
        thumbColumn.appendChild(imgDown);
        imgDown.src = '/immagini/down.png';
        imgDown.id = 'imgDown';
        imgDown.onmouseover=arrowOver;
        imgDown.onmouseout=arrowOut;
        imgDown.onclick=arrowClick;
        thumbColumn.insertBefore(imgDown, brAfterArrowUp.nextSibling);
        var brAfterArrowDown = document.createElement('br');
        brAfterArrowDown.id = 'brAfterArrowDown';
        thumbColumn.insertBefore(brAfterArrowDown, imgDown.nextSibling);
        
        
        // aggiungo le immagini scrollabili
        for (var i = 0; i < 4; i++) {
            var brAfterThumb = document.createElement('br');
            brAfterThumb.id = 'brAfterThumb' + (3-i);
            thumbColumn.insertBefore(brAfterThumb, brAfterArrowUp.nextSibling);
            var scrollingThumb = document.createElement('img');
            scrollingThumb.id = 'scrollingThumb'+(3-i);
            scrollingThumb.style.width = '98px';
            scrollingThumb.style.height = '98px';
            scrollingThumb.onclick=processThumbClick;
            scrollingThumb.src = '/immagini/down.png';
            thumbColumn.insertBefore(scrollingThumb, brAfterArrowUp.nextSibling);
        }
        
        // nascondo tutte le immagini
        for (var i =0; i < thumbColumn.childNodes.length; i++) {
            var node = thumbColumn.childNodes[i];
            brAfterArrowDown.nextSibling
            if (node.nodeName == 'IMG' && node.id != 'imgUp' && node.id != 'imgDown' && node.id.substr(0,6) != 'scroll') {
                node.style.height = '0px';
                node.style.width = '0px';
                node.style.visibility = 'hidden';
                node.style.borderWidth = '0px';
//                if (node.nextSibling && node.nextSibling.nodeName == 'BR') {
//                    node.nextSibling.style.visibility = 'hidden'; 
//                }
            }
        }
        
        
        SetThumbsVisibleFromIndex(0);
    }
    
}
function arrowOver(evt){
    var eventSource; 
    if (evt) {
        eventSource = evt.target;
    } else {
        eventSource = window.event.srcElement;
    }
    litArrow(eventSource);    
}
function litArrow(arrowimg) {
    if (arrowimg.src.substring(arrowimg.src.length - '/immagini/up.png'.length,  
        arrowimg.src.length) == '/immagini/up.png') {
        arrowimg.src = '/immagini/uplit.png';
    }
    if (arrowimg.src.substring(arrowimg.src.length - '/immagini/down.png'.length,  
        arrowimg.src.length) == '/immagini/down.png') {
        arrowimg.src = '/immagini/downlit.png';
    }
}


function arrowOut(evt){
    var eventSource; 
    if (evt) {
        eventSource = evt.target;
    } else {
        eventSource = window.event.srcElement;
    }
    if (eventSource.src.substring(eventSource.src.length - '/immagini/uplit.png'.length,  
        eventSource.src.length) == '/immagini/uplit.png') {
        eventSource.src = '/immagini/up.png';
    }
    if (eventSource.src.substring(eventSource.src.length - '/immagini/downlit.png'.length,  
        eventSource.src.length) == '/immagini/downlit.png') {
        eventSource.src = '/immagini/down.png';
    }
}



function arrowClick(evt){
    var eventSource; 
    if (evt) {
        eventSource = evt.target;
    } else {
        eventSource = window.event.srcElement;
    }

    var doclick = true;
    if (eventSource.src.substring(eventSource.src.length - 'disabled.png'.length,  
        eventSource.src.length) == 'disabled.png') {
        doclick = false;
    }
    if (doclick) {
        // scroll
        var curIndex = getFirstVisibleIndex();
        if (eventSource.src.indexOf('up', 0) >= 0) {
            SetThumbsVisibleFromIndex(curIndex-1);
            litArrow(eventSource);
        } else if (eventSource.src.indexOf('down', 0)>= 0) {
            SetThumbsVisibleFromIndex(curIndex+1);
            litArrow(eventSource);
        }
        
    }
}
function getFirstVisibleIndex() {
    var thumbColumn = document.getElementById("thumbColumn");
    var imgIndex = 0;

    var scrollingThumb0 = document.getElementById('scrollingThumb0');
    
    for (i=0; i < thumbColumn.childNodes.length; i++) {
        var node = thumbColumn.childNodes[i];
        
        if (node.nodeName == 'IMG' && node.id != 'imgUp' && node.id != 'imgDown' && node.id.substr(0,6) != 'scroll'){
            if (node.src == scrollingThumb0.src) {
                return imgIndex;
            }
            imgIndex++;
        }
    }
    return -1;
}

function SetThumbsVisibleFromIndex(index) {
    var thumbColumn = document.getElementById("thumbColumn");
    var maxVisible = 4;
    var madeVisible = 0;
    var imgIndex = 0;
    
    var currentThumb = getCurrentThumb();
    
    for (i=0; i < thumbColumn.childNodes.length; i++) {
        var node = thumbColumn.childNodes[i];
        
        if (node.nodeName == 'IMG' && node.id != 'imgUp' && node.id != 'imgDown' && node.id.substr(0,6) != 'scroll'){
            if (imgIndex >= index && madeVisible < maxVisible) {
                var scrollImg = document.getElementById('scrollingThumb' + madeVisible);
                scrollImg.src = node.src;
                madeVisible++;
            }
            imgIndex++;
        }
    }
    if (currentThumb) {
        filterDetailsFor(currentThumb.src);
    }
    
    var imgUp = document.getElementById('imgUp');
    if (index == 0) {
        imgUp.src = '/immagini/updisabled.png';
    } else {
        imgUp.src = '/immagini/up.png';
    }
    var imgDown = document.getElementById('imgDown');
    if (index >= imgIndex - 4) {
        imgDown.src = '/immagini/downdisabled.png';
    } else {
        imgDown.src = '/immagini/down.png';
    }
}
function makePageVisible() {
    var pageBounds = document.getElementById("pageBounds");
    pageBounds.style.visibility = 'visible';
}

function getFirstThumbSrc() {
    var i;
    var firstThumbSrc = ''
    var thumbColumn = document.getElementById("thumbColumn");
    for (i=0; i < thumbColumn.childNodes.length; i++) {
        var node = thumbColumn.childNodes[i];
        
        if (node.nodeName == 'IMG'){
            firstThumbSrc = node.src;
            break;
        }
    }
    return firstThumbSrc;
}

function registerThumbClick() {
    var i;
    var thumbColumn = document.getElementById("thumbColumn");
    for (i=0; i < thumbColumn.childNodes.length; i++) {
        var node = thumbColumn.childNodes[i];

        if (node.nodeName == 'IMG') {
            if (node.src.indexOf('quadratino.jpg', 0) < 0) {
                node.onclick=processThumbClick;
            }
        }
    }
}

function processThumbClick(evt) {
    var eventSource; 
    if (evt) {
        eventSource = evt.target;
    } else {
        eventSource = window.event.srcElement;
    }
    
    filterDetailsFor(eventSource.src);
}
function getCurrentThumb() {
    var thumbColumn = document.getElementById("thumbColumn");
    for (i=0; i < thumbColumn.childNodes.length; i++) {
        var node = thumbColumn.childNodes[i];
        
        if (node.nodeName == 'IMG'  && node.id != 'imgUp' && node.id != 'imgDown' && node.id.substr(0,6) != 'scroll'){
            if (node.style.borderBottomStyle == 'solid'){
                return node;
            }
        }
    }
}
function filterDetailsFor(thumbSrc) {
    var largeSrc = thumbSrc.replace("/Miniature", "/Grandi");

    var i;
    var detailPane = document.getElementById("detailPane");
    var oneFound = false;
    for (i=0; i < detailPane.childNodes.length; i++) {
        var node = detailPane.childNodes[i];
        

        if (node.nodeName == 'DIV'){
            // cerco l'img contenuto nel div
            var childImgs = node.getElementsByTagName('IMG');
            var j;
            var found = false;
            for (j =0; j< childImgs.length; j++) {
                if (childImgs[j].src == largeSrc) {
                    found = true;
                    oneFound = true;
                    break;
                }
            }
            var visible = found;
            if (node.className == 'pinned') {
                visible = true;
            }
            node.style.height = visible ? '' : '0px';
            node.style.position = visible ? '' : 'absolute';
            node.style.top = visible ? '' : '0px';
            node.style.left = visible ? '' : '0px';
            node.style.visibility = visible ? '' : 'hidden';
            node.style.width = '460px';    
            node.style.overflow = 'hidden';
            

        }
    }
    var thumbColumn = document.getElementById('thumbColumn');
    for (i = 0; i < thumbColumn.childNodes.length; i++) {
        var node = thumbColumn.childNodes[i];
        if (node.nodeName == 'IMG') {
            if (oneFound && node.src == thumbSrc) {
                
                node.style.borderStyle = 'solid';
                node.style.borderColor = '#ff9933';
                node.style.borderWidth = '2px';
            } else {
                node.style.borderStyle = 'dotted';
                node.style.borderColor = 'white';
                node.style.borderWidth = '2px';
            }
        }
    }
    
}