var transition = 1500;
var xbg = 2265; // set to something.  
// it will be overwritten before spectrumScroll is ever called.

function spectrumScroll() {
  $(".home-billboard-footer").animate({
    backgroundPosition: xbg + 'px 0px'
  }, transition * 2, 'easeInOutCubic', function(){
    //console.log(xbg);
    if (xbg < -(1170 * 6)){
        xbg += (1170 * 6);
        $(".home-billboard-footer").css({backgroundPosition: xbg + 'px 0px'});
    }
    xbg -= 1170;
  });
}

function startSlideshow(){
  $("#slides").cycle({
    sync: 0,
    timeout: 7500,
    easeIn: 'easeInCubic',
    easeOut: 'easeOutCubic',
    speed: transition,
    before: spectrumScroll
  });
}

function loadSlides(){
    // once the first image has completely loaded, load the others.
    var alreadyLoaded = $("li.slide").attr("id");
    var loadArray = [];
    for (var item in bbItems) {
        if (bbItems.hasOwnProperty(item)){
            loadArray[bbItems[item].index] = bbItems[item];
        }
    }
    var count = loadArray.length;
    var ind = bbItems[alreadyLoaded].index;
    xbg = bbItems[alreadyLoaded].offset;
    for (var j = 0; j < count; j++) {
        if (j < ind) {
            // if it's less then the already loaded slide, move to the end.
            loadArray[j + count] = loadArray[j];
        }
    }

    for (var i = ind + 1; i < loadArray.length; i++) {
        // create a DOM element for the new slide.
        var currSlide = $("<li>").attr("id", loadArray[i].id);
        
        var bString = "/images/photos/home-billboard/" + currSlide.attr("id")+ "-b";
        if ($(".ie6 #slides").length > 0) {
            bString += ".gif";
        } else {
            bString += ".png";
        }
        
        currSlide.attr("class", "slide slideindex" + loadArray[i].index).append(
            // top half of image
            $("<img>").attr({"src": "/images/photos/home-billboard/" + currSlide.attr("id") + ".jpg", "class": "topHalf", "width": "960", "height": "417"})
            //.onImagesLoad({itemCallback: function(thisObj){console.log($(thisObj).attr("src") + " has loaded");} })
        ).append(
            //bottom half of image
            $("<img>").attr({"src": bString, "class": "bottomHalf", "width": "960", "height": "28"})
            //.onImagesLoad({itemCallback: function(thisObj){console.log($(thisObj).attr("src") + " has loaded");} })
        ).hide().appendTo("#slides");
    }
    $("#slides").onImagesLoad({
        selectorCallback: function(){ 
        //console.log("all the images are loaded"); 
        startSlideshow();}
    });
}

$(document).ready(function () {
    var alreadyLoaded = $("li.slide").attr("id");
    $("li.slide").css("background-image", "none").find("blockquote").css("background-image", "none");
    //console.log(alreadyLoaded + " is the hard-coded slide");
    var topHalf = $("<img>");
    topHalf.attr({"src": "/images/photos/home-billboard/" + alreadyLoaded + ".jpg","class": "topHalf", "width": "960", "height": "417"}).hide().prependTo("li.slide");
    var bottomHalf = $("<img>");
    var bString = "/images/photos/home-billboard/" + alreadyLoaded + "-b";
                if ($(".ie6 #slides").length > 0) {
                    bString += ".gif";
                } else {
                    bString += ".png";
                }
    bottomHalf.attr({"src": bString, "class": "bottomHalf", "width": "960", "height": "28"}).hide().insertAfter("li.slide > img.topHalf");
    $("#slides").onImagesLoad({
        selectorCallback: function($selector){
            //console.log("Both the initial images have loaded completely!");
            $selector.find("img").show();
            $selector.find("blockquote").remove();
            loadSlides();
        }
    });
}); // end document.ready()