// set the starting image.
var i = 0;			
// The array of div names which will hold the images.
var image_slide = [];
// The number of images in the array.
var NumOfImages = 0;
// The time to wait before moving to the next image. Set to 4 seconds by default.
var wait = 6000;
// The Fade Function
function SwapImage(x,y) {
    $(image_slide[x]).appear({ duration: 0.5 });
    $(image_slide[y]).fade({duration: 0.5});
}
// the onload event handler that starts the fading.
function StartSlideShow() {
    play = setInterval('Play()',wait);
    $('PlayButton').hide();
    $('PauseButton').appear({ duration: 0});
    updatecounter();
}
function Play() {
    var imageShow, imageHide;
    imageShow = i+1;
    imageHide = i;
    if (imageShow == NumOfImages) {
        SwapImage(0,imageHide);	
        i = 0;					
    } else {
        SwapImage(imageShow,imageHide);			
        i++;
    }
    var textIn = i+1 + ' of ' + NumOfImages;
    updatecounter();
}
function Stop () {
    clearInterval(play);				
    $('PlayButton').appear({ duration: 0});
    $('PauseButton').hide();
}
function GoNext() {
//    clearInterval(play);
    $('PlayButton').appear({ duration: 0});
    $('PauseButton').hide();
    var imageShow, imageHide;
    imageShow = i+1;
    imageHide = i;
    if (imageShow == NumOfImages) {
        SwapImage(0,imageHide);	
        i = 0;					
    } else {
        SwapImage(imageShow,imageHide);			
        i++;
    }
    updatecounter();
}
function GoPrevious() {
    clearInterval(play);
    $('PlayButton').appear({ duration: 0});
    $('PauseButton').hide();
    var imageShow, imageHide;
    imageShow = i-1;
    imageHide = i;
    if (i == 0) {
        SwapImage(NumOfImages-1,imageHide);	
        i = NumOfImages-1;		
    //alert(NumOfImages-1 + ' and ' + imageHide + ' i=' + i)
    } else {
        SwapImage(imageShow,imageHide);			
        i--;
    //alert(imageShow + ' and ' + imageHide)
    }
    updatecounter();
}
function updatecounter() {
    var textIn = i+1 + ' of ' + NumOfImages;
    document.getElementById('image-slide-counter').innerHTML = textIn;
}

Event.observe(window, 'load', function() {
    // Add images
    imagesList = [];
    $$("#news-recent_124 .news-recent-item img").each(function(e) {
    imagesList.push(e.src);
    });
    for (var imageCounter = 0 ; imageCounter < imagesList.length ; imageCounter++) {
        image_slide.push("image-" + ( imageCounter + 1));
        var divAttrs = {
            "class" : "fade-box",
            "id" : "image-" + ( imageCounter + 1)
        }
        var newDiv = new Element('div', divAttrs);
        if (imageCounter > 0) {
            newDiv.setStyle({display: "none"})
        }

        var imageAttrs = {
            "src"   : imagesList[imageCounter],
            "width" : 960,
            "border" : 0,
            "height" : 400
        };
        var newImage = new Element('img', imageAttrs);

        var linkAttrs = {
            "href"   : "javascript:GoNext();"
        };
        var newLink = new Element('a', linkAttrs);

        $(newLink).insert(newImage);
        $(newDiv).insert(newLink);
        $('image-container').insert(newDiv);
    }
    NumOfImages = image_slide.length;
    StartSlideShow();
});
