/*

 *  :organization: Logilab

 *  :copyright: 2003-2008 LOGILAB S.A. (Paris, FRANCE), all rights reserved.

 *  :contact: http://www.logilab.fr/ -- mailto:contact@logilab.fr

 *

 *

 */

// widget namespace

Widgets = {};

/* this function takes a DOM node defining a widget and

 * instantiates / builds the appropriate widget class

 */

function buildWidget(wdgnode) {

    var wdgclass = Widgets[wdgnode.getAttribute('cubicweb:wdgtype')];

    if (wdgclass) {

	var wdg = new wdgclass(wdgnode);

    }

}

/* This function is called on load and is in charge to build

 * JS widgets according to DOM nodes found in the page

 */

function buildWidgets(root) {

    root = root || document;

    jQuery(root).find('.widget').each(function() {

	if (this.getAttribute('cubicweb:loadtype') == 'auto') {

	    buildWidget(this);

	}

    });

}

// we need to differenciate cases where initFacetBoxEvents is called

// with one argument or without any argument. If we use `initFacetBoxEvents`

// as the direct callback on the jQuery.ready event, jQuery will pass some argument

// of his, so we use this small anonymous function instead.

jQuery(document).ready(function() {buildWidgets();});

Widgets.SuggestField = defclass('SuggestField', null, {

    __init__: function(node, options) {

	var multi = node.getAttribute('cubicweb:multi') || "no";

	options = options || {};

	options.multiple = (multi == "yes") ? true : false;

	var dataurl = node.getAttribute('cubicweb:dataurl');

        var method = postJSON;

	if (options.method == 'get'){

	  method = function(url, data, callback) {

	    // We can't rely on jQuery.getJSON because the server

	    // might set the Content-Type's response header to 'text/plain'

	    jQuery.get(url, data, function(response) {

	      callback(evalJSON(response));

	    });

	  };

	}

	var self = this; // closure

	method(dataurl, null, function(data) {

	    // in case we received a list of couple, we assume that the first

	    // element is the real value to be sent, and the second one is the

	    // value to be displayed

	    if (data.length && data[0].length == 2) {

		options.formatItem = function(row) { return row[1]; };

		self.hideRealValue(node);

		self.setCurrentValue(node, data);

	    }

	    jQuery(node).autocomplete(data, options);

	});

    },

    hideRealValue: function(node) {

	var hidden = INPUT({'type': "hidden", 'name': node.name, 'value': node.value});

	node.parentNode.appendChild(hidden);

	// remove 'name' attribute from visible input so that it is not submitted

	// and set correct value in the corresponding hidden field

	jQuery(node).removeAttr('name').bind('result', function(_, row, _) {

	    hidden.value = row[0];

	});

    },

    setCurrentValue: function(node, data) {

	// called when the data is loaded to reset the correct displayed

	// value in the visible input field (typically replacing an eid

	// by a displayable value)

	var curvalue = node.value;

	if (!node.value) {

	    return;

	}

	for (var i=0,length=data.length; i<length; i++) {

	    var row = data[i];

	    if (row[0] == curvalue) {

		node.value = row[1];

		return;

	    }

	}

    }

});

Widgets.StaticFileSuggestField = defclass('StaticSuggestField', [Widgets.SuggestField], {

    __init__ : function(node) {

	Widgets.SuggestField.__init__(this, node, {method: 'get'});

    }

});

Widgets.RestrictedSuggestField = defclass('RestrictedSuggestField', [Widgets.SuggestField], {

    __init__ : function(node) {

	Widgets.SuggestField.__init__(this, node, {mustMatch: true});

    }

});

/*

 * suggestform displays a suggest field and associated validate / cancel buttons

 * constructor's argumemts are the same that BaseSuggestField widget

 */

Widgets.SuggestForm = defclass("SuggestForm", null, {

    __init__ : function(inputid, initfunc, varargs, validatefunc, options) {

	this.validatefunc = validatefunc || noop;

	this.sgfield = new Widgets.BaseSuggestField(inputid, initfunc,

						    varargs, options);

	this.oklabel = options.oklabel || 'ok';

	this.cancellabel = options.cancellabel || 'cancel';

	bindMethods(this);

	connect(this.sgfield, 'validate', this, this.entryValidated);

    },

    show : function(parentnode) {

	var sgnode = this.sgfield.builddom();

	var buttons = DIV({'class' : "sgformbuttons"},

			  [A({'href' : "javascript: noop();",

			      'onclick' : this.onValidateClicked}, this.oklabel),

			   ' / ',

			   A({'href' : "javascript: noop();",

			      'onclick' : this.destroy}, escapeHTML(this.cancellabel))]);

	var formnode = DIV({'class' : "sgform"}, [sgnode, buttons]);

 	appendChildNodes(parentnode, formnode);

	this.sgfield.textinput.focus();

	this.formnode = formnode;

	return formnode;

    },

    destroy : function() {

	signal(this, 'destroy');

	this.sgfield.destroy();

	removeElement(this.formnode);

    },

    onValidateClicked : function() {

	this.validatefunc(this, this.sgfield.taglist());

    },

    /* just an indirection to pass the form instead of the sgfield as first parameter */

    entryValidated : function(sgfield, taglist) {

	this.validatefunc(this, taglist);

    }

});

/* called when the use clicks on a tree node

 *  - if the node has a `cubicweb:loadurl` attribute, replace the content of the node

 *    by the url's content.

 *  - else, there's nothing to do, let the jquery plugin handle it.

 */

function toggleTree(event) {

    var linode = jQuery(this);

    var url = linode.attr('cubicweb:loadurl');

    linode.find('ul.placeholder').remove();

    if (url) {

	linode.loadxhtml(url, {callback: function(domnode) {

	    linode.removeAttr('cubicweb:loadurl');

	    jQuery(domnode).treeview({toggle: toggleTree,

				      prerendered: true});

	    return null;

	}}, 'post', 'append');

    }

}

Widgets.TreeView = defclass("TreeView", null, {

    __init__: function(wdgnode) {

	jQuery(wdgnode).treeview({toggle: toggleTree,

				  prerendered: true

				 });

    }

});

/* widget based on SIMILE's timeline widget

 * http://code.google.com/p/simile-widgets/

 *

 * Beware not to mess with SIMILE's Timeline JS namepsace !

 */

Widgets.TimelineWidget = defclass("TimelineWidget", null, {

    __init__: function (wdgnode) {

 	var tldiv = DIV({id: "tl", style: 'height: 200px; border: 1px solid #ccc;'});

	wdgnode.appendChild(tldiv);

	var tlunit = wdgnode.getAttribute('cubicweb:tlunit') || 'YEAR';

	var eventSource = new Timeline.DefaultEventSource();

	var bandData = {

	  eventPainter:     Timeline.CubicWebEventPainter,

	  eventSource:    eventSource,

	  width:          "100%",

	  intervalUnit:   Timeline.DateTime[tlunit.toUpperCase()],

	  intervalPixels: 100

	};

	var bandInfos = [ Timeline.createBandInfo(bandData) ];

	var tl = Timeline.create(tldiv, bandInfos);

	var loadurl = wdgnode.getAttribute('cubicweb:loadurl');

	Timeline.loadJSON(loadurl, function(json, url) {

			    eventSource.loadJSON(json, url); });

    }

});

Widgets.TemplateTextField = defclass("TemplateTextField", null, {

    __init__ : function(wdgnode) {

	this.variables = getNodeAttribute(wdgnode, 'cubicweb:variables').split(',');

	this.options = {'name' : wdgnode.getAttribute('cubicweb:inputname'),

			'id'   : wdgnode.getAttribute('cubicweb:inputid'),

			'rows' : wdgnode.getAttribute('cubicweb:rows') || 40,

			'cols' : wdgnode.getAttribute('cubicweb:cols') || 80

		       };

	// this.variableRegexp = /%\((\w+)\)s/;

	this.parentnode = wdgnode;

    },

    show : function(parentnode) {

	parentnode = parentnode || this.parentnode;

	this.errorField = DIV({'class' : "textfieldErrors"});

	this.textField = TEXTAREA(this.options);

	connect(this.textField, 'onkeyup', this, this.highlightInvalidVariables);

	appendChildNodes(parentnode, this.textField, this.errorField);

	appendChildNodes(parentnode, this.textField);

    },

    /* signal callbacks */

    highlightInvalidVariables : function() {

	var text = this.textField.value;

	var unknownVariables = [];

	var it=0;

	var group = null;

	var variableRegexp = /%\((\w+)\)s/g;

	// emulates rgx.findAll()

	while ( group=variableRegexp.exec(text) ) {

	    if ( !this.variables.contains(group[1]) ) {

		unknownVariables.push(group[1]);

	    }

	    it++;

	    if (it > 5)

		break;

	}

	var errText = '';

	if (unknownVariables.length) {

	    errText = "Detected invalid variables : " + ", ".join(unknownVariables);

	}

	this.errorField.innerHTML = errText;

    }

});

/*

 * ComboBox with a textinput : allows to add a new value

 */

Widgets.AddComboBox = defclass('AddComboBox', null, {

   __init__ : function(wdgnode) {

       jQuery("#add_newopt").click(function() {

	  var new_val = jQuery("#newopt").val();

	      if (!new_val){

		  return false;

	      }

          name = wdgnode.getAttribute('name').split(':');

	  this.rel = name[0];

	  this.eid_to = name[1];

          this.etype_to = wdgnode.getAttribute('cubicweb:etype_to');

          this.etype_from = wdgnode.getAttribute('cubicweb:etype_from');

     	  var d = async_remote_exec('add_and_link_new_entity', this.etype_to, this.rel, this.eid_to, this.etype_from, 'new_val');

          d.addCallback(function (eid) {

          jQuery(wdgnode).find("option[selected]").removeAttr("selected");

          var new_option = OPTION({'value':eid, 'selected':'selected'}, value=new_val);

          wdgnode.appendChild(new_option);

          });

          d.addErrback(function (xxx) {

             log('xxx =', xxx);

          });

     });

   }

});

CubicWeb.provide('widgets.js');