function PhotoPlayer(elementId)
{
    this.element = document.getElementById(elementId);
    this.linkElement = document.createElement('A');

    this.subtitleElement = document.createElement('DIV');
    this.subtitleBackgroundElement = document.createElement('DIV');
    this.subtitleContentElement = document.createElement('DIV');

    this.subtitleElement.appendChild(this.subtitleContentElement);
    this.subtitleElement.appendChild(this.subtitleBackgroundElement);
    this.element.appendChild(this.linkElement);
    this.element.appendChild(this.subtitleElement);

    $(this.linkElement).css({
       'text-align': 'center'
    });

    $(this.subtitleElement).css({
        position: 'absolute',
        bottom: '0',
        left: '0',
        width: '100%'
    });

    $(this.subtitleBackgroundElement).css({
        position: 'absolute',
        width: '100%',
        height: '100%',
        top: '0',
        left: '0',
        'background-color': '#000',
        '-moz-opacity': '.5',
        filter: 'alpha(opacity=50)',
        opacity: '.5',
        'z-order': '2'
    });

    $(this.subtitleContentElement).css({
        margin: '5px',
        position: 'relative',
        top: '0',
        left: '0'
    });
    this.subtitleBackgroundElement.style.zIndex = '1';
    this.subtitleContentElement.style.zIndex = '2';

    this.newImage = null;
    this.oldImage = null;

    var self = this;
    setInterval(function() { self.NextPhoto(); }, 4500);
    this.NextPhoto();
}

PhotoPlayer.prototype = {

    NextPhoto: function() {
        var self = this;
        $.getJSON("RandomPhoto.ashx?r=" + new Date().getTime(), function(a) { self.GotPhoto(a) });
    },

    GotPhoto: function(photo) {

        var subtitleString = '' +
                '<b><a href="' + photo.PhotoViewUrl + '">' +
                photo.PhotoTitle + '</a></b><br/>' +
                '<a href="' + photo.UserViewUrl + '">' +
                photo.UserTitle + '</a><br/>' +
                'at <a href="' + photo.PlaceViewUrl + '">' +
                photo.PlaceTitle + '</a>';

        $(this.subtitleContentElement).html(subtitleString);

        this.linkElement.href = photo.PhotoViewUrl;

        var img = new Image();
        this.newImage = $(img)
        
        var self = this;
        this.newImage.load(function() { self.PhotoLoaded() });
        this.newImage.css({
            position: 'absolute',
            top: '0',
            margin: 'auto',
            'vertical-align': 'middle'
            });
        this.newImage.attr('src', photo.PhotoUrl);
    },

    PhotoLoaded: function() {
        this.newImage.hide();
        $(this.linkElement).append(this.newImage);

        var self = this;
        if (this.oldImage) this.oldImage.fadeOut();

        var left = (($(this.element).width() / 2) - (this.newImage.width() / 2))
        this.newImage.css({left: left + 'px'});
        this.newImage.fadeIn('slow', function() { self.PhotoDisplayed(); });
    },

    PhotoDisplayed: function() {
        if (this.oldImage)
            this.oldImage.remove();
        this.oldImage = this.newImage;
    }
};

$(function() {
    new PhotoPlayer('photoElement');
});