var PeopleSelector = new Class({
	Implements: [Options, Events],
	
	options: {
		initNumber: 	1,
		minNumber:		1,
		groupNumber:	5,
		onChange:		$empty,
		roomClass:		"room",
		childrenClass:	"children",
		adultsClass:	"adults",
		roomInfo:		"Simulación de distribución por habitaciones"
	},
	
	roomProperties: {
		adults		: "adults",
		children	: "children"
	},
	
	matrixElements: {},
	downActive: 	false,
	focusActive: 	false,
	containerHover:	false,
	
	initialize: function(container, input, options)
	{
		this.container 			= $(container);
		this.container.addEvent("mouseenter", this.focus.bind(this));
		this.container.addClass("IntContainer");
		this.container.set("morph", {duration:100});
		
		this.input				= $(input);
		this.input.set("autocomplete", "off");
		this.input.addEvent("focus", this.focus.bind(this));
		
		this.observer			= new InputObserver(this.input, this.inputTimedAction.bind(this));
		
		this.mask = new meio.Mask(input, {mask:"999"});
		this.wrapper = new Element("div", {"class":"matrixWrapper"}).inject(this.container)
		this.matrixContainer 	= new Element("div", {"class":"matrix"}).inject(this.wrapper);

		this.searchBus = new SearchBus();
		this.searchBus.registerCallback(this.numPeopleChange.bind(this), "numPeopleChange");
		
		
		this.setOptions(options);
		this.setInitialEvents();
		//this.createMatrix(this.options.initNumber);
		this.originalValue = this.getValue();
		this.selectRange(this.getValue());
	},
	
	inputTimedAction: function()
	{
		this.observer.progressBar.setStyle("width",0);
		this.input.select();
		this.searchBus.trigger("numPeopleChange");
	},
	
	numPeopleChange: function(params)
	{
	},
	
	focus: function()
	{
		/*this.container.morph(".focus");
		this.input.focus();
		this.input.select();
		this.focusActive = true;*/
	},
	
	blur: function(e)
	{
		this.container.morph(".blur");
		this.focusActive = false;
	},
	
	clickBlur: function(e)
	{
		if(!e || !$defined(e)) return false;
		
		if(e.target == this.container || e.target.getParent(".IntContainer") == this.container) return false;
		this.blur(e);
	},
	
	setInitialEvents: function()
	{
		
		
		this.minusButton = new Element("span", {"class":"removeMore", html:"<span>-</span>"}).inject(this.input, "after");
		this.minusButton.addEvent("click", function(){
			this.selectRange(this.getValue() - 1, true);
			this.observer.changed();
		}.bind(this));
		
		this.plusButton = new Element("span", {"class":"addMore", html:"<span>+</span>"}).inject(this.minusButton, "after");
		this.plusButton.addEvent("click", function(){
			if($defined(document.capacity) && ($defined(document.totalPeople)))
			{
				if(document.totalPeople == document.capacity)
				{
					return;
				}
			}
			this.selectRange(this.getValue() + 1, true);
			this.observer.changed();
		}.bind(this));
		
		
		this.info = new Element("div", {
			text	: this.options.roomInfo,
			"class"	: "peopleInfo"
		}).inject(this.matrixContainer, "after");
		
		this.container.addEvent("click", this.focus.bind(this));
		//document.addEvent("click", this.clickBlur.bind(this));
		this.input.addEvent("tab", this.blur.bind(this));
		this.input.addEvent("shiftTab", this.blur.bind(this));
		
		//this.container.addEvent("mouseenter", function(){this.containerHover = true}.bind(this))
		//this.container.addEvent("mouseleave", function(){this.containerHover = false}.bind(this))
		
		
		this.input.addEvent("keyup", function(e){
			
			if((e.key == "esc") || (e.control && e.key == "z")) 
			{
				this.selectRange(this.originalValue);
				this.searchBus.trigger("numPeopleChange");
				this.input.select();
			}
			
			this.selectRange(this.input.get("value"));
		}.bind(this));
		
		this.input.addEvent("keypress", function(e){
			if(e.code == 43) 
			{
				e.stop();
				this.selectRange(this.getValue() + 1, true);
				return false;
			}
			
			if(e.code == 45) 
			{
				e.stop();
				this.selectRange(this.getValue() - 1, true);
				return false;
			}
		}.bind(this));
		
		this.input.addEvent("plus", function(e){e.stop()});
		this.input.addEvent("minus", function(e){e.stop()});
	},
	
	getValue: function()
	{
		var value = this.input.get("value");
		if(value == "") value = this.options.initNumber;
		return value.toInt();
	},
	
	createMatrix: function(number)
	{
			
		$H(this.matrixElements).each(function(el){el.destroy()});
		this.matrixElements = {};
		
		if(number <= 0)
		{
			return false;
		}	

		
		var groupNumber = this.options.groupNumber;
		
		var groups = (number/groupNumber).toInt();
		
		if(groups >= 1)
		{
			number = number - (groups*groupNumber);
		}
		
		if(number == 0)
		{
			groups--;
			number = groupNumber;
		}
		
		var itemCounter = 1;
		
		for ( var counter = 1; counter <= groups; counter++) 
		{
			var people =  counter*groupNumber;
			var element = new Element("div", {"class":"matrixElement group", html:"<span>"+groupNumber+"</span>"}).inject(this.plusButton, "after");
			element.addEvent("click", this.selectRange.bind(this, [people]));
			element.addEvent("click",  this.searchBus.trigger.bind(this.searchBus, ["numPeopleChange"]));
			element.addEvent("click", function(e){this.downActive = false}.bind(this));
			this.matrixElements[itemCounter] = element;
			itemCounter++;
		}
		
		for ( var counter = 1; counter <= number; counter++) 
		{
			var people =  groups*groupNumber+counter;
			var element = new Element("div", {"class":"matrixElement", html:"<span>"+counter+"</span>"}).inject(this.plusButton, "after");
			element.addEvent("click",  this.selectRange.bind(this, [people]));
			element.addEvent("click",  this.searchBus.trigger.bind(this.searchBus, ["numPeopleChange"]));
			element.addEvent("click", function(e){this.downActive = false}.bind(this));
			this.matrixElements[itemCounter] = element;
			itemCounter++;
		}
		
	},
	
	clearMatrix: function()
	{
		this.matrixContainer.set("html", "");
	},
	
	createRoomMatrix: function(roomHash)
	{
		this.clearMatrix();
		this.value = 0;
		roomHash.each(this.createRoomItem.bind(this));
		this.selectRange(this.value)
	},
	
	createRoomItem: function(roomHash)
	{
		var room = new Element("div", {"class":this.options.roomClass, html:"<div class='decoration'></div>"}).inject(this.matrixContainer);
		this.createChildren(room, roomHash[this.roomProperties.children], this.options.childrenClass);
		this.createChildren(room, roomHash[this.roomProperties.adults], this.options.adultsClass);
		this.value =  this.value + roomHash[this.roomProperties.children] + roomHash[this.roomProperties.adults];
	},
	
	createChildren: function(room, num, cssClass)
	{
		for(var counter = 0; counter < num; counter++)
		{
			var el = new Element("div", {"class":cssClass}).inject(room);
		}		
	},
	
	selectRange: function(integer, select)
	{
		if(integer < 1) integer = this.options.minNumber;
		if(integer > 20) integer = 20;
		
		//this.createMatrix(integer);
		this.input.set("value", integer);
		if($defined(select) && select == true)
			this.input.select();
		
		this.fireEvent("onChange", [this.input.get("value")]);
	}
	
})