(function(){

var mooScroller = new Class({
	Implements: [Events, Options, Chain],
	options: {
		resizeScrollButton: true,
		wheelStep: 16,
		paddingSpace: 15,
		hoverColor: ''
	},
	
	initialize: function(selector, options){
		this.setOptions(options);
		this.initScroller(selector);
	},
	
	initScroller: function(selector){
		if ($type(selector) != 'array') {
			return;
		}
		
		// create scroller
		var fn = this;	
		selector.each(function(el){
			fn.setupScroller(el);
		});
	},
	
	setupScroller: function(el){
		var fn = this;
		
		// create scroller bar
		var bar = new Element('div', {
			'class': 'smScroller',
			'html': '<div class="smScrollUp"><span>up</span></div>'+
					'<div class="smScrollDx">'+
						'<div><span>scroll</span></div>'+
					'</div>'+
					'<div class="smScrollDn"><span>down</span></div>'
		}).inject(el, 'after');
		
		// get elements
		var scroller = bar.getChildren();
		var upBtn = scroller[0];
		var scrollBar = scroller[1];
		var scrollBtn = scroller[1].getFirst();
		var dnBtn = scroller[2];
		
		// set height		
		var elHeight = el.getCoordinates().height;
		bar.set('styles', {'height': elHeight});
		scrollBar.set('styles', {'height': elHeight - upBtn.getCoordinates().height - dnBtn.getCoordinates().height});
		
		// calculate size		
		var containerHeight = el.getSize().y;
		var availableScroll = el.getScrollSize().y;
		// if have scroll
		var hasScroll = ((availableScroll - elHeight) > 0);
		if (hasScroll) {
			bar.set('styles', {'display': 'block'});
			el.set('styles', {
				'padding-right': this.options.paddingSpace + 'px',
				'width': el.getCoordinates().width - bar.getCoordinates().width - this.options.paddingSpace
			});
		} else {
			bar.set('styles', {'display': 'none'});
			el.setStyle('width', '');
		}
		availableScroll = el.getScrollSize().y;

		var scrollBarHeight = scrollBar.getCoordinates().height;
		var scale = scrollBarHeight / availableScroll;		
		var maxScroll = availableScroll - containerHeight;
		var totalStep = Math.floor(maxScroll / this.options.wheelStep);	
		
		// store value to reset scroller
		el.store('maxScroll', maxScroll);
		el.store('currentPos', 0);
		
		// resize scroll button
		if (this.options.resizeScrollButton == true) {
			scrollBtn.set('styles', {'height': scrollBarHeight * scale});
		}
		
		// add slider (scroller behaviors)
		el.store('slider', new Slider(scrollBar, scrollBtn, {
			onChange: function(pos){
				el.scrollTo(0, el.retrieve('maxScroll') * pos / totalStep);
				el.store('currentPos', pos);
			},
			mode: 'vertical',
			range: [0, totalStep]
		}).set(0));
		
		// element wheel
		el.scrollTo(0, 0).addEvents({
			'mousewheel': function(e){
				e.stop();
				el.retrieve('slider').set(el.retrieve('currentPos') - e.wheel);
			}
		});
		
		var scrolInterval = null;
		
		// scroll button
		scrollBtn.addEvents({
			'mouseover': function(e) {
				if (fn.options.hoverColor != '') {
					this.set('styles', {'background-color': fn.options.hoverColor});
				}
			},
			'mouseout': function(e) {
				this.set('styles', {'background-color': ''});
			}
		});
		
		// up button
		upBtn.addEvents({
			'mousedown': function(e){
				scrolInterval = setInterval(function(){
					el.retrieve('slider').set(el.retrieve('currentPos') - 1);
				}, 20);
			},
			'mouseup': function(e){
				clearInterval(scrolInterval);
			},
			'mouseout': function(e){
				clearInterval(scrolInterval);
			},
			'mouseover': function(e) {
				if (fn.options.hoverColor != '') {
					this.set('styles', {'background-color': fn.options.hoverColor});
				}
			},
			'mouseout': function(e) {
				this.set('styles', {'background-color': ''});
			}
		});
		
		// down button
		dnBtn.addEvents({
			'mousedown': function(e){
				scrolInterval = setInterval(function(){
					el.retrieve('slider').set(el.retrieve('currentPos') + 1);
				}, 20);
			},
			'mouseup': function(e){
				clearInterval(scrolInterval);
			},
			'mouseout': function(e){
				clearInterval(scrolInterval);
			},
			'mouseover': function(e) {
				if (fn.options.hoverColor != '') {
					this.set('styles', {'background-color': fn.options.hoverColor});
				}
			},
			'mouseout': function(e) {
				this.set('styles', {'background-color': ''});
			}
		});
	},
	
	resetScroller: function(el) {
		var scrollBar = el.getNext().getElement('p.smScrollDx');
		var scrollBtn = scrollBar.getFirst();
		var containerHeight = el.getSize().y;
		var availableScroll = el.getScrollSize().y;
		var scrollBarHeight = scrollBar.getCoordinates().height;
		var scale = scrollBarHeight / availableScroll;
		var maxScroll = availableScroll - containerHeight;
		var totalStep = Math.round(maxScroll / this.options.wheelStep);
		
		// store value to reset scroller
		el.store('maxScroll', maxScroll);
		
		// resize scroll button
		if (this.options.resizeScrollButton == true) {
			scrollBtn.set('styles', {'height': scrollBarHeight * scale});
		}
		
		// re create new slider
		el.store('slider', new Slider(scrollBar, scrollBtn, {
			onChange: function(pos){
				el.scrollTo(0, el.retrieve('maxScroll') * pos / totalStep);
				el.store('currentPos', pos);
		    },
			mode: 'vertical',
			range: [0, totalStep]
		}).set(el.retrieve('currentPos')));
	}
});

function siteReady() {
	var hoverBgColor = ($('homeIntro')) ? '#eeeeec' : '#d3d2ce';
	new mooScroller($$('.smScrollContent'), {
		hoverColor: hoverBgColor
	});
}

function initHomeSlide(){
	var container = $('homeSlide');
	if (!container) {
		return;
	}
	var images = [
		'images/visu_home_banner1.jpg',
		'images/visu_home_banner2.jpg',
		'images/visu_home_banner3.jpg',
		'images/visu_home_banner4.jpg',
		'images/visu_home_banner5.jpg',
		'images/visu_home_banner6.jpg',
		'images/visu_home_banner7.jpg',
		'images/visu_home_banner8.jpg',
		'images/visu_home_banner9.jpg'
	];
	var imageIndex = 0;
	var selectedImage = null;
	var removeHolder = false;
	var slideImages = new Asset.images(images, {
		'onProgress': function(counter, index){
			var img = new Element('img', {
				'id': 'img'+index,
				'src': images[index]
			}).set('opacity', 0).inject(container);
			img.fx = new Fx.Tween(img, {duration: 2500});
		},

		'onComplete': function() {
			slideIt();
			setInterval(function(){
				if (!removeHolder) {
					container.getFirst().destroy();
					removeHolder = true;
				}
				slideIt();
			}, 7000);
		}
	});
	
	function slideIt() {
		var img = $('img'+imageIndex);
		if (img) {
			if (selectedImage) {
				selectedImage.fx.cancel().start('opacity', 0);
			}
			img.fx.cancel().start('opacity', 1);
			selectedImage = img;
			imageIndex++;
			if (imageIndex >= images.length) {
				imageIndex = 0;
			}
		}
	}
}

function siteLoad() {
	initHomeSlide();
}

window.addEvent('domready', siteReady);
window.addEvent('load', siteLoad);
})();