var Moment = {
	overlay : null,
	container : null,
	thumbnail : null,
	img : null,
	text : null,
	btnDownload : null,
	btnClose : null,
	effect : null,
	'width' : 0,
	'height' : 0,
	selectCat : 0,
	currentPage : 0,
	currentImage : 0,
	lnkPreviousPage : null,
	lnkNextPage : null,
	pagingContainer : null,
	lblCategoryName : null,
	listCategory : null,
	tnPerPage : 18,
	pageScroll : null,
	
	lists : [
				{
					'name' : 'All',
					'lists' : new Array()
				},
				{
					'name' : 'Beach', 
					'lists' : [
						{'path' : 'img-001.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-002.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-003.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-004.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-005.jpg','detail' : '','width' : 333, 'height' : 500},
						{'path' : 'img-006.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-007.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-008.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-009.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-010.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-011.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-012.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-013.jpg','detail' : '','width' : 333, 'height' : 500},
						{'path' : 'img-014.jpg','detail' : '','width' : 333, 'height' : 500},
						{'path' : 'img-015.jpg','detail' : '','width' : 333, 'height' : 500},
						{'path' : 'img-016.jpg','detail' : '','width' : 333, 'height' : 500},
						{'path' : 'img-017.jpg','detail' : '','width' : 333, 'height' : 500},
						{'path' : 'img-018.jpg','detail' : '','width' : 333, 'height' : 500},
						{'path' : 'img-019.jpg','detail' : '','width' : 333, 'height' : 500},
						{'path' : 'img-106.jpg','detail' : '','width' : 333, 'height' : 500},
						{'path' : 'img-107.jpg','detail' : '','width' : 500, 'height' : 333}
					]
				},
				{
					'name' : 'Villas', 
					'lists' : [
						{'path' : 'img-025.jpg','detail' : '','width' : 500, 'height' : 333},					
						{'path' : 'img-035.jpg','detail' : '','width' : 500, 'height' : 333},								
						{'path' : 'img-053.jpg','detail' : '','width' : 500, 'height' : 333},					
						{'path' : 'img-056.jpg','detail' : '','width' : 500, 'height' : 333},	
						{'path' : 'img-062.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-063.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-064.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-065.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-066.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-067.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-068.jpg','detail' : '','width' : 333, 'height' : 500},					
						{'path' : 'img-077.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-078.jpg','detail' : '','width' : 500, 'height' : 333},					
						{'path' : 'img-082.jpg','detail' : '','width' : 333, 'height' : 500},
						{'path' : 'img-083.jpg','detail' : '','width' : 500, 'height' : 333},					
						{'path' : 'img-085.jpg','detail' : '','width' : 500, 'height' : 333},					
						{'path' : 'img-088.jpg','detail' : '','width' : 333, 'height' : 500},					
						{'path' : 'img-095.jpg','detail' : '','width' : 500, 'height' : 333},					
						{'path' : 'img-099.jpg','detail' : '','width' : 333, 'height' : 500},					
						{'path' : 'img-103.jpg','detail' : '','width' : 500, 'height' : 333},					
						{'path' : 'img-128.jpg','detail' : '','width' : 500, 'height' : 333},	
						{'path' : 'img-136.jpg','detail' : '','width' : 500, 'height' : 333},					
						{'path' : 'img-137.jpg','detail' : '','width' : 333, 'height' : 500},					
						{'path' : 'img-138.jpg','detail' : '','width' : 500, 'height' : 333}

					]
				},
				{
					'name' : 'F&B', 
					'lists' : [
						{'path' : 'img-039.jpg','detail' : '','width' : 500, 'height' : 333},
						{'path' : 'img-040.jpg','detail' : '','width' : 500, 'height' : 333},	
						{'path' : 'img-139.jpg','detail' : '','width' : 333, 'height' : 500},	
						{'path' : 'img-115.jpg','detail' : '','width' : 333, 'height' : 500},					
						{'path' : 'img-120.jpg','detail' : '','width' : 333, 'height' : 500}
						
					
						
					]
				}
			],
	
	init : function() {
		window.addEvent('load',Moment._init);
	},
	_init : function() {		
		Moment.lists.forEach(function(item,index) {
			if (index > 0) {
				item.lists.forEach(function(iItem,iIndex) {
					Moment.lists[0].lists.push(iItem);
				});
			}
		});
		
		Moment.container = new Element('div',{
			'id' : 'momentImage',
			'styles' : {
				'position' : 'absolute',
				'top' : '0px',
				'left' : '0px',
				'opacity' : 0,
				'z-index' : 20002,
				'width' : '500px'
			}
		});
		Moment.container.inject(document.body);
		
		Moment.img = new Element('div',{
			'styles' : {
				'margin' : '0px 0px 8px 0px',
				'width' : '500px',
				'text-align' : 'right',
				'position' : 'relative',
				'width' : '500px'
			}
		});
		Moment.img.inject(Moment.container);
		
		Moment.text = new Element('div',{
			'html' : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
			'styles' : {
				'float' : 'left',
				'color' : '#FFF',
				'padding' : '0px'
			}
		});
		
		Moment.text.inject(Moment.container);
		
		Moment.btnClose = new Element('a', {
			'href' : '#',
			'styles' : {
				'display' : 'block',
				'width' : '42px',
				'height' : '19px',
				'float' : 'right',
				'padding' : '0px'
			}
		});
		
		if (!Browser.Engine.trident4) {
			Moment.btnClose.setStyles({
				'background' : 'transparent url(images/close.png) left top no-repeat'
			});
		}	else {
			Moment.btnClose.setStyles({
				'filter' : 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/close.png\',sizingMethod=\'crop\');'
			});
		}
		Moment.btnClose.inject(Moment.container);
		Moment.btnClose.addEvent('click',Moment.hide.bind(Moment));
		
		Moment.btnDownload = new Element('a', {
			'href' : '#',
			'styles' : {
				'display' : 'block',
				'width' : '66px',
				'height' : '19px',
				'float' : 'right',
				'padding' : '0px',
				'margin' : '2px 8px 0px 0px'
			}
		});
		
		if (!Browser.Engine.trident4) {
			Moment.btnDownload.setStyles({
				'background' : 'transparent url(images/download.png) left top no-repeat'
			});
		}	
		else {
			Moment.btnDownload.setStyles({
				'filter' : 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/download.png\',sizingMethod=\'crop\');'
			});
		}
		Moment.btnDownload.inject(Moment.container);
		//Moment.btnClose.addEvent('click',Moment.hide.bind(Moment));
		
		//Thumbnail
		Moment.thumbnail = new Element('div',{
			'id' : 'momentTN',
			'styles' : {
				'position' : 'absolute',
				'top' : '0px',
				'left' : '0px',
				'z-index' : 20002,
				'opacity' : 0
			}
		});
		Moment.thumbnail.inject(document.body);
		
		var tnContainer = new Element('div', {
			'id' : 'tnContainer',
			'styles' : {
				'width' : '171px',
				'height' : '342px',
				'overflow' : 'hidden'
			}
		});
		tnContainer.inject(Moment.thumbnail);
		
		var previsousNextContainer = new Element('div', {
			'styles' : {
				'text-align' : 'right',
				'width' : '168px',
				'color' : '#538DA1'
			}
		});
		previsousNextContainer.inject(Moment.thumbnail); 
		
		lnkPreviousPage = new Element('a', {
			'html' : '« Previous',
			'href' : '#',
			'styles' : {
				'color' : '#538DA1'
			}
		});
		lnkPreviousPage.inject(previsousNextContainer);
		lnkPreviousPage.addEvent('click',Moment.previousPage.bindWithEvent(Moment));
		lnkPreviousPage.addEvent('mouseenter',function() {this.setStyles({'text-decoration' : 'underline'});}.bindWithEvent(lnkPreviousPage));
		lnkPreviousPage.addEvent('mouseleave',function() {this.setStyles({'text-decoration' : 'none'});}.bindWithEvent(lnkPreviousPage));
		
		new Element('span',{'html' : ' '}).inject(previsousNextContainer);
		
		lnkNextPage = new Element('a', {
			'html' : 'Next »',
			'href' : '#',
			'styles' : {
				'color' : '#538DA1'
			}
		});
		lnkNextPage.inject(previsousNextContainer);
		lnkNextPage.addEvent('click',Moment.nextPage.bindWithEvent(Moment));
		lnkNextPage.addEvent('mouseenter',function() {this.setStyles({'text-decoration' : 'underline'});}.bindWithEvent(lnkNextPage));
		lnkNextPage.addEvent('mouseleave',function() {this.setStyles({'text-decoration' : 'none'});}.bindWithEvent(lnkNextPage));
		
		Moment.pagingContainer = new Element('div', {
			'styles' : {
				'text-align' : 'right',
				'width' : '168px',
				'color' : '#538DA1',
				'margin' : '0px 0px 28px 0px'
			}
		});
		Moment.pagingContainer.inject(Moment.thumbnail);
		
		var displayCategory = new Element('div', {
			'styles' : {
				'width' : '168px',
				'color' : '#538DA1'
			}
		});
		
		new Element('span', {
			'html' : 'CATEGORY: ',
			'styles' : {
				'color' : '#538DA1'
			}
		}).inject(displayCategory);
		
		displayCategory.inject(Moment.thumbnail);
		
		Moment.lblCategoryName = new Element('span', {
			'html' : 'ALL',
			'styles' : {
				'color' : '#CCF4FE'
			}
		}).inject(displayCategory);
		
		Moment.listCategory = new Element('div', {
			'html' : '',
			'styles' : {
				'color' : '#93C1D1'
			}
		}).inject(Moment.thumbnail);
		
		Moment.lists.forEach(function(item,index) {
			lnkCatName = new Element('a',{
				'html' : item.name,
				'href' : '#',
				'styles' : {
					'display' : 'block',
					'color' : '#FFF'
				}
			}).inject(Moment.listCategory);
			
			lnkCatName.index = index;
			lnkCatName.addEvent('click', Moment.selectCategory.bindWithEvent(lnkCatName));
			lnkCatName.addEvent('mouseenter',function() {this.setStyles({'text-decoration' : 'underline'});}.bindWithEvent(lnkCatName));
			lnkCatName.addEvent('mouseleave',function() {this.setStyles({'text-decoration' : 'none'});}.bindWithEvent(lnkCatName));
		});
		
        Moment.overlay = new Element('div').inject(document.body);
		Moment.overlay.setStyles({
							'position': 'absolute',
							'left': '0',
							'width': '100%',
							'cursor': 'pointer',
							'opacity' : '0',
							'background-color' : '#003142',
							'z-index' : '20000',
							'display' : 'none'
		});
		Moment.overlay.addClass('overlay');
		
		Moment.effect = new Fx.Morph(Moment.container, {duration: 2000, transition: Fx.Transitions.Expo.easeInOut});
	},
	
	previousPage : function(event) {
		if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
		}else {
		    event.cancelBubble = true;
		    event.returnValue = false;
		}
		if (Moment.currentPage > 0) {
			$('tnMomentPage' + Moment.currentPage).setStyles({'color' : '#538DA1','text-decoration' : 'none'});
			$('tnMomentPage' + Moment.currentPage).removeClass('active');
			Moment.currentPage--;
			$('tnMomentPage' + Moment.currentPage).setStyles({'color' : '#FFF','text-decoration' : 'underline'});
			$('tnMomentPage' + Moment.currentPage).addClass('active');
			
			Moment.pageScroll.toElement('page' + Moment.currentPage);
			
			lnkNextPage.setStyles({'display' : 'inline'});
			
			if (Moment.currentPage == 0) {
				lnkPreviousPage.setStyles({'display' : 'none'});
			}
		}
	},
	
	nextPage : function(event) {
		if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
		}else {
		    event.cancelBubble = true;
		    event.returnValue = false;
		}
		
		var totalPage = Math.ceil(Moment.lists[Moment.selectCat].lists.length/Moment.tnPerPage);
		
		if (Moment.currentPage < totalPage) {
			$('tnMomentPage' + Moment.currentPage).setStyles({'color' : '#538DA1','text-decoration' : 'none'});
			$('tnMomentPage' + Moment.currentPage).removeClass('active');
			Moment.currentPage++;
			$('tnMomentPage' + Moment.currentPage).setStyles({'color' : '#FFF','text-decoration' : 'underline'});
			$('tnMomentPage' + Moment.currentPage).addClass('active');
			
			Moment.pageScroll.toElement('page' + Moment.currentPage);
			
			lnkPreviousPage.setStyles({'display' : 'inline'});
			
			if ((Moment.currentPage + 1) == totalPage) {
				lnkNextPage.setStyles({'display' : 'none'});
			}
		}
	},
	
	gotoPage : function(event) {
		if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
		}else {
		    event.cancelBubble = true;
		    event.returnValue = false;
		}
		
		$('tnMomentPage' + Moment.currentPage).setStyles({'color' : '#538DA1','text-decoration' : 'none'});
		$('tnMomentPage' + Moment.currentPage).removeClass('active');
		Moment.currentPage = this.pageIndex;
		$('tnMomentPage' + Moment.currentPage).setStyles({'color' : '#FFF','text-decoration' : 'underline'});
		$('tnMomentPage' + Moment.currentPage).addClass('active');
			
		Moment.pageScroll.toElement('page' + Moment.currentPage);
		
		if (Moment.currentPage == 0) {
			lnkPreviousPage.setStyles({'display' : 'none'});
		} else {
			lnkPreviousPage.setStyles({'display' : 'inline'});
		}
		
		var totalPage = Math.ceil(Moment.lists[Moment.selectCat].lists.length/Moment.tnPerPage);
		if ((Moment.currentPage + 1) == totalPage) {
			lnkNextPage.setStyles({'display' : 'none'});
		} else {
			lnkNextPage.setStyles({'display' : 'inline'});
		}
	},
	
	selectCategory : function(event) {
		if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
		}else {
		    event.cancelBubble = true;
		    event.returnValue = false;
		}
		
		Moment.lblCategoryName.set('html',Moment.lists[this.index].name.toUpperCase());
		Moment.currentPage = 0;
		Moment.currentImage = 0;
		Moment.selectCat = this.index;
		Moment.generate();
	},
	
	position : function() {
		var parent = $('rightHeader');
		
		parentPosition = parent.getCoordinates();
		
		Moment.thumbnail.setStyles({
			'left' : parentPosition.left + 'px',
			'top' : '22px'
		});
		
		var left = parentPosition.left - 517;
		
		Moment.container.setStyles({
			'left' : left + 'px',
			'top' : '22px'
		});
	},
	
	generate : function() {
		var tnContainer = Moment.thumbnail.getFirst();
		var count = 0;
		var pageNum = 0;
		
		tnContainer.empty();
			
		var totalPage = Math.ceil(Moment.lists[Moment.selectCat].lists.length/Moment.tnPerPage);
		
		var tnPage = new Element('div', {
			'styles' : {
				'width' : 171*(totalPage) + 'px'
			}
		}).inject(tnContainer);
		
		var page = new Element('div', {
			'id' : 'page' + (pageNum++),
			'styles' : {
				'width' : 171 + 'px',
				'float' : 'left'
			}
		}).inject(tnPage);
		
		Moment.lists[Moment.selectCat].lists.forEach(function(iItem,iIndex) {
			if (iItem != null) {
				var tn = new Element('img', {
					//'src' : 'images/gallery/thumbnails/' + iItem.path,
					'styles' : {
						'cursor' : 'pointer',
						'margin' : '0px 2px 2px 0px'
					}
				});
				var imgData = iItem;
				tn.set('src','images/gallery/thumbnails/' + imgData.path);
				//alert(imgData.path);
				tn.addEvent('click',function() {
					Moment.displayImage(imgData);
				});
				
				tn.inject(page);
				
				count++;
				if (count >= Moment.tnPerPage) {
					count = 0;
					
					page = new Element('div', {
						'id' : 'page' + (pageNum++),
						'styles' : {
							'width' : 171 + 'px',
							'float' : 'left'
						}
					}).inject(tnPage);
				}
			}
		});
		
		if (Moment.lists[Moment.selectCat].lists.length > Moment.tnPerPage) {
			Moment.pageScroll = new Fx.Scroll(tnContainer);

			lnkPreviousPage.setStyles({'display' : 'none'});
			lnkNextPage.setStyles({'display' : 'inline'});
			
			Moment.pagingContainer.setStyles({'display' : 'block'});
			
			Moment.pagingContainer.empty();
			
			new Element('span', {
				'html' : 'Page:'
			}).inject(Moment.pagingContainer);
			
			for (var i = 0;i < totalPage;i++) {
				new Element('span', {
					'html' : '&nbsp;'
				}).inject(Moment.pagingContainer);
				
				var pageLink = new Element('a', {
					'id' : 'tnMomentPage' + i,
					'html' : (i +1),
					'href' : '#',
					'styles' : {
						'color' : (i == 0)?'#FFF':'#538DA1',
						'text-decoration' : (i == 0)?'underline':'none'
					}
				});
				
				if (i == 0) pageLink.addClass('active');
				
				pageLink.pageIndex = i;
				pageLink.addEvent('click',Moment.gotoPage.bindWithEvent(pageLink));
				pageLink.addEvent('mouseenter',function() {if (!this.hasClass('active')) this.setStyles({'text-decoration' : 'underline'});}.bindWithEvent(pageLink));
				pageLink.addEvent('mouseleave',function() {if (!this.hasClass('active')) this.setStyles({'text-decoration' : 'none'});}.bindWithEvent(pageLink));
				pageLink.inject(Moment.pagingContainer);
			}
		} else {
			lnkPreviousPage.setStyles({'display' : 'none'});
			lnkNextPage.setStyles({'display' : 'none'});
			Moment.pagingContainer.setStyles({'display' : 'none'});
		}
		Moment.pageScroll.toElement('page0');
		
		Moment.displayImage(Moment.lists[Moment.selectCat].lists[0]);
	},
	
	display : function() {
		Moment.position();
		Moment.generate();
		
		Moment.overlay.setStyles({'display' : 'block', top: '0px', height: Window.getScrollHeight()+'px'});
		
		var nextEffect = Moment._display.bind(Moment);
		
		var fx = new Fx.Morph(Moment.overlay,{duration: 500, transition: Fx.Transitions.linear});
		fx.addEvent('complete',nextEffect);
			
		fx.start({'opacity': .9});
	},
	_display : function() {
		this.overlay.addEvent('click',this.hide.bindWithEvent(this));
		
		this.container.fade('in');
		this.thumbnail.fade('in');
	},
	
	displayImage : function(imgData) {
		//Moment.img.empty();
		
		//Moment.img.setStyles({'height' : imgData.height + 'px'});
		
		var img = new Element('img', {
			'src' : 'images/gallery/lowres/' + imgData.path,
			'styles' : {
				'position' : 'absolute',
				'top' : '0px',
				'right' : '0px',
				'opacity' : 0
			}
		});
		
		img.inject(Moment.img);
		
		if (Moment.img.getChildren().length == 2) {
			var fx0 = new Fx.Tween(Moment.img.getFirst(),{duration: 500, transition: Fx.Transitions.linear });
			var fx1 = new Fx.Tween(Moment.img.getLast(),{duration: 500, transition: Fx.Transitions.linear });
			var fx2 = new Fx.Tween(Moment.img,{duration: 500, transition: Fx.Transitions.linear });
			
			var group = new Group(fx0,fx1,fx2);
			
			group.addEvent('complete',function() {
				var margin = 500 - imgData.width;
				
				Moment.text.set('html',imgData.detail);
				Moment.text.setStyles({
					'width' : imgData.width - 120,
					'margin-left' : margin + 'px'
				});
				
				Moment.img.getLast().replaces(Moment.img.getFirst());
				
				Moment.btnDownload.set('href','images/gallery/hires/' + imgData.path.replace(".jpg",".zip"));
			});
			
			fx0.start('opacity',0);
			fx1.start('opacity',1);
			fx2.start('height',imgData.height);
		} else {
			var fx1 = new Fx.Tween(Moment.img.getLast(),{duration: 500, transition: Fx.Transitions.linear });
			var fx2 = new Fx.Tween(Moment.img,{duration: 500, transition: Fx.Transitions.linear });
			
			var group = new Group(fx1,fx2);
			
			group.addEvent('complete',function() {
				var margin = 500 - imgData.width;
				
				Moment.text.set('html',imgData.detail);
				Moment.text.setStyles({
					'width' : imgData.width - 120,
					'margin-left' : margin + 'px'
				});
				
				Moment.img.getLast().replaces(Moment.img.getFirst());
				
				Moment.btnDownload.set('href','images/gallery/hires/' + imgData.path.replace(".jpg",".zip"));
			});
			
			fx1.start('opacity',1);
			fx2.start('height',imgData.height);
		}
	},
	
	hide : function(event) {
		if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
		}else {
		    event.cancelBubble = true;
		    event.returnValue = false;
		}
		
		var containerFade = new Fx.Morph(Moment.container,{duration: 500, transition: Fx.Transitions.linear });
		var tnFade = new Fx.Morph(Moment.thumbnail,{duration: 500, transition: Fx.Transitions.linear });
		
		var group = new Group(containerFade, tnFade);
		
		var nextEffect = Moment._hideOverlay.bind(Moment);
		group.addEvent('complete',nextEffect);
		
		containerFade.start({'opacity': 0});
		tnFade.start({'opacity': 0});
	},
	_hideOverlay : function() {
		Moment.overlay.removeEvents();
		
	    var fx = new Fx.Morph(Moment.overlay,{duration: 500, transition: Fx.Transitions.linear });
		fx.addEvent('complete',function() {Moment.overlay.setStyles({'display' : 'none'});})
		fx.start({'opacity': 0});
	}
}

Moment.init();