var imageDir = imageBaseDir;
var imageExtenstion = 'jpg';
var fileExtenstion = 'txt';
var duration = 1;
//var getter;

function init(event) {
	var showBox = function(innerHtml) {
		$('bg').innerHTML = innerHtml;
		
		$('overlay').style.visibility = 'hidden';
		$('loadbox').style.visibility = 'hidden';
		$('box').style.visibility = 'hidden';
		
		Position.prepare();
		var boxDimensions = Element.getDimensions($('box'));
		
		Element.setStyle($('loadbox'), {
			width  : boxDimensions.width  + 'px',
			height : boxDimensions.height + 'px'
		});
		
		Center.create({id:'overlay'}).overlay();
		Center.create({id:'loadbox'}).setY();
		Center.create({id:'box'}).top();
		
		$('overlay').style.visibility = 'visible';
		$('loadbox').style.visibility = 'visible';
		$('box').style.visibility = 'visible';
		
		new Effect.Parallel([
			new Effect.Appear('overlay', {
				sync     : true,
				from     : 0,
				to       : 0.85,
				duration : duration
			}), 
			new Effect.Appear('loadbox', {
				sync     : true,
				from     : 0,
				to       : 1,
				duration : duration
			})],
			{
				duration : duration,
				afterFinish : function() {
					new Effect.Parallel([
						new Effect.Fade('loadbox', {
							sync     : true,
							from     : 1,
							to       : 0,
							duration : duration
						}),
						new Effect.Appear('box', {
							sync     : true,
							from     : 0,
							to       : 1,
							duration : duration
						})],
						{
							duration : duration
						}
					);
				}
			}
		);
	}
	
	var hideBox = function(event) {
		new Effect.Parallel([
			new Effect.Fade('overlay', {
				sync: true,
				from     : 0.85,
				to       : 0,
				duration : duration
			}), 
			new Effect.Fade('box', {
				sync: true,
				from     : 1,
				to       : 0,
				duration : duration
			})],
			{
				duration: 1,
				afterFinish : function() {
					$('overlay').style.visibility = 'hidden';
					$('loadbox').style.visibility = 'hidden';
					$('box').style.visibility = 'hidden';
				}
			}
		);
	}
	
	var clickedThumbnail = function(event) {
		//console.log(Event.element(event).getAttribute('id'));
		//showBox(Event.element(event).getAttribute('id'));
		getter.get(innerHtmlDir + '/' +Event.element(event).getAttribute('id') + '.' + fileExtenstion, '');
	}
	
	var getter = new Getter({ onSuccessFunc : showBox });
	
	Event.observe($('closeTop').getElementsByTagName('span')[0], 'click', function() { hideBox(event); }, false);
	Event.observe($('closeUnder').getElementsByTagName('span')[0], 'click', function() { hideBox(event); }, false);
	
	$('overlay').style.visibility = 'hidden';
	$('loadbox').style.visibility = 'hidden';
	$('box').style.visibility = 'hidden';
	
	var thumbnails = $$('.' + targetClass);
	
	for(var n=0; n<thumbnails.length; n++) {
		var imgs = thumbnails[n].getElementsByTagName('img');
		
		if (imgs.length > 0) {
			for(var i=0; i<imgs.length; i++) {
				var id = imgs[i].getAttribute('id');
				
				if(id) {
					Element.setStyle($(id), {cursor : 'pointer'});
					imgs[i].observe('click', function(event) { clickedThumbnail(event); });
					//Event.observe(imgs[i], 'click', function() { clickedThumbnail(event); }, false);
				}
			}
		}
	}
	
	var closeImgOn = new Image();
	var closeImg = new Image();
	closeImgOn.src = '../images/img_box/box_btn_close_on.gif';
	closeImg.src = '../images/img_box/box_btn_close.gif';
	
	var prevImgOn = new Image();
	var prevImg = new Image();
	prevImgOn.src = '../images/img_box/boximg_btn_prev_on.gif';
	prevImg.src = '../images/img_box/boximg_btn_prev.gif';
	
	var nextImgOn = new Image();
	var nextImg = new Image();
	nextImgOn.src = '../images/img_box/boximg_btn_next_on.gif';
	nextImg.src = '../images/img_box/boximg_btn_next.gif';
	
	Event.observe($('closeTop').getElementsByTagName('span')[0], 'mouseover',
		function() {
			Element.setStyle($('closeTop').getElementsByTagName('span')[0], {
				backgroundImage : 'url(' + closeImgOn.src + ')'
			});
		}, 
	false);
	Event.observe($('closeTop').getElementsByTagName('span')[0], 'mouseout',
		function() {
			Element.setStyle($('closeTop').getElementsByTagName('span')[0], {
				backgroundImage : 'url(' + closeImg.src + ')'
			});
		}, 
	false);
	
	Event.observe($('closeUnder').getElementsByTagName('span')[0], 'mouseover',
		function() {
			Element.setStyle($('closeUnder').getElementsByTagName('span')[0], {
				backgroundImage : 'url(' + closeImgOn.src + ')'
			});
		}, 
	false);
	Event.observe($('closeUnder').getElementsByTagName('span')[0], 'mouseout',
		function() {
			Element.setStyle($('closeUnder').getElementsByTagName('span')[0], {
				backgroundImage : 'url(' + closeImg.src + ')'
			});
		}, 
	false);
}

Event.observe(window, 'load', init, false);

// Getter Class
Getter = Class.create();
Getter.prototype = {
	initialize : function(options) {
		this._setOptions(options);
		
		if (this.options.isCentered) {
			this.center();
		}
	},
	
	_setOptions: function(options) {
		this.options = {
			onLoadingFunc   : function(json) {},
			onSuccessFunc   : function(json) {},
			onCompleteFunc  : function(json) {},
			onFailureFunc   : function(json) {},
			onExceptionFunc : function(json) {},
			uri             : '',
			responce        : 'html',
			method          : 'get',
			requestHeaders  : ['If-Modified-Since','Wed, 15 Nov 1995 00:00:00 GMT']
		}
		Object.extend(this.options, options || {});
	},
	get : function(uri, params) {
		var onLoadingFunc   = this.options.onLoadingFunc;
		var onSuccessFunc   = this.options.onSuccessFunc;
		var onCompleteFunc  = this.options.onCompleteFunc;
		var onFailureFunc   = this.options.onFailureFunc;
		var onExceptionFunc = this.options.onExceptionFunc;
		
		var responce = this.options.responce;
		
		if(uri) this.options.uri = uri;
		
		var funcs = {
			onLoading : onLoadingFunc,
			onSuccess : function(res) {
				if(responce == 'json') {
					var json = eval('(' + res.responseText + ')');
					
					if(json.error != -1) {
						onSuccessFunc(json);
					}
					else {
						onFailureFunc(json);
					}
				}
				else {
					onSuccessFunc(res.responseText);
				}
			},
			onComplete  : onCompleteFunc,
			onException : onExceptionFunc
		};
		
		this._request(params, funcs);
	},
	_request : function(params, funcs) {
		var ajaxOptions = {
			method         : this.options.method,
			requestHeaders : this.options.requestHeaders,
			postBody       : params,
			onLoading      : funcs.onLoading,
			onSuccess      : funcs.onSuccess,
			onComplete     : funcs.onComplete,
			onFailure      : funcs.onFailure,
			onException    : funcs.onException
		};
		
		new Ajax.Request(this.options.uri, ajaxOptions);
	}
};

// Center Class
Center = Class.create();
Center.create = function(options) {
	return (new Center(options));
}
Center.prototype = {
	initialize : function(options) {
		this._setOptions(options);
	},
	_setOptions: function(options) {
		this.options = {
			id : ''
		}
		Object.extend(this.options, options || {});
	},
	both : function() {
		this.top();
		this.left();
	},
	setY : function() {
		var dimensions = Element.getDimensions($(this.options.id));
		Position.prepare();
		var offsetTop = (Position.deltaY + Math.floor((this._getWindowHeight() - dimensions.height) / 2));
		
		Element.setStyle($(this.options.id), {
			position : 'absolute',
			//top      : ((dimensions.height <= this._getWindowHeight()) ? ((offsetTop  != null && offsetTop  > 0) ? offsetTop  : '0') + 'px' : 0),
			top      : ((offsetTop  != null && offsetTop  > 0) ? offsetTop  : '0') + 'px'
		});
	},
	top : function() {
		var dimensions = Element.getDimensions($(this.options.id));
		Position.prepare();
		var offsetTop = Position.deltaY;
		
		Element.setStyle($(this.options.id), {
			position : 'absolute',
			//top      : ((dimensions.height <= this._getWindowHeight()) ? ((offsetTop  != null && offsetTop  > 0) ? offsetTop  : '0') + 'px' : 0),
			top      : ((offsetTop  != null && offsetTop  > 0) ? offsetTop  : '0') + 'px'
		});
	},
	setX : function() {
		var dimensions = Element.getDimensions($(this.options.id));
		Position.prepare();
		var offsetLeft = (Position.deltaX + Math.floor((this._getWindowWidth() - dimensions.width) / 2));
		
		Element.setStyle($(this.options.id), {
			position : 'absolute',
			left     : ((dimensions.width  <= this._getWindowWidth())  ? ((offsetLeft != null && offsetLeft > 0) ? offsetLeft : '0') + 'px' : 0)
		});
	},
	left : function() {
		var dimensions = Element.getDimensions($(this.options.id));
		Position.prepare();
		var offsetLeft = Position.deltaX;
		
		Element.setStyle($(this.options.id), {
			position : 'absolute',
			left     : ((dimensions.width  <= this._getWindowWidth())  ? ((offsetLeft != null && offsetLeft > 0) ? offsetLeft : '0') + 'px' : 0)
		});
	},
	overlay : function() {
		Element.setStyle($(this.options.id), {
			position : 'absolute',
			top      : 0,
			left     : 0,
			height   : (this._getDocumentHeight() + 2000) + 'px',
			//height   : this._getDocumentHeight() + 'px',
			width    : this._getDocumentWidth() + 'px'
		});
	},
	_getWindowWidth : function() {
		return (self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0);
	},
	_getWindowHeight : function() {
		return (self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0);
	},
	_getDocumentWidth: function(){
		return Math.max(document.body.scrollWidth, this._getWindowWidth());
	},
	_getDocumentHeight: function(){
		return Math.max(document.body.scrollHeight, this._getWindowHeight());
	}
};