
	function indexGallery(){
		
		this.oneItemWidth = 150;
		this.galleryWidth;
		this.sliderObj;
		this.galObj; 
		this.navObj;
		this.animateDuration = 300;
		//this.toddlerStep=0;
		this.navWidth = 718;// 809-91=718
		this.dragPoint={};
		
		var self=this;
		
		this.init = function(){
			this.sliderObj = $('.slider');
			this.galObj = this.sliderObj.find('.s ul');
			this.navObj = this.sliderObj.find('.nav div');
			// detect gallery width
			this.galleryWidth = this.galObj.find('li').length * this.oneItemWidth;
			this.galObj.css({width:this.galleryWidth});
			//this.toddlerStep = this.navWidth * this.oneItemWidth / (this.galleryWidth - parseInt($(window).width()));
			// attach events
			this.addEventListeners();
		}
		
		this.addEventListeners = function(){
			// back button
			this.navObj.find('.l').click(this.actionBack);
			// forward button
			this.navObj.find('.r').click(this.actionForward);
			// scroll
			this.navObj.find('div span').mousedown(this.startDrag);
		}
		
		this.actionBack = function(){
			if (self.isLocked()) return false;
			var curLeft = parseInt(self.galObj.css('left'));
			curLeft = (isNaN(curLeft))? 0 : curLeft;
			var winWidth = parseInt($(window).width());
			// check for start position
			if (curLeft >= 0) return false;
			self.lockAnimation();
			var itemsLeft = curLeft+self.oneItemWidth;
			itemsLeft = (itemsLeft>0)? 0 : itemsLeft;
			self.galObj.animate(
					{left:itemsLeft},
					self.animateDuration,
					'swing',
					self.unLockAnimation
			);
			// move toddler
			self.navObj.find('div span').animate(
					{left:self.navWidth * Math.abs(itemsLeft) / (self.galleryWidth - winWidth)},
					self.animateDuration
			);
			return false;
		}
		
		this.actionForward = function(){
			if (self.isLocked()) return false;
			var curLeft = parseInt(self.galObj.css('left'));
			curLeft = (isNaN(curLeft))? 0 : curLeft;
			var winWidth = parseInt($(window).width());
			// check for finish position
			if (self.galleryWidth - winWidth <= Math.abs(curLeft)) return false;
			self.lockAnimation();
			var itemsLeft = curLeft-self.oneItemWidth;
			itemsLeft = (Math.abs(itemsLeft)>self.galleryWidth - winWidth)? -(self.galleryWidth - winWidth) : itemsLeft;
			self.galObj.animate(
					{left:itemsLeft},
					self.animateDuration,
					'swing',
					self.unLockAnimation
			);
			// move toddler
			self.navObj.find('div span').animate(
					{left:self.navWidth * Math.abs(itemsLeft) / (self.galleryWidth - winWidth)},
					self.animateDuration
			);
			return false;
		}
		
		this.startDrag = function(evnt){
			// save click position
			self.dragPoint = {
					x:evnt.clientX+self.navObj.find('div').offset().left-self.navObj.find('div span').offset().left
			};
			// attach mousemove event
			$(document).bind('mousemove.popup', self.moveScroll);
			$(document).bind('mouseup.popup', self.dragScroll);
			return false;
		}
		
		this.moveScroll = function(evnt){
			var newLeft = evnt.clientX - self.dragPoint.x;
			var winWidth = parseInt($(window).width());
			newLeft = (newLeft<0)?0:newLeft;
			newLeft = (newLeft>self.navWidth)?self.navWidth:newLeft;
			self.navObj.find('div span').css({
				left: newLeft
			});
			self.galObj.css({
				left:-((self.galleryWidth - winWidth) * newLeft / self.navWidth)
			});
			return false;
		}
		
		this.dragScroll = function(){
			// unbind mousemove
			$(document).unbind('.popup');
			return false;
		}
		
		this.lockAnimation = function(){
			this.galObj.addClass('inAction');
		}
		
		this.unLockAnimation = function(){
			self.galObj.removeClass('inAction');
		}
		
		this.isLocked = function(){
			return this.galObj.hasClass('inAction');
		}
	}
	
	function indexGallery2(){
		
		this.oneItemWidth = 150;
		this.galleryWidth;
		this.sliderObj;
		this.galObj;
		this.animateBackDuration = 300;
		this.animationSpeed = 0.035;// pixels by second

		var self = this;
		
		this.init = function(){
			this.sliderObj = $('.slider');
			this.galObj = this.sliderObj.find('.s ul');
			// detect gallery width
			this.galleryWidth = this.galObj.find('li').length * this.oneItemWidth;		
			while( this.galleryWidth < parseInt(this.sliderObj.width()) + this.oneItemWidth ){
				// пока ширина галереи не будет такой чтобы одна нода скрывалась
				this.galObj.append(this.galObj.find('li').clone());
				this.galleryWidth = this.galleryWidth * 2;
			}
			this.galObj.css({width:this.galleryWidth});
			// attach events
			this.addEventListeners();
			// start move
			this.startAnimation();
			
		}
		
		this.addEventListeners = function(){
			self.galObj.find('li a img').hover(
				function(){self.galObj.stop();},
				function(){self.startAnimation();}
			);
		}
		
		this.startAnimation = function(){
			// set animation time
			var disLeft = parseInt(self.galObj.css('left'));
			disLeft = (isNaN(disLeft))?0:disLeft;
			var needLeftPath = self.galleryWidth - parseInt(self.sliderObj.width()) + disLeft;
			//console.log(needLeftPath/self.animationSpeed);
			//alert(needLeftPath/self.animationSpeed);
			if(needLeftPath>0){
				self.galObj.animate(
						{left:self.sliderObj.width()-self.galleryWidth},
						needLeftPath/self.animationSpeed,
						'linear',
						self.restartAnimation
				);
			}
		}
		
		this.restartAnimation = function(){
			// перенесем скрытые из начала в конец
			var displayedItems = Math.ceil(parseInt(self.sliderObj.width())/self.oneItemWidth);
			//console.log(displayedItems);
			var galLength = self.galObj.find('li').length;
			//console.log(galLength);
			for (var i=0;i<galLength-displayedItems;i++){
				// перенесем в конец
				self.galObj.append(self.galObj.find('li:first'));
			}
			self.galObj.css({left:parseInt(self.galObj.css('left'))+ (galLength-displayedItems)*self.oneItemWidth});
			self.startAnimation();
			/*
			self.galObj.animate(
					{left:0},
					self.animateBackDuration,
					'swing',
					self.startAnimation
			);*/
		}
	}

$(document).ready(function(){
	var indexGal = new indexGallery2();
	indexGal.init();	
});
