
var cantItems;
var leftActual;
var posActual;
var myEffect=null;
//var mover=true;
var sentido;
var task;
var paso;
var bIniciado = false;
var fPeriodical = null;

var moverPromo = function(){
    if(task=="right"){
        mover=false;
        posActual++;
        if(posActual>=(cantItems)){
            //llegó al final'
            if(sentido=="ambos"){
                task="left";
                posActual=cantItems-1;
                leftActual+=paso;                   //vuelve
            }else{
                leftActual=0;                       //va al principio
                posActual=0;
            }
        }else{
            leftActual-=paso;
        }
    }
    else if(task=="left"){
        mover=false;
        posActual--;
        if(posActual<=0){                           //llegó al principio
            if(sentido=="ambos"){
                task="right";   
                posActual=1;
                leftActual-=paso;                   //vuelve
            }else{
                leftActual=-((cantItems-1)*paso);   //va al final
                posActual=cantItems;
            }
        }else{
            leftActual+=paso;
        }
    }

    myEffect.start({
        'left': leftActual
    });
}

function derecha(){
    clearInterval(fPeriodical);        
    bIniciado = false;
    myEffect.pause();
    myEffect.set(0);
    task='right';
    moverPromo();
    myEffect.resume();
}

function izquierda(){
    clearInterval(fPeriodical);
    bIniciado = false;
    myEffect.pause();
    myEffect.set(0);
    task='left';
    moverPromo();
    myEffect.resume();
}

function armarSlide(contenedorSlide,sentidoDefinido,
    listaImagenes,direccionImagenes,
    listaFlechas,direccionFlechas,heightFlechas,widthFlechas,
    duracion,transicion,periodicidad){

    //hacer un arreglo de imágenes.
    var imagenes = [];
    for(x=0;x<listaImagenes.length;x++){
        imagenes[x] = direccionImagenes+listaImagenes[x][0];
    }
    
    //hacer el load de las imágenes
    var myImages = Asset.images(imagenes,{
        properties: {
            'class': 'myImage',
            title: 'myImage'
        },
        onComplete: function(){

            //armar el slide
            cantItems = listaImagenes.length;
            sentido = sentidoDefinido;
            if (sentido=='ambos'){
                task='right';
            }else{
                task=sentido;
            }

            if (cantItems > 0) {         //si hay imágenes

                var noDesplazable = null;
                noDesplazable = new Element('div',
                {
                    'id': 'nodesplazable-content',
                    'class': 'nodesplazable-content',
                    'style': 'position:   relative;'
                });
                noDesplazable.injectInside($(contenedorSlide));

                var heightSlide = $('nodesplazable-content').getStyle('height').toInt();
                var widthSlide = $('nodesplazable-content').getStyle('width').toInt();
                var topSlide = $(contenedorSlide).getPosition().y + $('nodesplazable-content').getStyle('margin-top').toInt();
                var leftSlide = $(contenedorSlide).getPosition().x + $('nodesplazable-content').getStyle('margin-left').toInt();

                if (direccionFlechas != ''){
                    var flechaIzq = null;
                    flechaIzq = new Element('div',
                    {
                        'id': 'slide-content-flecha-izquierda',
                        'onclick': 'izquierda();'
                    });
                    flechaIzq.injectInside($(contenedorSlide));
                    heightFlecha = $('slide-content-flecha-izquierda').getStyle('height').toInt();
                    $('slide-content-flecha-izquierda').set('styles',
                    {
                        'top': (topSlide+((heightSlide - heightFlecha)/2)),
                        'background': 'url('+direccionFlechas+listaFlechas[0]+') left no-repeat',                        
                        'cursor': 'pointer',
                        'display': 'block',
                        'position': 'absolute',
                        'z-index': 1,
                        'width': widthFlechas,
                        'height': heightFlechas,
                        'left':leftSlide+5
                        });

                    var flechaDer = null;
                    flechaDer = new Element('div',
                    {
                        'id': 'slide-content-flecha-derecha',
                        'onclick': 'derecha();'
                    });
                    flechaDer.injectInside($(contenedorSlide));

                    $('slide-content-flecha-derecha').set('styles',
                    {
                        'top': (topSlide+((heightSlide - heightFlecha)/2)),
                        'background': 'url('+direccionFlechas+listaFlechas[1]+') left no-repeat',
                        'cursor': 'pointer',
                        'display': 'block',
                        'position': 'absolute',
                        'z-index': 1,
                        'width': widthFlechas, 
                        'height': heightFlechas
                    });
                    heightFlecha = $('slide-content-flecha-derecha').getStyle('height').toInt();
                    widthFlecha = $('slide-content-flecha-derecha').getStyle('width').toInt();
                    $('slide-content-flecha-derecha').set('styles',
                    {
                        'left':(leftSlide+(widthSlide-widthFlecha-5))
                        });
                }

                var desplazable = null;
                desplazable = new Element('div',
                {
                    'id': 'desplazable-content',
                    'class': 'desplazable-content' ,
                    'style': 'position:   relative;'
                });
                desplazable.injectInside(noDesplazable);

                var x;
                for(x=0;x<cantItems;x++){
                    imagen = listaImagenes[x][0];
                    urlImagen = listaImagenes[x][1];

                    var imagenHead = null;
                    imagenHead = new Element('div',
                    {
                        'id': 'imagenHead'+x,
                        'class': 'imagenHead' ,
                        'style': 'float:left;'
                    });
                    imagenHead.injectInside(desplazable);

                    var imagenSolapa = null;
                    imagenSolapa = new Element('div',
                    {
                        'id': 'solapa'+x,
                        'class': 'imagenSolapa' ,
                        'style': 'float:left;'
                    });
                    imagenSolapa.injectInside(imagenHead);

                    var img = null;
                    img = new Element('img',
                    {
                        'alt': imagen,
                        'src': direccionImagenes+imagen,
                        'style': 'border: 0px none;'
                        });
                    if (urlImagen != ''){    
                        var aurl = null;
                        aurl = new Element('a',
                        {
                            'target': '_blank',
                            'href': urlImagen,
                            'style': 'cursor:pointer; border: 0px none;'
                            });
                        img.injectInside(aurl);
                        aurl.injectInside(imagenSolapa);
                    }else{
                        img.injectInside(imagenSolapa);
                    }


                }
                paso = $('imagenHead0').getSize().x;

                if (task=='left'){
                    leftActual=-((cantItems-1)*paso);
                    posActual=cantItems;
                }else{
                    leftActual=0;
                    posActual=0;
                }
                $('desplazable-content').setStyle('width',(cantItems*paso));
                $('desplazable-content').setStyle('left',leftActual);
                myEffect = new Fx.Morph('desplazable-content',
                {
                    duration: duracion,
                    transition: transicion,
                    onComplete:function(){
                        mover=true;
                        if (!bIniciado){
                            bIniciado = true;
                            fPeriodical = moverPromo.periodical(periodicidad);
                        }
                    }
                });
					
                bIniciado = true; 
                fPeriodical = moverPromo.periodical(periodicidad);
            }
            
        //FIN armar el slide
        } //FIN onComplete
    }); //FIN onComplete
}
