var AvailableCategories = [
{id:0, name:'All categories'},
{id:1, name:'Films & Animation'},
{id:2, name:'Autos & Vehicles'},
{id:23, name:'Comedy'},
{id:24, name:'Entertainment'},
{id:10, name:'Music'},
{id:25, name:'News & Politics'},
{id:22, name:'People & Blogs'},
{id:15, name:'Pets & Animals'},
{id:26, name:'How-to & Style'},
{id:17, name:'Sports'},
{id:19, name:'Travel & Events'},
{id:20, name:'Gaming'},
{id:27, name:'Education'},
{id:28, name:'Nonprofits & Activism'},
{id:29, name:'Science & Technology'}
];


var CategoriesChooserElement = Class.create();
CategoriesChooserElement.prototype = {
	initialize: function (id, name){
		this.id = id;
		this.name = name;
		this.element = document.createElement ('div');
		this.element.innerHTML = this.name;
		this.element.onclick = this.OnClick.bindAsEventListener(this);
		this.element.onmouseover = this.OnHover.bindAsEventListener(this);
		this.element.onmouseout = this.OnUnhover.bindAsEventListener(this);
		CategoriesChooser.element.appendChild(this.element);
	},

	OnClick: function (event) {
		CategoriesChooser.selectCategory(this);
	},
	OnHover: function () {
		Element.addClassName(this.element, 'hover_category');
	},
	OnUnhover: function () {
		Element.removeClassName (this.element, 'hover_category');
	}
}

var CategoriesChooser = {
	initialize: function () {
		this.button = $('categories_chooser');
		this.element = $('categories_chooser_container');
		this.button.onclick = this.onClick.bindAsEventListener(this);
		this.categories = new Array ();
		for (var i = 0; i < AvailableCategories.length; i ++)
			this.categories.push(new CategoriesChooserElement(AvailableCategories[i].id, AvailableCategories[i].name));

		this.selectCategory(this.categories[0]);
		this.dropped = false;
	},

	onClick: function () {
		OrderChooser.hide();
		if (this.dropped) {
			this.hide();
		} else {
			this.show();
		}

	},

	show: function () {
		var ro = Position.cumulativeOffset(this.button);
		this.element.style.left = ro[0] + "px";
		this.element.style.top = ro[1] + 23 + "px"; /// should be recalculated...
		this.element.style.display = "block";
		this.eventMouseDown = this.hide.bindAsEventListener(this);
		this.dropped = true;
		//Event.observe(document, "mousedown", this.eventMouseDown);
	},

	hide: function () {
		this.dropped = false;
		this.element.style.display = "none";
		//Event.stopObserving(document, "mousedown", this.eventMouseDown);
	},

	selectCategory: function (category) {
		this.button.innerHTML = category.name;
		this.selectedCategory = category;
		this.element.style.display = "none";
		this.dropped = false;
	},

	closeAllMenus: function () {
		this.hide();
	},
	selectCategoryById: function (id) {
		for (var i = 0; i < this.categories.length; i ++)
			if (this.categories[i].id == id) {
				this.selectCategory(this.categories[i]);
				return;
			}
	}
}


//////// THE SORTING BOX

var AvailableOrders = [
{id:0, name:'Relevance', display: 'Relevance'},
{id:1, name:'Date uploaded', display: 'Uploaded'},
{id:2, name:'View count', display: 'Views'},
{id:3, name:'Rating', display: 'Rating'}];


var OrderChooserElement = Class.create();
OrderChooserElement.prototype = {
	initialize: function (id, name, display){
		this.id = id;
		this.name = name;
		this.display = display;
		this.element = document.createElement ('div');
		this.element.innerHTML = this.name;
		this.element.onclick = this.OnClick.bindAsEventListener(this);
		this.element.onmouseover = this.OnHover.bindAsEventListener(this);
		this.element.onmouseout = this.OnUnhover.bindAsEventListener(this);
		OrderChooser.element.appendChild(this.element);
	},

	OnClick: function (event) {
		OrderChooser.selectOrder(this);
	},
	OnHover: function () {
		Element.addClassName(this.element, 'hover_category');
	},
	OnUnhover: function () {
		Element.removeClassName (this.element, 'hover_category');
	}
}

var OrderChooser = {
	initialize: function () {
		this.button = $('order_by_chooser');
		this.element = $('order_by_chooser_container');
		this.button.onclick = this.onClick.bindAsEventListener(this);
		this.orders = new Array ();
		for (var i = 0; i < AvailableOrders.length; i ++)
			this.orders.push(new OrderChooserElement(AvailableOrders[i].id, AvailableOrders[i].name, AvailableOrders[i].display));

		this.selectOrder(this.orders[0]);
		this.dropped = false;
	},

	onClick: function () {
		CategoriesChooser.hide();
		if (this.dropped) {
			this.hide();
		} else {
			this.show();
		}

	},

	show: function () {
		if (this.disabled) return;
		var ro = Position.cumulativeOffset(this.button);
		//this.element.style.right = '10px'; // windowWidth() - (ro[0] + this.button.offsetWidth) + "px";
		//this.element.style.top = ro[1] + 23 + "px"; /// should be recalculated...
		this.element.style.display = "block";
		this.eventMouseDown = this.hide.bindAsEventListener(this);
		this.dropped = true;
		//Event.observe(document, "mousedown", this.eventMouseDown);
	},

	hide: function () {
		this.dropped = false;
		this.element.style.display = "none";
		//Event.stopObserving(document, "mousedown", this.eventMouseDown);
	},

	onChanged: function () {
		if (this.onChange)
			this.onChange();
	},

	selectOrder: function (order) {
		this.button.innerHTML = order.display;
		this.selectedOrder = order;
		this.element.style.display = "none";
		this.dropped = false;
		this.onChanged();
	},

	closeAllMenus: function () {
		this.hide();
	},

	closeAllMenus: function () {
		this.hide();
	},
	disable: function () {
		if (this.disabled) return;
		this.disabled = true;
		this.button.style.display = 'none';
		this.button.style.color = '#99999B';
		this.button.style.backgroundImage = "url('" + SHOST + "/none.gif')"; //404
		this.button.innerHTML = this.orders[0].display; // just to show the relevance order
	},
	enable: function () {
		if (!this.disabled) return;
		this.disabled = false;
		this.button.style.display = '';
		this.button.style.color = '';
		this.button.style.backgroundImage = "";
		this.button.innerHTML = this.selectedOrder.display;
	},
	selectOrderById: function (id) {
		for (var i = 0; i < this.orders.length; i ++)
			if (this.orders[i].id == id) {
				this.selectOrder(this.orders[i]);
				return;
			}
	}
}