var Carousel = Class.create();
Carousel.prototype = {

    //
    //  Setup the Variables
    //
    activeElement : 0,

    elementCount : null,
    elementWidth : null,
    listWidth : null,

    controlls : null,
    prevButton : null,
    nextButton : null,
    positionIndex: null,

    indexLinks : [],

    activeSlide : false,
    
    initialize: function(options) {

        this.options = Object.extend({
          resizeSpeed : 8,
          step : 1,
          autostartDelay : 13000,
          slideDelay : 13000,

          showControlls : true,

          elementIds : {
          container : 'carousel'
          },

          classNames : {
            clipContainer : 'clipContainer',
            controlls : 'controlls',
            prevButton : 'previous_button',
            nextButton : 'next_button',
            index : 'index',
            positionIndex: 'carousel-position',

            hoverClassActive : 'hoverWrap-active',
            linkClass : 'detailLink',
            progressClass : 'progress'

          }
        }, options || {});

        document.observe('dom:loaded', this.start.bindAsEventListener(this));

    },

    move : function(ev){
        /*
console.info(ev);

        console.info(ev.pointerX());
        console.info(ev.pointerY());
*/
    },


    start : function(ev){


        container = this.options.elementIds.container;
            this.container = $$('#'+container).first();


        // CAG: we change this to only stop the slideshow
        Event.observe(this.container, 'mouseenter', this.stopSlideshow.bindAsEventListener(this), true);
        Event.observe(this.container, 'mouseleave', this.resumeSlideshow.bindAsEventListener(this), true);

        this.clipContainer = $$('#'+container+' .' + this.options.classNames.clipContainer).first();

        this.list1 = $$('#'+container+' .' + this.options.classNames.clipContainer+' DIV').first();
        this.list2 = this.list1.cloneNode(true);

        this.list1.insert({after : this.list2});

        this.elementCount = this.list1.childElements().size();
        this.elementWidth = this.list1.childElements().first().getWidth();
        // CAG: we add another 10px for the margin
        this.elementWidth+= 10;
        this.listWidth = this.elementWidth * this.elementCount;
        


        // move list2 behind list1
        this.list2.setStyle({left : this.listWidth + 'px'});



        this.prevButton = $$('#'+container+' .' + this.options.classNames.prevButton).first();
        this.nextButton = $$('#'+container+' .' + this.options.classNames.nextButton).first();
        
        this.positionIndex = $$('#'+container+' .' + this.options.classNames.positionIndex).first();
        this.positionIndex.update((this.activeElement + 1) + '/' + this.elementCount);
        
        // CAG: we want permanent navgigation - so no hiding!
        //this.prevButton.setOpacity(0);
        //this.nextButton.setOpacity(0);
        
        Event.observe(this.prevButton, 'click', this.prevButtonClick.bindAsEventListener(this), false);
        Event.observe(this.nextButton, 'click', this.nextButtonClick.bindAsEventListener(this), false);


        // Controlls setup
        if(this.options.showControlls == true){
        this.index = $$('#'+container+' .' + this.options.classNames.index).first();
        this.indexLinks = $$('#'+container+' .' + this.options.classNames.index + ' a');


        this.index.setOpacity(0);


        this.indexLinks.each(function(elm){
            Event.observe(elm, 'click', this.indexLinkClick.bindAsEventListener(this), false);
        }.bind(this));

        }

        this.progress = $$('#'+container+' .' + this.options.classNames.progressClass).first();

        this.progress.setStyle({'width' : '0px'});
        this.slideTimer_start(this.options.autostartDelay);

    },


    slideTimer_start : function(time){
//      console.info('timer start called', time);
//      this.autostartTimer = window.setTimeout(this.slideTimer.bind(this), this.options.slideDelay);

        this.progressEffect = new Effect.Morph(this.progress, {
        style: 'width: 741px',
        duration: (time / 1000),
        transition: Effect.Transitions.linear,
        afterFinish: this.slideTimer_end.bind(this)
        });

    },
    slideTimer_end : function(){
        //console.info('timer end called');
        this.progress.setStyle({'width' : '0px'});
        this.slideRight();
    },
    slideTimer_pause : function(){
        //console.info('timer pause called');
        //window.clearTimeout(this.autostartTimer);
        this.progressEffect.cancel();
    },
    slideTimer_resume : function(){
//      console.info('timer resume called', this.resetFlag);
//      window.clearTimeout(this.autostartTimer);
//      this.autostartTimer = window.setTimeout(this.slideTimer.bind(this), this.options.autostartDelay);

        if(this.lightbox == true) {
        return true;
        }

        if(this.resetFlag == true) {
        time = this.options.slideDelay;
        this.resetFlag = false;
        } else {
        time = ((this.progressEffect.totalFrames- this.progressEffect.currentFrame) / this.progressEffect.totalFrames) * (this.progressEffect.options.duration*1000);
        }



        if(this.progressEffect.state == 'finished'){
        this.slideTimer_start(time);
        }


    },

    slideTimer_reset : function(){
        //console.info('timer reset called');
        this.progressEffect.cancel();
        this.resetFlag = true;
        this.progress.setStyle({'width' : '0px'});
    },

    stopSlideshow : function(ev) {
        ev.stop();

        this.slideTimer_pause();

    },
    resumeSlideshow : function(ev) {
        ev.stop();

        this.slideTimer_resume();

    },

    prevButtonClick : function(ev) {
        ev.stop();

        this.slideTimer_reset();

        this.slideLeft();
    },
    nextButtonClick : function(ev) {
        ev.stop();

        this.slideTimer_reset();

        this.slideRight();
    },

    // ************************************
    slideLeft : function() {
        if(this.activeSlide == true) return;
        this.activeSlide = true;

        this.removeActiveIndex();

        if(this.activeElement <= 0){
            this.list1.setStyle({left : '-' + this.listWidth + 'px'});
            this.list2.setStyle({left : '0px'});

            this.activeElement = this.elementCount-1;
        } else {
            this.activeElement -= this.options.step;
        }

        this.slide();

        //console.info('slide left', this.activeElement, this.elementCount);
    },

    slideRight : function() {
        if(this.activeSlide == true) return;
        this.activeSlide = true;


        this.removeActiveIndex();

        if(this.activeElement >= this.elementCount){
            this.list1.setStyle({left : '0px'});
            this.list2.setStyle({left : (this.listWidth) + 'px'});

            this.activeElement = this.options.step;
        } else {
            this.activeElement += this.options.step;
        }

        this.slide();

    },


    slide : function() {

        pos1 = -this.elementWidth * (this.activeElement);

        var that = this;
        var pos2 = pos1 + this.listWidth;

        new Effect.Parallel(
            [
                new Effect.Morph(that.list1, {style : 'left : ' + pos1 + 'px', sync: true}),
                new Effect.Morph(that.list2, {style : 'left : ' + pos2 + 'px', sync: true})
            ], {duration: 1.0, afterFinish: function() {
                that.afterSlide();
                //console.info('morph left ready');
            }}
        );


    },

    afterSlide : function(){

        if(this.options.showControlls){
            this.setActiveIndex();
        }

        this.activeSlide = false;

        if(this.controllsActive != true) {
            this.slideTimer_start(this.options.slideDelay);
        }
        
        this.updatePositionIndex();

    },
    
    updatePositionIndex : function() {
    
        if(this.activeElement >= this.elementCount) {
            a = this.elementCount-this.activeElement;
        } else {
            a = this.activeElement;
        }
        a += 1;
        this.positionIndex.update(a + '/' + this.elementCount);
        
    },

    setActiveIndex : function(){
        if(this.activeElement >= this.elementCount) {
            a = this.elementCount-this.activeElement;
        } else {
            a = this.activeElement;
        }
        this.indexLinks[a].addClassName('active');
    },

    removeActiveIndex : function(){
        this.indexLinks.each(function(elm){elm.removeClassName('active')});
    },


    dummy : function(){
    }
}