/*----------------------------------------------------------------------*\
| Rotator by Michael Hamilton: Requires Mootools 1.2                     |
| To use this, create a container div and give it a class ImageRotator   |
| then apply a style ".ImageRotator img {position:absolute;}" and simply |
| output all the images that need rotating inside that div.  They will   |
| now rotate.                                                            |
| Options can be given on the container div as properties:               |
| ImageDuration = time to show the image, must be longer than the fade.  |
| FadeDuration = time of transition.                                     |
| DescriptionId = the id of an element to accept the image description.  |
| Image descriptions are gathered from each img tag.  If the property    |
| 'description' exists it will be rotated through the DescriptionId      |
| element.                                                               |
\------------------------------------------------------------------------/
EXAMPLE:
<div class = 'ImageRotator' ImageDuration = '2000' FadeDuration = '500' DescriptionId = 'TextDescription'>
   <img src = 'tst1.png' description = 'Image 1'/>
   <img src = 'tst2.png' description = 'Image 2'/>
   <img src = 'tst3.png' description = 'Image 3'/>
</div> 
<div id = 'TextDescription'></div>
/*----------------------------------------------------------------------*\
| In the above, images will rotate every 2 seconds fading for .5 seconds |
| and the TextDescription div will contain the text Image 1, then Image 2|
| and finally Image 3 before looping back to the first element.          |
\*----------------------------------------------------------------------*/
window.addEvent('domready', function() {
    //Feel free to edit these times:
    
    var DefaultImageDisplayTime = 8000;
    var DefaultFadeDurationTime = 1500;
    
    ////////////////////////////////
    
    function FadeInCurrentImageRotation(firstCall, currentImage, Options){
        var fadeDuration = Options.FadeDurationTime;
        if(firstCall == 1){
            fadeDuration = 0;
        }
        Options.images[currentImage].set('tween', { duration: fadeDuration });
        Options.images[currentImage].tween('opacity', '1');
        if(Options.ImageTextArea != 'NULL' && $defined($(Options.ImageTextArea)) && $defined(Options.images[currentImage].getProperty('description'))){
            $(Options.ImageTextArea).innerHTML = Options.images[currentImage].getProperty('description');
        }
        currentImage=(currentImage+1)%Options.images.length;
        FadeOutCurrentImageRotation.delay(Options.ImageDisplayTime, this, [currentImage, Options]);
    }
    
    function FadeOutCurrentImageRotation(currentImage, Options){
        var fadeImage = currentImage-1;
        if(currentImage == 0){
            fadeImage = Options.images.length-1;
        }
        Options.images[fadeImage].set('tween', { duration: Options.FadeDurationTime });
        Options.images[fadeImage].tween('opacity', '0');
        FadeInCurrentImageRotation(0, currentImage, Options);
    }
    
    $$('.ImageRotator img').each(function(el){
        el.set('tween', { duration: 0 });
        el.tween('opacity', '0');
    });
    
    var ImageAreas = $$('.ImageRotator');
    if($defined(ImageAreas[0])){
        var ImageList = new Array(ImageAreas.length);
        var tmpImageDisplayTime;
        var tmpFadeDurationgTime;
        var imageTextArea;
        for(i = 0;i < ImageAreas.length;i++){
            ImageList[i] = ImageAreas[i].getElements('img');
            tmpFadeDurationTime = DefaultFadeDurationTime;
            imageTextArea = 'NULL';
            tmpImageDisplayTime = DefaultImageDisplayTime;
            if($defined(ImageAreas[i].getProperty('FadeDuration'))){
                tmpFadeDurationTime = ImageAreas[i].getProperty('FadeDuration');
            }
            if($defined(ImageAreas[i].getProperty('ImageDuration'))){
                tmpImageDisplayTime = ImageAreas[i].getProperty('ImageDuration');
            }
            if($defined(ImageAreas[i].getProperty('DescriptionId'))){
                imageTextArea = ImageAreas[i].getProperty('DescriptionId');
            }
            FadeInCurrentImageRotation(1, 0, {images:ImageList[i],FadeDurationTime:tmpFadeDurationTime,ImageDisplayTime:tmpImageDisplayTime,ImageTextArea:imageTextArea});
        }
    }
});