var flikrUrl = 'http://api.flickr.com/services/feeds/photoset.gne?set=72157626196295076&nsid=58995919@N07&lang=en-us&format=json&jsoncallback=?';
var slideShowArray = [];
var currentImgEl = "slideImageA";
var currentSlideIndex = -1;
var slideCount = 0;

function getFlikrFeed() {
    $.ajax({
        url: flikrUrl,
        dataType: 'json',
        success: loadSlides,
        error: iLose,
        complete: whatHappened
    });
};

function iLose(res) {
    var whatisthis = res;
    //alert(whatisthis);
    
};
function whatHappened(res) {
    var whatisthis = res;
    //alert(whatisthis);
};

function loadSlides(data) {
     $(data.items).each(function(idx) {
        slideShowArray[idx] = new Image();
        if(idx === 0) { // start the slideshow after the 1st image loads
            slideShowArray[idx].onload = function() {
                nextSlide();
                //$('#spinner').animate({opacity: 0}, 200);
            };
        }
        
        var imageUrl = this.media.m;
        imageUrl = imageUrl.replace(/_m.jpg/, '_b.jpg');
        slideShowArray[idx].src = imageUrl;
        
        //$("#image-links").append("<span>" + imageUrl + "</span><br />")
        slideCount++;
    });
};

function nextSlide() {
    var slideDIV = $("#slideshow");
    if(!slideDIV) {
        return;
    }
    
    var nextSlideIndex = currentSlideIndex + 1;
    if(nextSlideIndex >= slideCount) {
        nextSlideIndex = 0;
    }
    
    var nextImgElement = currentImgEl === "slideImageA" ? "slideImageB" : "slideImageA";
    
    if(slideShowArray[nextSlideIndex] && slideShowArray[nextSlideIndex].complete) {
        var target=0;
        if (document.images[nextImgElement])
            target=document.images[nextImgElement];
        if (document.all && document.getElementById(nextImgElement))
            target=document.getElementById(nextImgElement);

        // make sure target is valid.  It might not be valid
        //   if the page has not finished loading
        if (target)
        {
            target.src=slideShowArray[nextSlideIndex].src;
            
            $('#' + currentImgEl).animate({opacity: 0}, 700);
            $('#' + nextImgElement).animate({opacity: 1}, 700);
            
            currentSlideIndex = nextSlideIndex;
            currentImgEl = nextImgElement;
        }
        
        setTimeout(nextSlide, 7000);
    }
    else {
        setTimeout(nextSlide, 500);
    }
    
    
};

$(document).ready(function(){
    getFlikrFeed();
});