var FotoGallery= new Class({
    idFotoGallery:null,
    containerGif:null,
    containerImgs:null,
    containerPagesInf:null,
    containerPagesSuP:null,
    arrayImages:null,
    classElement:'fotoGaleriasImgAndTxt',
    sfx:null,
    stack:null,
    principalCont:null,
    totalElements:null,
    loadedElements:null,
    transitions:null,
    defaultHeight:300,
    classNext:'pageNext',
    classPrev:'pagePrev',
    classActualPage:'actualPage',
    classTotalPages:'totalPages',
    textCount:null,
    busy:false,
    idContainerAll:'newsSlider',
    classContainerAll:'container',
    idContainerAllTabs:'containerTabsItems2',
    initialize: function(params){
        if($defined($(params.idFotoGallery))&& $defined(params.arrayImages)){
            this.flagImage = 1;
            this.principalCont=$(params.idFotoGallery);//contenedor principal de la galeria
            this.defaultHeight=$defined(params.sfx)&&params.defaultHeight>0 ?params.defaultHeight:300;//alto por default del contenedor
            //asignacion de el alto para el contenedor principal
            this.containerImgs=$defined($(params.fotoGaleriasImagesC))?$(params.fotoGaleriasImagesC):null//contenedor de imagesnes
            if($defined($(this.idContainerAll))&& $defined($$(' div.'+this.classContainerAll))){
                this.resizeC=$$("#"+this.idContainerAll+' div.'+this.classContainerAll)[0].effects({
                    duration: 300,
                    transition: Fx.Transitions.Sine.easeInOut
                });
            }
            else
                this.resizeC=null;

            this.containerImgs.setStyles({
                display:'block',
                height: this.defaultHeight
            });
            this.stack=0;//apuntador de los elementos de la galeria
            this.loadedElements=new Array();// elementos cargados
            this.sfx=$defined(params.sfx)?params.sfx:"";//sufijo para el cambio de estilo
            this.classNext=$defined(params.classNext)?params.classNext:"pageNext";//clase para el boton d siguiente y anterior
            this.classPrev=$defined(params.classPrev)?params.classPrev:"pagePrev";
            this.classActualPage=$defined(params.classActualPage)?params.classActualPaget:"actualPage";//clase del indicador de imagen actual y el total de imagenes
            this.classTotalPages=$defined(params.classTotalPages)?params.classTotalPages:"totalPages";
            this.transitions=this.containerImgs.getElements('div.'+ this.classElement+this.sfx);//elementos
            this.assets=new Array();
            this.containerGif=new Fx.Style(this.containerImgs.setStyles({
                display:'block',
                opacity: 0
            }), 'opacity', {
                duration: 200
            });
            this.resize=this.containerImgs.effects({
                duration: 300,
                transition: Fx.Transitions.Sine.easeInOut
            });
            //this.transitions.each(function(el,i){this.assets[i]=new Fx.Style(el.setStyles({display:'block', opacity: 0}), 'opacity', {duration: 500});}.bind(this));//creacion de transiscion para cada elemento
            this.transitions.each(function(el,i){
                this.assets[i]=new Fx.Style(el.setStyles({
                    display:'block',
                    opacity: 0
                }), 'opacity', {
                    duration: 500,
                    onComplete: function()

                    {
                        this.makeResize(this.stack);
                        this.assets[this.stack].set(1);
                    }.bind(this)
                }
                );
            }.bind(this));//creacion de transiscion para cada elemento
            /*
this.assetss[this.pointer].setStyles({display:'block', opacity: 1, z_index:2 });
*/
            this.arrayImages=params.arrayImages;
            this.totalElements=params.arrayImages.length;
            this.containerPagesInf=$defined($(params.idContainerPagesInf))? $(params.idContainerPagesInf):null;
            this.containerPagesSup=$defined($(params.idContainerPagesSup))? $(params.idContainerPagesSup):null;
            if((this.containerPagesSup!=null || this.containerPagesInf!=null)&& this.totalElements>0)
            {
                this.createPagination();

            }
            this.loadImg(0);
        }
    },
    createPagination:function()
    {
        var newPagePrev= new Element('span', {
            'class': this.classPrev+this.sfx
        });
        newPagePrev.setText('anterior');

        var actualPage= new Element('span', {
            'class': this.classActualPage+this.sfx
        });

        actualPage.setText(' 1');
        var totalPages= new Element('span', {
            'class': this.classTotalPages+this.sfx
        });
        totalPages.setText('/'+this.totalElements);
        var newPageNext= new Element('span', {
            'class': this.classNext+this.sfx
        });
        newPageNext.setText('siguiente');
        if(this.containerPagesSup!=null)
        {
            this.containerPagesSup.adopt(newPagePrev);
            this.containerPagesSup.adopt(actualPage);
            this.containerPagesSup.adopt(totalPages);
            this.containerPagesSup.adopt(newPageNext);
        }
        if(this.containerPagesInf!=null)
        {
            this.containerPagesInf.adopt(newPagePrev.clone());
            this.containerPagesInf.adopt(actualPage.clone());
            this.containerPagesInf.adopt(totalPages.clone());
            this.containerPagesInf.adopt( newPageNext.clone());
        }
        this.textCount=this.principalCont.getElements('span.'+ this.classActualPage+this.sfx);
        this.nexts=this.principalCont.getElements('span.'+ this.classNext+this.sfx);
        this.prevs=this.principalCont.getElements('span.'+ this.classPrev+this.sfx);
        this.nexts.each(function(el){
            el.addEvent('click',this.loadImg.bind(this,1));
        }.bind(this));
        this.prevs.each(function(el){
            el.addEvent('click',this.loadImg.bind(this,-1));
        }.bind(this));
    },
    loadImg:function(img)
    {
        if(!this.busy)
        {
            img=this.stack+img;

            if(img>=this.totalElements)
                img=0;
            else
            if(img<0)
                img=this.totalElements-1;
            if(!$defined(this.loadedElements[img]) )
            {
                this.busy=true;
                var image=new Asset.images(this.arrayImages[img], {
                    onProgress: function()
                    {
                        //if(this.containerImgs.getStyle('opacity').toInt()==1)
                        // this.containerGif.start(1,0);
                        this.busy=false;
                    }.bind(this,img),
                    onComplete: function()
                    {
                        this.busy=false;
                        this.asingImg(image,img);
                        this.loadedElements[img]=image;
                        this.containerGif.start(0,1);
                        this.goTo(img);
                    }.bind(this,img)
                });
            }
            else
            {
                if($defined(this.loadedElements[img]))
                {
                    this.makeResize(img);
                    this.goTo(img)
                }
            }
        }

    },
    asingImg:function(image,indice)
    {
        var container=this.transitions[indice].getElement('div.'+'fotoGaleriasImg');
        container.adopt(image)
        this.makeResize(indice);
    },
    makeResize:function(indice){
        var heightToltal=this.transitions[indice].getElement('div.'+'fotoGaleriasImg').getSize().size.y +this.transitions[indice].getElement('div.'+'fotoGaleriasImgTxt').getSize().size.y;
        if(indice != 0 || this.flagImage >= 3){
            this.resize.start({
                'height': [this.containerImgs.getSize().size.y, heightToltal+30]
            });

            if(this.resizeC!=null){
//                alert(this.principalCont.getSize().size.y);

                this.resizeC.start({
                    'height': [this.principalCont.getSize().size.y, this.principalCont.getSize().size.y+70]
                });

            }

//            alert(this.flagImage);
        }else{this.flagImage++;}



//        if(indice == 0){
//
//            if(this.resizeC!=null){
////                alert(this.principalCont.getSize().size.y);
//
//                this.resizeC.start({
//                    'height': [this.principalCont.getSize().size.y, this.principalCont.getSize().size.y]
//                });
//
//            }
//        }
        

    },
    goTo:function(indice)
    {
        if(!this.busy)
        {
            this.assets[this.stack].stop();
            if(this.stack!=indice)
                this.assets[this.stack].start(1, 0);
            this.stack=indice;
            this.textCount.setText(this.stack+1);
            this.assets[this.stack].start(0, 1);
        }
    }
});