var fading = false;
var loopSpeed = 6000;
var nodes = 0;

$(function() {
    if($("#imageCarouselContainer").length) {
		$.ajax({
			type: "GET",
			url: "/media/topbanner/NO/carouselContent.xml",
			dataType: "xml",
			error: function(XMLHttpRequest, textStatus, errorThrown){
				$("#mainImage").html(errorThrown);
				$("#mainImage").html(textStatus);
			},
			success: function(xml) {
				setMainImages(xml);
                nodes = $(xml).find('image').length;
			}
    });
		}

    $("#mainImage").everyTime(loopSpeed, showNextImage);

    $("#mainImage").bind("mouseenter", function(e) {
        stopLoop();
    });

    $("#mainImage").bind("mouseleave", function(e) {
        restartLoop();
    });
});

function setMainImages(xml){
    var i = 0;

	  var mainImageContainer = $("#mainImage");
	  var buttonImageContainer = $("#buttons");
	  mainImageContainer.html("");
	  buttonImageContainer.html("");
	  
	  
		  
    $(xml).find('image').each(function() {
        var linkUrl = $(this).find('linkUrl').text();
        var imageUrl = $(this).find('imageUrl').text();
		var imageAlt = $(this).find('imageAlt').text();

        var imageId = "mainImage" + i;
		var buttonId = "buttonImage" + i;


		var newImage = $('<img id="' + imageId + '"' + ' src="' + imageUrl + '" alt="' + imageAlt + '" title="' + imageAlt + '" style="display:none" />');
		var newButton = $('<li class="buttonListItem" id="' + buttonId + '" title="' + imageAlt + '">&nbsp;</li>');

		mainImageContainer.append(newImage);
		buttonImageContainer.append(newButton);

		newImage.bind("click", function(){
			top.location.href = linkUrl;
		});
        
        // Buttons

        i++;
    });

    $("#mainImage0").show();
    $("#buttonImage0").addClass("buttonListItemActive");
    $(".buttonListItem").bind("click", changeImage);
}

function stopLoop() {
    $("#mainImage").stopTime();
}

function restartLoop() {
    $("#mainImage").everyTime(loopSpeed, showNextImage);
}

function showNextImage() {
    fading = true;

    var activeIdNum = $("#mainImage img:visible:first").attr("id").substring(9, 10);
    var activeId = "mainImage" + activeIdNum;
    var nextId = "";

    if (activeIdNum == nodes -1) {
        nextId = "mainImage0";
        nextButtonId = "buttonImage0";
    }
    else {

        var temp = parseInt(activeIdNum);
        temp++;
        nextId = "mainImage" + temp;
        nextButtonId = "buttonImage" + temp;
    }

	$('#' + activeId).fadeOut(300, function() {
        fading = false;
        $(".buttonListItem").removeClass("buttonListItemActive");
        $("#" + nextButtonId).addClass("buttonListItemActive");
        $('#' + nextId).fadeIn(300);
    });

}

function changeImage(e) {

    stopLoop();

    // Get clicked buttonImage id
    var id = $(this).attr("id").substring(11, 12);

    var mainImageId = "mainImage" + id;
    var buttonId = $(this).attr("id");
    
    // Fade the image that's showing, and show correct image
    $("#mainImage img:visible").fadeOut("fast", function() { $('#' + mainImageId).fadeIn("fast"); });

    // Fix button styles
    $(".buttonListItem").removeClass("buttonListItemActive");
    $("#" + buttonId).addClass("buttonListItemActive");

    restartLoop();
}