function initPage() {
    Event.observe('menuActivator', 'click', handleMenuActivatorClick);
    Event.observe('thePhoto', 'click', showPreviousPhoto);
    Event.observe('photoNavFirst', 'click', showFirstPhoto);
    Event.observe('gotoGallery', 'click', gotoGallery );
    Event.observe('photoNavNext', 'click', showNextPhoto);
    Event.observe('photoNavLatest', 'click', showLatestPhoto);
    Event.observe('photoNavPrevious', 'click', showPreviousPhoto);
    Event.observe('participate', 'mouseover', hoverParticipate);
    Event.observe('participate', 'mouseout', unHoverParticipate);
    Event.observe('participate', 'click', handleParticipateClick);
    Event.observe('photoNavSlideshow', 'click', toggleSlideShow);

    showLatestPhotoOrAnchoredPhoto();
    document.observe('keyup', handleKeyUp);

  

    setTimeout('reloadImages()', 1000 * 60 * 60 );
    makeGallery();

    if( $('postComment') ){
        $('postComment').observe( 'click', handleAddCommentClick );
        $('gotoComments').observe( 'click', gotoComments );
    }

    if( $('theComments') ){
        $$('HEAD')[0].appendChild( new Element("script",{"src":"comments.jsp"}));
        $('showCommentsForCurrentPhoto').observe( 'click', handleShowCommentsForCurrentPhotoClick );
        $('showCommentsForAllPhotos'   ).observe( 'click', handleShowCommentsForAllPhotosClick );
    }
}

function generateCommentHtml( json ){
    $('theComments').update();
    json.each( function( comment ) {
        var dateKey = comment.key.substring( comment.key.indexOf("/") + 1 );

        var commentDiv = new Element('div',{'class':'commentContainer date_' + dateKey ,'id':'cmt_'+comment.id} );

        var thumb = new Element( "IMG", {"class":"commentedPortrait","src":"http://www.andreasoverland.no/blog/thumbs/" + comment.key + ".jpg"});
        thumb.observe( 'click', gotoCommentThumbPortrait );
        commentDiv.appendChild( thumb );
        
        if( comment.website != null && comment.website != '' ){
            var link = new Element('a',{'href':comment.website }).update(comment.name);
            var authorDiv = new Element( 'div',{'class':'commentAuthor'} );
            authorDiv.appendChild( link );
            authorDiv.appendChild( new Element( "span" ).update( " <span class='wroteDate'>wrote on " + comment.added +"</span>") );
            commentDiv.appendChild( authorDiv );
        }
        else {
            commentDiv.appendChild( new Element( 'div',{'class':'commentAuthor'} ).update( new Element( "span" ).update( comment.name+" <span class='wroteDate'>wrote on " + comment.added +"</span>") ) );
        }
        commentDiv.appendChild( new Element( 'div',{'class':'commentText'} ).update( comment.comment ) );
        commentDiv.appendChild( new Element( 'br',{'style':{'clear':'both'}}));
        $('theComments').appendChild( commentDiv );
    } );
}

function gotoCommentThumbPortrait( event ){
    var img = event.findElement();
    var clickedPhotoKey = img.src.substring( img.src.indexOf("2") );
    clickedPhotoKey = clickedPhotoKey.substring(0, clickedPhotoKey.indexOf( "." ) );
    var nextImg = -1;
    for ( var c = 0; c < numImages; c++ ) {
        if ( clickedPhotoKey == images.items[c].key ) {
            nextImg = c;
            break;
        }
    }
    if( nextImg != -1 ){
        loadPhoto( $('thePhoto'), nextImg );
        new Effect.ScrollTo( 'menuActivator', {duration:0.5});
    }


}
function handleAddCommentClick( event ){
    new Ajax.Request( 'comments.jsp',{ parameters:{
        'cmd':'evalComment',
        'key':$('thePhoto').src.substr(35, 18),
        'authorName':$F('name'),
        'authorEmail':$F('email'),
        'website':$F('website'),
        'comment':$F('comment'),
        'remember':$('pharaohBender').checked
    }});

}

function gotoComments(){
    new Effect.ScrollTo( 'comments', {duration:0.5} );
}

function gotoGallery(){
    new Effect.ScrollTo( 'galleryTitle', {duration:0.5} );
}

function makeGallery(){
    var gallery = $('gallery');
    gallery.update('');
    for( var c = numImages-1;c>=0;c-- ){
        var imgContainer = new Element( "DIV", {"class":"imgContianer"} );
        var img = new Element( "IMG", {"src":"http://www.andreasoverland.no/blog/height_200/" + images.items[c].key + ".jpg","id":c});
        imgContainer.update( img );
        gallery.appendChild( imgContainer );
    }
    gallery.appendChild( new Element("br",{style:"clear:both"}));
    $('gallery').select('IMG').each(
        function( img ){
            img.observe( 'click', handleGalleryImageClick );   
        }
    );
}

function handleGalleryImageClick( event ){
    var img = event.findElement();
    var thePhoto = $('thePhoto');
    var nextImg = img.id;
    loadPhoto(thePhoto, nextImg);
    new Effect.ScrollTo( 'menuActivator', {duration:0.5});

}

function reloadImages() {
    var imgBlock = new Element("script", {"src":"images.jsp"});
    $$('HEAD')[0].appendChild(imgBlock);
    makeGallery();
}

function handleKeyUp( event ) {
    var source = event.findElement();
    if( source.id != 'comment' ){
        if ( event.keyCode == Event.KEY_LEFT ) {
            showPreviousPhoto();
        }
        else if ( event.keyCode == Event.KEY_RIGHT ) {
            showNextPhoto();
        }
    }
}

function showLatestPhotoOrAnchoredPhoto() {
    var loc = (document.location + "");
    if ( loc.indexOf("#") > 0 ) {
        var currentPhotoKey = loc.substring(loc.indexOf("#") + 1);
        var thePhoto = $('thePhoto');
        var nextImg = -1;
        for ( var c = 0; c < numImages; c++ ) {
            if ( currentPhotoKey == images.items[c].key ) {
                nextImg = c;
                break;
            }
        }
        if ( nextImg != -1 ) {
            loadPhoto(thePhoto, nextImg);
        }
        else {
            showLatestPhoto();
        }
    }
    else {
        showLatestPhoto();
    }
}

function handleParticipateClick() {
    document.location = 'http://www.andreasoverland.no/contact/';
}


var perEx;

function toggleSlideShow() {
    var button = $('photoNavSlideshow');
    if ( button.innerHTML == "Start slideshow" ) {

        if( Prototype.Browser.WebKit ){
            $('photoContainer').webkitRequestFullScreen();
        }
        
        perEx = new PeriodicalExecuter(showNextPhoto, 10);
        button.innerHTML = "Stop slideshow"
        showNextPhoto();

    }
    else {
        button.innerHTML = "Start slideshow";
        perEx.stop();
    }
}


function hoverParticipate( event ) {
    $('participate').setStyle({'backgroundColor':'#E00','textDecoration':'underline'});
}

function unHoverParticipate( event ) {
    $('participate').setStyle({'backgroundColor':'#d10000','textDecoration':'none'});
}

function handleMenuActivatorClick( event ) {
    var mc = $('menuContainer');
    var clickedElement = event.findElement();	
    if( clickedElement.id == 'menuActivator' ){
		
    }
    if ( mc.hasClassName('collapsed') ) {
        new Effect.Morph(mc, {style:'margin-top:0px',duration:0.5});
        mc.removeClassName('collapsed');
    }
    else {
        mc.addClassName('collapsed');
        new Effect.Morph(mc, {style:'margin-top:-268px',duration:0.5});
    }
}

function showFirstPhoto() {
    var thePhoto = $('thePhoto');
    var nextImg = 0;
    loadPhoto(thePhoto, nextImg);
}

function showLatestPhoto() {
    var thePhoto = $('thePhoto');
    var nextImg = numImages-1;
    loadPhoto(thePhoto, nextImg);

}


function showNextPhoto() {

    var thePhoto = $('thePhoto');
    var currentPhotoKey = thePhoto.src.substr(35, 18);
    var nextImg = 0;

    for ( var c = 0; c < numImages; c++ ) {
        if ( currentPhotoKey == images.items[c].key ) {
            nextImg = (c + 1) % numImages;
            break;
        }
    }

    loadPhoto(thePhoto, nextImg);
}

function showPreviousPhoto() {

    var thePhoto = $('thePhoto');
    var currentPhotoKey = thePhoto.src.substr(35, 18);
    var nextImg = 0;

    for ( var c = 0; c < numImages; c++ ) {
        if ( currentPhotoKey == images.items[c].key ) {
            nextImg = c - 1;
            if ( nextImg < 0 ) {
                nextImg = numImages - 1;
            }
            break;
        }
    }

    loadPhoto(thePhoto, nextImg);

}

var showAllComments = true;
var currentPhotoCommentsKey;

function handleShowCommentsForAllPhotosClick( event ){
    showAllComments = true;
    showComments();
}

function handleShowCommentsForCurrentPhotoClick( event ){
    showAllComments = false;
    showComments();
}


function showComments(){
    if( showAllComments ){
        // remove hidden class from commentsDiv
        $$('.commentContainer').each( function( item ){
            item.removeClassName('hidden');
        });
    }
    else {
        // add hidden class to all but those with matching datekeys
        // var dateKey = comment.key.substring( comment.key.indexOf("/") + 1 );
        // var commentDiv = new Element('div',{'class':'commentContainer date_' + dateKey ,'id':'cmt_'+comment.id} );
        
        $$('.commentContainer').each( function( item ){
            var dateClass = "date_"+currentPhotoCommentsKey.substring( currentPhotoCommentsKey.indexOf("/") + 1 );
            if( !item.hasClassName( dateClass ) ){
                item.addClassName( 'hidden' );
            }
            else {
                item.removeClassName('hidden');
            }
        });
    }
}

function loadPhoto( thePhoto, nextImg ) {
    if( document.location.href.indexOf( "test") > 0 ){
        document.location = '/index_test.jsp#' + images.items[nextImg].key;
    }
    else {
        document.location = '/#' + images.items[nextImg].key;
    }

    currentPhotoCommentsKey = images.items[nextImg].key;

    thePhoto.fade({
        duration:0.5,
        from:1,to:0,
        afterFinish:function() {
            thePhoto.src = "http://www.andreasoverland.no/blog/" + images.items[nextImg].key + ".jpg";
            showComments();
            Event.observe(thePhoto, 'load', function() {
                $('photoTitle').innerHTML = "" + images.items[nextImg].title;
                thePhoto.setOpacity(0);
                thePhoto.setStyle({display:'inline'});
                thePhoto.fade({duration:0.5,from:0,to:1});
                thePhoto.stopObserving('load');
            });
        }
    });
}


function commentSavedOK( id ){
    
    $('comment').update('');
    $('comment').value = '';
    new Effect.Highlight( 'cmt_'+id );

    
}

function nop(){
    
}