/**
 * SlideShow class.
 * 
 *
 * TODO: add support for pause/play, next/prev buttons
 *
 * @version 2.0
 * @author Joep Peeters
 * @copyright Service2Media B.V.
 */
FX_SLIDE = 'FX_SLIDE';
FX_FADE  = 'FX_FADE';

var SlideShow = new Class({


    _target: null,
    _targetId: null,
    _targetSize: null,
    _carousel: null,

    _effect: FX_SLIDE,
    _effectOptions: new Array(),
    _fx: null,

    currentSlide: null,
    currentSlideNr: 0,

    Implements: [Events],

    /**
     * Constructor
     */
    initialize: function(targetId, options) {
        window.addEvent('domready', this._init.bind(this).pass([targetId, options]) )
        window.addEvent('load', this._prepare.bind(this));
    },

    _init: function(targetId, options) {
        this._target = $(targetId);
        this._targetId = targetId;

        this._options = options;

    },

    _prepare: function() {
        this._target.setStyles({
            'overflow': 'hidden',
            'padding': '0px'});

        wrap = new Element('div', { 'id': this._targetId+'_wrap' });
        wrap.setStyles({
            'overflow': 'hidden',
            'opacity': 0});

        wrapWidth = 0;
        this._target.getChildren().each(function (slide) {
            if (slide.nodeName == 'IMG') {
                wrapWidth += slide.getSize().x;
                this._prepareImage(slide).inject(wrap);

            }
            if (slide.nodeName == 'DIV') {
                wrapWidth += slide.getSize().x;
                this._prepareDiv(slide).inject(wrap);
            }
            slide.setStyle('opacity', 1);
        }.bind(this));

        wrap.setStyles (
            { 'width':  wrapWidth + 'px'
            , 'height': this._getTargetSize().y + 'px'
            });

        this._target.adopt(wrap);
        this._carousel = wrap;
        this.currentSlide = wrap.getFirst();

        switch (this._effect) {
            case FX_SLIDE:
                this._fx = new Fx.Scroll(this._target, this._effOpt);
                break;
            case FX_FADE:
                //elem.setStyle('opacity', 1);
                this.currentSlideNr = 0;
                this._fx = new Fx.Morph(this._carousel, {duration: 500});
                break;
        }

        this.fireEvent('ready');

    },

    _prepareImage: function (img) {
        slideContainer = new Element('div',
            { 'styles' :    { 'overflow':   'hidden'
                            , 'float':      'left'
                            , 'width':      this._getTargetSize().x + 'px'
                            , 'height':     this._getTargetSize().y + 'px'
                            }
            }).adopt(img);
        return slideContainer;
    },
    
    _prepareDiv: function (div) {

        borderWidths = this._getBorderWidths(div);

        slideContainer = div.setStyles(
            { 'float':      'left'
            , 'margin':     '0px'
            //, 'width':      (this._getTargetSize().x - borderWidths.x) + 'px'
            //, 'height':     (this._getTargetSize().y - borderWidths.y) + 'px'
            });
        return slideContainer; 
    },

    _getBorderWidths: function (elem) {
        return {
            'y': elem.getStyle('border-bottom-width').toInt() + elem.getStyle('border-top-width').toInt(),
            'x': elem.getStyle('border-left-width').toInt() + elem.getStyle('border-left-width').toInt()
        }
    },

    _getTargetSize: function() {
        size = this._target.getSize();
        borderWidths = this._getBorderWidths(this._target);
        size.x -= borderWidths.x;
        size.y -= borderWidths.y;
        return size;
    },

    showSlideShow: function (show) {
        opac = show ? 1:0;
        new Fx.Morph(this._carousel, { duration: 1500 }).start({opacity: opac});
        //this._carousel.setStyle('opacity', opac);
    },

    getCurrentSlide: function () {
        return this.currentSlide;
    },

    next: function () {


        if (this._effect == FX_FADE) {
            if ((this.currentSlide = this.currentSlide.getNext()) != null) {
                this.currentSlideNr++;
            }else{
                this.currentSlide = this.currentSlide.getFirst();
                this.currentSlideNr = 0;
            }

            this._fx.start({ opacity: 0 }).chain(function() {
                this._carousel.setStyle('margin-left', this._targetSize.x * this.currentSlideNr * -1);
            }.bind(this)).chain(function() {
                this.start({opacity: 1})
            });
        }else if (this._effect == FX_SLIDE) {
            this.currentSlide = this.currentSlide.getNext() || this._carousel.getFirst();
            this._fx.toElement(this.currentSlide);
        }

        this.fireEvent('slide');

    },

    run: function() {
        this.next.periodical(5000, this);
    }
///**
// *
// */
//_resizeImages: function(ss) {
//
//    this._targetSize = ss.root.getSize();
//
//    totalWidth = 0;
//    ss.parent.getChildren('div').each(function(imgDiv) {
//        img = imgDiv.getFirst();
//        if (img != null && img.nodeName == 'IMG') {
//            //Calculate new images size
//            newWidth  = imgW = img.getStyle('width').toInt();
//            newHeight = imgH = img.getStyle('height').toInt();
//            padTop = padLeft = 0;
//            if (imgW > this._targetSize.x || imgH > this._targetSize.y) {
//                if (imgW > imgH) {
//                    newWidth  = this._targetSize.x;
//                    newHeight = Math.round(imgH * (newWidth / imgW));
//                    if (newHeight > this._targetSize.y) {
//                        newHeight = this._targetSize.y;
//                        newWidth  = Math.round(imgW * (newHeight / imgH));
//                    }
//                    padTop = Math.round((this._targetSize.y - newHeight) / 2);
//                    padLeft = Math.round((this._targetSize.x - newWidth) / 2);
//                }else{
//                    newHeight = this._targetSize.y;
//                    newWidth  = Math.round(imgW * (newHeight / imgH));
//                    if (newWidth > this._targetSize.x) {
//                        newWidth  = this._targetSize.x;
//                        newHeight = Math.round(imgH * (newWidth / imgW));
//                    }
//                    padTop = Math.round((this._targetSize.y - newHeight) / 2);
//                    padLeft = Math.round((this._targetSize.x - newWidth) / 2);
//                }
//            }
//
//            imgDiv.setStyles({
//                'width':        (newWidth + padLeft) + 'px',
//                'height':       (newHeight + padTop) + 'px'
//            });
//
//            img.setStyles({
//                'width':        newWidth + 'px',
//                'height':       newHeight + 'px',
//                'margin-top':   padTop + 'px',
//                'margin-left':  padLeft + 'px'
//            });
//        } else {
//            imgDiv.setStyles({
//                'width': this._targetSize.x+'px',
//                'height': this._targetSize.y+'px'
//            });
//        }
//        totalWidth += img.getSize().x;
//
//    }.bind(this));
//
//    ss.parent.setStyles({
//        'height':   this._targetSize.y + 'px',
//        'width':    totalWidth
//    });
//
//},

///**
// * Transforms the given element to a slideshow
// */
//transformElem: function(elem) {
//    elem.setStyle('overflow', 'hidden');
//
//
//    wrap = new Element('div', {
//        id: 'm2web-ss-' + Math.round((Math.random() * 1000000000000))
//    }).setStyle('opacity', 0);
//
//
//    elem.getChildren().each(function (img) {
//        if (img.nodeName == 'IMG' || img.nodeName == 'DIV') {
//            imgCont =
//                new Element('div')
//            .adopt(img)
//            .setStyles({
//                'float':    'left'
//            })
//            .inject(wrap);
//        }
//    }.bind(this));
//
//    elem.adopt(wrap);
    //Build slideshow data
//    ssData = {
//        'root':     elem,
//        'parent':   wrap,
//        'image':    wrap.getFirst()
//    };

//    switch (this._effect) {
//        case FX_SLIDE:
//            ssData.fx = new Fx.Scroll(elem, this._effOpt);
//            break;
//        case FX_FADE:
//            //elem.setStyle('opacity', 1);
//            ssData.imageNr = 0;
//            ssData.fx = new Fx.Morph(wrap, {
//                duration: 500
//            });
//            break;
//    }
//
//    this._slideShows.include(ssData);
//
//},

/**
 *
 */



});