var Feature = new Class({
	element : null,
	container : null,
	previousButton : null,
	nextButton : null,
	pagings : null,
	scroller : null,
	boxWidth : 206,
	totalWidth : 0,
	currentIndex : 0,
	
	initialize : function (element,previous,next,width,paging) {
		this.element = $(element);
		this.previousButton = $(previous);
		this.nextButton = $(next);
		
		if (paging != null)
			this.pagings = $$(paging);
		
		if (!this.element || !this.previousButton || !this.nextButton) return false;

		this.boxWidth = width;
		this.element.setStyles({'position' : 'relative', 'overflow' : 'hidden' });
		
		this.container = new Element('div');
		this.container.setStyles({'position' : 'relative'});
		
		this.totalWidth = 0;
		
		this.element.getChildren().forEach(function(item,index) {
			this.totalWidth += this.boxWidth;
			item.setStyles({'float' : 'left'});
			item.inject(this.container);
		}.bind(this));
		
		this.container.setStyles({'width' : this.totalWidth + 'px'});
		
		this.container.inject(element);
		
		this.previousButton.addEvent('click',this.previousItem.bindWithEvent(this));
		this.nextButton.addEvent('click',this.nextItem.bindWithEvent(this));
		
		this.scroller = new Fx.Morph(this.container, {duration: 2000, transition: Fx.Transitions.Quart.easeInOut});
		
		this.previousButton.setStyles({'display' : 'none'});
		
		if (this.totalWidth == this.boxWidth) {
			this.nextButton.setStyles({'display' : 'none'});
		}
		
		if (this.pagings != null) {
			if (this.pagings.length > 0) {
				var obj = this;
				
				this.pagings.forEach(function(item,index) {
					item.index = index;
					item.addEvent('click',function(event) {
											if (!window.ie) {
												event = new Event(event);
												event.preventDefault();
											}else {
											    event.cancelBubble = true;
											    event.returnValue = false;
											}
											
											obj.gotoPage(index);
										}.bindWithEvent(obj)
					);
				});
			}
		}
		
		return true;
	},
	previousItem : function(event) {
		if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
		}else {
		    event.cancelBubble = true;
		    event.returnValue = false;
		}
		
		this.scroller.cancel();
		
		var currentLeft = this.container.getStyle('margin-left').toInt();

		if (currentLeft < 0) {
			this.pagings[this.currentIndex].removeClass("active");
			
			this.currentIndex--;
			
			this.pagings[this.currentIndex].addClass("active");

			var targetLeft = (-1)*this.boxWidth*this.currentIndex;
			
			//console.log(currentLeft + ' ' + targetLeft);

			this.scroller.start({'margin-left' : [currentLeft,targetLeft]});
			
			this.nextButton.setStyles({'display' : 'block'});
			
			if (targetLeft == 0)
				this.previousButton.setStyles({'display' : 'none'});
		}
	},
	nextItem : function(event) {
		if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
		}else {
		    event.cancelBubble = true;
		    event.returnValue = false;
		}
		
		this.scroller.cancel();
		
		var currentLeft = this.container.getStyle('margin-left').toInt();
		
		//console.log(currentLeft + ' ' + this.boxWidth + ' ' + this.totalWidth);

		if ((-1)*currentLeft + this.boxWidth < this.totalWidth) {
			this.pagings[this.currentIndex].removeClass("active");
			
			this.currentIndex++;
			
			this.pagings[this.currentIndex].addClass("active");
			
			var targetLeft = -1*this.boxWidth*this.currentIndex;
			
			this.scroller.start({'margin-left' : [currentLeft,targetLeft]});
			
			if ((this.currentIndex + 1) * this.boxWidth == this.totalWidth) {
				this.nextButton.setStyles({'display' : 'none'});
			}
			
			this.previousButton.setStyles({'display' : 'block'});
		}
	},
	gotoPage : function(index) {
		this.scroller.cancel();
		
		var currentLeft = this.container.getStyle('margin-left').toInt();
		
		this.currentIndex = index;
		
		var targetLeft = -1*this.boxWidth*this.currentIndex;
		
		this.scroller.start({'margin-left' : [currentLeft,targetLeft]});
		
		if (targetLeft == 0) {
			this.previousButton.setStyles({'display' : 'none'});
		} else {
			this.previousButton.setStyles({'display' : 'block'});
		}
				
		if ((this.currentIndex + 1) * this.boxWidth == this.totalWidth) {
			this.nextButton.setStyles({'display' : 'none'});
		}else {
			this.nextButton.setStyles({'display' : 'block'});
		}
		
		this.pagings.forEach(function(item,itemIndex) {
			if (index == itemIndex) {
				item.addClass("active");
			}else {
				item.removeClass("active");
			}
		});
	}
});

// only for new VT popup
function openVirtual(theURL) {
    //var top=open(theURL,"Virtual Tour Phuket Condominium | Aquaminium VR 360 | Royal Phuket Marina","width=800,height=600,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0");
    //top.focus();
    window.open(theURL,null,"height=600,width=800,status=yes,toolbar=no,menubar=no,location=no");
    var pageTracker = _gat._getTracker("UA-5291597-1");
    pageTracker._setDomainName(".royalphuketmarina.com");
    pageTracker._setAllowLinker(true);
    pageTracker._trackPageview('/main_vt.html');
}