/*
    Main javascript code to control the display of slideshows on a page and optimize image files automatically for
    download.

    Depencies: Mootools122.js
*/

var wbxSlideshows;

// use a Request object to kickoff optimize image oode on server
var wbxOptimizeImageRequest = new Request
                                    (
                                        {
                                         method : 'post',
                                         url     : WBXFDIR + '/php/ajax/optimizeimage.php',
                                         link   : 'chain'
                                         }
                                    );

// scan page for slideshows and set each up to cycle through slides
function wbxConfigureSlideshows()
{
    // get an array of all the slideshows on the page
    wbxSlideshows = $$('div.' + WBXFCSSEXT + 'slideshow');

    // for each slideshow
    wbxSlideshows.each
    (
        function(slideshow)
        {
            slideshow.wbxWidth = wbxGetFirstAncestorWidth(slideshow) - wbxImageBorderAllowance;
            slideshow.wbxHeight = wbxGetFirstAncestorHeight(slideshow) - wbxImageBorderAllowance;
            //alert("slideshow.wbxWidth ="+slideshow.wbxWidth+", slideshow.wbxHeight="+slideshow.wbxHeight);

            // init to the first slide in the series
            slideshow["currentSlide"] = 0;

            // create an array of all the slides marked by slide class
            slideshow.slides = slideshow.getElements('div[class*=' + WBXFCSSEXT + 'slide]');
            if (slideshow.slides.length > 1)
            {
                slideshow.slides.each
                (
                    function(slide, idx)
                    {
                        // make first slide in series visible, others not
                        if (idx == 0)
                        {
                            slide.setStyle('opacity', '1');
                            slide.setStyle('display', 'block');
                        }
                        else
                        {
                            slide.setStyle('opacity', '0');
                            slide.setStyle('display', 'none');
                        }

                        slide.set('tween',
                            {
                                duration: 1000,
                                transition: Fx.Transitions.Quad.easeInOut
                            });

                        // make sure overflow does not bleed out of the slide
                        slide.setStyles(
                            {
                                'overflow' : 'hidden'
                            });
                    }
                );
            }

            // create an array of all the slides marked by slide class img only
            //alert("Browser.Engine.name:"+Browser.Engine.name+", Browser.Engine.version: "+Browser.Engine.version );

                slideshow.slidesimageonly = $(slideshow).getElements('div[class*=' + WBXFCSSEXT + 'slideimageonly]');
                slideshow.slidesimageonly.each
                (
                    function(slide)
                    {

                        // for any images in the slide (assume only one for now)
                        slide.images = $(slide).getElements('img');

                        slide.images.each
                        (
                            function(image)
                            {
                                //alert("image.id:"+image.id+", image.src: "+image.src.substring(29));
                                image.wbxWidth = image.width;
                                image.wbxHeight = image.height;

                                // if not IE 6
                                if ((!Browser.Engine.trident || Browser.Engine.trident && Browser.Engine.version > 4 )&&
                                    // image size same as slide maintaining aspect ratio
                                    image.wbxWidth != slideshow.wbxWidth  && image.wbxHeight != slideshow.wbxHeight)
                                {
                                    if (image.wbxWidth >= image.wbxHeight)
                                    {
                                        image.imgNewWidth = slideshow.wbxWidth;
                                        image.imgNewHeight = image.wbxHeight * image.imgNewWidth / image.wbxWidth;
                                    }
                                    else
                                    {
                                        image.imgNewHeight = slideshow.wbxHeight;
                                        image.imgNewWidth = image.wbxWidth * image.imgNewHeight / image.wbxHeight;
                                    }

                                    image.setStyles(
                                    {
                                        'width' : wbxConvertPixelsToElastic(image.imgNewWidth, slide),
                                        'height': wbxConvertPixelsToElastic(image.imgNewHeight, slide)
                                    });

                                    // invoke code on the server to optimize the image file for the
                                    // dimenions displayed
                                    //wbxOptimizeImageRequest.send('imageuri=' + image.src + '&width='+image.imgNewWidth
                                    //                                    + '&height='+image.imgNewHeight);
                                }
                                else
                                {
                                    // for IE6
                                    image.setStyle('zoom', 1);

                                    // just convert the size to elastic units
                                    image.setStyles(
                                    {
                                        'width': wbxConvertPixelsToElastic(image.wbxWidth, slide),
                                        'height': wbxConvertPixelsToElastic(image.wbxHeight, slide)
                                    });
                                }
                            }
                        );

					    // collapse the slide around the image allowing for
                        slide.setStyle('width',
                                        wbxConvertPixelsToElastic(slide.images[0].wbxWidth + wbxImageBorderAllowance,
                                        slideshow));
					    slide.setStyle('height',
                                        wbxConvertPixelsToElastic(slide.images[0].wbxHeight + wbxImageBorderAllowance,
                                        slideshow));

					    // position the slide within the slideshow frame acoording to slideshow's vertical-align style
					    wbxForceVerticalAlignment(slideshow, slide);
                    }
			    );

        }
    );
}

// once the slideshows are configured, this controls the slide cycle for each
var wbxRunSlideshows =
    function()
    {

    // for each slideshow on the page (there may be multiple)
    wbxSlideshows.each
        (
            function(slideshow)
            {
                var myChain  = new Chain();

                // id the slide show has 2 or more slides
                if (slideshow.slides.length > 1)
                {

                    myChain.chain
                    (
                        // fade out current slide
                        function()
                        {
                            $((slideshow.slides[slideshow.currentSlide]).get('id')).tween('opacity', '0');
                            (function(){myChain.callChain();}).delay(1000);
                        },
                        // remove current slide from the display
                        function()
                        {
                            $((slideshow.slides[slideshow.currentSlide]).get('id')).setStyle('display', 'none');
                             myChain.callChain();
                        },
                        // fade in next slide round robin
                        function()
                        {
                            slideshow.currentSlide = (slideshow.currentSlide + 1) % (slideshow.slides.length);
                            $((slideshow.slides[slideshow.currentSlide]).get('id')).setStyle('display','block');
                            $((slideshow.slides[slideshow.currentSlide]).get('id')).tween('opacity', '1');
                        }
                    );

                    myChain.callChain();
                }
            }
        );
    }

// configure slideshows once DOM is ready
window.addEvent
('domready',
    function()
    {
        wbxConfigureSlideshows();
    }
);


// run the slideshows on load
window.addEvent
('domready',
    function()
    {
        wbxRunSlideshows.periodical(5000);
    }
);