// JavaScript Document



/*------------------- SimpleSlideshow------------------------------



a mootools class for a very, very basic slideshow.



Setting up:



HTML:

    simply place all the img tags inside a container div eg:

    <div id="container">

        <img src="img1" class="default" />

        <img src="img2" />

        <img src="img3" />

        <img src="img4" />

    </div>



CSS:

    #container{

        position:relative;

        width and height as required 

    }

    #container img{

        position:absolute;

        top:0;

        left:0;

        visibility:hidden;

    }

    #container img.default{

        visibility:visible;

    }

    

Then inlude mootools and this script in your html and call the script with this...



<script type="text/javascript">

    window.addEvent('domready', function(){ new SimpleSlideshow('container', 6000); }

</script>



the constructor takes 2 arguments - the 1st is the id of the container the 2nd is the amount of time (in miliseconds) each image will pause

*/



SimpleSlideshow = new Class({

    

        container : '',

        imgs : [],

        holdDuration: 0,

        index:0,

        Implements: Options,

                options : {

            

            fadeOptions : {duration:2000}

        },

    

        /*

        CONSTRUCTOR

        new SimpleSlideshow(container:string, holdDuration:integer, [options:object] ):object

        

        Arguments:

            container - the id of the container div

            holdDuration - the amount of time in miliseconds each image will hold

        */

        

        initialize: function(container, holdDuration, options){

            this.container = $(container);

            this.holdDuration = holdDuration;

            this.setOptions(options);

            this.imgs = this.container.getElements('img');

            this.imgs.each(function(img, i){

                                

                if(i>0) img.setOpacity(0);

                                img.setStyle('visibility', 'visible');

                img.set('tween', this.options.fadeOptions)

            }, this);

            this.gotoNext.periodical(this.holdDuration, this);

        },

        

        gotoNext: function(){

            var newIndex = this.index + 1;

                        if(newIndex > this.imgs.length - 1) newIndex = 0;

            this.imgs[this.index].tween('opacity',0);

            this.imgs[newIndex].tween('opacity',1);

            this.index = newIndex;

        }

});