var Gallery = new Class({
	element : null,	
	imageWrap : null,
	navigate : null,
	previous : null,
	next : null,
	text : null,
	scroller : null,
	imageWidth : 616,
	textEffect : null,
	scroller : null,
	currentIndex : 0,
	totalImage : 0,
	images : null,
	currentImage : null,
	onScroll : false,
	
	initialize : function (element) {
		this.element = $(element);
		
		if (!this.element) return false;
		
		this.imageWrap = new Element('div');
		this.imageWrap.setStyles({'position' : 'relative'});
		
		var wrapper = this.imageWrap;
		
		var totalImage = 0;
		var imageText = '';
		
		this.images = this.element.getChildren();
		
		this.images.forEach(function(item,index) {
			item.inject(wrapper);
			item.setStyles({'float' : 'left'});
			
			totalImage++;
			
			if (index == 0)
				imageText = item.getProperty('alt');
		});
		
		this.totalImage = totalImage;
		
		this.imageWrap.setStyles({'width' : (totalImage + 1) * this.imageWidth + 'px'});
		this.imageWrap.inject(this.element);
		
		this.navigate = new Element('div');
		this.navigate.setStyles({
			'width' : '517px',
			//'height' : '20px',
			'position' : 'absolute',
			'background-color' : '#FFF',
			'top' : '0px',
			'right' : '0px',
			'text-align' : 'center',
			'opacity' : '0'
		});
		
		//Generate next and preious
		if (totalImage > 1) {
			this.previous = new Element('a',{
						'href' : '#',
						'html': '<',
					    'styles': {
									'display': 'block',
									'float': 'left',
									'width' : '15px'
								}
						});
			this.previous.inject(this.navigate);
			this.previous.addEvent('click',this.onPreviousClick.bindWithEvent(this));
			//this.previous.setStyles({'opacity' : '0.1'});
			
			this.next = new Element('a',{
						'href' : '#',
						'html': '>',
					    'styles': {
									'display': 'block',
									'float': 'right',
									'width' : '15px'
								}
			});
			this.next.addEvent('click',this.onNextClick.bindWithEvent(this));
			
			this.next.inject(this.navigate);
		}
		
		this.text = new Element('div',{
								'html' : imageText,
								'styles': {
									'display': 'block',
									'text-align' : 'center',
									'margin' : 'auto'
								}
		});
		this.text.inject(this.navigate);
		
		this.navigate.inject(this.element);
		
		this.element.addEvent("mouseenter",this.onMouseEnter.bindWithEvent(this));
		this.element.addEvent("mouseleave",this.onMouseLeave.bindWithEvent(this));
				
		this.textEffect = new Fx.Morph(this.navigate, {duration: 1000, transition: Fx.Transitions.Expo.easeInOut});
		this.scroller = new Fx.Morph(this.imageWrap, {duration: 1000, transition: Fx.Transitions.Expo.easeInOut});
		this.scroller.addEvent('complete',this.onScrollComplete.bindWithEvent(this));
	},
	onMouseEnter : function(event) {
		this.textEffect.cancel();
		
		var textOpacity = this.navigate.getStyle('opacity');
		this.textEffect.start({
			'opacity' : [textOpacity,1]
		});
	},
	onMouseLeave : function(event) {
		this.textEffect.cancel();
		
		var textOpacity = this.navigate.getStyle('opacity');
		this.textEffect.start({
			'opacity' : [textOpacity,0]
		});
	},
	onPreviousClick : function(event) {
		if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
		}else {
		    event.cancelBubble = true;
		    event.returnValue = false;
		}
		if (!this.onScroll) {	
			this.onScroll = true;
			this.scroller.cancel();		
			if (this.currentIndex > 0) {
				this.currentIndex--;
				
				var currentLeft = this.imageWrap.getStyle('margin-left').toInt();
				var targetLeft = currentLeft + this.imageWidth;
				
				this.scroller.start({
					'margin-left' : [currentLeft, targetLeft]
				});
				
				this.currentImage = this.images[this.currentIndex];
				
				//if (this.currentIndex == 0)
				//	this.previous.setStyles({'opacity' : '0.1'});
					
				//this.next.setStyles({'opacity' : '1'});
			}else {
				var lastElement = this.imageWrap.getLast();
				this.imageWrap.setStyles({'margin-left' : (-1*this.imageWidth) + 'px'});
				lastElement.inject(this.imageWrap,'top');	
				
				this.currentImage = lastElement;
				
				var currentLeft = this.imageWrap.getStyle('margin-left').toInt();
				
				this.scroller.start({
					'margin-left' : [currentLeft, 0]
				});	
			}
		}
	},
	onNextClick : function(event) {
		if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
		}else {
		    event.cancelBubble = true;
		    event.returnValue = false;
		}
		if (!this.onScroll) {
			this.onScroll = true;
			if (this.currentIndex < this.totalImage - 1) {
				this.currentIndex++;
				
				this.scroller.cancel();
				
				var currentLeft = this.imageWrap.getStyle('margin-left').toInt();
				var targetLeft = currentLeft - this.imageWidth;
				
				this.scroller.start({
					'margin-left' : [currentLeft, targetLeft]
				});
				
				this.currentImage = this.images[this.currentIndex];
				
				//if (this.currentIndex == this.totalImage - 1)
				//	this.next.setStyles({'opacity' : '0.1'});
				
				//this.previous.setStyles({'opacity' : '1'});
			} else {
				var firstElement = this.imageWrap.getFirst();
				var secondElement = firstElement.getNext();
				firstElement.inject(this.imageWrap,'bottom');
				
				this.currentImage = firstElement;
				
				secondElement.setStyles({'margin-left' : this.imageWidth + 'px'});
	
				var currentLeft = this.imageWrap.getStyle('margin-left').toInt();
				var targetLeft = currentLeft + (-1*(this.imageWidth));
				this.scroller.start({
					'margin-left' : [currentLeft, targetLeft]
				});
			}
		}
	},
	onScrollComplete : function() {
		if (this.currentImage.getProperty('alt') != '') {
			this.text.set('html',this.currentImage.getProperty('alt'));
		}
		
		var firstElement = this.imageWrap.getFirst();
		if (firstElement.getStyle('margin-left').toInt() > 0) {
			var currentMargin = this.imageWrap.getStyle('margin-left').toInt() + this.imageWidth;
			
			this.imageWrap.setStyles({'margin-left' : currentMargin});
			firstElement.setStyles({'margin-left' : '0px'});
			//console.log('reset need');
		}
		this.onScroll = false;
	}
});

var Header = {
	replace : function(selector,flash) {
		$$(selector).forEach(function(item,index) {
			//console.log(item);
			item.setStyles({'margin' : '0px'});
			
			var swiff = new Swiff(flash,{
				container : item,
				width: 449,
			    height: 92,
			    params: {
			        wmode: 'transparent'
			    },
			    vars: {
			        txt: item.get('text')
			    }
			});
		});
	},
	showLogo : function() {
		var fx = new Fx.Morph($('btmLogo'), {duration: 1000, transition: Fx.Transitions.Expo.easeInOut});
		fx.start({'opacity' : [0,1]});
	}
}