// Temp - debugging 
var echo = function(msg) {
	if($('outMsg') == null) {
		var out = new Element('div',{'id': 'outMsg','style': 'position:absolute; z-index:99999; padding:0 4px; background:#FFF; color:#000;'});
		out.inject($('globalWrapper'),'top');
	}
	$('outMsg').appendText(msg);
	var br = new Element('br');
	$('outMsg').grab(br);
};


var theSlider = new Class({
    Implements: Options,
    options: {
        container: null,
        content: null,
        leftLink: null,
        rightLink: null,
        intervalTime: 50,
        count: 0,
        baseSpeed: 11,
        speed: 0.8,
        margeLimite: 0,
        listItems: 'li',
        activeClass: 'li.act'
    },
    initialize: function(options) {
        this.setOptions(options);
        
        if(this.options.container==null) {
            return;
        }
        if(this.options.content==null) {
            return;
        }
        
        //this.options.content
        
        var containerSize = this.options.container.getSize();
        var contentSize = this.options.content.getSize();
        this.largeurMargeBase = contentSize.x;
        this.margeLimite = this.largeurMargeBase - containerSize.x;
        this.margeLimite = (-1*this.margeLimite);
        this.marge = 0;
        
        
        if(containerSize.x < contentSize.x) {
            this.options.leftLink.addEvent('mouseenter', function(){
                this.startLeft();
            }.bind(this));
            this.options.rightLink.addEvent('mouseenter', function(){
                this.startRight();
            }.bind(this));
            this.options.leftLink.addEvent('mouseleave', function(){
                this.moveStop();
            }.bind(this));
            this.options.rightLink.addEvent('mouseleave', function(){
                this.moveStop();
            }.bind(this));
            this.options.leftLink.addEvent('click', function(e){
                e.stop();
            }.bind(this));
            this.options.rightLink.addEvent('click', function(e){
                e.stop();
            }.bind(this));
        }
        
        // On trouve la vignette active et on y va
        this.goToAct();
    },
    moveStop: function() {
        this.sliderActive=false;
    },
    startLeft: function() {
        this.sliderActive=true;
        this.moveLeft();
    },
    moveLeft: function() {
        this.move(1);
        if(this.sliderActive) {
            (function() {
                this.moveLeft();
            }).delay(this.options.intervalTime,this);
        }
    },
    startRight: function() {
        this.sliderActive=true;
        this.moveRight();
    },
    moveRight: function() {
        this.move(-1);
        if(this.sliderActive) {
            (function() {
                this.moveRight();
            }).delay(this.options.intervalTime,this);
        }
    },
    move: function(sens, newMarge) {
        //echo('bob');
        var largeurMarge = this.marge + (sens * ( this.options.baseSpeed * this.options.speed));
        if(typeof(newMarge)!='undefined') {
            largeurMarge = newMarge;
        }
        //echo(this.marge+' ; '+largeurMarge+' ; '+sens);
        if(sens > 0) {
            if(largeurMarge > 0) {
                largeurMarge = 0;
            }
        } else {
            if(largeurMarge < this.margeLimite) {
                largeurMarge = this.margeLimite;
            }
        }
        this.marge = largeurMarge;
        this.options.content.setStyle('margin-left',this.marge+'px');
    },
    goToAct: function() {
        this.imgAct = this.options.content.getElement(this.options.activeClass);
        if(this.imgAct==null) {
            return;
        }
        var margeToAct = 0;
        var imgs = this.options.content.getElements(this.options.listItems);
        imgs.each(function(li,index) {
            if(!li.hasClass('act')) {
                var dim = li.getElement('a').getComputedSize({'styles':['padding','margin','border'],'mode':'horizontal'});
                margeToAct=margeToAct+dim.totalWidth;
                echo(dim.totalWidth);
            } else {
                return;
            }
        });
        margeToAct=margeToAct*-1;
        this.move(-1,margeToAct);
        echo('new:'+margeToAct);
    }
});


function initGallery() {
    var container = $('tx-sksimplegallery-pi1-list');
    if(container==null) {
        return;
    }
    var ul = container.getElement('ul');
    //var containerSize = container.getSize();
    
   // var myScroller = new Scroller(container, {area: 50,velocity: 0.1}).start();
    /*(function(){
        this.stop();
        this.start();
    }).periodical(1000, myScroller);*/
    
    
    var betonFraisSlider=new theSlider({
        container:container,
        content:ul,
        leftLink:$('leftArrow'),
        rightLink:$('rightArrow')
    });
    
    //var ulSize = ul.getSize();
    //var ulTween = new Fx.Tween(ul, {'property':'margin-left'})
    // fleche gauche
    /*
    $('leftArrow').addEvent('click',function(){
        var leftscroll = new Fx.Scroll('tx-sksimplegallery-pi1-list');
        leftscroll.toLeft();
    });
    
    // fleche droite
    $('rightArrow').addEvent('click',function(){
        var rightscroll = new Fx.Scroll('tx-sksimplegallery-pi1-list');
        rightscroll.toRight();
    });
    */
}


function mooScroll() {
  var scrollcontent = new MooScroll( {
      'selector': '#mainLeftInner',
      'disabledOpacity' : '0'
  });
}



window.addEvent('domready',function() {
    initGallery();
    
    //mooScroll();
});