var imageDir = imageBaseDir;
var imageExtenstion = 'jpg';
var duration = 1;
var boxImages = new Array();
var currentThumbnailGroup = 0;
var currentImageGroup = 0;

function init(event) {
	var showBox = function(isInital) {
		
		$('overlay').style.visibility = 'hidden';
		$('box').style.visibility = 'hidden';
		
		$('boxImage').src = boxImages[currentThumbnailGroup][currentImageGroup]['img'].src;
		$('imageInfo').innerHTML = 'Image ' + (currentImageGroup + 1) + ' of ' + boxImages[currentThumbnailGroup].length;
		
		var imgWidth  = boxImages[currentThumbnailGroup][currentImageGroup]['img'].width;
		var imgHeight = boxImages[currentThumbnailGroup][currentImageGroup]['img'].height;
		
		Element.setStyle($('area'), {
			width : imgWidth + 'px',
			height : (imgHeight + 46) + 'px'
		});
		Element.setStyle($('exp'), {width : (imgWidth + 160) + 'px'});
		Element.setStyle($('pos'), {width : (imgWidth + 20) + 'px'});
		
		if(currentImageGroup > 0) Element.show($('posprev').getElementsByTagName('span')[0]);
		else Element.hide($('posprev').getElementsByTagName('span')[0]);
		
		if(currentImageGroup < (boxImages[currentThumbnailGroup].length - 1)) Element.show($('posnext').getElementsByTagName('span')[0]);
		else Element.hide($('posnext').getElementsByTagName('span')[0]);
		
		Element.setStyle($('posprev'), {paddingTop : (((imgHeight + 46) / 2)) + 'px'});
		Element.setStyle($('posnext'), {paddingTop : (((imgHeight + 46) / 2)) + 'px'});
		
		Element.hide($('boxImage'));
		
		Center.create({id:'overlay'}).overlay();
		Center.create({id:'box'}).top();
		
		Element.hide($('imageInfo'));
		Element.show($('loading'));
		
		$('overlay').style.visibility = 'visible';
		$('box').style.visibility = 'visible';
		
		if (isInital == true) {
			new Effect.Parallel([
				new Effect.Appear('overlay', {
					sync     : true,
					from     : 0,
					to       : 0.85,
					duration : duration
				}), 
				new Effect.Appear('box', {
					sync     : true,
					from     : 0,
					to       : 1,
					duration : duration
				})],
				{
					duration: duration, 
					afterFinish : function() {
						Element.hide($('loading'));
						Element.show($('imageInfo'));
						Element.show($('boxImage'));
					}
				}
			);
		}
		else {
			Element.show($('loading'));
			
			new Effect.Fade('box', {
				from     : 1,
				to       : 0,
				duration : 1
			});
			new Effect.Appear('box', {
				from        : 0,
				to          : 1,
				duration    : duration,
				queue       : 'end',
				afterFinish : function() {
					Element.hide($('loading'));
					Element.show($('imageInfo'));
					Element.show($('boxImage'));
				}
			});
		}
	}
	
	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: duration,
				afterFinish : function() {
					$('overlay').style.visibility = 'hidden';
					$('box').style.visibility = 'hidden';
				}
			}
		);
	}
	
	var clickedThumbnail = function(event) {
		var id = Event.element(event).getAttribute('id');
		//console.log(boxImages.length);
		for(var n=0; n<boxImages.length; n++) {
			//console.log(boxImages[n].length);
			for(var i=0; i<boxImages[n].length; i++) {
				if(boxImages[n][i]['id'] == id) {
					currentThumbnailGroup = n;
					currentImageGroup = i;
				}
			}
		}
		
		showBox(true);
	}
	
	var clickedPosprev = function(event) {
		if (currentImageGroup > 0) currentImageGroup--;
		
		showBox(false);
	}
	
	var clickedPosnext = function(event) {
		if (currentImageGroup < boxImages[currentThumbnailGroup].length) currentImageGroup++;
		
		showBox(false);
	}
	
	$('overlay').style.visibility = 'hidden';
	$('box').style.visibility = 'hidden';
	
	Event.observe($('closeTop').getElementsByTagName('span')[0], 'click', function() { hideBox(event); }, false);
	Event.observe($('closeUnder').getElementsByTagName('span')[0], 'click', function() { hideBox(event); }, false);
	Event.observe($('posprev').getElementsByTagName('span')[0], 'click', function() { clickedPosprev(event); }, false);
	Event.observe($('posnext').getElementsByTagName('span')[0], 'click', function() { clickedPosnext(event); }, false);
	
	var thumbnails = $$('.thumbnail');
	var thumbnailCount = 0;
		
	for(var n=0; n<thumbnails.length; n++) {
		var imgs = thumbnails[n].getElementsByTagName('img');
		
		if (imgs.length > 0) {
			var newImages = new Array();
			var imgsCount = 0;
			
			for(var i=0; i<imgs.length; i++) {
				var id = imgs[i].getAttribute('id');
				
				if(id) {
					var boxImg = new Image();
					boxImg.src = imageDir + '/' + id + '.' + imageExtenstion;
					newImages[imgsCount] = new Array();
					newImages[imgsCount]['id'] = id;
					newImages[imgsCount]['img'] = boxImg;
					
					Element.setStyle($(id), {cursor : 'pointer'});
					imgs[i].observe('click', function(event) { clickedThumbnail(event); });
					//Event.observe(imgs[i], 'click', function() { clickedThumbnail(event); }, false);
					imgsCount++;
				}
			}
			
			if(newImages.length > 0) {
				boxImages[thumbnailCount++] = newImages;
			}
		}
	}
	
	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($('posprev').getElementsByTagName('span')[0], 'mouseover',
		function() {
			Element.setStyle($('posprev').getElementsByTagName('span')[0], {
				backgroundImage : 'url(' + prevImgOn.src + ')'
			});
		}, 
	false);
	Event.observe($('posprev').getElementsByTagName('span')[0], 'mouseout',
		function() {
			Element.setStyle($('posprev').getElementsByTagName('span')[0], {
				backgroundImage : 'url(' + prevImg.src + ')'
			});
		}, 
	false);
	
	Event.observe($('posnext').getElementsByTagName('span')[0], 'mouseover',
		function() {
			Element.setStyle($('posnext').getElementsByTagName('span')[0], {
				backgroundImage : 'url(' + nextImgOn.src + ')'
			});
		}, 
	false);
	Event.observe($('posnext').getElementsByTagName('span')[0], 'mouseout',
		function() {
			Element.setStyle($('posnext').getElementsByTagName('span')[0], {
				backgroundImage : 'url(' + nextImg.src + ')'
			});
		}, 
	false);
}

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


// 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() + 5000) + '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());
	}
};