var Arpe_Gallery = new Class({


	Implements: Options,
	options: {
		images: null,
		nbThumbnails: 5
	},
	
	initialize: function(options)
	{
		this.setOptions(options);
	},
	
	_createThumbnail: function(src)
	{
		var wrapper = new Element("div").addClass("ArpeGalleryThumbnailWrapper");
		var thumbnail = new Element("img").addClass('ArpeGalleryThumbnail').addEvent('click', this._setImage.bind(this))
			.injectInside(wrapper);
			
		thumbnail.src = src;
				
		return wrapper;
	},
	
	_setImage: function(event)
	{
		this.imgContainer.src = event.target.src;
	},
	
	_drawThumbnails: function()
	{
	
		this.thumbnailsContainer.set("html", "");
		
		
		var prevArrow = new Element("div").addClass("ArpeGalleryPreviousThumb").addEvent('click', this.previous.bind(this));
		var nextArrow = new Element("div").addClass("ArpeGalleryNextThumb").addEvent('click', this.next.bind(this));
		
		prevArrow.injectInside(this.thumbnailsContainer);
		
		if (this.index == 0)
			prevArrow.setStyle('visibility', 'hidden');
		
		var i = this.index;
		
		for (; i < this.options.images.length && i < this.index+this.options.nbThumbnails; i++)
			this._createThumbnail(this.options.images[i]).injectInside(this.thumbnailsContainer);
		
		nextArrow.injectInside(this.thumbnailsContainer);
		
		if (i >= this.options.images.length)
			nextArrow.setStyle('visibility', 'hidden');
			
	},
	
	open: function()
	{
		this.background = new Element('div').addClass('ArpeGalleryBackground');
		this.gallery = new Element('div').addClass('ArpeGalleryBox');
		this.imgContainer = new Element('img').addClass('ArpeGalleryImgContainer');
		this.background.injectInside(document.body);
		this.gallery.injectInside(document.body);
		this.imgContainer.injectInside(this.gallery);
		this.imgContainer.src = this.options.images[0];
		this.closeButton = new Element('div').addClass('ArpeGalleryBoxClose').injectInside(this.gallery).addEvent('click', this.close.bind(this));
		
		this.thumbnailsContainer = new Element("div").addClass('ArpeGalleryThumnailContainer').injectInside(this.gallery);
		
		this.index = 0;
		this._drawThumbnails();
			
	},
	
	previous: function() {
		this.index--;
		this._drawThumbnails();
	},
	
	next: function() {
		this.index++;
		this._drawThumbnails();
	},
	
	close: function() {
		this.background.setStyle("display", "none");	
		this.gallery.setStyle("display", "none");
	}

});

var Arpe_SlideShow = new Class({

	Implements: Options,
	options: {
		container: null,
		thumbnailsContainer: null,
		duration: 1500,
		playing: true,
		onImageChange: null,
		autoCenter: true
	},
	
	initialize: function(options)
	{
		this.setOptions(options);
		this.currentIndex = 0;
		this.images = this.options.container.getElements('img');
			
		for (var i = 0; i < this.images.length; i++)
		{
		    if(i > 0)
		    {
		      this.images[i].set('opacity',0);
		      this.images[i].setStyle("display", "block");
		      //on recentre avec le premier changement d'image
		      this._center.delay(this.options.duration+100, this, this.images[i]);
		    }
		    else
		    {
		    	this.images[i].setStyle("display", "block");
		    	this.images[i].addEvent("load", this._center.bind(this, this.images[i]));
		    }
		}
		  
		if (this.options.thumbnailsContainer != null)
		{
			this.thumbnails = this.options.thumbnailsContainer.getElements('img');
			
			for (var i = 0; i < this.thumbnails.length; i++)
				this.thumbnails[i].addEvent('click', this.setImage.bind(this, i));
		}
		
		if (this.options.playing)
			this.interval = this.show.periodical(this.options.duration, this);
			
		if (this.options.onImageChange != null)
			this.options.onImageChange(this.currentIndex, this.images[this.currentIndex]);
	},
	
	_center: function(image)
	{
	
		if (this.options.autoCenter)
		{
	
			if (image.getSize().x == 0 || image.getSize().y == 0)
			{
				this._center.delay(50, this._center.bind(this, image));
				return;
			}
		
			image
				.setStyle("left", (this.options.container.getSize().x.toInt()-image.getSize().x.toInt())/2)
				.setStyle("top", (this.options.container.getSize().y.toInt()-image.getSize().y.toInt())/2)
				.setStyle("max-height", this.options.container.getSize().y.toInt());
		}
	},
	
	setImage: function(index)
	{
		$clear(this.interval);
		this._center(this.images[this.currentIndex]);
		this.images[this.currentIndex].fade('out');
		this.images[this.currentIndex = index].fade('in');
		
		if (this.options.playing)
			this.interval = this.show.periodical(this.options.duration, this);
			
		if (this.options.onImageChange != null)
			this.options.onImageChange(this.currentIndex, this.images[this.currentIndex]);
	},
	
	play: function()
	{
		this.options.playing = true;
		this.interval = this.show.periodical(this.options.duration, this);
	},
	
	pause: function()
	{
		this.options.playing = false;
		$clear(this.interval);
	},
	
	show: function()
	{
	    this.images[this.currentIndex].fade('out');
	    this.currentIndex = (this.currentIndex+1)%this.images.length;

		this.setImage(this.currentIndex);
	},
	
	isPlaying: function()
	{
		return this.options.playing;
	},
	
	destroy: function()
	{
		$clear(this.interval);
	}
	
});

var Arpe_PopUp = new Class({

	Implements: Options,
	options: {
		container: null
	},
	
	initialize: function(options)
	{
		this.setOptions(options);
		
		this.background = new Element("div")
			.setStyle("position", "absolute")
			.setStyle("width", "100%")
			.setStyle("height", "100%")
			.setStyle("top", "0")
			.setStyle("left", "0")
			.setStyle("background-color", "black")
			.setStyle("opacity", "0.3")
			.setStyle("display", "none")
			.setStyle("z-index", 100000)
			.inject($(document.body));
			//.inject(this.options.container, 'before');
			
		this.options.container.setStyle("opacity", "0");
		this.options.container.inject($(this.background), 'after');
		
		this._redraw();
	},
	
	show: function()
	{
		if (isIE)
			this.options.container.setStyle("display", "block");
	
		this.options.container.setStyle("z-index", 100001);
	
		this.background.setStyle("display", "block");
	
		this.timer = this._redraw.periodical(70, this);
		
		this.options.container.setStyle("visibility", "hidden");	
		this.options.container.fade("in");
	},
	
	hide: function()
	{
		if (isIE)
			this.options.container.setStyle("display", "none");
			
		this.options.container.fade("hide");
		this.background.setStyle("display", "none");
		
		$clear(this.timer);
	},
	
	_redraw: function()
	{
		this.background.setStyle("top", $(window).getScroll().y+"px");
		this.background.setStyle("height", $(window).getSize().y+"px");
	
		this.options.container.setStyle("position", "absolute")
			.setStyle("left", (this.background.getSize().x.toInt()-this.options.container.getSize().x.toInt())/2)
			.setStyle("top", (this.background.getSize().y.toInt()-this.options.container.getSize().y.toInt())/2+$(window).getScroll().y);
	}

});

var Arpe_Loader = new Class({

	Implements: Options,
	options: {
		container: null,
		label: "Chargement...",
		cssClass: null,
		yOffset: 0,
		xOffset: 0,
		opacity: 0.5,
		backgroundColor: "#EEEEEE"
	},
	
	initialize: function(options)
	{
		this.setOptions(options);
	
		this.overlay = new Element("div")
			.setStyle("position", "absolute")
			.setStyle("left", this.options.xOffset)
			.setStyle("top", this.options.yOffset)
			.setStyle("opacity", this.options.opacity)
			.setStyle("background-color", this.options.backgroundColor);
		
		if (this.options.cssClass == null)
		{
			this.loderElement = new Element("b")
				.setStyle("position", "absolute")
				.setStyle("margin-left", this.options.xOffset)
				.setStyle("margin-top", this.options.yOffset)
				.set("text", this.options.label)
				.setStyle("visibility", "hidden");
		}
		else
		{
			this.loderElement = new Element("div")
				.addClass(this.options.cssClass)
				.setStyle("margin-left", this.options.xOffset)
				.setStyle("margin-top", this.options.yOffset)
				.setStyle("visibility", "hidden");
		
		}
			
		this.computedCenter = new Arpe_ComputedStyle(
			{
				element: this.loderElement,
				type: "position",
				subtype: "inherit-both-center",
				condition: "true"
			
			});
			
	},
	
	show: function()
	{
	
		if (this.options.container.getSize().x > 20 && this.options.container.getSize().y > 20)
		{
			this.overlay.setStyle("width", this.options.container.getSize().x)
				.setStyle("height", this.options.container.getSize().y)
				.setStyle("opacity", "0")
				.injectInside(this.options.container)
				.fade(this.options.opacity);
				
			this.loderElement.injectInside(this.options.container)
				.fade("in");
				
			this.computedCenter._display();
		}
	},
	
	hide: function()
	{
		this.overlay.dispose();
		
		if (this.labelElement != null)
		{
			this.labelElement.dispose();
			this.labelElement.fade("out");
		}
	}

});


var Arpe_Twitter = new Class({

	Implements: Options,
	options: {
		user: "",
		count: 5,
		container: null
	},
	
	initialize: function(options)
	{
		this.setOptions(options);
		
		new Request.JSONP({url: 'http://twitter.com/status/user_timeline/'+this.options.user+'.json', onSuccess:this.show.bind(this), method:"get", data:{count:this.options.count}}).send();
	},
	
	show: function(result)
	{
		var content = "";
	
		for (var i = 0; i < result.length; i++)
		{
			result[i].text = this._linkify(result[i].text);
			content += arpe.getChunk("_arpe_internal_twitter", result[i]);
		}
		
		this.options.container.set("html", content);
	},
	
	_linkify: function(text)
	{
		return text.replace(/(https?:\/\/[\w\-:;?&=+.%#\/]+)/gi, '<a href="$1">$1</a>')
		               .replace(/(^|\W)@(\w+)/g, '$1<a href="http://twitter.com/$2">@$2</a>')
		               .replace(/(^|\W)#(\w+)/g, '$1#<a href="http://search.twitter.com/search?q=%23$2">$2</a>');
	}


});