window.onload = function (e) {
    loadMorePhotos(true);
    
    var sluiten = document.getElementById('sluiten');
    if (sluiten) {
        sluiten.onclick = function () {
            var showRow = document.getElementById('showRow');
            var showImage = document.getElementById('showImage');
            showImage.src = '';
            showRow.style.display = 'none';
            
            return false;
        }
    }
}

var photoStartCount = 0;
var loadMoreDisabled = false;
var doLoad = true;

function loadMorePhotos(isFirst) {
    if (doLoad == false) {
        return;
    }
    
    var doLoad = false;
    var lastRow = document.getElementById('lastRow');
    if (!lastRow) { return; }
    var clientHeight = document.documentElement.clientHeight;
    
    var visibleBottom = clientHeight + Element.getScroll('Top', window);
    var lastRowBottom = (Element.getTop(lastRow) + Element.getHeight(lastRow)); 
    
    if (visibleBottom - lastRowBottom > -25 && loadMoreDisabled == false) {
        var xhr = new XMLHttpRequest();
        
        var url = '/get-photos/' + photoStartCount;
        
        xhr.open("POST", url, true);
        
        var params = '';
        
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.setRequestHeader("Content-length", params.length);
        xhr.setRequestHeader("Connection", "close");
        
        photoStartCount += 9;
        
        xhr.onreadystatechange = function() {

            if (xhr.readyState == 4 && xhr.status == 200) {
                var photos = eval('(' + xhr.responseText + ')');
                
                if (photos.length == 0) {
                    loadMoreDisabled = true;
                }
                
                var newRow = document.createElement('tr');
                for (var i = 0; i < photos.length; i++) {
                	var url = '/upload/converted/thumbnail/' + photos[i]['dag_nummer'] + '_' + photos[i]['camera_nummer'] + '_' + photos[i]['name'];
                    renderCell(newRow, url, photos[i]['id']);
                    if ((i + 1) % 3 == 0) {
                        lastRow.parentNode.insertBefore(newRow, lastRow);
                        newRow = document.createElement('tr');
                    }
                }
                
                doLoad = true;
                
                lastRow.parentNode.insertBefore(newRow, lastRow);
                
                
            }
        }
        
        xhr.send(params);
    }
    
    setTimeout('loadMorePhotos(false)', 100);
}


function renderCell(row, url, id) {
    var newCell = document.createElement('td');
    var newImage = document.createElement('img');
    newImage.setAttribute('photoId', id);
    newImage.onclick = function () {
        var showRow = document.getElementById('showRow');
        
        //showRow.style.display = 'none';
        
        var showCell = document.getElementById('showCell');
        var showImage = document.getElementById('showImage');
        showImage.src = this.src.replace(/thumbnail/i, 'normal');
        
        var self = this;
        var downloaden = document.getElementById('downloaden');
        if (downloaden) {
            downloaden.onclick = function() {
                this.href = '/download/' + self.getAttribute('photoId');
            }
        }
        
        row.parentNode.insertBefore(showRow, row);
        if (document.all) {
            showRow.style.display = 'block';
        } else {
            showRow.style.display = 'table-row';
        }
        
        if (showRow.scrollIntoView) {
        //    showRow.scrollIntoView(true);
        //    window.scrollBy(0, -50);
        }

    }
    newImage.src = url;
    if (newImage.width < newImage.height) {
        //newImage.style.width = '14';
        //newImage.style.width = 'auto';
    }
    newCell.appendChild(newImage);
    row.appendChild(newCell);
}