////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Renderer Object
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// Levels
var FULL_RENDERING = "full_rendering";
var STAND_ALONE_RENDERING = "stand_alone_rendering";

// Elements
var LOGGER_ELEMENT_ID = "webwag_log_container";
var TABS_ELEMENT_ID = "webwag_tabs";
var TAB_CONTENT_ELEMENT_ID = "webwag_tab_content";


// Handles data rendering.
// 
var Renderer = Class.create();
Renderer.prototype = {

    // constructor
    initialize: function(level) {
        this.level = level;

    },

	// methods
    renderLogger: function() {
        document.getElementById(LOGGER_ELEMENT_ID).innerHTML = "<span class=\"button\" onclick=\"logger.clear();\">[clear]</span>" + 
        "<div id=\"webwag_logger\" class=\"log\" style=\"height:300px;\">&nbsp;</div>" + 
        '<div>\
			<textarea cols="100" rows="3" id="jsEval"></textarea>\
			<input type="button" value="eval" onclick="debugEcho(\'JsEval:\'+document.getElementById(\'jsEval\').value+\' = \'+eval(document.getElementById(\'jsEval\').value))"/>\
			<input type="button" value="CLR" onclick="document.getElementById(\'debug\').innerHTML=\'\'"/>\
			<input type="button" value="renderAll" onclick="renderer.renderAll()"/>\
			<input type="button" value="_sql" onclick="document.getElementById(\'jsEval\').value=_sql()"/>\
			</div>\
			<div id="debug"></div>';


    },

	renderFeedsBrowser: function() {
		
	},

	renderUser: function() {
        if (renderer.rendered) {
            App.reload();
        }
        this.renderTabs();
        renderer.rendered = true;
        App.endLoading();
        //this.renderTabContent();
    },
    renderAll: function() {
        $(document.body).hide();
        for (var i = 0; i < user.tabs.length; ++i) {
			user.tabs[i].renderWidgets();
		}
        user.currentTab.show();
        $(document.body).show();

    },
    renderTabs: function() {
        if (user != null && user.tabs != null && user.tabs.length) {
            App.elTabs = $(TABS_ELEMENT_ID);
			if (App.elTabs) {
				
				var output = "";
				output += "<div id=\"addTab\" style='margin-left : 5px;'>";
				output += "<div id=\"addTabIcon\">";
				output += 	"<a class=\"tab\" style=\"background:none;\">";
				//output += 		"<span>" + _("ADD_TAB") + "</span>";
				output += 	"</a>";
				output += "</div>";
				output += "</div>";
	            App.elTabs.innerHTML = output;
	            App.elAddTab = document.getElementById("addTab");
	            Event.observe(App.elAddTab, 'click', function() {
	                dataHandler.addTab();
	            });
			}
			
			for (var i = 0; i < user.tabs.length; i++) {
                user.tabs[i].render();
            }
			
			if (App.elTabs) {
				this.makeTabsSortable();
			}
        }
        else {
            logger.log("Could not render tabs on the screen because no tabs has been found for the current user.\nThe user may not have been correctly loaded.", WARNING);

        }
        user.setCurrentTab(user.getCurrentTab());
    },

	renderTabContent: function() {
        var l,currentTab = user.getCurrentTab();
        logger.log("Renderer.renderTabContent: rendering tab content for tab :" + currentTab.id);

        if (currentTab && currentTab.widgets) {
            var output = "";
            ////////////////////////////////////////////////////////////
            //
            // TODO :
            // Retrieve columns and render a widget list for each one.
            //
            ////////////////////////////////////////////////////////////
            l = currentTab.widgets.length;
            for (var i = 0; i < l; i++) {
                logger.log("rendering container for widget :" + currentTab.widgets[i].id);
                output += this.getWidgetContainer(currentTab.widgets[i]);

            }
            output = "<ol class=\"tab_body\" id=\"tab_" + currentTab.id + "\">" + output + "</ol>";
            App.elTabContent.render(output);

        }
        else {
            logger.log("Renderer.renderTabContent: Could not render widgets because no widget has been found for the current tab.", WARNING);

        }

    },

	setWidgetIcon: function(widget, src) {
        new Elem("widget_" + widget.id + "_icon").render("<img width=\"16px\" height=\"16px\" src=\"" + src + "\" alt=\"\" /> ");

    },

	renderUnseenNotification: function(widget) {
        var notification = "";
        var nb = parseInt(widget.unseen);
        if (nb != NaN && nb > 0) {
            notification = "(" + widget.unseen + ")";

        }
        new Elem("widget_" + widget.id + "_unseen_notification").render(notification);

    },

	getWidgetContainer: function(widget) {
		
        var output,display = "block";
		var headerClass = "widget_header";
		if (widget._isDraggable) {
			//headerClass += " draggable";
		}
		
        output = "<div id=\"widget_" + widget.id + "\" class=\"widget_box\">"
        	+ "	<div id=\"widget_" + widget.id + "_header\" class=\""+headerClass+"\">"
        	+ "		<div id=\"widget_" + widget.id + "_icon\" class=\"widget_icon\">"
        	+ "			<img width=\"16px\" height=\"16px\" src=\"" + widget.getIconSrc() + "\" alt=\"\" /> "
        	+ "		</div> "
        	+ "		<div id=\"widget_" + widget.id + "_buttons\" class=\"widget_buttons\" style=\"display:none\">";
			if (widget.settings._compatibility && widget.settings._compatibility.indexOf("car") != -1 && user.partner && user.partner.name.toLowerCase() == "peugeot") {
		        output += "<img src=\"" + WWG_STATIC + "images/buttons/piccar.gif\" class=\"button\" onclick=\"global.screens['car'].addWidget('" + widget.id + "')\" title='"+_("SEND_TO_MY_CAR")+"'/>";
			}
			if (widget.settings._compatibility && widget.settings._compatibility.indexOf("mobile") != -1) {
		        output += "<img src=\"" + WWG_STATIC + "images/buttons/picphone.png\" class=\"button\" onclick=\"global.screens['mobile'].addWidget('" + widget.id + "')\" title='"+_("SEND_TO_MY_MOBILE")+"'/>";
			}
			if (widget.settings._compatibility && widget.settings._compatibility.indexOf("flow") != -1) {
				var flowSrc = (widget.getValue("availability").indexOf("flow") == -1) ? "images/buttons/flow.png" : "images/buttons/flow_off.png";
				output += "<img src=\"" + WWG_STATIC + flowSrc + "\" class=\"button\" onclick=\"flow.subscribe('" + widget.id + "')\" title='"+_("SEND_TO_MY_FLOW")+"'/>";
			}
			output += "	<img id=\"widget_" + widget.id + "_edit_icon\" src=\"" + WWG_STATIC + "images/buttons/edit.gif\" class=\"button\" onclick=\"new Elem('widget_" + widget.id + "_prefs').toggle();\" title='"+_("CONFIGURE")+"'/>"
        	+ "			<img src=\"" + WWG_STATIC + "images/buttons/refresh.gif\" class=\"button\" onclick=\"Widget.refresh('" + widget.id + "');\" title='"+_("REFRESH")+"'/>"
        	+ "			<img src=\"" + WWG_STATIC + "images/buttons/reduce.gif\" class=\"button\" onclick=\"Widget.toggle('" + widget.id + "');\" title='"+_("COLLAPSE")+"'/>&nbsp;";
			if (typeof(user)=="undefined") {
        		output += "<img src=\"" + WWG_STATIC + "images/buttons/remove.gif\" class=\"button\" onclick=\"Widget.removeRequest('" + widget.id + "');\" title='"+_("REMOVE")+"'/>";
			}
			else if (widget.settings.removable || !user.hasMobileV2) {
        		output += "<img src=\"" + WWG_STATIC + "images/buttons/remove.gif\" class=\"button\" onclick=\"Widget.removeRequest('" + widget.id + "');\" title='"+_("REMOVE")+"'/>";
			}
        	output += "</div>"
        	+ "		<div id=\"widget_" + widget.id + "_titlebar\" class=\"widget_title draggable\">"
        	+ "			<span id=\"widget_" + widget.id + "_title\"></span>"
        	+ "			<span id=\"widget_" + widget.id + "_unseen_notification\" style=\"color:red; margin-left:5px;\"></span>"
        	+ "		</div>"
        	+ "</div>"
        	+ "<div id=\"widget_" + widget.id + "_status\" class=\"widget_status\" style=\"display:none;\"></div>"
        	+ "<div id=\"widget_" + widget.id + "_prefs\" class=\"widget_prefs\" style=\"display:none;\"></div>";
        if (widget.getValue("widget_reduced") == "1") {
            display = "none";
        }
        output += "	<div id=\"widget_" + widget.id + "_body\" class=\"widget_body\" style=\"display:" + display + ";\">"
        	+ "		<div class=\"loading\">"
        	+ "			<img src=\"" + WWG_STATIC + "images/loading.gif\" alt=\"Loading\"/>"
        	+ "		</div>"
        	+ "	</div>"
        	+"</div>";
        return output;
    },
    drawWidgetContainer: function(widget,hidden) {
        var e,p,l,t,div;
        div = $(document.createElement("div"));
        div.id = "widgetBox" + widget.id;
        div.widgetId=widget.id;
        div.setAttribute("class", "widgetBox");
        widget.elWidgetBox = div;
        if(hidden){
        	div.style.display="none";
        }
        //debugEcho("drawWidgetContainer: id=" + widget.id + "    tabCol" + widget.getValue("tab") + "_" + widget.getValue("column"),widget);
        div.innerHTML = this.getWidgetContainer(widget);
        t=document.getElementById("webwagCol"+ widget.getValue("column"));
        p = widget.getValue("position");
        
        //t = $("tabCol" + widget.getValue("tab") + "_" + widget.getValue("column"));
        p = widget.getValue("position");
        if (!t)
        	t = $("webwagCol" + 0);
        
        if (t) {
            l = t.childNodes.length;
           // debugEcho("insertion widget   p=" + p + "   l=" + l);
            // if (p <= l && t.childNodes[p])
            // t.insertBefore(div, t.childNodes[p]);
            // else
			if (!t.childNodes[0]) {
				t.appendChild(div);
			}
			else {
				t.insertBefore(div, t.childNodes[0]);
			}
            

        }
        else
        logger.log("drawWidgetContainer: Can't find element " + "tabCol" + widget.getValue("tab") + "_" + widget.getValue("position") + " for inserting widget " + widget.id, ERROR);

        if (debugMode)
        $("widget_" + widget.id + "_icon").innerHTML += widget.id + "  tab/col/pos=" + widget.getValue("tab") + "_" + widget.getValue("column") + "_" + widget.getValue("position");

        e = $("widget_" + widget.id + "_header");
        Event.observe(e, "mouseover", App.menuButtonsOver.bindAsEventListener(e));
        Event.observe(e, "mouseout", App.menuButtonsOut.bindAsEventListener(e));

        // register event listener.
        widget._eventCallback = widget._eventCallback.bindAsEventListener(widget);
        var elem = $("widget_" + widget.id + "_body");
        Event.observe(elem, 'mousedown', widget._eventCallback, true);
        Event.observe(elem, 'keypress', widget._eventCallback, true);
        Event.observe(elem, 'submit', widget._eventCallback, true);
        Event.observe(elem, 'load', widget._eventCallback, true);
		
    },

	removeWidget: function(widgetId) {
			var e,i,ids=["widgetBox","mobileWidget","wmMenu"];
			for(i=0;i<ids.length;i++){
				if (e = document.getElementById(ids[i] + widgetId))
					e.parentNode.removeChild(e);
					//removeNodeEffect(e);
			}
			for (type in global.screens) {
				global.screens[type].removeWidget(widgetId);
			}
				//renderer.removeMobileWidget(widgetId);
    },

	isContainerRendered: function(widgetId) {
        var elem = $("widget_" + widgetId);
        return !! elem;

    },

	// Toggles the current element.
    // 
    toggleWidget: function(widget) {
        return new Elem("widget_" + widget.id + "_body").toggle();
    },

	renderWidgetDrag: function(draggable) {
		var d = document.createElement("div"),
        w,wel = draggable.element;
        d.id = "dragGhost";
        d.style.height = wel.getHeight() + "px";
        Draggable.elGhost = d;
        draggable.element.parentNode.insertBefore(d, draggable.element);
        w = wel.getWidth();
        wel.style.width = w + "px";
        user.currentTab.widgets = user.currentTab.getWidgets();
        App.elPreviousWidget = wel.previous();
        App.elNextWidget = wel.next();
        App.elParentContainer = wel.parentNode;
        //App.dragOverMobile = 0;
				WebScreen.dragOver = null;
        document.body.appendChild(wel);
    },

	renderWidgetContent: function(widget, content) {
		this.showView(widget, widget._currentViewName, content);
    },

	renderWidgetTitle: function(widget, title) {
        new Elem("widget_" + widget.id + "_title").render(title);

    },

	updateField: function(widget, key, value) {
        if (widget) {
	
            var field 		= $(key + "_" + widget.id);

			// In case we have a label...
			var labelElem 	= $(key + "_" + widget.id + "_label");
			
			/////////////////////////////////////////////////////////
            // Work around to make v1 widgets compatible
            if (!field) {
                field = $(key + widget.id);
            }
            if (!field) {
                field = $(widget.id + key);
            }
            if (!field) {
                field = $(widget.id + "_" + key);
            }
			/////////////////////////////////////////////////////////

            if (field) {
                field.value = value;
            }

			// check the presence of a label
			if (labelElem) {
				labelElem.innerHTML = value;
			}
			
        }
        else {
            logger.log("Could not update widget's field " + key + ". The widget may have not been initialized correctly.", ERROR);
        }

    },
	
	loadViews: function(widget) {
		var viewsOutput = "";
		var scrs = new Array();
		
		if (widget._views) {
			for (var name in widget._views) {
				var view = widget._views[name];
				
				// Get view data
				var content = "";
		        if (view.data && view.data.length > 0) {
		            content = view.data;
		        }
				
				// Eval the template
		        content = widget._evalTemplate(content);
				
				// Get the scripts
				scrs.push(content.extractScripts());
				
		        // Get output scripts free
		        var output = content.stripScripts();
		        
				// Generate an anction on a default static view
				var onclick = "";
				var css = "";
				if (view.name == widget._defaultViewName && view.type == View.STATIC_TYPE ) {
					css 	= "class=\"clickable\"";
					if(client.platform=="web")onclick = "onclick=\"widget.callback('onLoad')\"";
				}
				
				// Generate the view output
				viewsOutput += "<div id=\"widget_" + widget.id + "_view_" + view.name + "\" style=\"display:none;\" "+css+" "+onclick+">";
				viewsOutput += 	content;
				viewsOutput += "</div>";
			}
		}
		
		// Render HTML
		new Elem("widget_" + widget.id + "_body").render(viewsOutput);
		
		// Eval scripts into global scope
		scrs.each(function(js){
			js.each(function(code){
				window.eval(code);
			});
		});
	},
	
	showView: function(widget, viewName, output) {
		var targetElem = $("widget_" + widget.id + "_view_" + viewName);
		if (widget._views && widget._views[viewName] && targetElem) {
			// Show view
			if (output) {
				targetElem.innerHTML = output;
			}
			targetElem.style.display = "block";
			
			// Hide others
			for (var name in widget._views) {
				if (name != viewName) {
					var elem = $("widget_" + widget.id + "_view_" + name);
					if (elem) {
						elem.style.display = "none";
					}
				}
			}
			return true;
		}
		else {
			/*add for wegwagthis preview*/
			widget._showContent();
			logger.log("Could not show view '" + viewName + "'. The view could not be found.", ERROR);
			return false;
		}
	},
	
	setLoading: function(widget, message) {
        var output = "";
        output += "<div class=\"loading\">";
        output += message + "<br/>";
        output += "<img src=\"images/loading.gif\" alt=\"Loading\" />";
        output += "</div>";
		
		// This won't modify the widget's _currentView attribute
		// in order to load the right view through widget.setContent().
		this.showView(widget, View.LOADING_NAME, output);
    },

	showStatus: function(widget, message, type) {
		if (widget) {
			var output = "";
			if (type == "progress") {
		        output += "<div style=\"float:right;\">";
		        output += "<img src=\"images/loading.gif\" alt=\"Loading\" />";
		        output += "</div>";
			}
			output += "<div>";
	        output += message;
	        output += "</div>";
	
			var elem = $("widget_" + widget.id + "_status");
			if (elem) {
				elem.innerHTML = output;
				elem.style.display = '';
			}
		}
		else {
			logger.log("Could not show widget status : widget is null.", ERROR);
		}
	},
	
	hideStatus: function(widget) {
		if (widget) {
			var elem = $("widget_" + widget.id + "_status");
			if (elem) {
				elem.style.display = 'none';
			}
		}
		else {
			logger.log("Could not hide widget status : widget is null.", ERROR);
		}
	},
	
	showFormLine: function(widget, prefName) {
		if (widget) {
			var elem = $("form_line_" + prefName + "_" + widget.id);
			if (elem) {
				elem.style.display = "block";
			}
		}
		else {
			logger.log("Could not hide form line : widget is null.", ERROR);
		}
	},
	
	hideFormLine: function(widget, prefName) {
		if (widget) {
			var elem = $("form_line_" + prefName + "_" + widget.id);
			if (elem) {
				elem.style.display = 'none';
			}
		}
		else {
			logger.log("Could not hide form line : widget is null.", ERROR);
		}
	},
	
	blockPref: function(widget, prefName){
		if(widget){
			var elem = $("form_line_" + prefName + "_" +widget.id).getElementsByTagName("input")[0];
			if(elem){
				elem.disabled = "true";
			}
		}
	},
	
	renderWidgetForm: function(widget) {
        if (widget && widget._form && widget._form != "") {
            var formContainer = $("widget_" + widget.id + "_prefs");
            formContainer.innerHTML = widget._form;

            // we try to fill the form
            var prefs = widget.prefs;
            if (prefs) {
                for (var i in prefs) {
                    if (prefs[i].value && prefs[i].value != "") {
                        this.updateField(widget, prefs[i].key, prefs[i].value);

                    }

                }

            }

        }
        else if (widget && widget.prefs) {
			var foundPrefToDisplay = false;
            var prefs = widget.prefs;
            var output = "<form id=\"prefs_form_" + widget.id + "\" action=\"javascript:Widget.save('" + widget.id + "');\">";
            for (var i in prefs) {
                if (prefs[i].type) {
                    if (!prefs[i].value) {
                        prefs[i].value = "";

                    }
					
					var label = prefs[i].label;
					if (label && label != "") {
						label += ":";
					}
					
					output += "<div id=\"form_line_" + prefs[i].key + "_" + widget.id + "\">";
					
                    ////////////////////////////////////////////////////
                    //
                    //   Hidden fields are usefull in the case of a
                    //   form being updated from itself with its
                    //   default values.
                    //   For exemple, the email widget needs to save
                    //   its default values for the server to be able 
                    //   to look for a password in the database.
                    //
                    ////////////////////////////////////////////////////
                    // NT note: HTMLescape is ont appropriate for encoding value into attributes, trying encodeXML else....
                    if (prefs[i].type == 'hidden') {
                        output = output + "	<input type=\"hidden\" id=\"" + prefs[i].key + "_" + widget.id + "\" name=\"" + prefs[i].key + "\" value=\"" + String(prefs[i].value).encodeXML() + "\"/>";

                    }
                    else if (prefs[i].type == 'label') {
                        output = output + "<div class=\"pref_label\">" + label + "</div>";
                        output = output + "<div class=\"pref_control\">";
                        output = output + "	<input class='liens' type=\"hidden\" id=\"" + prefs[i].key + "_" + widget.id + "\" name=\"" + prefs[i].key + "\" value=\"" + String(prefs[i].value).encodeXML() + "\"/>";
                        output = output + "<b><span id=\"" + prefs[i].key + "_" + widget.id + "_label\">" + prefs[i].value + "</span></b>";
                        output = output + "</div><br/>";
						foundPrefToDisplay = true;
                    }
					else if (prefs[i].type == 'button') {
                        output = output + "<div class=\"pref_label\">" + label + "</div>";
                        output = output + "<div class=\"pref_control\">";
                        output = output + "	<input class='liens' onclick=\"Widget.update('" + widget.id + "', this);\" type=\"button\" id=\"" + prefs[i].key + "_" + widget.id + "\" name=\"" + prefs[i].key + "\" value=\"" + String(prefs[i].value).encodeXML() + "\"/>";
                        output = output + "</div><br/>";
						foundPrefToDisplay = true;
                    }
                    else if (prefs[i].type == 'text') {
                        output = output + "<div class=\"pref_label\">" + label + "</div>";
                        output = output + "<div class=\"pref_control\">";
                        output = output + "	<input class='liens' onchange=\"Widget.update('" + widget.id + "', this);\" type=\"text\" id=\"" + prefs[i].key + "_" + widget.id + "\" name=\"" + prefs[i].key + "\" value=\"" + String(prefs[i].value).encodeXML() + "\" style=\"width:60%;\"/>";
                        output = output + "</div><br/>";
						foundPrefToDisplay = true;
                    }
                    else if (prefs[i].type == 'password') {
                        output = output + "<div class=\"pref_label\">" + label + "</div>";
                        output = output + "<div class=\"pref_control\">";
                        output = output + "	<input class='liens' onchange=\"Widget.update('" + widget.id + "', this);\" type=\"password\" id=\"" + prefs[i].key + "_" + widget.id + "\" name=\"" + prefs[i].key + "\" value=\"" + String(prefs[i].value).encodeXML() + "\" style=\"width:60%;\"/>";
                        output = output + "</div><br/>";
						foundPrefToDisplay = true;
                    }
                    else if (prefs[i].type == 'textarea') {
                        output = output + "<div class=\"pref_label\">" + label + "</div>";
                        output = output + "<div class=\"pref_control\">";
                        output = output + "	<textarea class='liens' style=\"height:100px;width:60%;\" id=\"" + prefs[i].key + "_" + widget.id + "\" name=\"" + prefs[i].key + "\">" + String(prefs[i].value).encodeXML() + "</textarea>";
                        output = output + "</div><br/>";
						foundPrefToDisplay = true;
                    }
                    else if (prefs[i].type == 'boolean') {
                        output = output + "<div class=\"pref_label\">" + label + "</div>";
                        output = output + "<div class=\"pref_control\">";
                        if (prefs[i].value == "1" || prefs[i].value == "true") {
                            output = output + "	<input class='liens' onchange=\"Widget.update('" + widget.id + "', this);\" id=\"" + prefs[i].key + "_" + widget.id + "\" name=\"" + prefs[i].key + "\" type=\"checkbox\" checked=\"true\">";

                        }
                        else {
                            output = output + "	<input class='liens' onchange=\"Widget.update('" + widget.id + "', this);\" id=\"" + prefs[i].key + "_" + widget.id + "\" name=\"" + prefs[i].key + "\" type=\"checkbox\">";

                        }
                        output = output + "</div><br/>";
						foundPrefToDisplay = true;
                    }
                    else if (prefs[i].type == 'date') {
                        output = output + "<div class=\"pref_label\">" + label + "</div>";
                        output = output + "<div class=\"pref_control\">";
                        output = output + "<input onchange=\"Widget.update('" + widget.id + "', this);\" type=\"text\" id=\"" + prefs[i].key + "_" + widget.id + "\" name=\"" + prefs[i].key + "\" value=\"" + prefs[i].value + "\">";
                        output = output + "<a href=\"javascript:NewCal('" + prefs[i].key + "_" + widget.id + "','mmmddyyyy', true, 24)\"><img src=\"images/icons/cal.gif\" width=\"16\" height=\"16\" border=\"0\" alt=\"Pick a date\"></a>";
                        output = output + "</div><br/>";

                    }
                    else if (prefs[i].type == 'list') {
                        output = output + "<div class=\"pref_label\">" + label + "</div>";
                        output = output + "<div class=\"pref_control\">";
                        output = output + " 	<select onchange=\"Widget.update('" + widget.id + "', this);\" id=\"" + prefs[i].key + "_" + widget.id + "\" name=\"" + prefs[i].key + "\">";
                        var value = prefs[i].value;
                        if (prefs[i].elems) {
                            for (var j in prefs[i].elems) {
                                // make selected
                                if (j == value) {
                                    output = output + "<option value=\"" + j + "\" selected=\"true\">" + prefs[i].elems[j] + "</option>";

                                }
                                else {
                                    output = output + "<option value=\"" + j + "\">" + prefs[i].elems[j] + "</option>";

                                }

                            }

                        }
                        output = output + " 	</select>";
                        output = output + "</div><br/>";
						foundPrefToDisplay = true;
                    }
                    else if (prefs[i].type == 'color') {
                        output = output + "<div class=\"pref_label\">" + label + "</div>";
                        output = output + "<div class=\"pref_control\">";
                        output = output + "		<input type=\"hidden\" id=\"" + prefs[i].key + "_" + widget.id + "\" name=\"" + prefs[i].key + "\" value=\"" + prefs[i].value + "\"/>";
                        var value = prefs[i].value;
                        if (prefs[i].elems) {
                            for (var j in prefs[i].elems) {
                                if (j == value) {
                                    var className = "selected";

                                }
                                else {
                                    var className = "unselected";

                                }

                                var event = "onclick=\"Renderer.changeColor('" + widget.id + "', '" + prefs[i].key + "', '" + j + "')\"";
                                var style = "margin:5px; width:40px; height:40px; background-color:" + j;
                                output = output + "<span class=\"" + className + "\" id=\"" + prefs[i].key + "_" + widget.id + "_" + j + "\" style=\"" + style + "\" " + event + ">&nbsp;&nbsp;&nbsp;</span>";

                            }

                        }
                        output = output + "</div><br/>";
						foundPrefToDisplay = true;
                    }
					
					output += "</div>";
                }

            }
            output = output + "</form>";
            if(typeof(client)=="undefined" || client.platform!="car"){
				output = output + "<div class=\"prefs_footer\"><input type=\"button\" value=\""+_("SAVE")+"\" onclick=\"Widget.save('" + widget.id + "');\"></div>";
			}else{
				output += "<hr /><table text-align=center width=100% ><tr><td>";
				output += "<a class='liens' href='javascript:void(0)' id='save_" +widget.id + "' onclick='Widget.prototype.cardget_savePref("+widget.id+");return false' style='color:black;font-size:15px'><img border=0 align=middle src='/styles/car/images/save.png' />&nbsp;&nbsp;&nbsp;Enregistrer</a>";
				output += "</td><td>"
				output += "<a class='liens' href='javascript:void(0)' id='return_" +widget.id + "' onclick='Widget.prototype.cardget_editPref("+widget.id+");return false' style='color:black;font-size:15px'><img border=0 align=middle src='/styles/car/images/redo.png' />&nbsp;&nbsp;&nbsp;Retour</a>";
				output += "</td><td>";
				output += "<a class='liens' href='javascript:void(0)' id='widgetDel_" + widget.id + "' onclick='Widget.prototype.remove(\"" + widget.id + "\");return false' style='color:black;font-size:15px'><img border=0 align=middle src='/styles/car/images/delete.png' />&nbsp;&nbsp;&nbsp;Supprimer</a>";
				output += "</td></tr></table>";
			}
            /*var formContainer = new Elem("widget_" + widget.id + "_prefs");
			formContainer.render(output);
			formContainer.hide();
			*/
            var formContainer = $("widget_" + widget.id + "_prefs");
            formContainer.innerHTML = output;
			
			if (!foundPrefToDisplay) {
				var btnElem = new Elem("widget_" + widget.id + "_edit_icon");
				btnElem.hide();
			}
        }
        else {
            logger.log("Could not render widget's form. The widget may have not been initialized correctly.", ERROR);

        }


    },

	hideForm: function(widgetId) {
        var formContainer = new Elem("widget_" + widgetId + "_prefs");
        formContainer.hide();

    },
	
	showMessages: function(jsonMessages){	
		listener.renderer=jsonMessages;
		for(var i=0;i<jsonMessages.messages.length;i++){
			var msg=jsonMessages.messages[i];
			switch(msg.message_type){
				case "widget_sender":
					this.showWidgetSenderMsg(msg.message_content)
					break;
				default :
					break
			}
			listener.updateMessageSate(msg.message_id,"DELIVERED");
		}		
	},
	
	showWidgetSenderMsg: function(message_content){
		var msg=message_content.evalJSON();
		listener.delivery=msg;
		_this=this
		if(confirm(msg.question)){
			dataHandler.addWidget(msg.widget_src,msg.widget_settings,0,true);
		}	
		var handleCallback = function(request) {
			var result = request.responseText;
		};
		params="widget_sender_id="+msg.widget_sender_id+"&user_id="+user.id;
		new Ajax.Request('/widget_sender/deny_widget', {method: 'GET', parameters : params, onComplete : handleCallback, onException:_this.handleAjaxException});			
		
	}
    // End methods

};



Renderer.changeColor = function(widgetId, prefId, color) {
    var elem = $(prefId + "_" + widgetId);

    var currentColorElem = $(prefId + "_" + widgetId + "_" + elem.value);
    if (currentColorElem) {
        currentColorElem.className = "unselected";

    }

    var newColorElem = $(prefId + "_" + widgetId + "_" + color);
    if (newColorElem) {
        newColorElem.className = "selected";
    }
    elem.value = color;
    Widget.update(widgetId, elem);
};

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Element Object
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// Represents a graphical element.
//
var Elem = Class.create();
Elem.prototype = {

    // constructor
    initialize: function(elementName) {
        this.element = $(elementName);
        if (!this.element) {
            logger.log("Unknown element : " + elementName, ERROR);

        }
        else {
            this.style = this.element.style;

        }

    },

// Implements getElementsByClassName() on the current element.
    //
    getElementsByClassName: function(className) {
        return this.element.getElementsByClassName(className);

    },

// Hides the current element.
    // 
    hide: function() {
        if (this.element) {
            this.element.style.display = 'none';

        }

    },

// Shows the current element.
    // 
    show: function() {
        if (this.element) {
            this.element.style.display = '';

        }

    },

// Toggles the current element.
    // 
    toggle: function() {
        var state = "0";
        if (this.element) {
            if (this.element.style.display != 'none') {
                this.element.style.display = 'none';
                state = "1";
            }
            else {
                this.element.style.display = '';

            }

        }
        return state;

    },

// Removes the current element from the DOM.
    // 
    remove: function() {
        if (this.element) {
            this.element.parentNode.removeChild(this.element);

        }

    },

// Serializes a Sortable list and returns its ids as
    // a string separated by comas.
    //
    toSortedString: function() {
        if (this.element) {
            var list = Sortable.serialize(this.element.id);
            list = list.replace(new RegExp("\\&", 'g'), ",");
            list = list.replace(new RegExp(this.element.id + "\\[\\]\\=", 'g'), "");
            return list;

        }
        else {
            return null;

        }

    },

// Serializes a Sortable list and returns its ids
    // within an Array.
    //
    toSortedArray: function() {
        if (this.element) {
            var list = this.toSortedString();
            var array = list.split(",");
            return array;

        }
        else {
            return null;

        }


    },

// Renders the content of the current element.
    //
    render: function(content) {
        if (this.element) {
            this.element.innerHTML = content;

        }

    },
    position: function() {
        var curleft = 0,
        curtop = 0;
        var obj = this.element;
        if (obj.offsetParent) {
            curleft = obj.offsetLeft;
            curtop = obj.offsetTop;
            while (obj = obj.offsetParent) {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;

            }

        }
        return [curleft, curtop];

    }

};



function removeNodeEffect(e){
var s=e.style;
var count=100;
var h;
s.opacity=1;
s.overflow="hidden";
h=e.offsetHeight;
var inc=h / (1/.02);
s.heigth=h+"px";
var timer=setInterval(function(){
	s.opacity -= .02;
	s.height=(h=h-inc)+"px";
	count--;
	if(count<=0 || h<=0){
		clearInterval(timer);
		e.parentNode.removeChild(e);
		} 
},50);

}