var Slider = function(Box) {
	var self = this;

	self.speed = 1000;
	self.Busy = false;
	self.OuterBox = Box;
	self.Visible = 3;	
	self.Circular = true;
	self.ConteinmentBox = $('<div />');
	self.SlideBox = $('<div />');
	
	if (self.Circular)
	{
		self.OuterBox.append(self.OuterBox.find('div:nth-child(1)').clone());
		self.OuterBox.append(self.OuterBox.find('div:nth-child(2)').clone());
		self.OuterBox.prepend(self.OuterBox.find('div:nth-child(4)').clone());
	}
	
	self.List = $(self.OuterBox).find('div');
	
	
	self.SlideBox.append(self.List).addClass('MainSlideBox');
	self.ConteinmentBox.append(self.SlideBox);
	self.OuterBox.append(self.ConteinmentBox);

	
	self.CurrentSelect = 0;
	if (self.Circular)
		self.CurrentSelect=self.CurrentSelect+self.Visible-2;

	self.NavigateBar = $('<div />').addClass('MainSliderBar').prependTo(self.OuterBox);
	self.NavigateConteiner = $('<div />').addClass('MainSliderBarConteiner').appendTo(self.NavigateBar).css({position: 'relative'});
	self.NavigateConteinerWidth = 0;


	self.OuterBox.css({ overflow: 'hidden' });
	self.ConteinmentBox.css({ position: 'relative', left: -1 * self.OuterBox.width() * (self.List.length - 1), width: (self.List.length * 2 - 1) * self.OuterBox.width(), height: self.OuterBox.height() });
	self.SlideBox.css({ position: 'relative', width: self.List.length * self.OuterBox.width() });
	

	self.List.each(function(id, item) {
		$(item).css({
			float: 'left', 
			width: self.OuterBox.width() - parseInt($(this).css('paddingLeft')) - parseInt($(this).css('paddingRight')) - parseInt($(this).css('marginLeft')) - parseInt($(this).css('marginRight')), 
			height: self.OuterBox.height() 
		}).show();
		var Node = $('<div />').append($(item).attr('title')).click(function() {
			self.Select(id);
		});
		if(id > 0) {
			Node.prepend('<sup>' + id + '</sup>');
		}
		self.NavigateConteiner.append(Node);
		self.NavigateConteinerWidth += Node.outerWidth(true);
		$(item).removeAttr('title');
	});
	self.NavigateConteiner.css({left: 470 - (self.NavigateConteiner.find('div:nth-child(' + (self.CurrentSelect + 1) + ')').outerWidth(true) / 2) });
	self.NavigateConteiner.find('div:first-child').addClass('active');

	self.ArrowBox = $('<div />').prependTo(self.OuterBox).addClass('MainSliderArrowBox');
	self.ArrowLeft = $('<div />').addClass('MainSliderButtonLeft').appendTo(self.ArrowBox).click(function() { self.Left(); });
	self.ArrowLast = $('<a />').addClass('MainSliderButtonLast').appendTo(self.ArrowBox).attr('href', '/register/');
	self.ArrowRight = $('<div />').addClass('MainSliderButtonRight').appendTo(self.ArrowBox).click(function() { self.Right(); });
	
	self.SlideBox.css({left: self.OuterBox.width() * (self.List.length - 1)});
	self.ShowArrows();
	if (self.Circular)
		self.SelectNotAnimate(self.CurrentSelect);
	
	self.OuterBox.show();
	
	self.SlideBox.draggable({
		axis: 'x',
		cursor: 'pointer',
		containment: 'parent',
		start: function(event, ui) {
			var left = parseInt(self.SlideBox.css('left'));
			self.SlideBox.stop();
			self.HideArrows();
			self.NavigateConteiner.stop();
			self.Busy = false;
			self.CurrentSelect = parseInt(self.List.length - (left + (self.OuterBox.width() / 2)) / self.OuterBox.width());
			if(self.Autoplay) {
				clearInterval(self.Autoplay);
			}
		},
		drag: function(event, ui) {
/*
			self.NavigateConteiner.css({
				left: (self.NavigateConteinerWidth / self.SlideBox.width() * (self.SlideBox.width() - parseInt(self.SlideBox.css('left'))))
			});
*/
		},
		stop: function(event, ui) { 
			var left = parseInt(self.SlideBox.css('left'));
			var Num = parseInt(self.List.length - (left + (self.OuterBox.width() / 2)) / self.OuterBox.width());
			self.SlideBox.animate({
					left: (self.OuterBox.outerWidth(true) * (self.List.length - 1)) - (self.OuterBox.outerWidth(true) * Num)
				}, self.speed, function() {
					if(self.Circular)
					{
						self.SlideBox.css({left: (self.OuterBox.outerWidth(true) * (self.List.length - 1)) - (self.OuterBox.outerWidth(true) * Num)});
					}
					
				
					self.CurrentSelect = Num;
					self.Busy = false;
			});
			
			if(self.Circular)
			{
				if(Num > self.List.length - self.Visible + 1)
				{
					Num = self.Visible-1;
					var Offset = 470 - (self.NavigateConteiner.find('div:nth-child(' + (Num) + ')').outerWidth(true) / 2);
					for(var i = 0; i < Num-1; i++) {
						Offset -= self.NavigateConteiner.find('div:nth-child(' + (i + 1) + ')').outerWidth(true);
					}
					self.NavigateConteiner.find('div.active').removeClass('active');
					self.NavigateConteiner.css({ left: Offset });
					self.NavigateConteiner.find('div:nth-child(' + (Num) + ')').addClass('active');	
				}
				if(Num == 0)
				{
					Num = self.List.length - 3;
					var Offset = 470 - (self.NavigateConteiner.find('div:nth-child(' + (Num+2) + ')').outerWidth(true) / 2);
					for(var i = 0; i < Num+1; i++) {
						Offset -= self.NavigateConteiner.find('div:nth-child(' + (i + 1) + ')').outerWidth(true);
					}
					self.NavigateConteiner.find('div.active').removeClass('active');
					self.NavigateConteiner.css({ left: Offset });
					self.NavigateConteiner.find('div:nth-child(' + (Num+2) + ')').addClass('active');	

				}
		
			}

			var Offset = 470 - (self.NavigateConteiner.find('div:nth-child(' + (Num + 1) + ')').outerWidth(true) / 2);
			for(var i = 0; i < Num; i++) {
				Offset -= self.NavigateConteiner.find('div:nth-child(' + (i + 1) + ')').outerWidth(true);
			}
			self.NavigateConteiner.find('div.active').removeClass('active');
			self.NavigateConteiner.animate({ left: Offset }, 1000, function() {
				self.NavigateConteiner.find('div:nth-child(' + (Num + 1) + ')').addClass('active');
				self.ShowArrows();
			});
		}
	});
	self.OuterBox.prepend($('<div />').addClass('MainSliderOverlayLeft'));
	self.OuterBox.prepend($('<div />').addClass('MainSliderOverlayRight'));
	
	self.Autoplay = setInterval(function() { self.Right(true); }, 5000);
}
Slider.prototype.Select = function(Num, Autoplay) {
	var self = this;
	if(!Autoplay) {
		if(self.Autoplay) {
			clearInterval(self.Autoplay);
		}
	}
	if(self.Busy) return;
	if(Num != this.CurrentSelect) {
		self.Busy = true;
		self.HideArrows();
		self.SlideBox.animate({
				left: (self.OuterBox.outerWidth(true) * (self.List.length - 1)) - (self.OuterBox.outerWidth(true) * Num)
			}, self.speed, function() {
				self.CurrentSelect = Num;
				self.Busy = false;
		});

		var Offset = 470 - (self.NavigateConteiner.find('div:nth-child(' + (Num + 1) + ')').outerWidth(true) / 2);
		for(var i = 0; i < Num; i++) {
			Offset -= self.NavigateConteiner.find('div:nth-child(' + (i + 1) + ')').outerWidth(true);
		}
		self.NavigateConteiner.find('div.active').removeClass('active');
		self.NavigateConteiner.animate({ left: Offset }, 1000, function() {
			self.NavigateConteiner.find('div:nth-child(' + (Num + 1) + ')').addClass('active');
			self.ShowArrows();
		});
	}
}

Slider.prototype.SelectNotAnimate = function(Num) {
	var self = this;
	if(self.Busy) return;
	self.Busy = true;
	//self.HideArrows();
	self.SlideBox.css({left: (self.OuterBox.outerWidth(true) * (self.List.length - 1)) - (self.OuterBox.outerWidth(true) * Num)});
	var Offset = 470 - (self.NavigateConteiner.find('div:nth-child(' + (Num + 1) + ')').outerWidth(true) / 2);
	for(var i = 0; i < Num; i++) {
		Offset -= self.NavigateConteiner.find('div:nth-child(' + (i + 1) + ')').outerWidth(true);
	}
	self.NavigateConteiner.find('div.active').removeClass('active');
	self.NavigateConteiner.css({ left: Offset });
	self.NavigateConteiner.find('div:nth-child(' + (Num + 1) + ')').addClass('active');
	self.Busy = false;
	self.CurrentSelect = Num;
}

Slider.prototype.Left = function() {
	var self = this;
	if(self.CurrentSelect > (0+self.Circular)) {
		self.Select(self.CurrentSelect - 1);
	}
	else
	{
		if (self.Circular)
		{
			self.SelectNotAnimate(self.List.length-2);
			self.Left();
		}
	}
	
}
Slider.prototype.Right = function(Autoplay) {
	var self = this;
	if(self.CurrentSelect < self.List.length - 1 - self.Circular) {
		self.Select(self.CurrentSelect + 1, Autoplay);
	}
	else {
		if (self.Circular)
		{
		self.SelectNotAnimate(1);
		self.Right();
		}
		//self.Select(0, Autoplay);
 	}
}
Slider.prototype.HideArrows = function() {
	var self = this;
	self.ArrowBox.animate({/*marginTop: 0, */opacity: 0}, 300);
}
Slider.prototype.ShowArrows = function() {
	var self = this;
	var CurrentNode = self.NavigateConteiner.find('div:nth-child(' + (self.CurrentSelect + 1) + ')');
	if(CurrentNode.is(':first-child')) {
		self.ArrowLeft.hide();
	} else {
		self.ArrowLeft.show();
	}
	if(CurrentNode.is(':last-child')) {
		self.ArrowRight.hide();
//		self.ArrowLast.show();
	} else {
		self.ArrowRight.show();
//		self.ArrowLast.hide();
	}
	self.ArrowBox.css({
		width: CurrentNode.width() + parseInt(CurrentNode.css('marginLeft')) + parseInt(CurrentNode.css('marginRight')) + parseInt(CurrentNode.css('paddingLeft')) + parseInt(CurrentNode.css('paddingRight')) + 40,
		left: 470 - (CurrentNode.outerWidth(true) / 2) - 10
	})
	self.ArrowBox.animate({/*marginTop: 5, */opacity: 1}, 300);
}