///<reference path="mootools.v1.11.js" />
var Img = new Class({
    initialize: function(options){
        this.setOptions({
            fadeDuration: 500,
            diaporamaDelay : 4000,
            curposition : 0,
            maxiter: 1,
            nextItemURL : false
		}, options);		
		this.fireEvent('oninit');
		this.currentIter = this.options.curposition > 0 ? this.options.curposition : 0;
		this.lastIter = 0;
		this.galleryElements = [];
		this.maxIter = this.options.maxiter;
		this.populateData();
		this.constructElements();
		$("images").addEvent("click",this.nextItem.bind(this));
		this.goTo(this.options.curposition);
		
		$("play").addEvent("click", this.startDiaporama.bind(this));
		$("stop").addEvent("click", this.stopDiaporama.bind(this));
    },
    populateData: function() {
		this.galleryData = this.populateGallery($("numbers"));
		this.fireEvent('onPopulated');
	},
	constructElements: function() {
		this.maxIter = this.galleryData.length;
		
		this.galleryData.each(function (el,i){
		    var currentImg;
		    var container = new Element('div').addClass('slideElement').setStyles({
				    'width':'100%',
				    'height':'100%',
					'backgroundPosition':"center center",
					'backgroundRepeat':'no-repeat',
					'opacity':'0',
					'display':'none'
				}).injectInside($("images"));
			currentImg = new Fx.Styles(
				container,
				'opacity',
				{duration: this.options.fadeDuration}
			);
		    currentImg.source = this.galleryData[i].src;
		    currentImg.copy = this.galleryData[i].copy;
		    currentImg.container = container;
		    currentImg.link = this.galleryData[i].link;
			currentImg.loaded = false;
			currentImg.load = function(imageStyle) {
					if (!imageStyle.loaded)	{
						new Asset.image(imageStyle.source, {
		                            'onload'  : function(img){
													img.element.setStyle(
													'backgroundImage',
													"url('" + img.source + "')")
													img.loaded = true;
												}.bind(this, imageStyle)
						});
					}
				}.pass(currentImg, this);
			this.galleryElements.push(currentImg);
		}, this);
	},
    populateGallery: function(element) {
		var data = [];
		$ES("a.number", element).each(function(el,it) {
	        
			data.push({"src" : el.getProperty('title').split(",")[0],"link" : el, "copy" :  el.getProperty('title').split(",")[1]});
			el.setProperty('title', 'image n°'+(it+1));
			el.setProperty('href', 'javascript:void(0);');
			el.addEvent("click", this.goTo.pass(it,this));
		},this);
		return data;
	},
	goTo: function(num) {
	    if (this.galleryElements.length <= 1) return;
	    if($chk(this.galleryElements[num])) this.galleryElements[num].load();
		if (num==0){
			if($chk(this.galleryElements[num])) this.galleryElements[this.maxIter - 1].load();
		}else{
			if($chk(this.galleryElements[num - 1]))this.galleryElements[num - 1].load();
	    }
		if (num==(this.maxIter - 1)){
			if($chk(this.galleryElements[0])) this.galleryElements[0].load();
		}else{
			if($chk(this.galleryElements[num + 1]))this.galleryElements[num + 1].load();
			}
		this.changeItem(num);
	},
	changeItem: function(num) {
		this.fireEvent('onStartChanging');
		this.galleryInit = 0;
		$ES(".active",$("numbers")).each( function (el) {el.removeClass("active")});
		if (this.currentIter != num)
		{
			for(i=0;i<this.maxIter;i++)
			{
				if ((i != this.currentIter)) this.galleryElements[i].set({opacity: 0});
			}
			Img.Transitions.fade.pass([
				this.galleryElements[this.currentIter]?this.galleryElements[this.currentIter]:new Fx.Style(),
				this.galleryElements[num],
				this.currentIter,
				num], this)();
			
			this.currentIter = num;
		}
		if(this.galleryElements[this.currentIter]) this.galleryElements[this.currentIter].link.addClass("active");	
		this.fireEvent('onChanged');
	},  
	nextItem: function() {
		this.fireEvent('onNextCalled');
		this.nextIter = (this.currentIter+1 )% this.maxIter;
		
		this.galleryInit = 0;
		this.goTo(this.nextIter);
		this.startDiaporama();
	},
	prevItem: function() {
		this.fireEvent('onPreviousCalled');
		this.nextIter = this.currentIter-1;
		if (this.nextIter <= -1)
			this.nextIter = this.maxIter - 1;
		this.galleryInit = 0;
		this.goTo(this.nextIter);
		if($chk(this.options.enablediaporama)) this.startDiaporama();
	},
	startDiaporama: function () {
	    if($chk(this.diaporama)) $clear(this.diaporama);
	    this.diaporama = this.nextItem.delay(this.options.diaporamaDelay,this);
	    $("play").addClass("active");
	    $("stop").removeClass("active");
	    
	},
	stopDiaporama : function () {
	    if($chk(this.diaporama)) $clear(this.diaporama);
	    $("stop").addClass("active");
	    $("play").removeClass("active");
	    
	}
});

Img.implement(new Events);
Img.implement(new Options);

Img.Transitions = new Abstract ({
	fade: function(oldFx, newFx, oldPos, newPos){
		$("images").setStyle("background-image","url("+oldFx.source+")");
		if($chk(newFx.copy)) $E("div.copyright","td#Copy").setText(newFx.copy);
		oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
		oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
		oldFx.set({opacity: 0});
		oldFx.container.setStyle("display","none");
		newFx.container.setStyle("display","block");
		
		newFx.start({opacity: 1});
		
	},
	crossfade: function(oldFx, newFx, oldPos, newPos){
		oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
		oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
		newFx.start({opacity: 1});
		oldFx.start({opacity: 0});
	},
	fadebg: function(oldFx, newFx, oldPos, newPos){
		oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
		oldFx.options.duration = newFx.options.duration = this.options.fadeDuration / 2;
		oldFx.start({opacity: 0}).chain(newFx.start.pass([{opacity: 1}], newFx));
	},
	slideLegend: function(Fx){
	    Fx.start({'opacity': [0, this.options.slideInfoZoneOpacity], 'height': [0, this.slideInfoZone.normalHeight]});
	},
	showLegend: function(Fx, bool){
	    if(bool) Fx.element.setStyle('opacity',100);
	    else Fx.element.setStyle('opacity',0);
	},
	showOnTop : function(Fx){
	    
	}
});