// Use a namespace for our scripts.
var WMX = WMX || { };

WMX.Slideshow = Class.create({
	initialize: function(id, delay, maxThumbPerPage, imageClick, thumbnailClick){
		this.container = $(id);

		if (!this.container)
			return;

		this.delay = delay ? delay : 5;
		this.maxThumbPerPage = maxThumbPerPage ? maxThumbPerPage : 6;

		imageClick = imageClick ? imageClick : function (e) {		
			var pop = new wmxPopupWindow();
			pop.url = e.element().src;
			pop.width = e.element().getWidth() + 40;
			pop.height = e.element().getHeight() + 40;
			pop.name = "WMX.Slideshow";
			pop.open();
		};

		this.images = new Array();
		this.thumbs = new Array();

		this.mainImageContainer = this.container.select('.main')[0];
		this.mainMarks = this.container.select('.mainmark');
		this.thumbnailContainer = this.container.select('.thumbnails')[0];
		this.captionContainer = this.container.select('.caption')[0];
		this.stockDisclaimer = this.captionContainer.getAttribute('stockdisclaimer');
		this.actualDisclaimer = this.captionContainer.getAttribute('actualdisclaimer');

		this.mainImageContainer.select('img').each(this._addImage.bind(this, imageClick));

		if (this.thumbnailContainer)
			this.thumbnailContainer.select('div').each(this._addThumbnail.bind(this, thumbnailClick));

		this.images[0].setStyle({ display: 'block', opacity: 1.0 });
		this.mainMarks[0].style.zIndex = "101";

		this.currentImageIndex = 0;
		
		if (this.thumbs.size() < 1)
		{
			this.thumbnailContainer.setStyle({ display: 'none' });
		}

		if (this.thumbs.size() > this.maxThumbPerPage){	
			this.thumbPages = new Array();
			this.currentPageIndex = 0;
			this.totalPages = Math.ceil(this.images.size() / this.maxThumbnailsPerPage);

			this.thumbs.each(this._createThumbPages.bind(this));
			this.thumbPages[0].setStyle({ display: 'block', opacity: 1.0 });

			for (var i = 0, max = this.thumbPages.size(); i < max; i++)
			{
				this.thumbnailContainer.insert(this.thumbPages[i]);
			}
		}
		
		this.isPaused = false;
		this.noRotation = ( this.container.down('.noRotation') != null );
		this.lightWindowOpen = false;
		this.lightWindowFound = false;
		
		pagingContainer = this.container.up().next('.slideshow');
		if (pagingContainer != null)
		{
			paging = pagingContainer.down('.slideshowPaging');
			this.slideshowNav = paging.down('.slideshowNav');
			if (paging != null)
			{
				if (paging.down('span.prevPage') != null)
					paging.down('span.prevPage').observe('click', this._changePage.bind(this, -1));
				if (paging.down('span.prev') != null)
					paging.down('span.prev').observe('click', this._advanceImage.bind(this, -1));
				if (paging.down('span.play') != null)
					paging.down('span.play').observe('click', this._pause.bind(this, false));
				if (paging.down('span.pause') != null)
					paging.down('span.pause').observe('click', this._pause.bind(this, true));
				if (paging.down('span.next') != null)					
					paging.down('span.next').observe('click', this._advanceImage.bind(this, 1));
				if (paging.down('span.nextPage') != null)
					paging.down('span.nextPage').observe('click', this._changePage.bind(this, 1));					
				if (paging.down('a.lightwindow') != null)
					paging.down('a.lightwindow').observe('click', this._lightWindow.bind(this, true));
					
				this.photoCurrent = paging.down('span.photoCurrent');
				this.photoCount = paging.down('span.photoCount');				
			
				if (this.photoCurrent != null)
				{
					this.photoCurrent.innerHTML = this.currentImageIndex + 1;
				}
				
				if (this.photoCount != null)
				{
					this.photoCount.innerHTML = this.images.size();
				}
			}
		}
		
		this.contentWrapper = null;
		
		innerContent = this.container.up('.inner-content');
		if (innerContent != null)
		{
			this.contentWrapper = innerContent.up(0);
		}
		
		this.lightboxWrapper = this.container.up('#lightbox');
		
		this.start();
	},

	_createThumbPages: function(thumb, index) {
		var curPage = Math.floor(index / this.maxThumbPerPage);

		if (!this.thumbPages[curPage]) {
			this.thumbPages[curPage] = new Element('div').addClassName('page').setStyle({
				display: 'none',
				opacity: 0.0
			});
		}

		this.thumbPages[curPage].insert(this.thumbs[index]);
	},

	_addImage: function(imageClick, element, index) {
		element = $(element);

		this.images[index] = element;

		element.setStyle({
			display: 'none',
			opacity: 0.0
		});

		if (imageClick) {
			element.observe('click', imageClick);
		}
	},

	_addThumbnail: function(thumbnailClick, element, index) {
		element = $(element);
		this.thumbs[index] = element;

		if (!thumbnailClick)
		{
			element.observe('click', this._changeImage.bind(this, index));
		}
		else
		{
			element.observe('click', thumbnailClick);
		}
	},

	_getScope: function(prefix, index) {
		return this.container.id + prefix + index;
	},

	_getPageScope: function(index) {
		return this._getScope('_page_', index);
	},

	_getImageScope: function(index) {
		return this._getScope('_image_', index);
	},

	_changePage: function(direction) {
		var curPageIndex = Math.floor(this.currentImageIndex / this.maxThumbPerPage);
		var imageIndex = (curPageIndex + direction) * this.maxThumbPerPage;

		this._changeImage(imageIndex);
	},

	_changeStart: function(objects, newPageIndex, e) {
		objects[newPageIndex].setStyle({ display: 'block', opacity: 0.0 });
	},

	_changeEnd: function(objects, oldIndex, newIndex, e) {
		objects[oldIndex].setStyle({ display: 'none', opacity: 0.0 });
		objects[newIndex].setStyle({ display: 'block', opacity: 1.0 });
	},

	_changeImageEvent: function(e, newImageIndex) {
		if ((!this.noRotation) && (!this.isPaused) && (!this.lightWindowOpen))
		{
			if ((this.contentWrapper == null) || (this.contentWrapper.className.indexOf("selected") >= 0))
			{
				this._changeImage(newImageIndex);
			}
		}
	},

	_pause: function(isToBePaused) {
		this.isPaused = isToBePaused;
		this.lightWindowOpen = false;
		if (this.slideshowNav != null)
		{
			this.slideshowNav.className = this.isPaused?"slideshowNav paused":"slideshowNav";
		}
	},
	
	_lightWindow: function(isToBePaused) {
		this.lightWindowOpen = isToBePaused;
		if (!this.lightWindowFound)
		{
			this.lightWindowFound = true;
			$('lightwindow_title_bar_close_link').observe('click', this._lightWindow.bind(this, false));
			$('lightwindow_overlay').observe('click', this._lightWindow.bind(this, false));
		}
	},

	_advanceImage: function(direction) {
		newImageIndex = (this.currentImageIndex + direction + this.images.size()) % this.images.size();
		this._changeImage(newImageIndex);
	},

	_changeImage: function(newImageIndex) {		
		this.stop();

		if (!newImageIndex && newImageIndex != 0)
			newImageIndex = this.currentImageIndex + 1;

		if (newImageIndex >= this.images.size())
			newImageIndex = 0;

		if (newImageIndex < 0)
			newImageIndex = (this.thumbPages.size() - 1) * this.maxThumbPerPage;

		var newPageIndex = Math.floor(newImageIndex / this.maxThumbPerPage);

		if (this.currentPageIndex != newPageIndex && this.thumbPages) {
			Effect.Queues.get(this._getPageScope(this.currentPageIndex)).each(function(e) { e.cancel(); });
			Effect.Queues.get(this._getPageScope(newPageIndex)).each(function(e) { e.cancel(); });

			this.thumbnailContainer.insert(this.thumbPages[newPageIndex]);

			this.thumbPages[this.currentPageIndex].fade({ queue: { scope: this._getPageScope(this.currentPageIndex) } });
			this.thumbPages[newPageIndex].appear({
				queue: { scope: this._getPageScope(newPageIndex) },
				beforeStart: this._changeStart.bind(this, this.thumbPages, newPageIndex),
				afterFinish: this._changeEnd.bind(this, this.thumbPages, this.currentPageIndex, newPageIndex)
			});

			this.currentPageIndex = newPageIndex;
		}

		if (this.currentImageIndex != newImageIndex) {
			Effect.Queues.get(this._getImageScope(this.currentImageIndex)).each(function(e) { e.cancel(); });
			Effect.Queues.get(this._getImageScope(newImageIndex)).each(function(e) { e.cancel(); });

			this.mainImageContainer.insert(this.images[newImageIndex]);
			this.mainMarks[newImageIndex].style.zIndex = "101";
			this.mainMarks[this.currentImageIndex].style.zIndex = "100";

			this.images[this.currentImageIndex].fade({ queue: { scope: this._getImageScope(this.currentImageIndex) } });
			
			if (this.images[newImageIndex].getAttribute('isstockphoto') == 'True')
			{
				this.mainImageContainer.className = "main stockphoto"
				this.captionContainer.innerHTML = this.stockDisclaimer;
			}
			else
			{
				this.mainImageContainer.className = "main actualphoto"
				this.captionContainer.innerHTML = this.actualDisclaimer;
			}
			
			this.images[newImageIndex].appear({
				queue: { scope: this._getImageScope(newImageIndex) },
				beforeStart: this._changeStart.bind(this, this.images, newImageIndex),
				afterFinish: this._changeEnd.bind(this, this.images, this.currentImageIndex, newImageIndex)
			});

			this.currentImageIndex = newImageIndex;
		}
		
		if (this.photoCurrent != null)
		{
			this.photoCurrent.innerHTML = this.currentImageIndex + 1;
		}
	
		this.start();
	},

	start: function() {
		this.stop();
		this.executer = new PeriodicalExecuter(this._changeImageEvent.bind(this), this.delay);
	},

	stop: function() {
		if (this.executer)
			this.executer.stop();
	}
});