var insert = require('./empty');
var remove = require('./remove');
var empty = require('./empty');
var append = require('./append');
var attach = require('./attach');
var fromElement = require('./fromElement');

module.exports = function Region (properties) {
	console.log(FRAMEWORK);

	_.extend(this, FRAMEWORK.Events);

	if (!properties) {
		properties = {};
	}
	if (!properties.$el) {
		throw new Error('Trying to instantiate region with no $el!');
	}

	// Fold in properties to prototype
	_.extend(this, properties);

	// If neither an id nor a `template` was specified,
	// we'll throw an error, since there's no way to get a hold of the region
	if (!this.id && !(this.$el.attr('default') || this.$el.attr('template') ||
			this.$el.attr('contents'))) {

		throw new Error(
			this.parent.id + ' :: Either `data-id`, `contents`, or both ' +
			'must be specified on regions. \n' +
			'e.g. <region data-id="foo" template="SomeComponent"></region>'
		);
	}


	// Set up list to house child components
	this._children = [];

	_.bindAll(this);

	// Set up convenience access to this region in the global region cache
	FRAMEWORK.regions[this.id] = this;
};

FRAMEWORK.Region.fromElement = function (el, parent) { return fromElement.call(this, el, parent);};
FRAMEWORK.Region.prototype.remove = function (atIndex) { return remove.call(this, atIndex);};
FRAMEWORK.Region.prototype.empty = function() {return empty.call(this);};
FRAMEWORK.Region.prototype.insert = function (atIndex, componentId, properties) {
	return insert.call(this, atIndex, componentId, properties);
};
FRAMEWORK.Region.prototype.append = function(componentId, properties) {
	return append.call(this, componentId, properties);
};
FRAMEWORK.Region.prototype.attach = function(component, properties) {
	return append.call(this, component, properties);
};




var insert = require('./empty');
var remove = require('./remove');
var empty = require('./empty');
var append = require('./append');
var attach = require('./attach');
var fromElement = require('./fromElement');

Region = module.exports = function constructor(properties) {

	_.extend(this, FRAMEWORK.Events);

	if (!properties) {
		properties = {};
	}
	if (!properties.$el) {
		throw new Error('Trying to instantiate region with no $el!');
	}

	// Fold in properties to prototype
	_.extend(this, properties);

	// If neither an id nor a `template` was specified,
	// we'll throw an error, since there's no way to get a hold of the region
	if (!this.id && !(this.$el.attr('default') || this.$el.attr('template') ||
			this.$el.attr('contents'))) {

		throw new Error(
			this.parent.id + ' :: Either `data-id`, `contents`, or both ' +
			'must be specified on regions. \n' +
			'e.g. <region data-id="foo" template="SomeComponent"></region>'
		);
	}


	// Set up list to house child components
	this._children = [];

	_.bindAll(this);

	// Set up convenience access to this region in the global region cache
	FRAMEWORK.regions[this.id] = this;

};

Region.fromElement = function (el, parent) { return fromElement.call(this, el, parent);};
Region.prototype.remove = function (atIndex) { return remove.call(this, atIndex);};
Region.prototype.empty = function() {return empty.call(this);};
Region.prototype.insert = function (atIndex, componentId, properties) {
	return insert.call(this, atIndex, componentId, properties);
};
Region.prototype.append = function(componentId, properties) {
	return append.call(this, componentId, properties);
};
Region.prototype.attach = function(component, properties) {
	return append.call(this, component, properties);
};



refactor region and added prototypical methods