document.observe('dom:loaded', function() {
	new Gallery();
});
var Gallery = Class.create({
	blocker: null,
	imageContainer: null,

	initialize: function() {
		this.objBody = $$('body')[0];
		this.gallery = $('smallGallery');
		this.target = this.gallery.down('.otherPhoto');
		this.gallery.down('.left img').observe('click',this.onLeft.bind(this));
		this.gallery.down('.right img').observe('click',this.onRight.bind(this));
		// this.gallery.down('.otherPhoto').observe('click',this.onClick.bind(this) );
		new Ajax.Updater(this.target, '/mad/gallery');
	},
	onClick: function( ev ) {
		ev.stop();
		this.el = ev.element();
		if ( this.el.tagName != 'IMG' ) {
			return;
		}
		
		var title = this.el.up('li').down('.title').innerHTML;
		this.image = new Element('img',{'src': this.el.up('a').href});
		this.toggle.bind(this)();
		this.imageContainer.innerHTML = '';
		this.imageContainer.insert(this.image);
		this.imageContainer.insert(title);
	},
	toggle: function() {
		this.toggleBlocker.bind(this)();
		this.toggleContainer.bind(this)();
	},
	toggleBlocker: function() {
		if ( ! this.blocker ) {
			var height = $('container').getHeight();
			this.blocker = new Element('div',{'id': 'blockerBlack'}).setStyle({
				'height':height + 'px'
				});
			this.objBody.insert(this.blocker);
			this.blocker.observe('click',this.toggle.bind(this));
		} else {
			this.blocker.toggle();
		}
	},
	toggleContainer: function() {
		var marginLeft = '-' + this.image.getWidth() + 'px';
		if ( ! this.imageContainer ) {
			var containerTop = '300px';
			this.imageContainer = new Element('div',{'id': 'imageContainer'});
			this.objBody.insert(this.imageContainer);
		} else {
			this.imageContainer.toggle();
		}
	},
	removeView: function() {
		this.toggleBlocker();
		this.toggleContainer();
		this.imageContainer.insert(image);
		this.imageContainer.insert(new Element('p').update(title));
		this.objBody.insert(this.imageContainer);
	},
	onLeft: function( ev ) {
		ev.stop();
		new Ajax.Request('/mad/gallery?direction=left',{
			onSuccess: this.update.bind(this)
		});
	},
	update: function(transport) {
		var text = transport.responseText;
		if ( text == 'first') {
			alert('첫 페이지 입니다.');
			return ;
		} else if ( text == 'last') {
			alert('마지막 페이지 입니다.');
			return ;
		}
		this.target.update(text);
	},
	onRight: function( ev ) {
		ev.stop();
		new Ajax.Request('/mad/gallery?direction=right',{
			onSuccess: this.update.bind(this)
		});
	}
});