Slideshow = new Class({
	initialize: function(slideshow, props) { 
	    this.props = Object.extend({
			vertical: false,
			nbblocks:3
		}, props || {});

		this.slideshow = $(slideshow);
        slider = this.slideshow.getElementById('slideshow_slider');
		this.slider = $(slider);
		banner = this.slider.getElementById('slideshow_banner');
		this.banner = $(banner);
		this.blocks = this.banner.getElements('div');

        blocksdef = this.blocks.filter(function(element, index, arrayBlocks){
            if (element.hasClass('blockbanner')){
                element.fx = '';
                return element }
        });
        this.blocks = blocksdef;

        arrow_left = this.slideshow.getElementById('prev');
        this.arrow_left = $(arrow_left);
        arrow_right = this.slideshow.getElementById('next');
        this.arrow_right = $(arrow_right);
        
		this.blocksshowed = this.props.nbblocks;
		this.fx = [];
		this.start();
	},


	start: function() {
		if(this.blocks[0]!=null)
		{
		blockvalues = this.blocks[0].getCoordinates();
	        margin = this.blocks[0].getStyle('margin-left').toInt();
	        margin += this.blocks[0].getStyle('margin-right').toInt();
	        marginh = this.blocks[0].getStyle('margin-bottom').toInt();
	        marginh += this.blocks[0].getStyle('margin-top').toInt();
	        
	        this.blockwidth = blockvalues['width'] + margin;
	        this.blockheight = blockvalues['height'] + marginh;
	        
	    	if (this.props.vertical) {
	    	    this.banner.setStyles({height: Math.ceil( this.blockheight * this.blocks.length ) + 'px'});
	    	    this.slider.setStyles({overflow:'hidden', display: 'block', height: Math.ceil( this.blockheight * this.blocksshowed) + 'px' });
	    	} 
	    	else {
	    	    this.banner.setStyles({width: Math.ceil( this.blockwidth * this.blocks.length ) + 'px'});
	            this.slider.setStyles({overflow:'hidden', display: 'block', width: Math.ceil( this.blockwidth * this.blocksshowed) + 'px' });
	    	}
	        this.scrollerBanner = new Fx.Scroll(this.slider, {'duration':500});
	        this.blocks.each(function(element, index, arrayBlocks){ 
	                element.fx = new Fx.Style(element,'opacity', {'duration':500});
	                    link = element.getElements('img');
	                    link.each(function(eltimg) {
	                        eltimg.linkfx = new Fx.Style( eltimg, 'opacity',{'duration':100});
	                        eltimg.linkfx.set(0.6);
	                        eltimg.addEvent('mouseover', function(){ eltimg.linkfx.set(1); });
	                        eltimg.addEvent('mouseout', function(){ eltimg.linkfx.set(0.6); });
	                    });
	        
            });        
	        this.position = 0;
	        if ( this.arrow_left )
		        this.arrow_left.setStyle('display','none');
         }
    },

	navigation: function( dir) {
	    if (dir==true) {
	        if (this.position < (this.blocks.length - this.blocksshowed) ){
                this.position += 1;
                if (this.props.vertical) {this.scrollerBanner.scrollTo(0,this.position*this.blockheight);}
                else {this.scrollerBanner.scrollTo(this.position*this.blockwidth);}
                this.blocks[this.position+this.blocksshowed-1].fx.start(0,1);
                this.blocks[this.position-1].fx.start(1,0);
                this.arrow_left.setStyle('display','');
            }
            if (this.position >= (this.blocks.length - this.blocksshowed) ) {
                this.arrow_right.setStyle('display','none');
            }
            
	    }
	    if (dir==false) {
	        if (this.position>0){
                this.position -= 1;
                if (this.props.vertical) {this.scrollerBanner.scrollTo(0,this.position*this.blockheight);}
                else{this.scrollerBanner.scrollTo(this.position*this.blockwidth);}
                this.blocks[this.position+this.blocksshowed].fx.start(1,0);
                this.blocks[this.position].fx.start(0,1);
                this.arrow_right.setStyle('display','');
            }
            if (this.position <= 0 ) {
                this.arrow_left.setStyle('display','none');
            }
	    }
	}
});


SlideshowCustom = new Class({
	initialize: function(slideshow, props) { 
	    this.props = Object.extend({
			vertical: false,
			nbblocks:3
		}, props || {});

		this.slideshow = $(slideshow);
        slider = this.slideshow.getElementById('slideshow_slider');
		this.slider = $(slider);
		banner = this.slider.getElementById('slideshow_banner');
		this.banner = $(banner);
		this.blocks = this.banner.getElements('div');

        blocksdef = this.blocks.filter(function(element, index, arrayBlocks){
            if (element.hasClass('blockbanner')){
                element.fx = '';
                return element }
        });
        this.blocks = blocksdef;

        arrow_left = this.slideshow.getElementById('prev');
        this.arrow_left = $(arrow_left);
        arrow_right = this.slideshow.getElementById('next');
        this.arrow_right = $(arrow_right);
        
		this.blocksshowed = this.props.nbblocks;
		this.fx = [];
		this.start();
	},


	start: function() {
		if(this.blocks[0]!=null)
		{
		blockvalues = this.blocks[0].getCoordinates();
	        margin = this.blocks[0].getStyle('margin-left').toInt();
	        margin += this.blocks[0].getStyle('margin-right').toInt();
	        marginh = this.blocks[0].getStyle('margin-bottom').toInt();
	        marginh += this.blocks[0].getStyle('margin-top').toInt();
	        
	        this.blockwidth = blockvalues['width'] + margin;
	        this.blockheight = blockvalues['height'] + marginh;
	        
	    	if (this.props.vertical) {
	    	    this.banner.setStyles({height: Math.ceil( this.blockheight * this.blocks.length ) + 'px'});
	    	    this.slider.setStyles({overflow:'hidden', display: 'block', height: Math.ceil( this.blockheight * this.blocksshowed) + 'px' });
	    	} 
	    	else {
	    	    this.banner.setStyles({width: Math.ceil( this.blockwidth * this.blocks.length ) + 'px'});
	            this.slider.setStyles({overflow:'hidden', display: 'block', width: Math.ceil( this.blockwidth * this.blocksshowed) + 'px' });
	    	}
	        this.scrollerBanner = new Fx.Scroll(this.slider, {'duration':500});
	        this.blocks.each(function(element, index, arrayBlocks){ 
	                element.fx = new Fx.Style(element,'opacity', {'duration':500});
	                    link = element.getElements('img');
	                    link.each(function(eltimg) {
	                      if (!eltimg.hasClass('active')){
	                        eltimg.linkfx = new Fx.Style( eltimg, 'opacity',{'duration':100});
	                        eltimg.linkfx.set(0.6);
	                        eltimg.addEvent('mouseover', function(){ eltimg.linkfx.set(1); });
	                        eltimg.addEvent('mouseout', function(){ eltimg.linkfx.set(0.6); });
	                      }
	                    });
	        
            });        
	        this.position = 0;
	        if ( this.arrow_left )
				this.arrow_left.setStyle('opacity',0.3);
         }
    },

	navigation: function( dir) {
	    if (dir==true) {
	        if (this.position < (this.blocks.length - this.blocksshowed) ){
                this.position += 1;
                if (this.props.vertical) {this.scrollerBanner.scrollTo(0,this.position*this.blockheight);}
                else {this.scrollerBanner.scrollTo(this.position*this.blockwidth);}
                this.blocks[this.position+this.blocksshowed-1].fx.start(0,1);
                this.blocks[this.position-1].fx.start(1,0);
                this.arrow_left.setStyle('display','');
            }
	    }
	    if (dir==false) {
	        if (this.position>0){
                this.position -= 1;
                if (this.props.vertical) {this.scrollerBanner.scrollTo(0,this.position*this.blockheight);}
                else{this.scrollerBanner.scrollTo(this.position*this.blockwidth);}
                this.blocks[this.position+this.blocksshowed].fx.start(1,0);
                this.blocks[this.position].fx.start(0,1);
                this.arrow_right.setStyle('display','');
                this.arrow_left.setStyle('opacity',1);
            }
	    }
	    if (this.position >= (this.blocks.length - this.blocksshowed) ) {
            this.arrow_right.setStyle('opacity',0.3);
        }
        else{
            this.arrow_right.setStyle('opacity',1);
        }
	    if (this.position <= 0 ) {
            this.arrow_left.setStyle('opacity',0.3);
        }
		else{
            this.arrow_left.setStyle('opacity',1);
        }
	}
});

