//var aImages = new Array();
//aImages[0] = ['/prova_gallery/photo01.jpg','/prova_gallery/s_photo01.jpg','Descrizione della foto grande 1','Descrizione della foto 1'];

var numPhotos = 0;
var BoxPhotosID, ContainerID; // id elementi principali
var fxScroll;

// Variabili globali private
var currBoxWidth = -1; // -1 perchè può essere inizializzata a 0 nella funzione
var onCentering = 0; // sto scrollando manualmente
var timeImageCentering = 800; // tempo per centrare l'immagine
var timeFadeInPreview = 700; // tempo fade entrata preview immagine
var timeFadeOutPreview = 100; // tempo fade uscita preview immagine
var previewBoxWidth = 200;
var offsetPreviewTop = 19;

function initPhotogallery(idBoxPhotos, idContainer)
{
    // Salvo gli id degli oggetti
    BoxPhotosID = idBoxPhotos;
    ContainerID = idContainer;

    // Azzero la larghezza del contenitore delle foto
    $(BoxPhotosID).setStyle('width',0);

    // Conteggio le foto
    if (typeof aImages != "undefined") {
        numPhotos = aImages.length;
    }
        
    if (numPhotos > 0)
    {
        var totBoxWidth = 0; // Width totale del div contenitore delle foto

        // Ciclo le foto
        for(i=0;i<numPhotos;i++)
        {            
            var src = aImages[i][1];
            var srcBig = aImages[i][0];
            var title = aImages[i][3];
            var titleBig = aImages[i][2];
            if (titleBig.length<=0) { titleBig = title; }
            
            var myImg = new Element('img', {
                'src': src,
                'srcBig': srcBig,
                'title': title,
                'titleBig': titleBig,
                'alt': title,
                'class': 'slidePrev',
                'events': {
                    'click': function(){
                        if(onCentering == 0)
                        {
                            hideDetailsBox();

                            var currImg = this;
                            onCentering = 1;

                            // Calcolo larghezza immagine
                            var margin = currImg.getStyle('margin-left').toInt() + currImg.getStyle('margin-right').toInt();
                            var imgWidth = currImg.getSize().x + margin;
                            // Calcolo larghezza box
                            var boxWidth = $(ContainerID).getSize().x;
                            // Calcolo l'offset per centrare l'immagine nel container
                            var offsetScrollX = Math.floor((boxWidth-imgWidth)/2);

                            // Calcolo limiti e valori scroll
                            var fromScroll = $(ContainerID).getScroll().x;
                            var toScroll = currImg.getPosition($(BoxPhotosID)).x - offsetScrollX;
                            var maxScroll = $(ContainerID).getScrollSize().x - boxWidth;
                                                        
                            // Se non ho bisogno di scrollare non aspetto di centrare l'immagine
                            // Non scrollo se sono all'inizio, alla fine oppure già posizionato
                            var tmpTIC = timeImageCentering;
                            if( (toScroll > fromScroll-10 && toScroll < fromScroll+10) || (fromScroll <= 0 && toScroll < 0) || (toScroll > maxScroll && fromScroll >= maxScroll) )
                                tmpTIC = 100;
                            
                            // Istanzio l'elemento da scrollare
                            fxScroll = new Fx.Scroll(ContainerID, {
                                onComplete: function(){
                                    onCentering = 0;

                                    // Calcolo altezza immagine
                                    var margin = currImg.getStyle('margin-top').toInt() + currImg.getStyle('margin-bottom').toInt();
                                    var imgHeight = currImg.getSize().y + margin;
                                    // Calcolo larghezza immagine
                                    var margin = currImg.getStyle('margin-left').toInt() + currImg.getStyle('margin-right').toInt();
                                    var imgWidth = currImg.getSize().x + margin;

                                    // Imposto la posizione del div per l'anteprima immagine
                                    var posTop = currImg.getPosition().y - offsetPreviewTop;
                                    var posLeft = (-3) + currImg.getPosition($(ContainerID)).x - $(ContainerID).getScroll().x + $(ContainerID).getPosition().x - Math.floor((previewBoxWidth-imgWidth)/2);

                                    var boxDet = new Element('div',{
                                        'class': 'imgDetails',
                                        'events': {
                                            'click': function(){
                                                hideDetailsBox();
                                            }
                                        }
                                    }).setStyles({
                                        'opacity': '0',
                                        'top': posTop,
                                        'left': posLeft,
                                        'display': 'block'
                                    });
                                    var imgDet = new Element('label',{
                                        'html': currImg.get('alt')
                                    });
                                    var imgClone = currImg.clone();
                                    imgClone.addEvent('click',function(){
                                        Milkbox.showThisImage(imgClone.get('srcBig'),imgClone.get('titleBig'));
                                    });

			                        imgClone.inject(boxDet);
			                        imgDet.inject(boxDet);

			                        boxDet.inject(document.body);

                                    boxDet.set('tween', {duration: timeFadeInPreview});
                                    boxDet.tween('opacity', '0.93');
                                },
                                duration: tmpTIC
                            });
                            fxScroll.start(currImg.getPosition($(BoxPhotosID)).x - offsetScrollX,0);
                        }
                    },
                    'mouseover': function(){
                        this.setStyle('border','solid 1px #000000');
                    },
                    'mouseout': function(){
                        this.setStyle('border','solid 1px #cccccc');
                    },
                    'load' : function(){
                        // Questo evento non viene eseguito da explorer per un bug
                        var margin = this.getStyle('margin-left').toInt() + this.getStyle('margin-right').toInt();
                        totBoxWidth += this.getSize().x + margin;

                        // Ricavo la larghezza iniziale del box (valore iniziale -1)
                        if(currBoxWidth < 0)
                            currBoxWidth = $(BoxPhotosID).getStyle('width').toInt();

                        //alert("INNER - totBoxWidth: " + totBoxWidth);
                        //alert("INNER - currBoxWidth: " + currBoxWidth);

                        // Setto la larghezza del box con le foto se
                        // la larghezza iniziale è minore del conteggio attuale
                        if(currBoxWidth < totBoxWidth )
                            $(BoxPhotosID).setStyle('width',totBoxWidth);
                    }
                }
            });
            
            myImg.inject(BoxPhotosID);
        } // END for(i=0;i<numPhotos;i++)
    } // END if (numPhotos > 0)
}

function hideDetailsBox()
{
    $$('.imgDetails').each(function(el){
        el.set('tween', { onComplete: function(){ el.dispose(); } , duration: timeFadeOutPreview});
        el.tween('opacity', '0');
    });
}

function removeDetailsBox()
{
    $$('.imgDetails').each(function(el){
        el.dispose();
    });
}