$(function(){

	function PromoPanel(controller)
	{
		this.controller = controller;
		this.itemArr = [];
	}
	PromoPanel.prototype = {
		controller: null,
		itemArr: null,
		
		switchTo: function(id)
		{
			var l = this.itemArr.length;
			for (var i = 0; i < l; i++) {
				this.itemArr[i].hide();
			}
			if (this.itemArr[id])
			{
				this.itemArr[id].show();
			}
		},
		
		addNew: function($promotion)
		{
			this.itemArr.push($promotion);
		}
	}
	
	function Pagination(controller)
	{
		var _this = this;
		
		this.itemArr = [];
		this.controller = controller;
		this.$pagination = $("<div class=\"pagination ready\"><ul class=\"nav-scroll\"><li class=\"first\"><a href=\"#\"><span>&nbsp;</span></a></li><li class=\"last\"><a href=\"#\"><span>&nbsp;</span></a></li></ul></div>");
		this.$pagination.find("li.first a").click(function(e){
			_this.controller.switchToPrev();
			$(this).blur();
			return false;
		});
		this.$pagination.find("li.last a").click(function(e){
			_this.controller.switchToNext();
			$(this).blur();
			return false;
		});
	}
	Pagination.prototype = {
		itemArr: null,
		controller: null,
		$item: null,
		
		switchTo: function(id)
		{
			var $paginationItems = this.$pagination.find("li").not(".first").not(".last");
			$paginationItems.removeClass("act");
			$paginationItems.eq(id).addClass("act");
		},
		
		addNew: function($promotion)
		{
			var _this = this;

			// prepare the item
			var $item = $("<li></li>");
			this.itemArr.push($item);
			$item.html("<a href=\"#\"><span>" + this.itemArr.length + "</span>");
			this.$pagination.find("li.last").before($item);
			
			// prepare event handler for the item
			var id = this.itemArr.length - 1;
			$item.find("a").click(function(e){
				_this.controller.switchTo(id);
				$(this).blur();
				return false;
			});
		},
		
		getJQ: function()
		{
			return (this.itemArr.length > 0) ? this.$pagination : $();
		}
	}
	
	function Controller($node, selector)
	{
		// prepare private this for functions called in different scope
		var _this = this;

		$promotions = $node.find(selector);
		
		// don't rotate promotions when mouse is over them
		$promotions
			.mouseenter(function(e) {
				_this.stopRotation();
			})
			.mouseleave(function(e) {
				_this.startRotation();
		});
		
		// create pagination and promotion panel objects
		var promoPanel = new PromoPanel(this);
		var pagination = new Pagination(this);
		
		// add promotions to pagination and promotion panel
		$promotions.each(function(id, node) {
			var $node = $(node);
			pagination.addNew($node);
			promoPanel.addNew($node);
		});
		$node.append(pagination.getJQ());
		
		this.maxId = $promotions.size() - 1;
		this.promoPanel = promoPanel;
		this.pagination = pagination;
		this.$promotions = $promotions;
		
		this.switchTo(0);
		this.startRotation();
	}
	Controller.prototype = {
		curId: 0,
		maxId: 0,
		timeoutId: 0,
		promoPanel: null,
		pagination: null,
		$promotions: null,
		
		switchTo: function(id)
		{
			if (id > this.maxId) {
				id = 0;
			} else if (id < 0) {
				id = this.maxId;
			}
			this.promoPanel.switchTo(id);
			this.pagination.switchTo(id);
			this.curId = id;
		},
		
		switchToNext: function()
		{
			this.switchTo(this.curId + 1);
		},
		
		switchToPrev: function()
		{
			this.switchTo(this.curId - 1);
		},
		
		startRotation: function()
		{
			var _this = this;
			this.timeoutId = setTimeout(function(){
				_this.switchToNext();
				_this.startRotation();
			}, 3000);
		},
		
		stopRotation: function()
		{
			clearTimeout(this.timeoutId);
		}
	}
	
	var promoCtrl = new Controller($(".m-promo-carousel .regular"), ".promotion");
});


