var currentImage = 0;

function addEvent(elm, evType, fn, useCapture)
{
    if (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);
        return true; }
    else if (elm.attachEvent) {
        var r = elm.attachEvent('on' + evType, fn);
        return r;
        }
    else { elm['on' + evType] = fn; }    
}

addEvent(window, 'load', init, false);

function init() {
    if (!document.getElementsByTagName) return;
    
    //get list of thumbnails and add onclick event to them
    var thumbContainer = document.getElementById('thumbnails');
    if (thumbContainer != null) {
        var thumbList = thumbContainer.getElementsByTagName('img');
        if (thumbList.length > 0) {
            //load first image            
            var firstImg = thumbList[0];
            document.getElementById('fullSizeImg').src = firstImg.src.replace('_th', '');
            
            
            //load title of image if it exists
            if (firstImg.alt != null) { document.getElementById('fsImgTitle').innerHTML = firstImg.alt; }                          
            for (var i=0; i < thumbList.length; i++) {
                var currentThumb = thumbList[i];
                currentThumb.title = i;
                addEvent(currentThumb, 'click', loadFullSize, false);
            }
            
            //activate gallery navigation
            var prevLink = document.getElementById('previous');
            var nextLink = document.getElementById('next');
            if (prevLink && nextLink != null) {
                addEvent(prevLink, 'click', navigateGallery, false);
                addEvent(nextLink, 'click', navigateGallery, false);
            }
        }
    }
    
    //get active day and add onclick
    var activeDay = document.getElementById('active');
    var contents = activeDay.getElementsByTagName('a');
    for (var i=0; i < contents.length; i++) {
        var currentContent = contents[i];
        addEvent(currentContent, 'click', viewContent, false); 
    }
    
    //close viewer
    var fsViewer = document.getElementById('fsViewer');
    addEvent(fsViewer, 'click', closeViewer, false);
}

function navigateGallery(e) {
    var navLink = findTarget(e);
    var thumbContainer = document.getElementById('thumbnails');
    var thumbList = thumbContainer.getElementsByTagName('img');
    if (navLink.id == 'previous') {
        if (currentImage > 0) { currentImage = currentImage - 1; }
        else { currentImage = thumbList.length - 1; }
    }
    else if (navLink.id == 'next') {
        if ( currentImage < thumbList.length - 1 ) { currentImage++; }
        else { currentImage = 0; }        
    }
    loadFullSize(null ,currentImage);
}    

function loadFullSize(e, thumbIndex) {
    if (e == null) { 
        var thumbContainer = document.getElementById('thumbnails');
        var thumb = thumbContainer.getElementsByTagName('img')[thumbIndex];     
    }
    else { var thumb = findTarget(e); }
    
    //show loading
    var loadingImage = 'images/layout/loading.png';
    var fsImg = document.getElementById('fullSizeImg');
    fsImg.src=loadingImage;
        
    var thumbSrc = thumb.src.toLowerCase();
    var fullSizeSrc = thumbSrc.replace('_th', '');
    document.getElementById('fullSizeImg').src = fullSizeSrc;
    
    //update title   
    var imgTitle = document.getElementById('fsImgTitle');
    imgTitle.innerHTML = thumb.alt;
    
    //update currentImage variable
    currentImage = thumb.title;
}

function findTarget(e) {
    var eventElement;
    if (e && e.target) eventElement = e.target; 
    if (window.event && window.event.srcElement) eventElement = window.event.srcElement;
    if (!e) return;
    return eventElement;
}

function viewContent (e) {
    var content = findTarget(e);
    var viewer = document.getElementById('fsViewer');
    var viewerImage = document.getElementById('fsImage');
    var contentType = content.firstChild.nodeValue;
    var dayNum = content.title;
    
    //show journal
    if (contentType == 'journal') { 
        viewerImage.src = 'images/journals/day' + dayNum + '.jpg';
    }
    //show map
    else if (contentType == 'map') {
        viewerImage.src = 'images/maps/Map_Day' + dayNum + '.jpg';
    }
    viewer.style.display = 'block';
}

function closeViewer(e) {
    var fsViewer = document.getElementById('fsViewer');
    document.getElementById('fsImage').src = null;
    fsViewer.style.display = 'none';
}