$(function(){
	/* Литсалка матчей в виджете */
	
	var MatchLister = function() {
		this.opt = opt;
		this.active = 1;
		this.init();
	}
	
	MatchLister.prototype.move = function() {
		var self = this;
		
		self.opt.line.css({
			marginLeft: -1 * self.active * self.opt.matchWidth
		});
	}
	
	MatchLister.prototype.moveLeft = function() {
		var self = this;
		
		if (self.active > 0)
			self.active -= 1;
		self.move();
		if (self.active == 0)
			self.loadMatch({played: true});
	}
	
	MatchLister.prototype.moveRight = function() {
		var self = this;
		var max = self.opt.matches.length - self.opt.viewPort;
		
		if (self.active < max)
			self.active += 1;
		self.move();
		if (self.active == max)
			self.loadMatch({played: false});
	}
	
	MatchLister.prototype.showLoader = function() {
		var self = this;
		
		self.opt.loader.show();
		self.opt.prev.addClass('busy').css('opacity', 0.2);
		self.opt.next.addClass('busy').css('opacity', 0.2);
	}
	
	MatchLister.prototype.hideLoader = function() {
		var self = this;
		
		self.opt.loader.hide();
		self.opt.prev.removeClass('busy').css('opacity', 1);
		self.opt.next.removeClass('busy').css('opacity', 1);
	}
	
	MatchLister.prototype.loadMatch = function(opt) {
		var self = this;
		var date = null;
		
		if (opt.played)
			date = self.opt.matches.eq(0)
				.find('span.match-date').text();
		else
			date = self.opt.matches.eq(self.opt.matches.length - 1)
				.find('span.match-date').text();
		
		$.ajax({
			url: self.opt.url,
			data: {
				status: (opt.played) ? 2 : 1,
				date: date
			},
			beforeSend: function() {
				self.showLoader();
			},
			error: function(xhr, textStatus, errorThrown) {
				alert(textStatus);
				
				self.hideLoader();
			},
			success: function(data) {
				if (data) {
					if (opt.played) {
						self.opt.line.prepend(data);
						self.active = 1;
					} else {
						self.opt.line.append(data);
					}
					
					self.update(opt);
				}
				
				self.hideLoader();
			}
		});
	}
	
	MatchLister.prototype.update = function(opt) {
		var self = this;
		
		self.opt.matches = $(self.opt.matchesDom);
		self.opt.line.width(
			self.opt.matches.length * self.opt.matchWidth);
		if (opt && opt.played)
			self.opt.line.css('marginLeft', 
				-self.active * self.opt.matchWidth + 'px');
		
		self.links = $(self.opt.linksDom, self.root);
		self.links.each(function(){
			if (!$(this).hasClass(self.opt.openLinkClass))
				$(this).unbind('click');
		});
		
		self.links.click(function(){
			if ($(this).hasClass(self.opt.openLinkClass)) {
				self.hideLinks();
			} else {
				self.hideLinks();
				// Копируем меню из того матча, в котором 
				// нажата ссылка
				var ul = $(this).parent()
					.children(self.opt.linksNavDom);
				var clone = ul.clone(); 
				var position = $(this).parent().position();

				self.opt.root.parent().append(clone);
				clone.append('<li class="bottom"> \
					<a class="hide-links" href="#"> \
						Скрыть ссылки \
					</a> \
					</li>')
					.css({marginLeft: position.left + 'px'})
					.show();
				$(this).addClass(self.opt.openLinkClass);
				$('a.hide-links', clone).click(function(){
					self.hideLinks();

					return false;
				});

				$(window).click(function(e){
					var target = $(e.target);
					var nav = target.parents(self.opt.linksNavDom);

					if (!nav.length) {
						self.hideLinks();
					}
				});
			}
			
			return false;
		});
	}
	
	MatchLister.prototype.hideLinks = function() {
		var self = this;
		
		self.opt.root.parent().children(self.opt.linksNavDom)
			.remove();
		self.opt.root.find('a.' + self.opt.openLinkClass)
			.removeClass(self.opt.openLinkClass);
	}
	
	MatchLister.prototype.init = function() {
		var self = this;
		
		self.opt.prev.click(function() {
			if (!$(this).hasClass('busy')) {
				self.hideLinks();
				self.moveLeft();
			}
			
			return false;
		});
		self.opt.next.click(function() {
			if (!$(this).hasClass('busy')) {
				self.hideLinks();
				self.moveRight();
			}
			
			return false;
		});
		
		self.update();
	}
	
	
	var opt = {
		root: $('#important'),
		line: $('#important div.line:first'),
		matches: $('#important div.match'),
		matchesDom: '#important div.match',
		loader: $('img.imp-loader'),
		matchWidth: 240,
		viewPort: 4,
		prev: $('#imp-prev'),
		next: $('#imp-next'),
		url: '/comp/important/',
		linksNavDom: 'ul.match-nav',
		linksDom: 'a.show-links',
		openLinkClass: 'show-links-opened'
	}
	
	var ml = new MatchLister(opt);
});