var fading = false;
var loopSpeed = 5000;

$(document).ready(function() {
    $.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) {
            setButtonImages(xml);
            setMainImages(xml);
        }
    });

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

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

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

function setMainImages(xml){
    var i = 0;

    $(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 mainImageContainer = $("#mainImage");

		var newImage = $('<img id="' + imageId + '"' + ' src="' + imageUrl + '" alt="' + imageAlt + '" style="display:none" />');

		mainImageContainer.append(newImage);

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

        i++;
    });

    $("#mainImage0").show();
}

function setButtonImages(xml){
	var i = 0;

	$(xml).find('button').each(function(){
		var imageUrl = $(this).find('buttonUrl').text();
		var imageAlt = $(this).find('buttonAlt').text();

		var imageId = "buttonImage" + i;
		var htmlVal = $("#buttons").html();

		$("#buttons").html( htmlVal +
			'<li class="buttonListItem">' +
				'<img id="' + imageId + '"' + ' class="buttonImage" src="' + imageUrl + '" alt="' + imageAlt + '" />' +
			'</li>'
		);

		i++;
	});

    $("#buttons").find('img:last').removeClass().addClass("buttonImageLast")

    $(".buttonListItem").bind("click", changeImage);
    $(".buttonListItem").bind("mouseenter", fadeOutButton);
    $(".buttonListItem").bind("mouseleave", fadeInButton);
}

function fadeOutButton(e) {
    $(this).css("opacity", 0.5);
}

function fadeInButton(e) {
    $(this).css("opacity", 1);
}

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

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

function showNextImage() {
    fading = true;

    var activeIdNum = 0;

    $("#mainImage").find('img:visible').each(function(index) {
        activeIdNum = $(this).attr("id").substring(9, 10);
    });

    var activeId = "mainImage" + activeIdNum;

    var nextId = "";

    if (activeIdNum == 3) {
        nextId = "mainImage0";
    }
    else {

        var temp = parseInt(activeIdNum);

        temp++;

        nextId = "mainImage" + temp;
    }

	$('#' + activeId).fadeOut(300, function() {
        fading = false;
		//$('#' + activeId).parent().hide();
		//$('#' + nextId).parent().show();

        $('#' + nextId).fadeIn(300);
    });

}

function changeImage(e) {

    stopLoop();

    if (fading) {
        $('#mainImage').find('img:visible').each(function(index) {
            $(this).hide();
			//$(this).parent().hide();
        });
    }

    var id = 0;

    // Get clicked buttonImage id
    $(this).find('img').each(function(index) {
        id = $(this).attr("id").substring(11, 12);
    });

    var mainImageId = "mainImage" + id;

    // Fade the image that's showing.
    $("#mainImage").find('img:visible').each(function(index) {

        $(this).fadeOut("fast", function() {
			//$(this).parent().hide();
            // Show correct image based on id.
			$('#' + mainImageId).parent().show();
            $('#' + mainImageId).fadeIn("fast");
        });

    });

    restartLoop();
}