var currentImageIndex=0;
var imageSwapperImages=Array();
var imageSwapperPath;
var imageSwapperImageID;
function imageSwapper(images,img_id,path){
    if(images.length<2) return;
    imageSwapperImages=images;
    imageSwapperPath=path;
    imageSwapperImageID=img_id;
    document.write('<div id="imageSwapperDiv" class="imageSwapperDiv">');
    document.write(getImageSwapperDivContent(0));
    document.write('</div>');
    image=document.getElementById(imageSwapperImageID);
    if(image.addEventListener){
        //compliant browsers
        image.addEventListener("load",imageSwapperImageLoaded,true);
    }else{
        //ie
        image.onload=imageSwapperImageLoaded;
    }
    imageSwapperPreloadNext();
}

function imageSwapperImageLoaded(){
    updateImageSwapper(0);
}

function getImageSwapperDivContent(loading){
    var str='<table style="width:100%;max-width:100%;"><tr><td width=20% align="left">';
    if(!loading && currentImageIndex){
        str=str+'<a href="javascript:imageSwapperShowPrev()" class="imageSwapperLink">Prev</a>';
    }
    str+='</td><td width=60% align="center">';
    if(!loading){
        str+='Image '+(currentImageIndex+1)+' of '+imageSwapperImages.length;
    }else{
        str+='Loading...';
    }
    str+='</td><td width=20% align="right">';
    if(!loading && currentImageIndex<imageSwapperImages.length-1){
        str=str+'<a href="javascript:imageSwapperShowNext()" class="imageSwapperLink">Next</a>';
    }
    str=str+'</td></tr></table>';
    return str;
}

function updateImageSwapper(loading){
    if(imageSwapperImages.length<2) return;
    document.getElementById('imageSwapperDiv').innerHTML=getImageSwapperDivContent(loading);
}

function imageSwapperShowNext(){
    if(currentImageIndex>=imageSwapperImages.length-1) return;
    currentImageIndex++;
    updateImageSwapper(1);
    document.getElementById(imageSwapperImageID).src=imageSwapperPath+imageSwapperImages[currentImageIndex];
    imageSwapperPreloadNext();
}

function imageSwapperPreloadNext(){
    if(currentImageIndex<imageSwapperImages.length-1){
        img = new Image();
        img.src=imageSwapperPath+imageSwapperImages[currentImageIndex+1];
    }
}

function imageSwapperShowPrev(){
    if(currentImageIndex==0) return;
    currentImageIndex--;
    updateImageSwapper(1);
    document.getElementById(imageSwapperImageID).src=imageSwapperPath+imageSwapperImages[currentImageIndex];
}