var imgSrcs = [];
var curSrc = 0;

var imgElems;
var curElem = 0;

var fadeSpeed;
var imageTimeout;

jQuery.fn.imageRotation = function(settings) {

    var banner = this;
    settings = jQuery.extend({
	fade: 2000,
	timeout: 3000,
	imageArray: []
    }, settings);
	
    imgSrcs = settings.imageArray;

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

    
    banner.append('<img src=' + imgSrcs[0] + ' />');

    banner.append('<img src="" />');      

    imgElems = $('img', banner);

    // start toggling!
    toggle();
 };

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

    // grab ref to elements for updating
    var frontImg = imgElems[curElem];
    if (++curElem > 1){ curElem = 0;}

    var backImg = imgElems[curElem];

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

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

    // fade in next image and repeat
    setTimeout(function() 
    { 
	$(frontImg).fadeOut(fadeSpeed);
	$('.show').fadeIn(fadeSpeed, toggle); 
	
    }, imageTimeout);
}