var rootDir = '../img/bvi_2005/120/';
var largeRootDir = '../img/bvi_2005/600/';
//var imageList = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg'];
var imageList = ['IMGP1398.jpg','IMGP1444.jpg','IMGP1497.jpg','PB060014.jpg','PB090058.jpg','IMGP1399.jpg','IMGP1446.jpg','IMGP1498.jpg','PB060015.jpg','PB090059.jpg','IMGP1400.jpg','IMGP1447.jpg','IMGP1500.jpg','PB060016.jpg','PB090060.jpg','IMGP1401.jpg','IMGP1448.jpg','IMGP1514.jpg','PB060017.jpg','PB090062.jpg','IMGP1402.jpg','IMGP1449.jpg','IMGP1516.jpg','PB060018.jpg','PB090064.jpg','IMGP1403.jpg','IMGP1450.jpg','IMGP1517.jpg','PB070019.jpg','PB090065.jpg','IMGP1404.jpg','IMGP1451.jpg','IMGP1519.jpg','PB070021.jpg','PB090066.jpg','IMGP1405.jpg','IMGP1452.jpg','IMGP1520.jpg','PB070022.jpg','PB090067.jpg','IMGP1406.jpg','IMGP1453.jpg','IMGP1521.jpg','PB070023.jpg','PB090071.jpg','IMGP1407.jpg','IMGP1454.jpg','IMGP1522.jpg','PB070024.jpg','PB090072.jpg','IMGP1408.jpg','IMGP1455.jpg','IMGP1523.jpg','PB070025.jpg','PB090073.jpg','IMGP1410.jpg','IMGP1457.jpg','IMGP1525.jpg','PB070026.jpg','PB090074.jpg','IMGP1411.jpg','IMGP1458.jpg','IMGP1527.jpg','PB070027.jpg','PB100089.jpg','IMGP1412.jpg','IMGP1459.jpg','IMGP1528.jpg','PB070028.jpg','PB100091.jpg','IMGP1415.jpg','IMGP1461.jpg','IMGP1529.jpg','PB070029.jpg','PB100092.jpg','IMGP1416.jpg','IMGP1466.jpg','IMGP1530.jpg','PB070030.jpg','PB100095.jpg','IMGP1417.jpg','IMGP1467.jpg','IMGP1531.jpg','PB070032.jpg','PB110033.jpg','IMGP1418.jpg','IMGP1469.jpg','IMGP1534.jpg','PB070033.jpg','PB110110.jpg','IMGP1419.jpg','IMGP1473.jpg','IMGP1536.jpg','PB070034.jpg','PB110111.jpg','IMGP1421.jpg','IMGP1476.jpg','IMGP1538.jpg','PB070035.jpg','PB110112.jpg','IMGP1422.jpg','IMGP1477.jpg','IMGP1539.jpg','PB070036.jpg','PB110113.jpg','IMGP1424.jpg','IMGP1478.jpg','IMGP1540.jpg','PB070037.jpg','PB110114.jpg','IMGP1425.jpg','IMGP1479.jpg','IMGP1545.jpg','PB080043.jpg','PB110115.jpg','IMGP1426.jpg','IMGP1480.jpg','IMGP1547.jpg','PB080044.jpg','PB110116.jpg','IMGP1427.jpg','IMGP1481.jpg','IMGP1548.jpg','PB080045.jpg','PB110117.jpg','IMGP1428.jpg','IMGP1483.jpg','PB050002.jpg','PB080046.jpg','PB110118.jpg','IMGP1429.jpg','IMGP1485.jpg','PB050003.jpg','PB080047.jpg','PB110119.jpg','IMGP1430.jpg','IMGP1486.jpg','PB050004.jpg','PB080048.jpg','PB110120.jpg','IMGP1431.jpg','IMGP1487.jpg','PB050005.jpg','PB080049.jpg','PB110121.jpg','IMGP1433.jpg','IMGP1488.jpg','PB050007.jpg','PB080050.jpg','PB110124.jpg','IMGP1434.jpg','IMGP1490.jpg','PB050008.jpg','PB090054.jpg','PB110130.jpg','IMGP1436.jpg','IMGP1491.jpg','PB060009.jpg','PB090055.jpg','PB110131.jpg','IMGP1438.jpg','IMGP1493.jpg','PB060011.jpg','PB090056.jpg','IMGP1441.jpg','IMGP1495.jpg','PB060012.jpg','PB090057.jpg'];
//var imageList = ['IMGP1398.jpg','IMGP1444.jpg','IMGP1497.jpg','PB060014.jpg','PB090058.jpg','IMGP1399.jpg','IMGP1446.jpg','IMGP1498.jpg','PB060015.jpg','PB090059.jpg','IMGP1400.jpg','IMGP1447.jpg','IMGP1500.jpg','PB060016.jpg','PB090060.jpg','IMGP1401.jpg','IMGP1448.jpg'];
var imageInfoList = new Array();
function writeImages() {
    var container = document.getElementById('thumbContainer');
//container.style.position = 'relative';
    var counter = 1;
    var spanLeft = 0;
    var spanTop = 0;
    for (var i=0; i<imageList.length; i++) {
//document.debug.msg.value += 'Left: ' + spanLeft + ' Top: ' + spanTop + '\n';

        var spanEle = document.createElement('span');
        spanEle.style.position = 'absolute';
        spanEle.style.top = spanTop + 'px';
        spanEle.style.left = spanLeft + 'px';
        spanLeft += 60;
        spanEle.id = 'span_' + i;
        spanEle.style.width = '60px';
        spanEle.style.height = '45px';
//        spanEle.style.border = '1px solid red';
        spanEle.innerHTML = 'Loading...';
//document.debug.msg.value += 'HERE: ' + i + ' : ' + imageList[i] + '\n';

        var imgEle = document.createElement('img');
        imgEle.src = rootDir + imageList[i];
        imgEle.style.position = 'absolute';
        imgEle.style.top = 0;
        imgEle.style.left = 0;
        imgEle.width = 60;
        imgEle.height = 45;
        imgEle.border = 0;
        imgEle.id = 'thumb_' + i;
        imgEle.counter = i;
        imgEle.style.zIndex = 1;
        imgEle.onclick = function() {
            imageInfoList[this.counter].showLarge();
        }
        imgEle.onmouseover = function() {
            imageInfoList[this.counter].grow();
        }
        imgEle.onmouseout = function() {
            imageInfoList[this.counter].shrink();
        }
        spanEle.appendChild(imgEle);
        container.appendChild(spanEle);
        imageInfoList[i] = new setupImgObj(imgEle,i);
        if (counter == 12) {
            var brEle = document.createElement('br');
            container.appendChild(brEle);
            counter = 0;
            spanLeft = 0;
            spanTop +=45;
        }
        counter++;
    }
}
var pixelsToMove = 10;
var speed = 0;
function setupImgObj(ele,ind) {
    this.ele = ele;
    this.id = 'thumb_' + ind;
    this.ind = ind;
//    this.width = 240;
    this.width = 120;
    this.currWidth = 60;
//    this.height = 180;
    this.height = 90;
    this.currHeight = 45;
    this.grower = null;
    this.shrinker = null;
    var thisObj = this;
    this.showLarge = function() {
        var container = document.getElementById('thumbContainer');
        container.style.position = 'relative';
        var divEle = document.createElement('div');
        divEle.id = 'large_' + thisObj.ind;
        divEle.className = 'largeImage';
        divEle.style.position = 'absolute';
        divEle.style.top = '0';
        divEle.style.left = '0';
        divEle.style.width = '720px';
        divEle.style.height = '630px';
        divEle.style.zIndex = '500';
        divEle.style.textAlign = 'center';
        divEle.style.verticalAlign = 'middle';
        divEle.onclick = function() {
            var container = document.getElementById('thumbContainer');
            var largeImgEle = document.getElementById('large_' + thisObj.ind);
            container.removeChild(largeImgEle);
        }

        var spanEle = document.createElement('span');
        spanEle.className = 'infoText';
        spanEle.style.textAlign = 'center';
        spanEle.style.verticalAlign = 'middle';
        spanEle.innerHTML = 'Click image to close';

        var imgEle = document.createElement('img');
        imgEle.src = largeRootDir + imageList[thisObj.ind];
        imgEle.style.position = 'absolute';
        imgEle.className = 'largeImage';
        imgEle.style.top = '90px';
        imgEle.style.left = '60px';
        imgEle.width = 600;
        imgEle.height = 450;
        imgEle.style.zIndex = '200';
        divEle.appendChild(spanEle);
        divEle.appendChild(imgEle);
        container.appendChild(divEle);
    }
    this.grow = function () {
        document.getElementById('span_' + thisObj.ind).style.zIndex = 100;
        thisObj.ele.style.border = '1px solid red';
        if (thisObj.shrinker) clearTimeout(thisObj.shrinker);
        var keepgrowing = false;
        if (thisObj.currHeight + pixelsToMove > thisObj.height) {
            thisObj.currHeight = thisObj.height;
            thisObj.ele.style.height = thisObj.height + 'px';
        } else {
            thisObj.currHeight = thisObj.currHeight + pixelsToMove;
            thisObj.ele.style.height = thisObj.currHeight + 'px';
            keepgrowing = true;
        }
        if (thisObj.currWidth + pixelsToMove > thisObj.width) {
            thisObj.currWidth = thisObj.width;
            thisObj.ele.style.width = thisObj.width + 'px';
        } else {
            thisObj.currWidth = thisObj.currWidth + pixelsToMove;
            thisObj.ele.style.width = thisObj.currWidth + 'px';
            keepgrowing = true;
        }

        if (keepgrowing) {
            thisObj.grower = setTimeout('imageInfoList[' + thisObj.ind + '].grow()',speed);
        } else {
            if (thisObj.grower) clearTimeout(thisObj.grower);
        }
    }
    this.shrink = function() {
        document.getElementById('span_' + thisObj.ind).style.zIndex = 1;
        thisObj.ele.style.border = 'none';
        if (thisObj.grower) clearTimeout(thisObj.grower);
        var keepshrinking = false;
        if (thisObj.currHeight - pixelsToMove < 45) {
            thisObj.currHeight = 45;
            thisObj.ele.style.height = '45px';
        } else {
            thisObj.currHeight = thisObj.currHeight - pixelsToMove;
            thisObj.ele.style.height = thisObj.currHeight + 'px';
            keepshrinking = true;
        }
        if (thisObj.currWidth - pixelsToMove < 60) {
            thisObj.currWidth = 60;
            thisObj.ele.style.width = '60px';
        } else {
            thisObj.currWidth = thisObj.currWidth - pixelsToMove;
            thisObj.ele.style.width = thisObj.currWidth + 'px';
            keepshrinking = true;
        }
        if (keepshrinking) {
            thisObj.shrinker = setTimeout('imageInfoList[' + thisObj.ind + '].shrink()',speed);
        } else {
            if (thisObj.shrinker) clearTimeout(thisObj.shrinker);
        }
    }
}