GScript=Object.extend({
	OverlayContent: null
},window.GScript || {});

var OverlayContent = Class.create({
	borderTopLeft: null,
	borderTop: null,
	borderTopRight: null,
	borderRight: null,
	borderBottomRight: null,
	borderBottom: null,
	borderBottomLeft: null,
	borderLeft: null,

	canvasContainer: null,
	canvas: null, // hide or show
	
	contentAreaContainer: null,
	contentArea: null, // opacity (cont), hide, show
	
	titleNoteAreaContainer: null,
	titleArea: null,
	noteArea: null,

	descriptionAreaContainer: null,
	descriptionArea: null,
	
	commentArea: null, // opacity (cont), hide, show

	footerToplineContainer: null,
	footerTopline: null,

	footerInlineContainer: null,
	footerInline: null,

	topArea: null,
	middleArea: null,
	bottomArea: null,

	closeButtonContainer: null,
	closeButton: null,  // opacity (0 or 1)

	nextButtonContainer: null,
	nextButton: null,  // opacity (0 or 1)
	
	previousButtonContainer: null,
	previousButton: null,  // opacity (0 or 1)

	divOverlay: null, // hide, show
	divBG: null, // opacity (cont)
	divLoading: null, // opacity (cont), hide, show
	divBase: null,
	
	tableStyle: 'position: relative; border-spacing: 0px; border-collapse: collapse; padding: 0px 0px 0px 0px; border-width: 0px 0px 0px 0px; border-style: none;',
	tdStyle: 'border-spacing: 0px; border-collapse: collapse; padding: 0px 0px 0px 0px; border-width: 0px 0px 0px 0px; border-style: none;',

	defaultClassName: 'overlayContent_',
	
	bgOpacity: -1,
	appearDuration: 0.6,
	timeoutTrial: 150,
	zIndex: 10000,
	encoding: 'utf-8',
	defaultWidth: '640',
	defaultHeight: '480',
	
	clickListener : null,
	
	overlayInfo: [], // id, state, className. info.state = [-1: 'hiding process',  0: 'idle', 1: 'occupied/busy', 2: 'displayed', 
	//1: 'showing', 2: 'showed but hide all buttons', 3: 'showed with all buttons']
	
	isFunctionAppearRunning: false, 
	
	initialize: function(){
		this.borderTopLeft = this.layerID();
		this.borderTop = this.layerID();
		this.borderTopRight = this.layerID();
		this.borderRight = this.layerID();
		this.borderBottomRight = this.layerID();
		this.borderBottom = this.layerID();
		this.borderBottomLeft = this.layerID();
		this.borderLeft = this.layerID();
		
		this.divOverlay = this.layerID();
		this.divBG = this.layerID();
		this.divLoading = this.layerID();
		this.divBase = this.layerID();
		
		this.canvasContainer = this.layerID();

		this.canvas = this.layerID();
		this.contentArea = this.layerID();

		this.titleArea = this.layerID();
		this.noteArea = this.layerID();
		this.descriptionArea = this.layerID();
		this.commentArea = this.layerID();
		
		this.titleNoteAreaContainer = this.layerID();
		this.descriptionAreaContainer = this.layerID();
		this.footerToplineContainer = this.layerID();
		this.footerInlineContainer = this.layerID();

		this.footerTopline = this.layerID();
		this.footerInline = this.layerID();

		this.topArea = this.layerID();
		this.middleArea = this.layerID();
		this.bottomArea = this.layerID();

		this.closeButtonContainer = this.layerID();
		this.closeButton = this.layerID();

		this.nextButtonContainer = this.layerID();
		this.nextButton = this.layerID();

		this.previousButtonContainer = this.layerID();
		this.previousButton = this.layerID();
		
		var info = {id: this.layerID(), state: 0, className: this.defaultClassName};
		this.overlayInfo.push(info);
		this.createLayer(info);
		this.registerListener(info);
	},
	
	/**
	 * resize the background
	 */
	touch: function(){
		for(var i=0; i<this.overlayInfo.length; i++){
			if(this.overlayInfo[i].state != 0){
				this.setBGSize(this.overlayInfo[i]);
			}
		}
	},
	
	
	//---------------------------------------------------------------------------------------------------------
	// PRIVATE FUNCTION SECTION. SHOULD NOT BE CALLED OUTSIDE
	//---------------------------------------------------------------------------------------------------------
	
	createLayer: function(info){
		$$('body')[0].appendChild(Builder.node('div', {id: this.divOverlay + info.id, style:'position:absolute; width: 100%; top:0px; left:0px; z-index:' + this.zIndex}));
		
		$(this.divOverlay + info.id).update(
			'<div id="' + this.divBase + info.id + '" align="center">'+
			'<div id="' + this.divBG + info.id + '" class="' + info.className + 'background" style="position:absolute; top:0px; left:0px;"></div>' + 
			'<table style="' + this.tableStyle + '">'+
			'<tbody>'+
				'<tr>'+
					'<td id="' + this.topArea + info.id + '" class="' + info.className + 'topArea" style="' + this.tdStyle + '">'+
					'</td>'+
				'</tr>' + 
			
				'<tr>'+
					'<td style="' + this.tdStyle + '">'+
					'<div align="center">'+
					'<table style="' + this.tableStyle + '">'+
					'<tbody>'+
					'<tr>'+
						'<td style="' + this.tdStyle + '"></td>' +
						'<td id="' + this.closeButtonContainer + info.id + '" style="' + this.tdStyle + '">' + 
							'<img id="' + this.closeButton + info.id + '" class="' + info.className + 'closeButton" onmouseover="style.cursor=\'pointer\'"/>'+
						'</td>'+
						'<td style="' + this.tdStyle + '"></td>' +
					'</tr>' + 
			
					'<tr>' +
						'<td id="' + this.previousButtonContainer + info.id + '" style="' + this.tdStyle + '" class="' + info.className + 'previousButtonContainer">' +
							'<img id="' + this.previousButton + info.id + '" class="' + info.className + 'previousButton" />'+
						'</td>'+
						
						'<td style="' + this.tdStyle + 'text-align: center; vertical-align: top">' +
							'<div id="' + this.canvasContainer + info.id + '" align="center" style="position:relative">'+
								'<table id="' + this.canvas + info.id + '" style="' + this.tableStyle + 'bottom:0px; right:0px;">'+
								'<tbody>'+
									'<tr>'+
										'<td id="' + this.borderTopLeft + info.id + '" style="' + this.tdStyle + '" class="' + info.className + 'borderTopLeft"></td>'+
										'<td id="' + this.borderTop + info.id + '" style="' + this.tdStyle + '" class="' + info.className + 'borderTop"></td>'+
										'<td id="' + this.borderTopRight + info.id + '" style="' + this.tdStyle + '" class="' + info.className + 'borderTopRight"></td>'+
									'</tr>'+
											
									'<tr>'+
										'<td id="' + this.borderLeft + info.id + '" style="' + this.tdStyle + '" class="' + info.className + 'borderLeft"></td>'+
										
										'<td style="' + this.tdStyle + '">' +
											'<table style="' + this.tableStyle + '">'+
											'<tbody>'+
												'<tr>'+
													'<td id="' + this.contentAreaContainer + info.id + '" style="' + this.tdStyle + '" class="' + info.className + 'content">'+
														'<div id="' + this.contentArea + info.id + '" style="width: 250px; height: 230px; position:relative"></div>'+
													'</td>'+
												'</tr>'+
													
												'<tr id="' + this.footerToplineContainer + info.id + '">'+
													'<td id="' + this.footerTopline + info.id + '" style="' + this.tdStyle + '" class="' + info.className + 'footerTopline"></td>'+
												'</tr>'+ 
													
												'<tr id="' + this.titleNoteAreaContainer + info.id + '">'+
													'<td style="' + this.tdStyle + '">' +
													'<table style="' + this.tableStyle + '; width: 100%">'+
													'<tbody>'+
														'<tr>'+
															'<td id="' + this.titleArea + info.id + '" style="' + this.tdStyle + '" class="' + info.className + 'title"></td>'+
															'<td id="' + this.noteArea + info.id + '" style="' + this.tdStyle + '" class="' + info.className + 'note"></td>'+
														'</tr>'+
													'</tbody>'+
													'</table>'+
													'</td>'+
												'</tr>'+ 
												
												'<tr id="' + this.footerInlineContainer + info.id + '">'+
													'<td id="' + this.footerInline + info.id + '" style="' + this.tdStyle + '" class="' + info.className + 'footerInline"></td>'+
												'</tr>'+ 
	
												'<tr id="' + this.descriptionAreaContainer + info.id + '">'+
													'<td id="' + this.descriptionArea + info.id + '" style="' + this.tdStyle + '" class="' + info.className + 'description"></td>'+
												'</tr>'+ 
											'</tbody>'+
											'</table>'+
										'</td>' +
										
										'<td id="' + this.borderRight + info.id + '" style="' + this.tdStyle + '" class="' + info.className + 'borderRight">' + 
											'<div class="' + info.className + 'borderRight" style="height: 0px"></div>'+
										'</td>'+
									'</tr>'+

									'<tr>'+
										'<td id="' + this.borderBottomLeft + info.id + '" style="' + this.tdStyle + '" class="' + info.className + 'borderBottomLeft"></td>'+
										'<td id="' + this.borderBottom + info.id + '" style="' + this.tdStyle + '" class="' + info.className + 'borderBottom"></td>'+
										'<td id="' + this.borderBottomRight + info.id + '" style="' + this.tdStyle + '" class="' + info.className + 'borderBottomRight"></td>'+
									'</tr>'+
								'</tbody>'+
								'</table>'+
								'<div id="' + this.divLoading + info.id + '" class="' + info.className + 'loading" style="position: absolute; top: 0px; left: 0px"></div>'+
							'</div>'+
						'</td>' +
					
						'<td id="' + this.nextButtonContainer + info.id + '" style="' + this.tdStyle + '" class="' + info.className + 'nextButtonContainer" >'+
							'<img id="' + this.nextButton + info.id + '" class="' + info.className + 'nextButton" />'+
						'</td>'+
					'</tr>' + 
					'</tbody>'+
					'</table>'+
					'</div>'+
					'</td>'+
				'</tr>' + 

				'<tr>' + 
					'<td id="' + this.middleArea + info.id + '" style="' + this.tdStyle + '" class="' + info.className + 'middleArea">'+
					'</td>'+
				'</tr>' + 
				
				'<tr>' + 
					'<td style="' + this.tdStyle + 'vertical-align: top; text-align: center">' +
						'<div align="center">'+
							'<div id="' + this.commentArea + info.id + '" class="' + info.className + 'comment"></div>'+
						'</div>'+
					'</td>'+
				'</tr>' + 
				
				'<tr>' + 
					'<td id="' + this.bottomArea + info.id + '" class="' + info.className + 'bottomArea" style="' + this.tdStyle + '">'+
					'</td>'+
				'</tr>' + 
			'</tbody>'+
			'</table>'+
			'</div>');
			
		//-------------------------------
		// create next button
		var img = Utility.getBGImg($(this.nextButton + info.id));
		if(img){
			$(this.nextButton + info.id).src = img.src;
			$(this.nextButton + info.id).setStyle({'backgroundImage':'none'});
		}
		else{
			$(this.nextButtonContainer + info.id).update("&nbsp;&nbsp;&nbsp; Next &nbsp;&nbsp;&nbsp;");
		}

		//-------------------------------
		// create previous button
		img = Utility.getBGImg($(this.previousButton + info.id));
		if(img){
			$(this.previousButton + info.id).src = img.src;
			$(this.previousButton + info.id).setStyle({'backgroundImage':'none'});
		}
		else{
			$(this.previousButtonContainer + info.id).update("&nbsp;&nbsp;&nbsp; Previous &nbsp;&nbsp;&nbsp;");
		}

		//-------------------------------
		// create close button
		img = Utility.getBGImg($(this.closeButton + info.id));
		if(img){
			$(this.closeButton + info.id).src = img.src;
			$(this.closeButton + info.id).setStyle({'backgroundImage':'none'});
		}
		else{
			$(this.closeButtonContainer + info.id).update("&nbsp;&nbsp;&nbsp; Close &nbsp;&nbsp;&nbsp;");
		}

		//-------------------------------
		// border background
		img = Utility.getBGImg($(this.borderLeft + info.id));
		if(img){
			$(this.borderLeft + info.id).update('<img src=' + img.src + ' class="' + info.className + 'borderLeft" height="100%" />');
			$(this.closeButton + info.id).setStyle({'backgroundImage':'none'});
		}
		else{
			$(this.borderLeft + info.id).update('<div class="' + info.className + 'borderLeft" style="height: 0px"></div>');
		}
		
		//-------------------------------
		// for background opacity
		if(this.bgOpacity == -1){
			this.bgOpacity = $(this.divBG + info.id).getStyle('opacity');
		}
		
		this.elementInitialStatus(info);
	},
	
	
	elementInitialStatus: function(info){
		var dimensions = $(this.canvas + info.id).getDimensions();
	
		$(this.divOverlay + info.id).hide();
		$(this.divBG + info.id).setOpacity(0);
		
		$(this.closeButton + info.id).setOpacity(0);
		$(this.nextButton + info.id).setOpacity(0);
		$(this.previousButton + info.id).setOpacity(0);

		$(this.canvas + info.id).hide();
		$(this.commentArea + info.id).hide();
		
		$(this.footerToplineContainer + info.id).hide();
		$(this.titleNoteAreaContainer + info.id).hide();
		$(this.footerInlineContainer + info.id).hide();
		$(this.descriptionAreaContainer + info.id).hide();
		
		$(this.contentArea + info.id).update();

		$(this.canvasContainer + info.id).setStyle({width: dimensions.width + 'px', height: dimensions.height + 'px'});
		$(this.divLoading + info.id).setStyle({width: dimensions.width + 'px', height: dimensions.height + 'px'});
		$(this.divLoading + info.id).setOpacity(0);
	},
	
	
	registerListener: function(info){
		if(!this.clickListener){
			this.clickListener = (function(event){
				var param = Utility.getParam(Event.element(event), 'overlayContent');
		        if(param != null){
		        	event.stop();
		        	this.appear(this.readParamSettings(param));
		        }
			}).bind(this);
			document.observe('click', this.clickListener);
		}

        $(this.previousButton + info.id).observe('click', (function(event){
        	event.stop();
        	if(info.state == 2){
        		info.state = 1;
	        	if((info.showElement-1) >= 0){
					this.hideButton(info);
	        		info.showElement -= 1;
	        		info.lastActionTime = (new Date()).getTime();
					$(this.commentArea + info.id).hide();
					$(this.commentArea + info.id).update();
		        	this.show(info, info.lastActionTime);
	        	}
        	}
        }).bind(this));
        
        $(this.nextButton + info.id).observe('click', (function(event){
        	event.stop();
        	if(info.state == 2){
        		info.state = 1;
	        	if((info.showElement+1) < info.paramOfElementInSameGroup.length){
					this.hideButton(info);
	        		info.showElement += 1;
	        		info.lastActionTime = (new Date()).getTime();
					$(this.commentArea + info.id).hide();
					$(this.commentArea + info.id).update();
		        	this.show(info, info.lastActionTime);
		        }
        	}
        }).bind(this));
        
        $(this.closeButton + info.id).observe('click', (function(event){
        	event.stop();
        	this.hide(info);
        }).bind(this));
        
        $(this.divBG + info.id).observe('click', (function(event){
        	event.stop();
        	this.hide(info);
        }).bind(this));
        
        Event.observe(window, 'resize', (function(event){
        	this.overlayInfo.each((function(info){
				if(info.state >= 1){
			        this.setBGSize(info);
				}
        	}).bind(this));
        }).bind(this));

	},
	
	unregisterListener: function(event){
        document.stopObserving('click', this.clickListener);
		this.clickListener = null;
	},
	
	//---------------------------------------------------------------------------------------------------------
	// MAJOR PROCESS 
	//---------------------------------------------------------------------------------------------------------
	
	appear: function(param){
      	// ensure only one click at a time. otherwise, may have error in choosing layers.
      	if(this.isFunctionAppearRunning == false){
			this.isFunctionAppearRunning = true;
			
			var info = null;
			for(var i=0; info==null && i<this.overlayInfo.length; i++){
				if(this.overlayInfo[i].state == 0){
					info = this.overlayInfo[i];
				}
			}
			if(info == null){
				info = {id: this.layerID(), state: 0, className: param.className};
				this.overlayInfo.push(info);
				this.createLayer(info);
				this.registerListener(info);
			}
			
			info.state = 1;
			info.lastActionTime = (new Date()).getTime();
			info.scrollOffset = document.viewport.getScrollOffsets();
			info.contentType = null;
			
			$$('body')[0].scrollTo();
			
			$(this.divOverlay + info.id).show();
			
			this.setBGSize(info);
			Utility.setOpacity(this.divBG + info.id, {duration: param.appear, to: this.bgOpacity});
			
			this.getElementInSameGroup(info, param);
			this.show(info, info.lastActionTime);
			this.isFunctionAppearRunning = false;
		}
	},
	
	getElementInSameGroup: function(info, param){
		var triggerGroup = param.group;
	
		info.paramOfElementInSameGroup = [];
		if(triggerGroup){
			var triggerSource = param.source;
			var elements = $$('body [overlayContent]');
			for(var i=0, k=0, len=elements.length; i<len; i++){
				param = Utility.getParam(elements[i], 'overlayContent', false);
				if(param.group == triggerGroup){
					param = this.readParamSettings(param);
			        if(param.source == triggerSource){
			        	info.showElement = k;
			        }
					info.paramOfElementInSameGroup.push(param);
			        k++;
				}
			}
		}
		else{
			info.paramOfElementInSameGroup.push(param);
        	info.showElement = 0;
		}
	},
	
	show:function(info, time){
		info.param = info.paramOfElementInSameGroup[info.showElement];
		
		if(info.className != info.param.className){
			info.className = info.param.className;
		}
		
		var dimensions = $(this.canvasContainer + info.id).getDimensions();
		$(this.divLoading + info.id).setStyle({width: dimensions.width + 'px', height: dimensions.height + 'px'});
		Utility.setOpacity(this.divLoading + info.id, {duration: info.param.appear, to: 1});

		if(info.contentType == 'iframe'){
			$(this.contentArea + info.id).update();
		}
		
      	setTimeout((function(event){
			if(time == info.lastActionTime){
				$(this.closeButton + info.id).setOpacity(1);
			
				$(this.canvasContainer + info.id).setStyle({width: dimensions.width + 'px', height: dimensions.height + 'px'});

				$(this.canvas + info.id).setStyle({position: 'absolute'});
				$(this.canvas + info.id).hide();
				
				$(this.contentArea + info.id).update();
				
				$(this.titleArea + info.id).update(info.param.title);
				$(this.noteArea + info.id).update(info.param.note);
				$(this.descriptionArea + info.id).update(info.param.description);
				
				if(info.param.container == "layer"){
					if(info.param.type == "img"){
						this.setContent(info, '<img src="' + info.param.source + '" border="0" />', 'img', this.contentArea, 'layer', time);
					}
					else if(info.param.type == "swf"){
						this.setContent(info, '<iframe marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" style="margin: 0px"></iframe>', 'iframe', this.contentArea, 'layer', time);
					}
					else if(info.param.type == "mov"){
						this.setContent(info, '<iframe marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" style="margin: 0px"></iframe>', 'iframe', this.contentArea, 'layer', time);
					}
					else{
						this.setAjax(info, this.contentArea, time);
					}
				}
				else{
					this.setContent(info, '<iframe marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" style="margin: 0px"></iframe>', 'iframe', this.contentArea, 'layer', time);
				}

				// take care the comment part
				if(info.param.comment){
					info.commentState = "requesting";
					this.setAjax(info, this.commentArea, time);
				}
				else{
					info.commentState = "none";
				}
			}
       	}).bind(this), info.param.appear * 1000 + 50);
	},
	
	setAjax: function(info, area, time){
		var url = area == this.contentArea ? info.param.source : info.param.comment;
		new Ajax.Request(url, {
			method: 'get',
			encoding: info.param.encoding,
			onSuccess: (function(response){
				if(response.status == 0){
					this.setContent(info, "<b>Request Error:</b><br /><br />Possible reasons: You request a page not in your own domain or the URL is wrong.", 'ajax', area, 'layer', time);
				}
				else{
					this.setContent(info, '<div>' + response.responseText + '</div>', 'ajax', area, 'layer', time);
				}
			}).bind(this),
							
			onFailure: (function(reply){
				this.setContent(info, "<b>Request Failure:</b><br /><br />Possible reasons: You request a page not in your own domain or the URL is wrong.", 'ajax', area, 'layer', time);
			}).bind(this),
			onException: (function(reply){
				this.setContent(info, "<b>Request Exception:</b><br /><br />Possible reasons: You request a page not in your own domain or the URL is wrong.", 'ajax', area, 'layer', time);
			}).bind(this)
		});
	},
	
	setContent: function(info, content, contentType, area, container, time){
		$(area + info.id).setOpacity(0);
		$(area + info.id).update(content);
		var trial = 0;
		new PeriodicalExecuter((function(pe){
			if(time != info.lastActionTime){
				pe.stop();
			}
			else if(Utility.isAllImgLoaded(this.canvas + info.id) || ++trial >= this.timeoutTrial){
				pe.stop();
				
				if(area == this.contentArea){
					this.resizeAndShow(info, contentType, container, time);
				}
				else{
					info.commentState = "finished";
				}
			}
		}).bind(this), 0.2);
	},
	
	resizeAndShow: function(info, contentType, container, time){
		new PeriodicalExecuter((function(pe){
			if(time != info.lastActionTime){
				pe.stop();
			}
			else if((info.commentState == "none" || info.commentState == "finished") && $(this.divLoading + info.id).getOpacity() == 1){
				pe.stop();
				
				var dimension = [];
				
				if(contentType == 'img'){
					dimension.width = info.param.width ? info.param.width : info.param.img.width + 'px';
					dimension.height = info.param.height ? info.param.height : info.param.img.height + 'px';
					$(this.contentArea + info.id).setStyle({width: dimension.width, height: dimension.height});
				}
				
				else if(contentType == 'ajax'){
					dimension.width = info.param.width ? info.param.width : 'auto';
					dimension.height = info.param.height ? info.param.height : 'auto';

					$(this.contentArea + info.id).setStyle({width: dimension.width, height: dimension.height});
					
					dimension.width = info.param.width ? info.param.width : $(this.contentArea + info.id).getWidth() + 'px';
					dimension.height = info.param.height ? info.param.height : + $(this.contentArea + info.id).getHeight() + 'px';
				}
				
				else if(contentType == 'iframe'){
					dimension.width = info.param.width ? info.param.width : '800px';
					dimension.height = info.param.height ? info.param.height : '600px';

					$(this.contentArea + info.id).childElements()[0].setStyle({width: dimension.width});
					$(this.contentArea + info.id).childElements()[0].setStyle({height: dimension.height});
				
					if(param.scroll){
						$(this.contentArea + info.id).childElements()[0].writeAttribute('scrolling', param.scroll);
					}
					$(this.contentArea + info.id).childElements()[0].src = info.param.source;
					$(this.contentArea + info.id).setStyle({width: 'auto', height: 'auto'});
				}

				$(this.titleNoteAreaContainer + info.id).setStyle({width: dimension.width});
				$(this.titleNoteAreaContainer + info.id).childElements()[0].setStyle({width: dimension.width});
				$(this.descriptionArea + info.id).setStyle({width: dimension.width});
				
				var noTitle = $(this.titleArea + info.id).empty();
				var noNote = $(this.noteArea + info.id).empty();
				var noDescription = $(this.descriptionArea + info.id).empty();
				
				if(noTitle && noNote){
					$(this.titleNoteAreaContainer + info.id).hide();
					$(this.footerInlineContainer + info.id).hide();
					
					if(noDescription){
						$(this.footerToplineContainer + info.id).hide();
						$(this.descriptionAreaContainer + info.id).hide();
					}
					else{
						$(this.footerToplineContainer + info.id).show();
						$(this.descriptionAreaContainer + info.id).show();
					}
				}
				else{
					$(this.footerToplineContainer + info.id).show();
					$(this.titleNoteAreaContainer + info.id).show();
					
					if(noDescription){
						$(this.footerInlineContainer + info.id).hide();
						$(this.descriptionAreaContainer + info.id).hide();
					}
					else{
						$(this.footerInlineContainer + info.id).show();
						$(this.descriptionAreaContainer + info.id).show();
					}
				}
				
				$(this.canvas + info.id).setOpacity(0);
				$(this.canvas + info.id).show();
				dimension = $(this.canvas + info.id).getDimensions();
				$(this.canvas + info.id).hide(); 

				$(this.divLoading + info.id).setStyle({width: '100%', height: '100%'});
				Utility.setSize(this.canvasContainer + info.id, {width: dimension.width + 'px', height: dimension.height + 'px', duration: info.param.appear});

				new PeriodicalExecuter((function(pe){
					if(time != info.lastActionTime){
						pe.stop();
					}
					else if(Utility.setSizeState(this.canvasContainer + info.id) == "finished"){
						pe.stop();

						this.setBGSize(info);
						
						$(this.canvas + info.id).setStyle({position: 'relative'});
						$(this.canvas + info.id).setOpacity(1);
						$(this.canvas + info.id).show();
						
						$(this.divLoading + info.id).setStyle({width: dimension.width + 'px', height: dimension.height + 'px'});

						Utility.setOpacity(this.contentArea + info.id, {duration: info.param.appear, to: 1});
						Utility.setOpacity(this.divLoading + info.id, {duration: info.param.appear, to: 0, hide: true});

						setTimeout((function(){
							if(time == info.lastActionTime){
								this.showButton(info);
								if(this.commentState != "none"){
									$(this.commentArea + info.id).show();
									Utility.setOpacity(this.commentArea + info.id, {duration: info.param.appear, to: 1});
									this.setBGSize(info);
								}
						
								$(this.canvasContainer + info.id).setStyle({width: 'auto', height: 'auto'});
								info.state = 2;
							}
						}).bind(this), info.param.appear*1000 + 50);
					}
			    }).bind(this), 0.2);
			}
		}).bind(this), 0.2);
	},
	
	showButton: function(info){
		if(info.paramOfElementInSameGroup.length >= 2){
			if(info.showElement >= 1){
				$(this.previousButton + info.id).setOpacity(1);
				$(this.previousButton + info.id).writeAttribute("onmouseover", "style.cursor='pointer'");
			}
			if(info.showElement != (info.paramOfElementInSameGroup.length - 1)){
				$(this.nextButton + info.id).setOpacity(1);
				$(this.nextButton + info.id).writeAttribute("onmouseover", "style.cursor='pointer'");
			}
		}
	},
	
	hide: function(info){
		info.state = -1;
		info.lastActionTime = -1;
		
		this.hideButton(info);
		
		Utility.stopSetSize(this.canvasContainer + info.id);
		Utility.stopSetOpacity(this.divLoading + info.id);
		Utility.stopSetOpacity(this.commentArea + info.id);
		Utility.stopSetOpacity(this.contentArea + info.id);
		Utility.setOpacity(this.divBG + info.id, {duration: info.param.appear, to: 0});
		
		$(this.canvas + info.id).hide();
		$(this.divLoading + info.id).hide();
		$(this.commentArea + info.id).hide();

		setTimeout((function(){
			this.elementInitialStatus(info);
			$$('body')[0].scrollTop = info.scrollOffset.top;
			$$('body')[0].scrollLeft = info.scrollOffset.left;
			info.contentType = null;
			info.state = 0;
		}).bind(this), info.param.appear*1000 + 50);
	},
	
	//---------------------------------------------------------------------------------------------------------
	// SOME UTILITY FUNCTIONS -- USUALLY MUST BE CORRECT
	//---------------------------------------------------------------------------------------------------------
	layerID: function(){
		return "s" + (new Date()).getTime() + "_" + Math.round(Math.random() * 10000000);
	},
	
	hideButton: function(info){
		$(this.nextButton + info.id).setOpacity(0);
		$(this.previousButton + info.id).setOpacity(0);
		$(this.closeButton + info.id).setOpacity(0);

		$(this.nextButton + info.id).writeAttribute("onmouseover", "return false");
		$(this.previousButton + info.id).writeAttribute("onmouseover", "return false");
	},
	
	readParamSettings: function(param){
       	param.className = param.className == null ? this.defaultClassName : param.className + "_";
		        	
       	if(param.appear == null){
			param.appear = this.appearDuration;
		}
					
		if(param.source == null){
			param.source = param.trigger.readAttribute('href');
		}
		
		param.container = param.container == "iframe" ? 'iframe' : 'layer';
	
		if(Utility.isImgLink(param.source)){
			param.img = new Image();
			param.img.src = param.source;
			param.type = "img";
		}
		else if(Utility.isFlashLink(param.source)){
			param.type = "swf";
		}
		else if(Utility.isMovieLink(param.source)){
			param.type = "mov";
		}
		else{
			param.canAppendInfoToSourceURL = param.canAppendInfoToSourceURL == "false" || param.canAppendInfoToSourceURL == false	? false : true;
			if(param.canAppendInfoToSourceURL){
				param.source = param.source.indexOf("?") < 0 ? param.source + "?_lastClickTime_=" + (new Date()).getTime() : param.source + "&_lastClickTime_=" + (new Date()).getTime();
			}
			param.type = "html";
		}
		
		if(param.comment==null || param.comment.empty()){
			param.comment = null;
		}
		else{
			param.canAppendInfoToCommentURL = param.canAppendInfoToCommentURL == "false" || param.canAppendInfoToCommentURL == false	? false : true;
			if(param.canAppendInfoToCommentURL){
				param.comment = param.comment.indexOf("?") < 0 ? param.comment + "?_lastClickTime_=" + (new Date()).getTime() : param.comment + "&_lastClickTime_=" + (new Date()).getTime();
			}
		}
		
		param.encoding = this.encoding;
		return param;
	},
	
	setBGSize: function(info){
		var d1 = Utility.getDocumentDimensions();
		var d2= $(this.divOverlay + info.id).getDimensions();
		$(this.divBG + info.id).setStyle({width: Math.max(d1.width, d2.width) + 'px', height: Math.max(d1.height, d2.height) + 'px'});
	}
	
}); 

if($$('body')[0]){
	if(!GScript.OverlayContent){
		GScript.OverlayContent = new OverlayContent();
	}
}
else{
	document.observe('dom:loaded', function(){
		if(!GScript.OverlayContent){
			GScript.OverlayContent = new OverlayContent();
		}
	});
}