var SlideShow = {
	slides: [],	//array of photos' id
	srcs: [],	//array of big photos' src
	images: [],
	pages: 1,	//total pages
	page: 1,	//curent page
	rows: 24,	//photos number per page
	slide: 0,	//current slide
	postId: 0,	//post id
	showCmd: 'next', 	//last show command
	temp: '0',			//include temp photos?
	
	setPages: function(pages) {
		this.pages = pages;
		this.resetPagination();
	},
	
	setCurrentPage: function(page) {
		this.page = page;
		this.resetPagination();
	},
	
	resetPagination: function() {
		Element.hide('prev-photo-page'); Element.hide('next-photo-page');
		if (this.page > 1)
			Element.show('prev-photo-page');
		if (this.page < this.pages)
			Element.show('next-photo-page');
	},
	
	setPostId: function(postId) {
		this.postId = postId;
	},
	
	addSlide: function(id) {
		this.slides.push(id);
	},
	
	addSlideSrc: function(src) {
		this.srcs.push(src);
	},
	
	setCurrentSlide: function(id) {
		if (this.slides.indexOf(id) == -1)
			return false;
		this.slide = id;
		return true;
	},
	
	emptySlides: function() {
		this.slides = [];
		this.srcs = [];
		this.images = [];
		// this.showCmd = 'next';
	},
	
	init: function() {
		this.initPosition();
		this.initActions();
	},
	
	initActions: function() {
		//Prev/Next on large photo
		Element.hide('slide-prev'); Element.hide('slide-next');
		Event.observe('slide-prev' , 'click'   , function(e) { this.prev(); Event.stop(e); }.bind(this));
		Event.observe('slide-next' , 'click'   , function(e) { this.next(); Event.stop(e); }.bind(this));
		//pagination links
		this.resetPagination();
		Event.observe('prev-photo-page', 'click', function(e) {
			this.prevPage();
			Event.stop(e);
		}.bind(this));
		Event.observe('next-photo-page', 'click', function(e) {
			this.nextPage();
			Event.stop(e);
		}.bind(this));

	},
	
	initPosition: function() {	//For Safari, need to be called in window.onload.
		var pos = Position.cumulativeOffset($('photos-primary'));
		var l = pos[0], t = pos[1];
		var h = $('photos-primary').offsetHeight, w = $('photos-primary').offsetWidth;
		Element.setStyle('link-box', {
			'left'	: l + 'px', 
			'top'	: t + 'px', 
			'width'	: w + 'px', 
			'height': h + 'px' });
	},
	
	show: function(id) {
		if (!$('photos')) return false;
		if (!id) {
			id = (this.showCmd == 'next') ? this.slides.first() : this.slides.last();
		}
		Element.hide('slide-prev');
		Element.hide('slide-next');
		//remove current thumb 'selected' style
		if (this.slide && $('thumb_'+this.slide)) {
			Element.removeClassName('thumb_'+this.slide, 'selected');
		}
		//change the selected thumb style and some information
		if (!$('thumb_'+id)) return false;
		Element.addClassName('thumb_'+id, 'selected');
		Element.update('img_caption', $('thumb_'+id).alt);
		Element.update('img_number', ((this.page - 1) * this.rows) + this.slides.indexOf(id) + 1);
		this.setCurrentSlide(id);
		//change the large photo's source
		var idx = this.slides.indexOf(id);
		this.preload(idx);	
		// console.log(this.images);
		Element.hide('large_photo');
		Element.show('loading-big-photo');
		if (this.images[idx].complete) {
			this._show(idx);
		} else {
			this.images[idx].onload = function() { 
				if (this.slide == this.slides[idx])
					this._show(idx);
			}.bind(this);
		}
	},
	
	_show: function(idx) {
		var img = this.images[idx];
		Element.hide('loading-big-photo');
		$('large_photo').src = img.src;
		$('large_photo').width = img.width;		//for Safari 
		$('large_photo').height = img.height;	//for Safari 
		Element.show('large_photo');
		this.resetButtons();
		if (idx == 0)
			this.preloadAll();	//preload all big photos after first photo
	},
	
	preloadAll: function() {
		this.srcs.each(function(src, index) {
			this.preload(index);
		}.bind(this));
	},
	
	preload: function(index) {
		if (!this.images[index]) {
			var src = this.srcs[index];
			this.images[index] = new Image();
			this.images[index].src = src;		
		}
	},
	
	isFirst: function() {
		return (this.slides.indexOf(this.slide) <= 0) && (this.page <= 1);
	},
	
	isLast: function() {
		return (this.slides.indexOf(this.slide) >= this.slides.length-1) && (this.page == this.pages);
	},
	
	prev: function() {
		var idx = this.slides.indexOf(this.slide);
		this.showCmd = 'prev';
		if (idx > 0) {
			this.show(this.slides[idx-1]);
			this.resetButtons();
		} else if (!this.isFirst()) {
			this.prevPage();
		}
	},
	
	next: function() {
		var idx = this.slides.indexOf(this.slide);
		this.showCmd = 'next';
		if (idx > -1 && idx < this.slides.length-1) {
			this.show(this.slides[idx+1]);
			this.resetButtons();			
		} else if (!this.isLast()) {
			this.nextPage();
		}
	},
	
	resetButtons: function() {
		if (this.isFirst())
			Element.hide('slide-prev');
		else
			Element.show('slide-prev');
		if (this.isLast())
			Element.hide('slide-next');		
		else
			Element.show('slide-next');	
	},
	
	prevPage: function() {
		new Ajax.Updater(
			'thumbs', 
			webroot+'posts/photos/'+this.postId+'/'+(this.page-1)+'/'+this.temp, 
			{asynchronous:true, evalScripts:true, 
				onLoading: function(){ Element.show('loading-photos'); },
				onComplete: function(){ Element.hide('loading-photos'); this.resetButtons(); }, requestHeaders:['X-Update', 'thumbs']});		
	},
	
	nextPage: function() {
		new Ajax.Updater(
			'thumbs', 
			webroot+'posts/photos/'+this.postId+'/'+(this.page+1)+'/'+this.temp, 
			{asynchronous:true, evalScripts:true, 
				onLoading: function(){ Element.show('loading-photos'); },
				onComplete: function(){ Element.hide('loading-photos'); this.resetButtons(); }, requestHeaders:['X-Update', 'thumbs']});		
	}
};