var imgSrcs = [];
var curSrc = 0;

var frontFrame;
var backFrame;
var captionFrame;

var fadeSpeed;
var imageTimeout;

// image class
function img(src, alt)
{
	this.src = src;
	this.alt = '';
	if (alt != null)
		this.alt = alt;
}

jQuery.fn.imagerotator = function(xmlFile, settings) {

    var banner = this;
    if (banner.length == 0)
        return;

    settings = jQuery.extend({
        fade: 6000,
        timeout: 10000,
        captionClass: 'caption'
    }, settings);

    fadeSpeed = settings.fade;
    imageTimeout = settings.timeout;

    xmlFile = xmlFile.replace(/%26/g, '&');

    // load image sources
    jQuery.get(xmlFile, function(xml) {
        var i = 0;
        // iterate xml
        $.xmlDOM( xml ).find('image').each(function() {
            var node = jQuery(this);

            // append image to array
            imgSrcs[i++] = new img(node.attr('src'), node.attr('alt'));
        } );

        // make sure there are at least 2 elements
        if (imgSrcs.length < 2) return;

        // only create element if it's not already there
        if (banner.find("img").length == 1) banner.append(document.createElement('img'));

        // get array of img elements to swap
        var imgs = banner.find("img");
        frontFrame = imgs[1];
        backFrame = imgs[0];

        // Wrap the images (inside the banner container) with a container for a caption
        captionFrame = banner.find('.' + settings.captionClass);
        if (captionFrame.length < 1) {
            imgs.wrapAll("<div class='" + settings.captionClass + "'></div>");
            captionFrame = banner.find("." + settings.captionClass);
            captionFrame.append("<p></p>");
            var captionPara = captionFrame.find("p");
            captionPara.hide();
            captionFrame.hover(
				function() {
				    $(this).find('p').animate({ height: 'show' }, 200);
				},
				function() {
				    $(this).find('p').animate({ height: 'hide' }, 200);
				}
			);
        }

        // start toggling!
        toggleImage();
    });
};
	
function toggleImage() {

    // init the caption for the current image
    var captionPara = captionFrame.find("p");
    if (captionPara.length > 0) {
        var bReshow = false;
        if (captionPara.is(':visible')) {
            bReshow = true;
            captionPara.hide();
        }
        captionPara.replaceWith('<p>' + imgSrcs[curSrc].alt + '</p>');
        captionPara = captionFrame.find("p");
        captionPara.hide();
        if (bReshow)
            captionPara.animate({ height: 'show' }, 200);
    }

	// move to next image
	if (++curSrc >= imgSrcs.length) curSrc = 0;

	// swap frames
	var temp = frontFrame;
	frontFrame = backFrame;
	backFrame = temp;

	// set current image to hide next
	frontFrame.className = "";
	frontFrame.removeAttribute('style');

	// prepare to swap image
	backFrame.className = "show";
	backFrame.src = imgSrcs[curSrc].src;
	backFrame.alt = imgSrcs[curSrc].alt;
	backFrame.title = imgSrcs[curSrc].alt;

	// fade in next image and repeat
	setTimeout(function() { jQuery(backFrame).fadeIn(fadeSpeed, toggleImage); }, imageTimeout);	
}