kamezoPhotoSmall = {
	area : null,
	photoList : [],
	mainIndex : 0,
	showItemCount : 8,
	displayPage : 1,
	cn : 24,
	totalCount : 0,
	carouselCount : 3,
	carousel : null,
	
	init : function() {
		$('nextMainPhoto').observe('click', function() { this.nextMainPhoto() }.bind(this) );
		$('prevMainPhoto').observe('click', function() { this.prevMainPhoto() }.bind(this) );
		$('nextPhotoList').observe('click', function() { this.nextPhotoList() }.bind(this) );
		$('prevPhotoList').observe('click', function() { this.prevPhotoList() }.bind(this) );
		
		this.request();
	},
	
	request : function() {
		new Ajax.Request('/data/photo_list', {
			method: 'get',
			parameters: {cn: this.cn, area: this.area, hide_caution: true},
			onComplete: function(transport) {
				var data = transport.responseText.evalJSON();
				this.buildPhotoList(data);
			}.bind(this)
		});
	},
	
	buildPhotoList : function(values) {
		this.totalCount = values.info.total_results;
		
		if (this.totalCount < this.cn) {
			this.carouselCount = Math.ceil(this.totalCount / this.showItemCount);
		}
		
		this.carouselContrall(this.carouselCount);
	
		values.list.each(function(photo, index) {
			var liElm = new Element('li');
			var no = index;
			this.photoList[no] = photo;
			liElm.addClassName('no' + no);
			liElm.update('<img src="' + photo.thumbnail_small_url + '" />');
			$('photoList').insert(liElm);

			liElm.observe('click', function() {
				this.mainIndex = index;
				this.showMainPhoto(photo, liElm);
			}.bind(this));
		
			if (index == this.mainIndex) {
				this.showMainPhoto(photo, liElm);
			} 
		}.bind(this));
	},
	
	showMainPhoto : function(photo, elm) {
		$('photoList').select('li').invoke('removeClassName', 'current');
		elm.addClassName('current');
		var template = decodeURIComponent($('mainPhotoTemplate').innerHTML);
		$('mainPhoto').update(template.interpolate(photo));

		this.showhideMainButton();
	},
	
	nextMainPhoto : function() {
		this.mainIndex++;
		
		this.showMainPhoto(this.photoList[this.mainIndex], $('photoList').down('.no' + this.mainIndex));
		
		if ((this.mainIndex - (this.showItemCount * this.displayPage)) == 0) {
			this.displayPage++;
			this.carousel.slideNext();
		}
	},

	prevMainPhoto : function() {
		this.mainIndex--;
		
		this.showMainPhoto(this.photoList[this.mainIndex], $('photoList').down('.no' + this.mainIndex));

		if ((this.showItemCount * (this.displayPage - 1)) - this.mainIndex == 1) {
			this.displayPage--;
			this.carousel.slidePrev();
		}
	},
	
	showhideMainButton: function() {
		if (this.mainIndex >= (this.totalCount - 1)) {
			$('nextMainPhoto').hide();
		} else {
			$('nextMainPhoto').show();
		}

		if (this.mainIndex < 1) {
			$('prevMainPhoto').hide();
		} else {
			$('prevMainPhoto').show();
		}
	},
	
	nextPhotoList : function() {
		this.displayPage++;

		this.mainIndex = (this.displayPage * this.showItemCount) - this.showItemCount;
		this.showMainPhoto(this.photoList[this.mainIndex], $('photoList').down('.no' + this.mainIndex));
	},

	prevPhotoList : function() {
		this.displayPage--;

		this.mainIndex = (this.displayPage * this.showItemCount) - this.showItemCount;
		this.showMainPhoto(this.photoList[this.mainIndex], $('photoList').down('.no' + this.mainIndex));
	},

	carouselContrall : function(count) {
		this.carousel = new Carousel({
			viewport: $('photoListSection'),
			slider: $('photoList'),
			itemDimensions: {width: 525, height: 55},
			itemsInViewport: 1,
			slideItems: 1,
			maxItems: count,
			nextButtons: $$('#nextPhotoList'),
			prevButtons: $$('#prevPhotoList'),
			slideEffect: {
				delay: 0.1,
				duration: 0.7,
				transition: function(x) { return Math.sin(x * Math.PI / 2); }
			},
			slidingIndicator: $('widgetIssueCarousel-isSliding')
		});
	}
}