var pauseBanner = false;

$(document).ready(function()
{
    $.ajax({
        type: "POST",
        url: "/FeaturedProducts.asmx/GetFeaturedImages",
		data: "{}",
		contentType: "application/json; charset=utf-8",
		dataType: "json",
        success: function(data, textStatus)
        {
			var featuredProducts = data.d;
            var banners = new Array();
			
			$.each(featuredProducts, function(index, featuredProduct) 
			{
				var banner = new Object();
				
				banner.ImageUrl = featuredProduct.ImageUrl;
				banner.NavigateUrl = featuredProduct.NavigateUrl;
				
                banners.push(banner);				
			});
            
            InsertBannerElements(banners);
        }
    });
});

function InsertBannerElements(banners)
{
    for (var i = 0; i < banners.length; i++)
    {
        var banner = banners[i];
        
        var html = '';
        html += '<div id="banner-container-' + i + '">'
        
		html += '<a href="' + banner.NavigateUrl + '"><img src="' + banner.ImageUrl + '" alt="" /></a>';
        
        html += '</div>'
       
        $("#banner").append(html);
        
        $("#banner-container-" + i).hide();
                
        html = '<span id="banner-button-' + i + '"></span>';

        $("#banner-thumbs").append(html);
        
        $("#banner-button-" + i).fadeTo("fast", 0.25);
        
        $("#banner-button-" + i).click(function()
        {
            var id = $(this).attr("id");        
            var index = parseInt(id.replace("banner-button-", ""));
            
            ShowBanner(index);
        });

        $("#banner-button-" + i).mouseover(function()
        {
            $(this).fadeTo("fast", 1);
        });

        $("#banner-button-" + i).mouseout(function()
        {
            if (!$(this).hasClass("active"))
            {            
                $(this).fadeTo("fast", 0.25);
            }
        });
    }
    
    RotateBanner(true, banners)
}

function RotateBanner(firstRun, banners)
{
    if (!pauseBanner)
    {
        var timer = 5000;
        
        if (firstRun)
        {
            $("#banner-container-0").addClass("active").fadeIn("slow");
            $("#banner-button-0").addClass("active").fadeTo("slow", 1);
        }
        else
        {
            var previousId = $("#banner .active").attr("id");        
            var previousIndex = parseInt(previousId.replace("banner-container-", ""));      
            var nextIndex = previousIndex + 1;        
            
            if (nextIndex >= banners.length)
            {
                nextIndex = 0;
            }
                   
            $("#banner .active").removeClass("active").fadeOut("slow");
            $("#banner-thumbs .active").removeClass("active").fadeTo("slow", 0.25);
        
            $("#banner-container-" + nextIndex).addClass("active").fadeIn("slow");
            $("#banner-button-" + nextIndex).addClass("active").fadeTo("slow", 1);
        }
    
        setTimeout(function() {RotateBanner(false, banners);}, timer);
    }
}

function ShowBanner(activeIndex)
{
    pauseBanner = true;
    
    $("#banner .active").removeClass("active").fadeOut("slow");
    $("#banner-thumbs .active").removeClass("active").fadeTo("slow", 0.25);

    $("#banner-container-" + activeIndex).addClass("active").fadeIn("slow");
    $("#banner-button-" + activeIndex).addClass("active").fadeTo("slow", 1);
}