/*

    This file is part of JonDesign's SmoothGallery v2.0.

    JonDesign's SmoothGallery is free software; you can redistribute it and/or modify

    it under the terms of the GNU General Public License as published by

    the Free Software Foundation; either version 3 of the License, or

    (at your option) any later version.

    JonDesign's SmoothGallery is distributed in the hope that it will be useful,

    but WITHOUT ANY WARRANTY; without even the implied warranty of

    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License

    along with JonDesign's SmoothGallery; if not, write to the Free Software

    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA

    Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)

    Contributed code by:

    - Christian Ehret (bugfix)

	- Nitrix (bugfix)

	- Valerio from Mad4Milk for his great help with the carousel scrolling and many other things.

	- Archie Cowan for helping me find a bugfix on carousel inner width problem.

	- Tomocchino from #mootools for the preloader class

	Many thanks to:

	- The mootools team for the great mootools lib, and it's help and support throughout the project.

*/

// declaring the class

var gallery = {

	initialize: function(element, options) {

		this.setOptions({

			showArrows: true,

			showCarousel: true,

			showInfopane: true,

			embedLinks: true,

			fadeDuration: 500,

			timed: false,

			delay: 9000,

			preloader: true,

			preloaderImage: true,

			preloaderErrorImage: true,

			/* Data retrieval */

			manualData: [],

			populateFrom: false,

			populateData: true,

			destroyAfterPopulate: true,

			elementSelector: "div.imageElement",

			titleSelector: "h3",

			subtitleSelector: "p",

			linkSelector: "a.open",

			imageSelector: "img.full",

			thumbnailSelector: "img.thumbnail",

			defaultTransition: "fade",

			/* InfoPane options */

			slideInfoZoneOpacity: 1.0,

			slideInfoZoneSlide: true,

			/* Carousel options */

			carouselMinimizedOpacity: 0.4,

			carouselMinimizedHeight: 20,

			carouselMaximizedOpacity: 0.9,

			thumbHeight: 75,

			thumbWidth: 100,

			thumbSpacing: 13,

			thumbIdleOpacity: 0.2,

			showCarouselLabel: true,

			thumbCloseCarousel: true,

			useThumbGenerator: false,

			thumbGenerator: 'resizer.php',

			useExternalCarousel: false,

			carouselElement: false,

			carouselHorizontal: true,

			activateCarouselScroller: true,

			carouselPreloader: true,

			textPreloadingCarousel: 'Loading...',

			/* CSS Classes */

			baseClass: 'jdGallery',

			withArrowsClass: 'withArrows',

			/* Plugins: HistoryManager */

			useHistoryManager: false,

			customHistoryKey: false

		}, options);

		this.fireEvent('onInit');

		this.currentIter = 0;

		this.lastIter = 0;

		this.maxIter = 0;

		this.galleryElement = element;

		this.galleryData = this.options.manualData;

		this.galleryInit = 1;

		this.galleryElements = Array();

		this.thumbnailElements = Array();

		this.galleryElement.addClass(this.options.baseClass);

		this.populateFrom = element;

		if (this.options.populateFrom)

			this.populateFrom = this.options.populateFrom;		

		if (this.options.populateData)

			this.populateData();

		element.style.display="block";

		if (this.options.useHistoryManager)

			this.initHistory();

		if (this.options.embedLinks)

		{

			this.currentLink = new Element('a').addClass('open').setProperties({

				href: '#',

				title: ''

			}).injectInside(element);

			if ((!this.options.showArrows) && (!this.options.showCarousel))

				this.galleryElement = element = this.currentLink;

			else

				this.currentLink.setStyle('display', 'none');

		}

		this.constructElements();

		if ((this.galleryData.length>1)&&(this.options.showArrows))

		{

			var leftArrow = new Element('a').addClass('left').addEvent(

				'click',

				this.prevItem.bind(this)

			).injectInside(element);

			var rightArrow = new Element('a').addClass('right').addEvent(

				'click',

				this.nextItem.bind(this)

			).injectInside(element);

			this.galleryElement.addClass(this.options.withArrowsClass);

		}

		this.loadingElement = new Element('div').addClass('loadingElement').injectInside(element);

		if (this.options.showInfopane) this.initInfoSlideshow();

		if (this.options.showCarousel) this.initCarousel();

		this.doSlideShow(1);

	},

	populateData: function() {

		currentArrayPlace = this.galleryData.length;

		options = this.options;

		var data = $A(this.galleryData);

		data.extend(this.populateGallery(this.populateFrom, currentArrayPlace));

		this.galleryData = data;

		this.fireEvent('onPopulated');

	},

	populateGallery: function(element, startNumber) {

		var data = [];

		options = this.options;

		currentArrayPlace = startNumber;

		element.getElements(options.elementSelector).each(function(el) {

			elementDict = {

				image: el.getElement(options.imageSelector).getProperty('src'),

				number: currentArrayPlace,

				transition: this.options.defaultTransition

			};

			elementDict.extend = $extend;

			if ((options.showInfopane) | (options.showCarousel))

				elementDict.extend({

					title: el.getElement(options.titleSelector).innerHTML,

					description: el.getElement(options.subtitleSelector).innerHTML

				});

			if (options.embedLinks)

				elementDict.extend({

					link: el.getElement(options.linkSelector).href||false,

					linkTitle: el.getElement(options.linkSelector).title||false,

					linkTarget: el.getElement(options.linkSelector).getProperty('target')||false

				});

			if ((!options.useThumbGenerator) && (options.showCarousel))

				elementDict.extend({

					thumbnail: el.getElement(options.thumbnailSelector).getProperty('src')

				});

			else if (options.useThumbGenerator)

				elementDict.extend({

					thumbnail: options.thumbGenerator + '?imgfile=' + elementDict.image + '&max_width=' + options.thumbWidth + '&max_height=' + options.thumbHeight

				});

			data.extend([elementDict]);

			currentArrayPlace++;

			if (this.options.destroyAfterPopulate)

				el.remove();

		});

		return data;

	},

	constructElements: function() {

		el = this.galleryElement;

		this.maxIter = this.galleryData.length;

		var currentImg;

		for(i=0;i<this.galleryData.length;i++)

		{

			var currentImg = new Fx.Styles(

				new Element('div').addClass('slideElement').setStyles({

					'position':'absolute',

					'left':'0px',

					'right':'0px',

					'margin':'0px',

					'padding':'0px',

					'backgroundPosition':"center center",

					'opacity':'0'

				}).injectInside(el),

				'opacity',

				{duration: this.options.fadeDuration}

			);

			if (this.options.preloader)

			{

				currentImg.source = this.galleryData[i].image;

				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);

			} else {

				currentImg.element.setStyle('backgroundImage',

									"url('" + this.galleryData[i].image + "')");

			}

			this.galleryElements[parseInt(i)] = currentImg;

		}

	},

	destroySlideShow: function(element) {

		var myClassName = element.className;

		var newElement = new Element('div').addClass('myClassName');

		element.parentNode.replaceChild(newElement, element);

	},

	startSlideShow: function() {

		this.fireEvent('onStart');

		this.loadingElement.style.display = "none";

		this.lastIter = this.maxIter - 1;

		this.currentIter = 0;

		this.galleryInit = 0;

		this.galleryElements[parseInt(this.currentIter)].set({opacity: 1});

		if (this.options.showInfopane)

			this.showInfoSlideShow.delay(1000, this);

		var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);

		if (this.options.showCarousel&&(!this.options.carouselPreloader))

			this.carouselBtn.setHTML(textShowCarousel).setProperty('title', textShowCarousel);

		this.prepareTimer();

		if (this.options.embedLinks)

			this.makeLink(this.currentIter);

	},

	nextItem: function() {

		this.fireEvent('onNextCalled');

		this.nextIter = this.currentIter+1;

		if (this.nextIter >= this.maxIter)

			this.nextIter = 0;

		this.galleryInit = 0;

		this.goTo(this.nextIter);

	},

	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);

	},

	goTo: function(num) {

		this.clearTimer();

		if(this.options.preloader)

		{

			this.galleryElements[num].load();

			if (num==0)

				this.galleryElements[this.maxIter - 1].load();

			else

				this.galleryElements[num - 1].load();

			if (num==(this.maxIter - 1))

				this.galleryElements[0].load();

			else

				this.galleryElements[num + 1].load();

		}

		if (this.options.embedLinks)

			this.clearLink();

		if (this.options.showInfopane)

		{

			this.slideInfoZone.clearChain();

			this.hideInfoSlideShow().chain(this.changeItem.pass(num, this));

		} else

			this.currentChangeDelay = this.changeItem.delay(500, this, num);

		if (this.options.embedLinks)

			this.makeLink(num);

		this.prepareTimer();

		/*if (this.options.showCarousel)

			this.clearThumbnailsHighlights();*/

	},

	changeItem: function(num) {

		this.fireEvent('onStartChanging');

		this.galleryInit = 0;

		if (this.currentIter != num)

		{

			for(i=0;i<this.maxIter;i++)

			{

				if ((i != this.currentIter)) this.galleryElements[i].set({opacity: 0});

			}

			gallery.Transitions[this.galleryData[num].transition].pass([

				this.galleryElements[this.currentIter],

				this.galleryElements[num],

				this.currentIter,

				num], this)();

			this.currentIter = num;

		}

		var textShowCarousel = formatString(this.options.textShowCarousel, num+1, this.maxIter);

		if (this.options.showCarousel)

			this.carouselBtn.setHTML(textShowCarousel).setProperty('title', textShowCarousel);

		this.doSlideShow.bind(this)();

		this.fireEvent('onChanged');

	},

	clearTimer: function() {

		if (this.options.timed)

			$clear(this.timer);

	},

	prepareTimer: function() {

		if (this.options.timed)

			this.timer = this.nextItem.delay(this.options.delay, this);

	},

	doSlideShow: function(position) {

		if (this.galleryInit == 1)

		{

			imgPreloader = new Image();

			imgPreloader.onload=function(){

				this.startSlideShow.delay(10, this);

			}.bind(this);

			imgPreloader.src = this.galleryData[0].image;

			if(this.options.preloader)

				this.galleryElements[0].load();

		} else {

			if (this.options.showInfopane)

			{

				if (this.options.showInfopane)

				{

					this.showInfoSlideShow.delay((500 + this.options.fadeDuration), this);

				} else

					if ((this.options.showCarousel)&&(this.options.activateCarouselScroller))

						this.centerCarouselOn(position);

			}

		}

	},

	createCarousel: function() {

		var carouselElement;

		if (!this.options.useExternalCarousel)

		{

			var carouselContainerElement = new Element('div').addClass('carouselContainer').injectInside(this.galleryElement);

			this.carouselContainer = new Fx.Styles(carouselContainerElement, {transition: Fx.Transitions.expoOut});

			this.carouselContainer.normalHeight = carouselContainerElement.offsetHeight;

			this.carouselContainer.set({'opacity': this.options.carouselMinimizedOpacity, 'top': (this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight)});

			this.carouselBtn = new Element('a').addClass('carouselBtn').setProperties({