var MyMarvellHouseBackground = new Class({
     
    //implements
   // Implements: [Options, Events, Chain],
    //options
    options: {
        transition: Fx.Transitions.Quart.easeInOut,
        'delay1': 3000,
        opacityFull : 1,
        opacityNull : 0.4,
        images: '',
        imageId: 'background',
        containerId: 'fondswf'
    },
 
//initialization
    initialize: function(el, options) {
        this.zindex = 4;
        this.startIndex = 0;
        this.startSlide = 1;
        this.setOptions(options);
        this.nbel = this.options.images.length;
        this.element = $(this.options.imageId);
        this._auto = null;
        /*this.effect = new Fx.Tween(this.element, {
            'link': 'cancel',
            transition: this.options.transition,
            onStart: function(boo) {
                //boo.highlight(this.options.startColor);
            }.bind(this),
            onComplete: function(boo) {
                //boo.highlight(this.options.completeColor);
            }.bind(this),
            onCancel: function(boo) {
                //boo.highlight(this.options.cancelColor);
            }.bind(this)
 
        });*/
        $('stopMe').setStyle('z-index',10000);
        $('playMe').setStyle('z-index',10000);
        $('stopMe').setStyle('opacity',0.6);
        $('playMe').setStyle('opacity',0.8);
        window.addEvent("resize",this.resizeImage.bind(this));
        if (this.nbel>1){
        	//this._auto =  this.switchImage.periodical(this.options.delay1, this);
        	//this._auto =  
        		this.startShow();
            $('playMe').addEvent('click',this.play.bind(this));
            $('stopMe').addEvent('click',this.stop.bind(this));
           // this._auto;
        }else{
        	$('stopMe').setStyle('opacity',0);
            $('playMe').setStyle('opacity',0);
        	this.switchImageFix();
        }

    },
    startShow: function(){
    	//if (this.startSlide==1){
    		//this.switchImage.periodical(0, this);
    		this.switchImage();
    	//}else{
    		//this.switchImage.periodical(this.options.delay1, this);
    	//}
    },

    switchImage: function(){
        if (this.options.images[this.startIndex] != null){
            var imageel = this.injectImage(this.options.images[this.startIndex]);
            
            this.startIndex++;
        }else{
            this.startIndex=0;
            
            var imageel = this.injectImage(this.options.images[this.startIndex]);
            this.startSlide++;
            this.startIndex++;
        }
    },
    switchImageFix: function(){
            var imageel = this.injectImage(this.options.images[this.startIndex]);
            this.startSlide++;
            this.startIndex++;
    },
   play:function(){
    	this.stop();
    	$('stopMe').setStyle('opacity',0.6);
        $('playMe').setStyle('opacity',0.8);
        this._auto =  this.startShow.periodical(this.options.delay1, this);
    },
    stop:function(){
    	$('stopMe').setStyle('opacity',0.8);
        $('playMe').setStyle('opacity',0.6);
    	$clear(this._auto);
    },
    injectImage: function (img){
        //var imageel  = new Element('img', {id: this.options.imageId});
        var container  = $(this.options.containerId);
        var nbr_img = this.nbel-1;
        var mydiv  = new Element('div', {id: 'pict'+this.startIndex});
        var imageel = img;
        var test ='';
        if (this.startIndex == nbr_img){
        	test = 'pict'+0;       	
        }else{
        	test = 'pict'+(this.startIndex+1);
        }
        if ($(test)){$(test).remove();}
        mydiv.injectInside(container);
        imageel.injectInside(mydiv);
        /**************************************************************************/
        var browserwidthA = window.getWidth();
    	var browserheightA = window.getHeight();
    	var sizecontA = $(this.options.containerId).getSize();
    	var imagewidthA = sizecontA.size.x;
		var imageheightA = sizecontA.size.y;
		var ratioA = 4/6;//à generiser
		//Resize image to proper ratio.....not so good
		if ((browserheightA/browserwidthA) > ratioA){
			$(this.options.containerId).setStyle('width',browserheightA / ratioA);
			$(this.options.containerId).setStyle('height',browserheightA);
			mydiv.setStyle('width',browserheightA / ratioA);
			mydiv.setStyle('height',browserheightA);
		} else {
			$(this.options.containerId).setStyle('width',browserwidthA);
			$(this.options.containerId).setStyle('height',browserwidthA * ratioA);
		     mydiv.setStyle('width',browserwidthA);
		     mydiv.setStyle('height',browserwidthA * ratioA);
		}
		var bindedoffsetA = $(this.options.containerId).getSize();
		bindedoffsetA = bindedoffsetA.size.y;
		mydiv.setStyle('left',0);
		mydiv.setStyle('top',(browserheightA - bindedoffsetA)/2);
        /*****************************************************************************/
        mydiv.setStyles({
            'position': 'absolute'/*,
            'width':'100%',
            'height':'100%'/*,mettre ds la feuille de style
                'opacity' :'0'*/
        });
        imageel.setStyles({
                /*'z-index': this.zindex,*/
        		/*'z-index': 1,*/
                'position': 'absolute',
                'left':0,
                'width':'100%',
                'height':'100%',/*mettre ds la feuille de style*/
                'opacity' :'0'
        });
        imageel.setProperty('id', 'point' + this.zindex);
        if (this.startIndex == 0 && this.startSlide == 1){
        	var oldimageel = $('point' + (this.zindex));
        }else{
            var oldimageel = $('point' + (this.zindex -1));
            //oldimageel.fade(0.6);
            //console.log(oldimageel + '???');
        }
        
        var myeffect2 = new Fx.Styles(oldimageel, {duration: 650/*,transition:this.options.transition*/});
        myeffect2.start({
            'opacity': 0
        });
        var myeffect = new Fx.Styles(imageel, {duration: 800/*,transition:this.options.transition*/});
        myeffect.start({
            'opacity': 1
        });
        if (this.startIndex != 0){
            //oldimageel.destroy();
        }
        //imageel.fade('in');
        
        this.zindex++;
        //console.log('z-index:' + this.zindex);
        if(nbr_img>0){
	        if (this.startSlide == 1){
	        	this.startSlide++;
	        	this._auto =  this.startShow.periodical(this.options.delay1, this);
	        }
        }
    },
    resizeImage: function (){
    	var browserwidth = window.getWidth();
    	var browserheight = window.getHeight();
    	var sizecont = $(this.options.containerId).getSize();
    	var imagewidth = sizecont.size.x;//conteneur des images pas bon
		var imageheight = sizecont.size.y;
		var ratio = 4/6;//à generiser
		var thoseChild = $(this.options.containerId).getChildren();
		//Resize image to proper ratio
		if ((browserheight/browserwidth) > ratio){
			$(this.options.containerId).setStyle('width',browserheight / ratio);
			$(this.options.containerId).setStyle('height',browserheight);
		    thoseChild.each(function (elm){
		    	elm.setStyle('width',browserheight / ratio);
		    	elm.setStyle('height',browserheight);
		    });
		} else {
			$(this.options.containerId).setStyle('width',browserwidth);
			$(this.options.containerId).setStyle('height',browserwidth * ratio);
		    thoseChild.each(function (elm){
		    	elm.setStyle('width',browserwidth);
		    	elm.setStyle('height',browserwidth * ratio);
		    });
		}
		var bindedoffset = $(this.options.containerId).getSize();
		bindedoffset = bindedoffset.size.y;
		//if (options.vertical_center == 1){ remettre ce param pour faire une classe plus générique
			thoseChild.each(function (elm){
				//elm.setStyle('left',(browserwidth - imagewidth)/2);il faut recup imagewidth et imageheight en dynamique
				elm.setStyle('left',0);
		    	elm.setStyle('top',(browserheight - bindedoffset)/2);
		    });
		//}
	},
    removeImage: function (img){
        // not used
        //console.log(this.startIndex);
        if (this.startIndex == 0){
            //console.log('huhu');
            var oldimageel = $(this.options.images[this.startIndex]);
        }else{
            //console.log('hihi');
            var oldimageel = $(this.options.images[this.startIndex -1]);
        }
        //console.log(oldimageel);
       /* oldimageel.fade('out');
        imageel.fade('in');
        oldimageel.destroy();*/
    },


    fadeIn: function() {
            this.effect.start('opacity', this.options.opacityFull);
    },
 
    fadeOut: function() {
            this.effect.start('opacity',this.options.opacityNull);
    }
});

MyMarvellHouseBackground.implement(new Options, new Events);
//once the DOM is ready
/*window.addEvent('domready', function() {
    var arr2 = new Array("../site2/templates/londreseiffel/javascript/photo_de_fond/1.jpg", "../site2/templates/londreseiffel/javascript/photo_de_fond/2.jpg", "../site2/templates/londreseiffel/javascript/photo_de_fond/3.jpg", "../site2/templates/londreseiffel/javascript/photo_de_fond/4.jpg", "../site2/templates/londreseiffel/javascript/photo_de_fond/5.jpg");
    var myImages = new Asset.images(arr2);
    //console.log(myImages);
    var MyPeriodicalEffect = new MyMarvellHouseBackground('fondswf', {
        images: myImages
    });
 
});*/