var hash = getUrlVars();
//alert(hash['gallery']);
if(hash['gallery'] == 'aquaminium'){
	var gallery = hash['gallery'];
}else if(hash['gallery'] == 'villas'){
	var gallery = hash['gallery'];
}else{
	gallery = '';
}
//alert(gallery);

function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}

var Gallery = new Class({
	tnContainer : null,
	imgContainer : null,
	categories : [],
	images : [],
	displayImages : [],
	currentIndex : 0,
	currentPage : 0,
	currentCategory : gallery,
	itemPerPage : 20,
	scroller : null,
	timer : null,
	delay : 5000,
	pause : false,
	total : 0,
	
	initialize : function (tnContainer,imgContainer) {
		this.tnContainer = $$(tnContainer)[0];
		this.imgContainer = $$(imgContainer)[0];
		
		if (!this.tnContainer || !this.imgContainer) return false;
		
		var tn = this.tnContainer.getChildren('a');
		var images = this.imgContainer.getChildren('div');
		
		tn.forEach(function(item,index) {
			if (this.categories.indexOf(item.get('rel')) == -1) {
				this.categories.push(item.get('rel'));
			}
			
			if (images[index]) {
				/*this.images.push({'category' : item.rel,'tn' : item.getFirst().src,'lowres' : item.href, 'description' : JSON.decode(images[index].getFirst().get('alt')), 'width' : item.getFirst().width, 'height' :item.getFirst().height });*/
				this.images.push({'category' : item.rel,'tn' : item.getFirst().src,'lowres' : item.href, 'description' : item.getFirst().alt, 'title' : item.getFirst().title, 'width' : item.getFirst().width, 'height' :item.getFirst().height });

			} else {
				this.images.push({'tn' : item.getFirst().src,'lowres' : item.href});
			}
		}.bind(this));
		
		this.categories = this.categories.clean();
		this.images = this.images.clean();
		
		var category = $('cmbCategory');
		
		if (category != null) {
			if (this.categories.length > 1) {
				category.setStyles({'position' : 'relative'});
				
				var element = new Element('div', {
					'styles' : {
						'height' : '0px',
						'overflow' : 'hidden',
						'background-color' : '#000',
						'opacity' : '0.8',
						'float' : 'none',
						'position' : 'absolute',
						'top' : '15px',
						'left' : '0px'
					}
				});
				element.inject(category);
				
				var lnk = new Element('a', {
					'href' : '#',
					'html' : 'All',
					'styles' : {
						'width' : '85px',
						'background-image' : 'none',
						'padding' : '0px 5px',
						'text-align' : 'left'
					}
				});
				
				lnk.category = '';
				lnk.addEvent('click',this.selectCategory.bindWithEvent({'source' : this,'link' : lnk}));
				lnk.inject(element);
				this.categories.forEach(function(item,index) {
					lnk = new Element('a', {
						'href' : '#',
						'html' : item.capitalize(),
						'styles' : {
							'width' : '85px',
							'background-image' : 'none',
							'padding' : '0px 5px',
							'text-align' : 'left'
						}
					});
					
					lnk.category = item;
					lnk.addEvent('click',this.selectCategory.bindWithEvent({'source' : this,'link' : lnk}));
					
					lnk.inject(element);
				}.bind(this));
				
				category.addEvent('click', function(event) {
					if (!window.ie) {
						event = new Event(event);
						event.preventDefault();
					}else {
					    event.cancelBubble = true;
					    event.returnValue = false;
					}
				});
				
				category.addEvent('mouseenter', function(event) {
					if (!window.ie) {
						event = new Event(event);
						event.preventDefault();
					}else {
					    event.cancelBubble = true;
					    event.returnValue = false;
					}
					
					
					element.tween('height',element.scrollHeight);
				}.bind(category));
				
				category.addEvent('mouseleave', function(event) {
					if (!window.ie) {
						event = new Event(event);
						event.preventDefault();
					}else {
					    event.cancelBubble = true;
					    event.returnValue = false;
					}				
					
					element.tween('height',0);
				}.bind(category));
			} else {
				category.setStyles({'display' : 'none'});
			}
		}
		
		if ($('btnPlay')) {
			$('btnPlay').addEvent('click',this.Play.bindWithEvent(this));
		}
		
		if ($('btnStop')) {
			$('btnStop').addEvent('click',this.Stop.bindWithEvent(this));
		}
		
		this.scroller = new Fx.Scroll(this.tnContainer, {
			duration: 1000, transition: Fx.Transitions.Quart.easeInOut
		});
		this.generate();
	},
	
	Play : function(event) {
		if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
		}else {
		    event.cancelBubble = true;
		    event.returnValue = false;
		}
		
		clearTimeout(this.timer);
		this.timer = this.autoPlay.periodical(this.delay,this);
		
		$('btnPlay').addClass('active');
		$('btnStop').removeClass('active');
	},
	
	Stop : function(event) {
		if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
		}else {
		    event.cancelBubble = true;
		    event.returnValue = false;
		}
		
		clearTimeout(this.timer);
		$('btnPlay').removeClass('active');
		$('btnStop').addClass('active');
	},
	
	autoPlay : function() {
		this.currentIndex = (this.currentIndex + 1)%this.displayImages.length;
		var nextImage = this.displayImages[this.currentIndex];
		
		var container = new Element('div',{
			'styles' : {
				'width' : '614px',
				'height' : '334px',
				'margin' : '-334px 0px 0px 0px',
				'opacity' : 0,
				'overflow' : 'hidden'
			}
		}).inject(this.imgContainer);
		
		new Element('img', {
			'src' : nextImage.lowres,
			'title' : nextImage.title
			
		}).inject(container);
		
		var fadeOut = this.imgContainer.getFirst().get('tween', {property: 'opacity'});
		var fadeIn = this.imgContainer.getLast().get('tween', {property: 'opacity'});
		
		var group = new Group(fadeOut,fadeIn);
		group.addEvent('complete',function() {
			this.imgContainer.getFirst().getFirst().destroy();
			this.imgContainer.getFirst().destroy();
			this.imgContainer.getFirst().setStyles({'margin' : '0px'});
			
			this.pause = false;
		}.bindWithEvent(this));
		
		this.pause = true;
		
		fadeOut.start(0);
		fadeIn.start(1);
		
		this.displayImageDetail(nextImage.description);
	},
	
	generate : function() {
		clearTimeout(this.timer);
		
		this.tnContainer.empty();
		this.imgContainer.empty();
		
		this.displayImages.empty();
		
		this.images.forEach(function(item,index) {
			if ((item.category == this.currentCategory) || (this.currentCategory == '')) {
				this.displayImages.push(item);
			}
		}.bind(this));
		
		/*left side*/
		if ($('txtCategoryName') != null) {
			$('txtCategoryName').set('html',(this.currentCategory != '')?this.currentCategory.capitalize():'All');
		}
		
		/*right side*/
		if ($$('#photoDisplay h2')[0] != null) {
			//($$('#photoDisplay h2')[0]).set('html',(this.currentCategory != '')?this.currentCategory.toUpperCase():'ALL');			
			if(this.currentCategory  == 'aquaminium'){
				/*alert(this.currentCategory );*/
				($$('#photoDisplay h2')[0]).set('html','&ldquo;Aquaminium&rdquo; World&prime;s first Waterfront Penthouse with Private Yacht Garage in Phuket ');
				document.getElementById('villaDetail').style.display = 'none';
				document.getElementById('aquaDetail').style.display = 'block';				
			}else if(this.currentCategory  == 'villas'){
				/*alert(this.currentCategory );*/
				($$('#photoDisplay h2')[0]).set('html','Royal Waterfront Villas (as seen on Bloomberg Television)');
				document.getElementById('aquaDetail').style.display = 'none';
				document.getElementById('villaDetail').style.display = 'block';				
			}else{
				($$('#photoDisplay h2')[0]).set('html',(this.currentCategory != '')?this.currentCategory.toUpperCase():'ALL');
				document.getElementById('aquaDetail').style.display = 'none';
				document.getElementById('villaDetail').style.display = 'none';
			}
		}
		
		var pageContainer = new Element('div');
		pageContainer.inject(this.tnContainer);
		
		var pageNo = 1;
		var page = new Element('div', {
			'id' : 'page' + pageNo,
			'styles' : {
				'width' : '299px',
				'height' : '363px',
				'float' : 'left',
				'padding' : '6px 0px 2px 7px'
			}
		});
		page.inject(pageContainer);
		
		this.displayImages.forEach(function(item,index) {
			var tn = new Element('img', {
				'src' : item.tn,
				'styles' : {
					'cursor' : 'pointer',
					'margin' : '0px 4px 3px 0px'
				},
				'title' : item.title
			});
			
			tn.index = index;
			
			tn.addEvent('click',this.selectImage.bindWithEvent({'source' : this,'link' : tn}));
			
			tn.inject(page);
			
			if (index + 1 >= pageNo*this.itemPerPage) {
				pageNo++;
				
				page = new Element('div', {
					'id' : 'page' + pageNo,
					'styles' : {
						'width' : '299px',
						'height' : '363px',
						'float' : 'left',
						'padding' : '6px 0px 2px 7px'
					}
				});
				page.inject(pageContainer);
			}
			
			if (index == 0) {
				var container = new Element('div',{
					'styles' : {
						'width' : '614px',
						'height' : '334px',
						'margin' : '0px',
						'overflow' : 'hidden'
					}
				}).inject(this.imgContainer);
				
				new Element('img', {
					'src' : item.lowres,
					'title' : item.title
				}).inject(container);
			}
		}.bind(this));
		
		this.displayImageDetail(this.displayImages[0].description);
		
		pageContainer.setStyles({'width' : pageNo*306});
		
		if (this.displayImages.length > this.itemPerPage) {
			var totalPage = Math.ceil(this.displayImages.length/this.itemPerPage);
			
			$$('#gallery .page').forEach(function(item,index) {
				item.empty();
				this.generatePage(totalPage).inject(item);
			}.bind(this));
		} else {
			$$('#gallery .page').forEach(function(item,index) {
				item.empty();
				this.generatePage(1).inject(item);
			}.bind(this));
		}
		
		this.scroller.toLeft();
		
		if ($('btnPlay')) {
			$('btnPlay').addClass('active');
		}
		
		if ($('btnStop')) {
			$('btnStop').removeClass('active');
		}
		this.timer = this.autoPlay.periodical(this.delay,this);
	},
	
	generatePage : function (noOfPage) {
		var pages = new Element('div', {
			'class' : 'page',
			'html' : '<span>Photo Gallery Page:</span>'
		});
		
		for (var i = 0;i < noOfPage;i++) {
			var page = new Element('a', {
				'href' : '#',
				'html' : i+1
			});
			
			if (i == 0)
				page.addClass('active');
			
			page.addEvent('click',this.selectPage.bindWithEvent({'source' : this,'pageNo' : (i + 1)}));
			
			page.inject(pages);
		}
		
		return pages;
	},
	
	selectCategory : function() {
		this.source.currentIndex = 0;
		this.source.currentPage = 0;
		this.source.currentCategory = this.link.category;
		
		this.source.generate();
	},
	
	selectImage : function(event) {
		if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
		}else {
		    event.cancelBubble = true;
		    event.returnValue = false;
		}
		
		if (this.source.pause) return;
		
		clearTimeout(this.source.timer);
		
		this.source.currentIndex = this.link.index;
		var nextImage = this.source.displayImages[this.source.currentIndex];
		
		var container = new Element('div',{
			'styles' : {
				'width' : '614px',
				'height' : '334px',
				'margin' : '-334px 0px 0px 0px',
				'opacity' : 0,
				'overflow' : 'hidden'
			}
		}).inject(this.source.imgContainer);
		
		new Element('img', {
			'src' : nextImage.lowres,
			'title' : nextImage.title
		}).inject(container);
		
		var fadeOut = this.source.imgContainer.getFirst().get('tween', {property: 'opacity'});
		var fadeIn = this.source.imgContainer.getLast().get('tween', {property: 'opacity'});
		
		var group = new Group(fadeOut,fadeIn);
		group.addEvent('complete',function() {
			this.imgContainer.getFirst().getFirst().destroy();
			this.imgContainer.getFirst().destroy();
			this.imgContainer.getFirst().setStyles({'margin' : '0px'});
			
			this.pause = false;
		}.bindWithEvent(this.source));
		
		this.source.pause = true;
		
		fadeOut.start(0);
		fadeIn.start(1);
		
		this.source.displayImageDetail(nextImage.description);
	},
	displayImageDetail : function(description) {
		if (description) {
			/*if (title != null)
				$('imgTitle').set('html',description);
			else
				$('imgTitle').set('html','');*/
				
				
			if (description != null)
				$('imgDetail').set('html', description);
			else
				$('imgDetail').set('html', '');
		} else {
			/*if ($('imgTitle')) 
				$('imgTitle').set('html','');*/
				
			if ($('imgDetail'))
				$('imgDetail').set('html', '');
		}
	},
	
	selectPage : function(event) {
		if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
		}else {
		    event.cancelBubble = true;
		    event.returnValue = false;
		}
		
		this.source.currentPage = this.pageNo;
		this.source.scroller.toElement($('page' + this.source.currentPage));
		
		$$('#gallery .page').forEach(function(item,index) {
			item.getChildren('a').forEach(function(item,index) {
				if ((item.get('html') == this.currentPage)) {
					item.addClass('active');
				} else {
					item.removeClass('active');
				}
			}.bind(this));
		}.bind(this.source));
	}
});