/*  iGallery, verion 0.1
 *  (c) 2007 Lionel Tardy
 *
 *  this code is released under Creative Common license
 *  
 *  you can:
 *    - copy and distribute this code
 *    - modify it
 *  
 *  you can't
 *    - use it for commercial purpose
 *
 *	you muss
 *	  - credit the original author (Lionel Tardy)
 *
 *  http://creativecommons.org/licenses/by-nc-sa/2.5/ch/
 *
/*--------------------------------------------------------------------------*/

/*
  Class: iGallery
    Create an interactiv image gallery in a target layer

  Parameters:
	container	- string				- the layer within the gallery is created
	width		- integer				- maximum width of the gallery
	height		- integer				- maximum height of the gallery
	delay		- integer				- duration of a frame in seconds. Set 0 to have manual transitions
	control		- boolean				- display controls under the gallery (< >)
	number		- boolean				- display image number (1/3)
	align		- left, center, right	- set the alignement of the gallery within the layer
	images		- array					- a array of images
	imgsize		- array					- a array of images size "width,height"
*/
var iGallery = Class.create();

iGallery.prototype = {
	initialize: function(container, width, height, delay, control, number, align, images, imgsize) {
		//debug(images);
		this.container 	= container;
		this.width		= width;
		this.height		= height;
		this.delay		= delay;
		this.images		= images;
		this.control	= control;
		this.number		= number;
		this.align		= align;
		this.imgsize	= imgsize;
		this.currentImg	= 0;
		this.id			= "gallery-"+container;

		preload_image_object = new Array()

		for(i=0; i<=images.length; i++)
		{
			preload_image_object[i] 	= new Image(10,10);
         	preload_image_object[i].src =  general_serverUrl+"/"+images[i];
    	}

		/*$(container).style.width 	= width;
		$(container).style.height 	= height;
		*/
		var img				= document.createElement("img");
		img.id 				= this.id+"-image";
		img.style.width		= imgsize[0].split(',')[0]+"px";
		img.style.height	= imgsize[0].split(',')[1]+"px";
		img.src				= general_serverUrl+"/"+images[0];
		img.style.cursor	= 'pointer';
		this.img = img;

		var infos = "";
		if (this.number == true) infos = '<span id="'+this.id+'-title">1/'+(this.images.length)+'</span>';

		if (control == true)
		{
			var cLDiv 			= document.createElement("div");
			cLDiv.id 			= this.id+"-cl";
			cLDiv.style.cursor	= 'pointer';

			
			var cRDiv 			= document.createElement("div");
			cRDiv.id 			= this.id+"-cr";
			cRDiv.innerHTML		= "&gt;"; 
			cRDiv.style.cursor	= 'pointer';

			infos = '<span style="cursor:pointer;" id="'+this.id+'-cr">&lt;&nbsp;&nbsp;</span>' + infos + '<span style="cursor:pointer;" id="'+this.id+'-cl">&nbsp;&nbsp;&gt;</span>';

		}

		var imgDiv 			= document.createElement("div");
		imgDiv.id 			= this.id;
		imgDiv.style.width	= width+"px";
		imgDiv.style.height	= height+"px";
		imgDiv.style.textAlign = align;
		imgDiv.style.overflow	= 'hidden';

		imgDiv.appendChild(img);
		$(container).appendChild(imgDiv);
		
		new Insertion.Bottom($(this.container), "<div class='controle'>"+infos+"</div>");
		
		this.eventremovePeriode = this.removePeriode.bindAsEventListener(this);
    	this.eventaddPeriod		= this.addPeriod.bindAsEventListener(this);
		this.eventmSwitchImage	= this.mSwitchImage.bindAsEventListener(this);
		this.eventmBackImage	= this.mBackImage.bindAsEventListener(this);
		
		Event.observe(this.id, "click", this.eventmSwitchImage);
		if (control == true)
		{
			Event.observe(this.id+"-cl", "click", this.eventmSwitchImage);
			Event.observe(this.id+"-cr", "click", this.eventmBackImage);
		}
		
		Event.observe(this.id, "mouseover", this.eventremovePeriode);
		Event.observe(this.id, "mouseout", this.eventaddPeriod);

		if (delay > 0) this.addPeriod();
		
	},

	addPeriod: function()
	{
		if (this.delay != 0) this.autoChange = new PeriodicalExecuter(this.switchImage.bind(this), this.delay);
	},
	
	removePeriode: function()
	{
		this.autoChange.stop();
	},
	
	mSwitchImage: function()
	{
		this.currentImg++;
		if (this.currentImg > (this.images.length-1)) this.currentImg = 0;
		this.img.src			= general_serverUrl+"/"+this.images[this.currentImg];
		this.img.style.width 	= this.imgsize[this.currentImg].split(',')[0]+"px";
		this.img.style.height 	= this.imgsize[this.currentImg].split(',')[1]+"px";
		if (this.number == true) $(this.id+'-title').update((this.currentImg+1)+"/"+(this.images.length));
	},
	mBackImage : function()
	{
		this.currentImg--;
		if (this.currentImg < 0) this.currentImg = this.images.length-1;
		this.img.src			= general_serverUrl+"/"+this.images[this.currentImg];
		this.img.style.width 	= this.imgsize[this.currentImg].split(',')[0]+"px";
		this.img.style.height 	= this.imgsize[this.currentImg].split(',')[1]+"px";
		if (this.number == true) $(this.id+'-title').update((this.currentImg+1)+"/"+(this.images.length));
	},
	
	switchImage: function()
	{
		this.currentImg++;
		if (this.currentImg > this.images.length-1) this.currentImg = 0;
		this.img.src			= general_serverUrl+"/"+this.images[this.currentImg];
		this.img.style.width 	= this.imgsize[this.currentImg].split(',')[0]+"px";
		this.img.style.height 	= this.imgsize[this.currentImg].split(',')[1]+"px";
		if (this.number == true) $(this.id+'-title').update((this.currentImg+1)+"/"+(this.images.length));
	}
};