/*
 * --- Releases ---
 *      2009/08/26 : v.0.1
 *		2009/08/27 : v.0.2 : IE fading bug, performance improvement
 *
 * --- Author : Pierre-Adrien Buisson
 * --- Requires : MooTools 1.2 Core - http://mootools.net/
 *
 *
 * --- Description ---
 *      This script will allow the creation of a slideshow showing html
 *      content. What'sd required in order to make this script run :
 *
 *      - A container element, that will keep the actual content to display.
 *        Each content item must be enclosed in a <div> tag. The top-level 
 *        container id can be modified when initializing the slideshow,
 *        default value is set to "div#content"
 *      - A controls element, that will contain the links used to navigate
 *        through the different items to display. The top-level container
 *        id can be modified when initializing the slideshow, default value
 *        is set to "div#controls". Controls must be placed withing <a> tags.
 *        Link rel attribute must contain the id of the div they are linked to.
 *
 * --- Usage ---
 *      window.addEvent('domready', function() {
 *          new Slideshow();
 *          new Slideshow('container':'myContainerId', 'controls':'controlsId'});
 *      });
 *
 * --- Default CSS Styles to define ---
 *      #content             : Content container
 *      #content div         : Content item
 *      #controls            : Controls container
 *      #controls a          : Control link (non-selected)
 *      #controls a.selected : Control link (selected)
 */
 



var Slideshow = new Class({

    Implements: [Options, Events],
    options: {
        'container': 'content',
        'controls': 'controls'
    },


    initialize: function(options) {

        this.setOptions(options);

        var eContentContainer = $(this.options.container);
        var eContentDivs = eContentContainer.getChildren('div');
        var eControlContainer = $(this.options.controls);
        var eControlLinks = eControlContainer.getElements('a');

		
        var itemNumber = eContentDivs.length;
        if (itemNumber == 1) {
            // If only one "content" to be displayed
            // Then we just hide the controls
            eControlContainer.setStyle('display', 'none');
        }
        else {


            /*
             * ------------------------------------------------------
             * Randomly pick one of the div at the initialization
             * Displays it and set the corresponding link to "Selected"
             * ------------------------------------------------------
             */
            var indexToSelect = $random(0, (eContentDivs.length-1));
            
            // --- Set the chosen link as selected ---
            ((eControlLinks)[indexToSelect]).addClass('selected');
            // --- Hide all content divs ---
            eContentDivs.each(function(div) {
                div.setStyle('opacity', 0);
            });
            // --- Displays the randomly chosen div ----
            (eContentDivs[indexToSelect]).setStyle('opacity', 1);
            

            eControlLinks.addEvent('click', function() {

                /*
                 * -------------------------------------------------------------
                 * OnClick, will show the content div we want to be displayed
                 * and set the corresponding link css class to "selected"
                 * -------------------------------------------------------------
                 */
                 
                // Each link displays the div whose ID is given in "rel" attribute
                var eToShow = $(this.getAttribute('rel'));
                var eChildrenToShow = eToShow.getElements('*');
				var eToHide = $(eControlContainer.getElement('a.selected').getAttribute('rel'));
                var eChildrenToHide = eToHide.getElements('*');
                
                // --- Fade out ---
                eToHide.fade(0);
                eChildrenToHide.fade(0); // Trick to make the fade of the children image work with IE
                // --- Fade in ----
                eToShow.fade(1);
                eChildrenToShow.fade(1); // Trick to make the fade of the children image work with IE
                

                // --- Set the proper link as selected ---
                eControlLinks.removeClass('selected');
                this.addClass('selected');
            });

        }

    },
    
});