// Homepage Image JS


var imageIndex = 0;
var backgrounds = "http://www.smartsilver.com/background-images/BroadSpectrum.jpg;http://www.smartsilver.com/background-images/DurableProtection.jpg;http://www.smartsilver.com/background-images/EnvironmentallyFriendly.jpg;http://www.smartsilver.com/background-images/FitFresh.jpg;http://www.smartsilver.com/background-images/IntegrationReady.jpg;http://www.smartsilver.com/background-images/OdorZapping.jpg;http://www.smartsilver.com/background-images/Proven.jpg;http://www.smartsilver.com/background-images/Safe.jpg;http://www.smartsilver.com/background-images/WorryFree.jpg;http://www.smartsilver.com/background-images/01-scentcontrol.jpg;http://www.smartsilver.com/background-images/02-madeinusa.jpg;http://www.smartsilver.com/background-images/03-longlasting.jpg".split(";");
var backgroundAlignments = "left;left;left;left;left;left;left;left;left;left;left;left".split(";");
var backgroundHeights = "200;200;200;200;200;200;200;200;200;200;200;200".split(";");
        
function incrementCounter()
{
    imageIndex++;
    
    if (imageIndex >= backgrounds.length)
    {
        imageIndex=0;
    }
}

function rotateImage() 
{
    frontImage.stop();
    backImage.stop();
    
    frontImage.css('display', 'none');
        
    setBackground(backImage);

    incrementCounter();
    
    setBackground(frontImage);    

    frontImage.stop().fadeIn(2000);

}

function setBackground(imageObject)
{
    imageObject.css('background-image', "url(" + backgrounds[imageIndex] + ")");
    imageObject.css('background-position', backgroundAlignments[imageIndex]);
    imageObject.css('height', backgroundHeights[imageIndex] + 'px');
    imageObject.css('padding', '0');
    imageObject.css('margin', '0');
    imageObject.css('background-repeat', 'no-repeat');
}

var portalTop = jq('body.template-document_homepage_view #portal-top');

if (portalTop)
{
    backImage = jq('<div id="outside-homepage-image"><!-- Outside --></div>');

    portalTop.append(backImage);

    frontImage = jq('<div id="inside-homepage-image"<!-- Inside --></div>');

    backImage.append(frontImage);

    setBackground(backImage);

    // preload images
    for (var i=imageIndex; i<backgrounds.length; i++)
    {
        var preloadedImage = new Image();
        preloadedImage.src = backgrounds[i];
    }

    setInterval(rotateImage, 5000);
    
}