jQuery(function(){ 
	initScrollGallery(); 
});
function initScrollGallery() {
	// settings
	var _autoSlide = false;
	var _easing = 'swing';
	var _activeClass = 'active';
	var _switchTime = 3000;
	var _animSpeed = 600;
	var _delay = 0;

	jQuery('div.gallery-products').each(function(){
		// gallery options
		var _holder = jQuery(this);
		var _btnPrev = _holder.find('a.btn-prev');
		var _btnNext = _holder.find('a.btn-next');
		var _slidesHolder = _holder.find('div.slider-holder');
		var _slidesHolderWidth = _slidesHolder.width();
		var _slider = _slidesHolder.find('>ul').css({marginLeft:0});
		var _slides = _slider.children();
		var _slidesCount = _slides.length;
		var _slideWidth = _slides.eq(0).outerWidth(true);
		var _visibleCount = Math.ceil(_slidesHolder.width()/_slideWidth);
		var _currentIndex = 0;
		var _oldIndex = _currentIndex;
		var _timer;
		var _scrollTimer;

		// scrollbar
		_slidesCount -= _visibleCount-1;
		var _document = jQuery(document);
		var _scrollBar = _holder.find('div.scrollbar');
		var _scrollBarWidth = _scrollBar.outerWidth();
		var _scroller = _scrollBar.find('div.slider').css({left:0});
		var _scrollerWidth = _scroller.outerWidth(true);
		var _scrollSize = _scrollBarWidth - _scrollerWidth;
		var _scrollStepWidth = Math.floor(_scrollSize/(_slidesCount-1));
		var _pullFlag = false;
		var _sOffset = 0;

		function toggleState(state) {
			if(state) {
				_scrollBar.addClass(_activeClass);
				disableSelection();
				_pullFlag = true;
			} else {
				_scrollBar.removeClass(_activeClass);
				restoreSelection();
				syncScroller();
				_pullFlag = false;
			}

			// util functions
			function disableSelection() {
				document.onselectstart = function() { return false; }
				document.onmousedown = function() { return false; }
			}
			function restoreSelection() {
				document.onselectstart = null;
				document.onmousedown = null;
			}
			return false;
		}
		_scroller.bind('click',function(){return false});
		_scroller.bind('mousedown', function(e){
			_sOffset = e.pageX-_scroller.offset().left;
			toggleState(true);
			return false;
		})
		_scroller.bind('mouseup', function(e){toggleState(false)})
		_document.bind('mouseup', function(e){toggleState(false)});

		// mouse move handler
		var _lastX = -1;
		_document.mousemove(function(e){
			if(_pullFlag && e.pageX != _lastX) {
				_lastX = e.pageX;
				_mLeft = e.pageX - _scrollBar.offset().left;
				_mLeft -= _sOffset;

				if(_mLeft < 0) _mLeft = 0;
				if(_mLeft > _scrollBarWidth-_scrollerWidth) _mLeft = _scrollBarWidth-_scrollerWidth;
				_scroller.css('left',_mLeft);

				// scroll to
				var _slideIndex = Math.round(_mLeft/_scrollStepWidth);
				if(_slideIndex != _currentIndex) {
					if(_scrollTimer) clearTimeout(_scrollTimer);
					_scrollTimer = setTimeout(function(){
						_currentIndex = _slideIndex;
						switchSlide();
					},_delay)
				}
			}
		});

		// control buttons
		_btnPrev.click(function(){
			prevSlide();
			return false;
		})
		_btnNext.click(function(){
			nextSlide();
			return false;
		})

		// gallery control
		function prevSlide() {
			if(_currentIndex > 0) {
				_currentIndex--;
				switchSlide();
				syncScroller();
			}
		}
		function nextSlide() {
			if(_currentIndex < _slidesCount-1) {
				_currentIndex++;
				switchSlide();
				syncScroller();
			}
		}
		function syncScroller() {
			_scroller.animate({left:_currentIndex*_scrollStepWidth},{duration:_animSpeed, easing:_easing, queue:false});
		}

		// gallery animation
		function switchSlide() {
			_slider.animate({marginLeft:-_currentIndex*_slideWidth},{duration:_animSpeed, easing:_easing, queue:false});
			autoSlide();
		}
		function autoSlide() {
			if(!_autoSlide) return;
			if(_timer) clearTimeout(_timer);
			_timer = setTimeout(nextSlide,_switchTime);
		}
		autoSlide();
	});
}

