// Ajax loader
function AjaxLoader(id) {
	this.id = id;

	this.div = new Element('div',
		{'style': 'float:right; padding: 10px;' })
			.update("Cargando <img src='/img/ajax-loader.gif'/>");

	this.toggle();

	$(id).insertBefore(this.div, $(id).firstChild);
}

AjaxLoader.prototype = {
	toggle: function() { this.div.toggle(); }
}

// SelectionList object
function SelectionList(id, onChange) {
	this.id = id;
	this.onChange = onChange;
	Event.observe (this.id, "click", this.onclickList.bindAsEventListener(this));
}

SelectionList.prototype = {

	getAllSelected: function () {
		return $$("#" + this.id + " li[class~=selected]");
	},

	toggleSelected: function (li) {
		$(li).toggleClassName('selected');
	},

	getSelected: function () {
		return this.getAllSelected().first();
	},

	getSelectedId: function () {
		return this.getSelected().id.sub(/.*-id-/, '');
	},

	resetSelected: function () {
		this.getAllSelected().each(this.toggleSelected);
	},

	setSelected: function(li) {
		this.resetSelected();
		this.toggleSelected(li);
	},

	onclickList: function (event) {
		var element = Event.element(event);
		if(!element) return;

		// FIXME: returns the li element -could be an unrelated ancestor li
		var li = Event.findElement(event, "LI");
		if(!li || li.tagName != "LI") return;

		//hack
		var pager = $('pager');
		if(pager && li.descendantOf(pager)) return;

		Event.stop(event);

		this.setSelected(li);

		if (this.onChange) this.onChange();
	}
} // end of prototype

/*
	ChannelSelectionList extends SelectionList
*/
function ChannelSelectionList(vsl)
{
	this.vsl = vsl;
	SelectionList.call(this, "channels", this.updateList);
}

ChannelSelectionList.prototype = Object.extend (SelectionList.prototype, {
	updateList : function() {
		this.vsl.update({ "channel": this.getSelectedId() } );
	}

});

// EXTENDER EL PROTO

/*
	VideoSelectionList extends SelectionList
	this component also updates its inner list of videos

	FIXME: avoid multiple ajax calls waiting for the server.
*/

function VideoSelectionList()
{
	SelectionList.call(this, "list", this.updatePlayer); // same instance
}

VideoSelectionList.prototype = Object.extend (SelectionList.prototype, {
	update: function(params)
	{
		ajaxLoader.toggle();

		var url = "";
		
		if (params.channel) {
			url = "/channel/"+params.channel+"/ajax-list.jsp";
		}
		else {
			url = "/ajax-list.jsp";
		}

		new Ajax.Updater('list', url, {
  		parameters: params,
  		onComplete: function () {
  			ajaxLoader.toggle();
  			var current = this.getCurrentVideoId();
  			fixIE6();
  			/*this.setSelected('list-id-' + current);*/
  		}.bindAsEventListener(this)
		});
	},

	updatePlayer: function() {

		ajaxLoader.toggle();

		var url = "/video/"+this.getSelectedId()+"/ajax-video.jsp";

		new Ajax.Updater('content', url, {
			evalScripts: true,
  		onComplete: function (transport) {
  			ajaxLoader.toggle();
  			window.location.hash = "#top";
  		}.bindAsEventListener(this)
		});
	},

	getCurrentVideoId: function() {
		/* return $('content').down('.video-id').id.sub(/.*-id-/, ''); */
		var vid = $('video-id');
		return vid.innerHTML;
	}
});

Event.observe(window, 'load', function() {
	ajaxLoader = new AjaxLoader("header");
	vsl = new VideoSelectionList(ajaxLoader);
	csl = new ChannelSelectionList(vsl);
});

function search()
{
	var q = $('videosearch').elements[1].value;

	if(!q) return false;
	
	vsl.update({ "q":  q});
	csl.resetSelected();

	return false;
}

function gotoPage(page)
{
	var options = { 'page': page };

	var channel = $('ajaxChannel');
	var q = $('ajaxSearch');

	if(channel) options.channel = channel.innerHTML;
	if(q) options.q= q.innerHTML;

	vsl.update(options);

	return false;
}