Views.Base = Backbone.View.extend({
	classType: "Views.Base",
	
	DEFAULT_ACTIONS: {
		remove: {
			button: {
				icon: edApplication().path + "skins/default/images/wall/delete.png",
				position: {
					my: "left center",
					at: "left center",
					collision: "none"
				}
			},
			show: {
				event: "mouseenter",
				delay: 0
			},
			hide: {
				event: "mouseleave",
				delay: 1000
			}
		},
		add: {
			authorizedouble: false
		},
		sort: {
			moveupbutton: {
				icon: edApplication().path + "skins/default/images/_liUp.png",
				movedownicon: edApplication().path + "skins/default/images/_liDown.png",
				position: {
					my: "left center",
					at: "left center",
					offset: "24 0",
					collision: "none"
				}
			},
			movedownbutton: {
				icon: edApplication().path + "skins/default/images/_liDown.png",
				position: {
					my: "left center",
					at: "left center",
					offset: "12 0",
					collision: "none"
				}
			},
			show: {
				event: "mouseenter",
				delay: 0
			},
			hide: {
				event: "mouseleave",
				delay: 1000
			},
			draggable: {
				active: true,
				placeholder: "dragPlaceholder",
				axis: "y"
			}
		}
	},
	
	nowLoadingImage: "./skins/default/images/nowLoadingSmall.gif",
	nowLoadingLabel: "",
	nowLoadingPosition: {
		my: "center top",
		at: "center top",
		offset: "0 +3"
	},
	
	listenDefaultEvents: function() {
		this.on("onmodelchange", function(event) {
			//console.log("event onModelChange fired");
		});

		this.on("onrender", this.launchDefaultActionsOn);
		this.on("onrender", this.launchSpecifiedActionsOn);
		this.on("onrender", this.triggerEventsOn);
		
		/*this.on("onMouseEnter", this.onMouseEnter);
		this.on("onMouseLeave", this.onMouseLeave);*/
		
		this.on("onautocompleteresponse", function(data) {
			this.createAutoComplete(data);
		});
	},
	
    /*
     * Override this function to listen for events triggered by view
     * */
    listenEvents: function() {
    	/*
    	 * LIST OF AVAILABLE EVENTS :
    	 * 
    	 * beforeInitialize
    	 * onInitialize
    	 * beforeAsyncLoading
    	 * onAsyncLoading
    	 * 
    	 * beforeRender
    	 * onRender
    	 * beforeRenderList
    	 * onRenderList
    	 * onAddViewRender
    	 * 
    	 * onShow
    	 * onHide
    	 * onMouseEnter
    	 * onMouseLeave
    	 * onFocus
    	 * onBlur
    	 * onBlink
    	 * 
    	 * onAutoCompleteResponseRecived
    	 * onAutoCompleteItemSelected
    	 * onAutoCompleteShow
    	 * onAutoCompleteHide
    	 * 
    	 * onTooltipLoad
    	 * onTooltipShow
    	 * onTooltipHide
    	 * 
    	 * 
    	 * */
    },

    launchDefaultActionsOn: function() {
    	var that = this;
		
    	this.model.on("change", function(model) {
    		//console.log("model changed !");
			//that.trigger("onmodelchange", [model]);
    	});
    	
		this.$el.on("change", function(event) {
			that.updateModelFromInput(event);
    	});
    	
    	this.$el.on("keyup", function(event) {
    		that.keyup(event);
    	});

    	this.$el.on("focus", function(event) {
    		that.focus(event);
    	});

    	this.$el.on("blur", function(event) {
    		that.blur(event);
    	});

    	this.$el.on("mouseenter", function(event) {
    		that.mouseenter(event);
    	});

    	this.$el.on("mouseleave", function(event) {
    		that.mouseenter(event);
    	});
    	

    	this.$el.on("focus", function(event) {
    		that.onFocus(event);
    	});
    	this.$el.on("blur", function(event) {
    		that.onBlur(event);
    	});
    },
    
    launchSpecifiedActionsOn: function(){
    	if (this.options.specifiedEvents) {
    		var that = this;
	    	for (var attrname in this.options.specifiedEvents) {
				if (attrname == "onchange" || 
						attrname == "onkeyup" ||
						attrname == "onkeydown" ||
						attrname == "onfocus" || 
						attrname == "onblur" || 
						attrname == "onmouseenter" || 
						attrname == "onmouseleave" ||
						attrname == "onmouseover" ||
						attrname == "onmouseout") {
					var thespecifiedevent = attrname;
					this.$el.on(
							thespecifiedevent.substr(2,thespecifiedevent.length),
							{specifiedEvent: thespecifiedevent,
							view: that
							},
							function(event) {
								eval(that.options.specifiedEvents[event.data.specifiedEvent]);
							}
					);
				} 
	    	}    	
    	}
    },
    
    listenSpecifiedEvents: function() {
    	if (this.options.specifiedEvents) {
    		var that = this;
    		for (var attrname in this.options.specifiedEvents) {
    			if (attrname.substr(0,2) == "on") {
    				if (attrname != "onchange" && 
        					attrname != "onkeyup" &&
        					attrname != "onkeydown" &&
        					attrname != "onfocus" && 
        					attrname != "onblur" && 
        					attrname != "onmouseenter" && 
        					attrname != "onmouseleave" &&
        					attrname != "onmouseover" &&
        					attrname != "onmouseout") {

    					var thespecifiedevent = attrname;
						this.on(
								attrname.toLowerCase(), 
								function(event) {
									eval(this.options.specifiedEvents[thespecifiedevent]);
								}
						);
    				}
    			}
    		}
    	}
    },
    
    /*
     * Override this function to trigger views event on other el events
     * */
    triggerEventsOn: function() {
    	/*
    	 * This method is called after the view is rendered, so all inputs are available
    	 * This function can trigger some specific events, depending on the view :
    	 * 
    	 * */
    },

    /*
     * Override this function in order to decide what el event will launch the add of the model add view to the parent collection
     * this method must trigger onAddModelToCollection 
     * */    
    triggerAddModelToCollectionOn: function() {
    	console.error(this.classType + " : You must redefine triggerAddModelToCollectionOn() function, if you want to use ad to list functionnality.");
    },
    
    updateModelFromInput: function(event) {
    	var target = event.target;
    	var oModelValue = this.getModelValueFromInput(target.value);    	
        this.model = oModelValue;
        
        if (this.options.possiblevalues) {
        	this.options.possiblevalues.setValueSelected(this.model.get("value"));
        }
        
        this.trigger("onmodelchange");
    },

    keyup: function(event) {
    	//console.log("Firing onKeyUp", event);
        this.trigger("onkeyup", event);
    },

    focus: function(event) {
    	//console.log("Firing onFocus", event);
        this.trigger("onfocus", event);
    },

    blur: function(event) {
    	//console.log("Firing onBlur", event);
        this.trigger("onblur", event);
    },

    mouseenter: function(event) {
    	//console.log("Firing onMouseEnter", event);
        this.trigger("onmouseenter", event);
    },

    mouseleave: function(event) {
    	//console.log("Firing onMouseLeave", event);
        this.trigger("onmouseleave", event);
    },
    
    destroy: function() {
    	this.$el.remove();
		edManager.unRegisterView(this);
		this.remove();
    },
    
	/* Initialize
	 * automatically called by backbone framework when instanciating a view
	 * Do not use manually
	 * */
	initialize:function () {
    	this.options.childviews = new Backbone.Collection();
    	
    	//console.log(this.classType);
    	
    	this.options.descriptor = ED.Descriptor[this.classType];
    	if (!this.id) this.id = this.cid;
    	if (!this.options.isreadonly) this.options.isreadonly = false;
    	if (!this.options.ispartialrequired) this.options.ispartialrequired = false;
    	if (!this.options.isrequired) this.options.isrequired = false;
    	if (!this.options.compatibilitymode) this.options.compatibilitymode = false;
    	if (!this.options.usetemplate) {
    		this.options.usetemplate = "standard";
    	} else {
    		if (!this.options.descriptor.templates[this.options.usetemplate]) {
    			this.options.usetemplate = "standard";
    		}
    	}
    	if (!this.options.actions) this.options.actions = {
    			remove: {active: false},
    			add: {active: false},
    			sort: {active: false}
    	};
    	if (!this.options.group) {
    		this.options.group = "group_" + this.id;
    	};
    	
    	this.listenDefaultEvents();
    	this.listenEvents();
    	this.listenSpecifiedEvents();
    	
    	this.trigger("beforeinitialize");
    	
		this.on("beforeasyncloading", this.beforeAsyncLoading);
		this.on("onasyncloading", this.onAsyncLoading);

		if (this.options.async) {
			this.options.currentlyasyncloading = true;
			
			this.trigger("beforeasyncloading");
			
			//Immediately call the web service in order to fill the model
			var url = Utils.normalizeUrl(this.options.async.url);
			/*if (this.options.async.url.indexOf(edApplication().path) == -1) {
				var url = edApplication().path + this.options.async.url;
			} else {
				var url = this.options.async.url;
			}*/
			var k=0;
			
			//console.log(url);
			//console.log(this._wsParameters.toJSON());
			
			var data = null;
			
			if (this.options.async.parameters) {
				data = new Backbone.Model(this.options.async.parameters).toJSON();
			}
			
			$.ajax({
				url: url ,
				data: data,
				dataType:this.options.async.datatype,
				context: this,
				//timeout: 5000,
				statusCode: {
				    500: function() {
				    	console.log("error 500");
				    }
				},
				success: function(data, textStatus, jqXHR) {
					//console.log(data);
					this.options.initializedfromws = true;
					this.options.currentlyasyncloading = false;
					
					this.trigger("onasyncloading", data);
				},
				error: function(jqXHR, textStatus, errorThrown) {
    				this.removeNowLoading();
					console.log("error :");
					console.log("jqXHR :");
					console.log(jqXHR);
					console.log("textStatus :");
					console.log(textStatus);
					console.log("errorThrown :");
					console.log(errorThrown);
				}
			});
			
		} else {  	
	   		/*
	   		 * Backup the initial model
	   		 * */
	   		this.options.initialmodel = this.model.clone();
		}
		
		this.trigger("oninitialize");
    },

    beforeAsyncLoading: function() {
		//write now loading
		this.displayNowLoading();
		if (!this.options.async.datatype) {
			this.options.async.datatype = "json";
		}
    },

    onAsyncLoading: function(data) {
    	this.model = this.getModelFromJSON(data);
    	this.removeNowLoading();
		this.render();
    },
    
    displayNowLoading: function() {
    	if (!this.options.nowloadingel) {
	    	var nowLoadingTemplate = this.options.descriptor.templates.nowLoading;
	    	if (!nowLoadingTemplate) nowLoadingTemplate = "nowLoading.html";
	    	
	    	this.options.templateNowLoading = Handlebars.compile(edApplication().getTemplateByName(nowLoadingTemplate));
	    	
	    	var attributes = {id: this.id, rootPath: edApplication().path, nowLoadingImage: this.nowLoadingImage};
	    	if (this.nowLoadingLabel != "") {
	    		attributes.nowLoadingLabel = this.nowLoadingLabel; 
	    	}
	    	var html = this.options.templateNowLoading(attributes);
			this.options.nowloadingel = $(html);
			this.options.nowloadingel.css("display", "none");
			this.options.nowloadingel.css("position", "absolute");
			$("body").append(this.options.nowloadingel);
    	}
		
    	var that = this;
    	if ($("#" + this.id).length > 0) {
	    	if ($("#" + this.id).get(0).tagName.substring(0,2).toUpperCase() == "ED") {
	    		//this.options.parentel.append()
	    		this.options.nowloadingel.css("display", "");
	    		this.options.nowloadingel.css("text-align", "center");
	    		this.options.nowloadingel.css("position", "");
	    		this.options.parentel.append(this.options.nowloadingel);
	    		//this.nowLoadingPosition.of = this.options.parentel; 
	    	} else {
	    		this.nowLoadingPosition.of = that.$el;
	    		this.options.nowloadingel.position(this.nowLoadingPosition);
	        	this.options.nowloadingel.show(100);
	        	this.$el.animate({
	        	    opacity: 0.5
	        	  }, 100);
	    	}
    	} else {
    		this.options.nowloadingel.css("display", "");
    		this.options.nowloadingel.css("text-align", "center");
    		this.options.nowloadingel.css("position", "");
    		$("body").append(this.options.nowloadingel);    		
    	}
    },
    
    removeNowLoading: function() {
    	if (this.options.nowloadingel) {
    		var that = this;
        	this.options.nowloadingel.hide(100, function() {
        		that.options.nowloadingel.remove();
    			that.options.nowloadingel = null;
        	});
        	this.$el.animate({
        	    opacity: 1
        	  }, 100);
    	}
    },
    
    getModelFromJSON: function(str) {
    	var parsedValues = str;
   		var modelValue = new this.options.descriptor["model"](parsedValues);
    	return modelValue;
    },
        
    hide: function(callback) {
   		//this.$el.animate({height:'0px'}, 100, callback);
    	var that = this;
    	this.$el.hide(100, function() {
    		if (callback) {
    			callback();
    		}
    		that.trigger("onhide");
    	});
    	this.options.isShowed = false;
    },
    
    show: function(callback) {
   		//this.$el.animate({height:'0px'}, 100, callback);
    	var that = this;
    	this.$el.show(100, function() {
    		if (callback) {
    			callback();
    		}
    		that.trigger("onshow");
    	});
    	this.options.isShowed = true;
    },
    
    /*
     * This methods generates a JSON String to give to the template
     * */
    getJSONForTemplates: function() {
    	var properties = {
    		//view properties
    		labels: edApplication().labels,
    		rootPath: edApplication().path,
    		descriptor: this.options.descriptor,
    		myActorId: edContext().actorId,
    		id: this.id,
    		cid: this.cid,
    		softwareid: edApplication().softwareid
    	};

    	for (var attrname in this.options) {
    		properties[attrname] = this.options[attrname]; 
    	}
    	
    	if (this.options.possiblevalues) {
        	modelProperties = this.options.possiblevalues.getJSONObject();
        	
        	var label = this.options.possiblevalues.getByProperty("value", this.model.get("value"));
        	if (label) {
        		properties["label"] = label.get("label");
        	}
        	
        	if (modelProperties) {
    	    	for (var attrname in modelProperties) {
    	    		properties[attrname] = modelProperties[attrname]; 
    	    	}
        	}
    	}
    	
    	var modelProperties = this.model.getJSONObject();
    	if (modelProperties) {
	    	for (var attrname in modelProperties) {
	    		properties[attrname] = modelProperties[attrname]; 
	    	}
    	}
    	if (this._extendedProperties) {
    		this._extendedProperties.each(function(anExtendedProperty) {
				properties[anExtendedProperty.get("propertyName")] = anExtendedProperty.get("propertyModel").getJSONObject();
			});
    	}
    	
    	return properties;
    },
    
    selectTemplate: function() {
    	if (this.options.isreadonly == true) {
    		if (this.options.descriptor.templates.readOnly) {
    			return this.options.descriptor.templates.readOnly;
    		} else {
    			return this.options.descriptor.templates[this.options.usetemplate];
    		}
    	} else {
   			return this.options.descriptor.templates[this.options.usetemplate];
    	}
    },
    
    render:function () {
    	this.model.view = this;

    	this.trigger("beforerender");
    	
    	var initialTag = this.options.initialTag;
    	//var currentEl = this.$el;
    	
    	var oTemplate = Handlebars.compile(edApplication().getTemplateByName(this.selectTemplate()));
    	var html = oTemplate(this.getJSONForTemplates());

		$(this.el).html(html);
		this.setElement($(html));
		
    	//Flag the dom element as an ed one
    	this.$el.attr("ed", "true");
    	this.$el.attr("edtag", this.options.descriptor.edTag);
    	this.$el.attr("id", this.id);
    	
    	if (this.options.actions) {
    		/*
    		 * 
    		 * RATIONNALISER TOUT CA
    		 * 
    		 * */
    		if (this.options.actions.remove && this.options.actions.sort) { 
		    	if (this.options.actions.remove.active && this.options.actions.sort.active) {
		    		this.$el.addClass("edisremovableandsortable");
		    	} else {
		    		if (this.options.actions.sort.active) {
		    			this.$el.addClass("edissortable");
		    		}
		    		if (this.options.actions.remove.active) {
		    			this.$el.addClass("edisremovable");
		    		}    		
		    	}
    		} else {
		    	if (this.options.actions.remove) {
		    		if (this.options.actions.remove.active) {
		    			this.$el.addClass("edisremovable");
		    		}
		    	} 
		    	if (this.options.actions.sort) {
		    		if (this.options.actions.sort.active) {
		    			this.$el.addClass("edissortable");
		    		}
		    	}
    		}
    	}
    	
    	
        var otherAttrs = this.options.specifiedAttributes;
        if (otherAttrs) {
			for(var i=0;i<otherAttrs.length;i++) {
				if (otherAttrs[i].substring(0,2) == "on") {
					if ($("input", this.$el).length > 0) {
						$("input", this.$el).attr(otherAttrs[i], this.options[otherAttrs[i]]);
					} else {
						this.$el.attr(otherAttrs[i], this.options[otherAttrs[i]]);
					}
				} else {
					this.$el.attr(otherAttrs[i], this.options[otherAttrs[i]]);
				}
			}
        }
    	this.el.view = this;
    	
    	this.manageGroupEvents();

    	if (!this.$el.attr("name")) {
    		this.$el.attr("name", this.id);
    	}
    	
    	if (initialTag) {
			this.$el.insertAfter(initialTag);
			initialTag.empty().remove();
			this.options.initialTag = null;
    	} else {
        	//var existingEl = $("#" + this.id.replace(edManager.options.INPUT_SUFFIX, ""));
    		var existingEl = $("#" + this.id);
        	if (existingEl.length > 0) {
        		existingEl.empty().replaceWith(this.$el);
        	} else {
    			//occurs when the view is part of a viewList
    			this.options.parentel.append(this.$el);        		
        	}
    	}
    	
       	//manage edtooltip
       	if (this.options.edtooltip) {
       		this.createToolTip();
			if (this.options.isreadonly) {
				this.$el.addClass("withTooltip");
			}
		}

       	//manage tooltip
       	if (this.options.tooltip) {
       		this.$el.attr("title", this.options.tooltip);
       		this.$el.attr("alt", this.options.tooltip);
       	}
       	
       	this.options.originalClass = this.$el.attr("class");
       	if (typeof this.options["class"] !== "undefined") {
       		this.options.originalClass = this.options.originalClass + " " + this.options["class"];
       	}
    	this.$el.removeClass();
    	this.$el.addClass(this.options.originalClass);
    	
    	if (this.options.isreadonly) {
    		this.$el.addClass("readOnly");
    		this.options.originalClass += " readOnly";
    	} else {
    		if (this.options.isrequired) {
    			this.$el.addClass("required");
    			this.options.originalClass += " required";
    		} else {
		    	if (this.options.ispartialrequired) {
		    		this.$el.addClass("partialRequired");
		    		this.options.originalClass += " partialRequired";
		    	}
    		}
    	}
       	
    	if (!this.options.preventFromCascadingEdViewsCreation) {
    		edManager.createEdViewsFromHTML(this);
    	}
		
    	if (this.options.dontshowafterloading) {
    		this.hide();
    	}
   		
    	this.manageCompatibilityMode();
    	
        this.$el.trigger(this.id + "_loaded", [this]);
       	
		//debug mode
		$(this.el).on("click", {view: this}, this.displayDebugInfo);
		this.trigger("onrender");
		
		if (!edManager.getViewByID(this.id)) {
			edManager.registerView(this, "");
		}
		
        return this;
    },

    manageCompatibilityMode: function() {
    	//manage events in compatibility mode
    	if (this.options.compatibilitymode && !this.options.isinlist && !this.options.isaddview) {
    		if (!this.options.compatibilityel) {
	    		var hiddenId = this.id.replace(edManager.options.INPUT_SUFFIX, "");
	    		//this.options.compatibilityel = $("<input type='hidden' name='" + hiddenId + "' id ='" + hiddenId + "' value='" + Utils.getNormalizedValuesFromView(this.id) + "'></input>");
	    		this.options.compatibilityel = $("<input disabled type='hidden' name='" + hiddenId + "' id ='" + hiddenId + "' value='" + this.model.get("value") + "' style='width:" + this.$el.width() + "px; border:1px solid #dd3300;'></input>");
	    		this.options.parentel.append(this.options.compatibilityel);
	    		var that = this;
	    		this.on("onmodelchange", function() {
	    			//patch 27/10/2015
	    			//$("#" + hiddenId).val(this.model.get("value"));
	    			that.options.compatibilityel.val(this.model.get("value"));
	    		});
    		} else {
    			//$("#" + hiddenId).val(this.model.get("value"));
    			this.options.compatibilityel.val(this.model.get("value"));
    		}
    	}
    },
    
    manageGroupEvents: function() {
    	if (this.options.group) {
        	if (this.options.group != "") {
        		this.$el.attr("group", this.options.group);
        		
        		this.$el.on("mouseenter", 
        				{group:this.options.group, view:this}, 
        				function(event) {
        					$(this).attr("mouseovered", "true");
        					$('[group="' + event.data.group + '"]').each(function(){event.data.view.onMouseEnter();});
        				}
        		);
        		this.$el.on("mouseleave", 
        				{group:this.options.group, view:this}, 
        				function(event) {
        					$(this).attr("mouseovered", "false");
        					if ($('[group="' + event.data.group + '"][mouseovered="true"]').length == 0) {
        						$('[group="' + event.data.group + '"]').attr("mouseovered", "false").each(function(){event.data.view.onMouseLeave();});
        					}
        				}
        		);
        	}    		
    	}
    },
    
    onMouseEnter: function() {
    	this.options.isMouseOvered = true;
    	if (!this.options.isreadonly) {
    		this.$el.addClass("mouseover");
    	}
    },
    
    onMouseLeave: function() {
    	this.options.isMouseOvered = false;
    	this.$el.removeClass("mouseover");
    },

    onFocus: function() {
    	this.options.isFocused = true;
    	if (!this.options.isreadonly) {
    		if (this.options.isinlist) {
    			this.$el.addClass("focusInList");
    		} else {
    			this.$el.addClass("focus");
    		}
    	}
    },
    
    onBlur: function() {
    	this.options.isFocused = false;
    	this.$el.removeClass("focus").removeClass("focusInList");
    },
    
    //return a Model.Value
    getModelValueFromInput: function(aString) {
		var aModelValue = this.model;
		aModelValue.set("value", aString);
		return aModelValue;
    },
   
    /*
     * Tooltip management
     * */
    createToolTip: function() {
    	var that = this;
    	this.normalizeTooltipOptions();
    	this.$el.qtip({
			content: that.options.edtooltip.content, 
			show: that.options.edtooltip.show,
			hide: that.options.edtooltip.hide,
			position: that.options.edtooltip.position,
			style: {
				classes: 'qtip-light qtip-shadow qtip-rounded',
				//width: 250,
				tip: {
					width: 4,
					height: 4
				}
			},
			events: {
                show: function (event, api) {
               		api.elements.target[0].view.trigger("ontooltipshow");
                },
                hide: function (event, api) {
               		api.elements.target[0].view.trigger("ontooltiphide");
                }
			}
		});
    },
    
    normalizeTooltipOptions: function() {
    	if (typeof(this.options.edtooltip) == "string") {
    		var content = this.options.edtooltip;
    		this.options.edtooltip = {};
    		this.options.edtooltip.content = {};
    		this.options.edtooltip.content.text = content;
    	}
//    	if (this.options.edtooltip)
//    		console.log(this.options.edtooltip);
//    	
		if (!this.options.edtooltip.show) {
			this.options.edtooltip.show = {};
		}
		if (!this.options.edtooltip.show.delay) {
			this.options.edtooltip.show.delay = 1000; 
		}
		this.options.edtooltip.show.event = 'mouseenter';
		this.options.edtooltip.show.solo = true;
		
		if (!this.options.edtooltip.hide) {
			this.options.edtooltip.hide = {};
		}
		if (!this.options.edtooltip.hide.delay) {
			this.options.edtooltip.hide.delay = 400; 
		}

		this.options.edtooltip.hide.event = 'mouseleave';
		this.options.edtooltip.hide.leave = true;
		this.options.edtooltip.hide.fixed = true;

		if (!this.options.edtooltip.position) {
			this.options.edtooltip.position = {};
		}
		if (!this.options.edtooltip.position.my) {
			this.options.edtooltip.position.my = "bottom left"; 
		}
		if (!this.options.edtooltip.position.at) {
			this.options.edtooltip.position.at = "top right"; 
		}
		this.options.edtooltip.position.target= this.$el;
		this.options.edtooltip.position.viewport= $(window);

		if (!this.options.edtooltip.content) {
			this.options.edtooltip.content = {};
		}
		
		if (this.options.edtooltip.objid && this.options.edtooltip.objtype) {
			//Uppercase the first character of objtype
			this.options.edtooltip.objtype = this.options.edtooltip.objtype.substring(0,1).toUpperCase() + this.options.edtooltip.objtype.substring(1,this.options.edtooltip.length);  
			
			this.options.edtooltip.content = {};
			this.options.edtooltip.content.text = 'Loading';
			this.options.edtooltip.content.ajax = {};
			this.options.edtooltip.content.ajax.url = 'load_tooltip.fl';
			this.options.edtooltip.content.ajax.loading = false;
			this.options.edtooltip.content.ajax.once = true;
			if (this.options.edtooltip.content.ajax.url.substring(0,7)!="http://") {
				this.options.edtooltip.content.ajax.url = edApplication().path + this.options.edtooltip.content.ajax.url;
			}
			this.options.edtooltip.content.ajax.type = 'GET';
			this.options.edtooltip.content.ajax.data= { id: this.options.edtooltip.objid, type: this.options.edtooltip.objtype};
			var that = this;
			this.options.edtooltip.content.ajax.dataFilter= function(data, dataType) {
				return $.trim(data);
			};
			this.options.edtooltip.content.ajax.success= function(data, status) {
				if (data == "") {
					that.$el.qtip("destroy");
				} else {
					this.set('content.text', data);
				} 
			};
		} 
    },
    
    displayDebugInfo: function(event) {
    	if (event.ctrlKey && event.shiftKey) {
    		console.log("debugging " + event.data.view.classType + " " + event.data.view.id);
    		console.log(event.data.view);
    		
    		if (event.data.view.options.compatibilityel) {
    			console.log("This view is in COMPATIBILITY MODE. Here is the associated hidden input " + event.data.view.options.compatibilityel.attr("id"));
    			console.log(event.data.view.options.compatibilityel);
    			console.log("Its value is : ", event.data.view.options.compatibilityel.val());
    			event.data.view.options.compatibilityel.attr("type", "text");
    			event.data.view.options.compatibilityel.show();
    			setTimeout(function() {
        			event.data.view.options.compatibilityel.hide();
        			event.data.view.options.compatibilityel.attr("type", "hidden");
    			},4000);
    		}
    		console.log("-------------------------------------------------------------------------------------------------------");
    	}
    },
    
    computeOnError : function () {
/*    	//A read only view cannot be in error
    	if ((this.options.isreadonly == true) || (this.options.accessmode == "READ")) return false;
    	
    	//A required view with an empty value is on error
    	var isAllViewsEmpty = false;
    	if (this.options.isrequired == true) {
    		if (this.model.get("value") == "") return true;
    		else return this.postComputeOnError();
    	} else {
    		//In a partial required group of views, if all views has empty values, then all views in the group are on error
    		if (this._isPartialRequired == true) {
    			isAllViewsEmpty = this.options.group.isAllViewsEmpty(); 
    			if (isAllViewsEmpty) {
    				this.options.group.setAllViewOnError();
    			} else {
    				this.options.group.setAllViewNotOnError();
    			}
    		}
    	}
    	if (isAllViewsEmpty) return true;
    	
    	if (this.model.get("value") != "") {
    		return this.postComputeOnError();
    	}
    	return false;
*/    },

    
    resetEl: function() {
    	this.$el.val("");
    },
    
    resetAddEl: function() {
    	this.$el.val("");
    },
    
    blink: function() {
    	this.$el.blink("opacity", "0.4", 700);
    },

    log: function() {
    	this.logger.info(this.classType, "-------------------------------------");
    	this.logger.info(this.classType, this.classType);
    	this.logger.info(this.classType, "	id : " + this.id);
    	this.logger.info(this.classType, "	model id : " + this.model.get("id"));
    	this.logger.info(this.classType, "	model : ");
    	this.logger.info(this.classType, this.model);
    	this.logger.info(this.classType, "	template : " + this.templateName);
    	this.logger.info(this.classType, edApplication().getTemplateByName(this.templateName));
    	this.logger.info(this.classType, "	generated DOM :");
    	this.logger.info(this.classType, this.$el);
    	this.logger.info(this.classType, "-------------------------------------");
    }
});

/*
 * Base Class to manage List of views
 * list of views are in a backbone collection viewsInList (don't confuse with childViews that is the list of child views in templates )
 * This class manage the rendering of her list views transfering properties, like access mode, readonly, required etc
 * It also manage the Add, MoveUp and MoveDown buttons
 * It's model is a Models.ValueCollection which is a Ciollection of Models.Value
 * 
 */

Views.BaseList = Views.Base.extend({
	classType: "Views.BaseList",
	isViewList: true,
    tagName:'div',
    
	nowLoadingImage: "./skins/default/images/nowLoading.gif",
	nowLoadingLabel: edApplication().labels.DEFAULTNOWLOADINGLABEL,
	nowLoadingPosition: {
		my: "center center",
		at: "center center"
	},
    
    delegatedEvents: ["onchange", 
                      "onkeyup",
                      "onkeydown",
                      "onfocus", 
                      "onblur",
                      "onmouseenter", 
                      "onmouseleave",
                      "onmouseover",
                      "onmouseout",
                      "onmodelchange"
                      ],
    
    launchDefaultActionsOn: function() {
    },
    
	listenDefaultEvents: function() {
		this.on("onaddmodeltocollection", function(model) {
			//console.log("event onAddModelToCollection fired");
			this.onAddModelToCollection(model);
		});
		this.on("onremovemodelfromcollection", function(model) {
			//console.log("event onRemoveModelFromCollection fired");
			this.onRemoveModelFromCollection(model);
		});
		
		this.on("onrender", this.launchDefaultActionsOn);
		this.on("onrender", this.triggerEventsOn);

		this.on("onmouseenter", this.onMouseEnter);
		this.on("onmouseleave", this.onMouseLeave);
		
		this.on("onmouseenter", this.onMouseEnter);
	},
    
    launchDefaultActionsOn: function() {
    	var that = this;

		this.model.on("change", function(model,event) {
			//console.log("oncollectionchanged", event);
			that.trigger("oncollectionchanged", [model, that, event]);
    	});
    	
		this.model.on("add", function(model,event) {
			that.trigger("onaddmodeltocollection", [model, that, event]);
    	});

		this.model.on("remove", function(model,event) {
			that.trigger("onremovemodelfromcollection", [model, that, event]);
    	});

    	this.$el.on("focus", function(event) {
    		that.focus(event);
    	});

    	this.$el.on("blur", function(event) {
    		that.blur(event);
    	});

    	this.$el.on("mouseenter", function(event) {
    		that.mouseenter(event);
    	});

    	this.$el.on("mouseleave", function(event) {
    		that.mouseenter(event);
    	});
    },
	
    onAsyncLoading: function(data) {
    	this.model = this.getCollectionFromJSON(data);
    	this.removeNowLoading();
    },
    
    selectTemplate: function(){
    	return this.options.descriptor.templates[this.options.usetemplate];
    },

    onAddModelToCollection: function() {
    	this.renderList();
    },
    
    onRemoveModelFromCollection: function(aModel) {
    	//console.log("onCollectionRemoved");
    	this.removeViewItemByCid(aModel.cid);
    },
    
    render:function () {
    	this.trigger("beforerender");
    	
    	this.model.view = this;
    	var initialTag = this.options.initialTag;
    	
    	var currentEl = this.$el;
    	var oTemplate = Handlebars.compile(edApplication().getTemplateByName(this.selectTemplate()));
    	
    	var html = oTemplate(this.getJSONForTemplates());
		
		$(this.el).html(html);
		this.setElement($(html));
		
		this.manageGroupEvents();
		
    	//Flag the dom element as an ed one
    	this.$el.attr("ed", "true");

    	if (!this.$el.attr("name")) {
    		this.$el.attr("name", this.id);
    	}
    	
    	if (initialTag) {
			this.$el.insertAfter(initialTag);
			initialTag.empty().remove();
			this.options.initialTag = null;
    	} else {
    		//var viewListEl = $("#" + this.id.replace(edManager.options.INPUT_SUFFIX, ""));
	    	var viewListEl = $("#" + this.id);
	    	
	    	if (viewListEl.length > 0) {
	    		viewListEl.empty().replaceWith(this.$el);
	    		this.options.renderItemZone = null;
	    		this.options.renderAddItemZone = null;
	    		if (this.options.actions) {
	    			if (this.options.actions.add) {
	    				if (this.options.actions.add.view) {
	    					//reset reference to addView
	    					this.options.actions.add.view = null;
	    				}
	    			}
	    		}
	    	} else {
	    		this.options.parentel.append(this.$el);
	    	}
    	}
    	
    	/*if (typeof this.options.hasBeenFirstRendered == "undefined") {
    		this.options.parentel.append(this.$el);
    		this.options.hasBeenFirstRendered = true;
    	} else {
    		currentEl.empty().replaceWith(this.$el);
    	}*/
    	    	
        var otherAttrs = this._otherAttributes;
        if (otherAttrs) {
			for(var i=0;i<otherAttrs.length;i++) {
				if (otherAttrs[i].specified) {
					this.$el.attr(otherAttrs[i].nodeName, otherAttrs[i].nodeValue);
				}
			}
        }
    	
       	//manage edtooltip
       	if (this.options.edtooltip) {
       		this.createToolTip();
			if (this.options.isreadonly) {
				this.$el.addClass("withTooltip");
			}
		}
       	
       	//manage tooltip
       	if (this.options.tooltip) {
       		this.$el.attr("title", this.options.tooltip);
       		this.$el.attr("alt", this.options.tooltip);
       	}
       	
       	this.options.originalCSS = this.$el.attr("class");
       	
   		edManager.createEdViewsFromHTML(this);
		
        this.$el.trigger(this.id + "_loaded", [this]);
       	
		//debug mode
		$(this.el).on("click", {view: this}, this.displayDebugInfo);

		this.trigger("onrender");

		this.manageCompatibilityMode();

		this.renderList();
		
        return this;
    },
    
    manageCompatibilityMode: function() {
    	//manage events in compatibility mode
    	if (this.options.compatibilitymode) {
    		var hiddenId = this.id.replace(edManager.options.INPUT_SUFFIX, "");
    		if (!this.options.compatibilityel) {
	    		this.options.compatibilityel = $("<input type='hidden' name='" + hiddenId + "' id ='" + hiddenId + "' value='" + Utils.getNormalizedValuesFromView(this.id) + "' style='width:" + this.$el.width() + "px; border:1px solid #dd3300;'></input>");
	    		this.options.parentel.append(this.options.compatibilityel);
	    		var that = this;
	    		this.on("onaddmodeltocollection", function() {
	    			//$("#" + hiddenId).val(Utils.getNormalizedValuesFromView(that.id));
	    			that.options.compatibilityel.val(Utils.getNormalizedValuesFromView(that.id));
	    		});
	    		this.on("onremovemodelfromcollection", function() {
	    			//$("#" + hiddenId).val(Utils.getNormalizedValuesFromView(that.id));
	    			that.options.compatibilityel.val(Utils.getNormalizedValuesFromView(that.id));
	    		});
    		} else {
    			//$("#" + hiddenId).val(Utils.getNormalizedValuesFromView(this.id));
    			this.options.compatibilityel.val(Utils.getNormalizedValuesFromView(this.id));
    		}
    	}
    },
    
    renderList: function(fromIndex) {
    	
    	this.trigger("beforerenderlist");
    	
    	var that = this;
    	var startIndex=0;
    	if (typeof fromIndex !== "undefined") {
    		startIndex = fromIndex;
    	}
    	
    	if (!this.options.renderItemZone) {
    		this.options.renderItemZone = $("#viewItemRenderZone_" + this.id);
    		this.options.renderItemZone.css("display", "none");
    		//this.options.renderItemZone.detach();
    	}
    	if (!this.options.renderAddItemZone) {
    		this.options.renderAddItemZone = $("#viewAddItemRenderZone_" + this.id);
    		this.options.renderAddItemZone.css("display", "none");
    	}
    	
    	if (this.model) {
    		var aModel = this.model.models[startIndex];
    		if (aModel) {
    			var htmlBlock = $("[viewItemRenderZoneCidModel=" + aModel.cid + "]");
    			if (htmlBlock.length == 0) {
    				var aViewItem = this.createViewItemFromModel("viewItem_" + aModel.cid, aModel);
    				aViewItem.options.isinlist = true;
    				//aViewItem.on("onmodelchange", function() {
    				aViewItem.model.on("change", function() {
    					//console.log("a child model changed", this.model);
    					var hiddenId = that.id.replace(edManager.options.INPUT_SUFFIX, "");
    					$("#" + hiddenId).val(Utils.getNormalizedValuesFromView(that.id));
    				});
    				
    				that.addViewItemAt(aViewItem, startIndex);
    			}
    			setTimeout(function() {that.renderList(startIndex + 1);}, 1);
    		}
    		if ((startIndex == this.model.models.length - 1) || this.model.models.length == 0) {
    			this.manageActions();
    			
    			this.trigger("onrenderlist");
    		}
    	}
    },
    
    addViewItemAt: function(aViewItem, index) {
    	//get the render zone
		//var viewItemRenderZone = $("#viewItemRenderZone_" + this.id);
    	var viewItemRenderZone = this.options.renderItemZone;
		//viewItemRenderZone.css("display", "");
		
		//clone it and insert the clone juste before the render zone
		var clonedViewItemRenderZone = viewItemRenderZone.clone();
		clonedViewItemRenderZone.attr("id", "viewItemRenderZone_" + aViewItem.model.cid);
		clonedViewItemRenderZone.attr("viewItemRenderZoneCidModel", aViewItem.model.cid);
		clonedViewItemRenderZone.attr("viewItemRenderZoneIndexModel", index);
		clonedViewItemRenderZone.attr("viewItemRenderZoneParentViewId", this.id);

		//found the current viewItem with the index
		var currentViewItem = $("[viewItemRenderZoneCidModel=" + aViewItem.model.cid + "][viewItemRenderZoneIndexModel=" + index + "][viewItemRenderZoneParentViewId=" + this.id + "]");
		if (currentViewItem.length == 0) {
			currentViewItem = viewItemRenderZone;
		}
		
		//check if a view with the index already exists.
		//If exists, insert the new view before it
		var viewItemWithIndex = $("[viewItemRenderZoneIndexModel=" + index + "][viewItemRenderZoneParentViewId=" + this.id + "]");
		if (viewItemWithIndex.length > 0) {
			currentViewItem = viewItemWithIndex;
		}
		
		clonedViewItemRenderZone.css("display", "");
		clonedViewItemRenderZone.insertBefore(currentViewItem);
		
		var viewItemRender = $("#viewItem_" + this.id, clonedViewItemRenderZone);
		//var newView = this.createViewItemFromModel("viewItem_" + aModel.cid, aModel);
		
		viewItemRender.replaceWith(aViewItem.render().$el);
		if (!aViewItem.options.dontshowafterloading) {
			aViewItem.$el.hide(0);
			aViewItem.show();
		}

		edManager.registerView(aViewItem);
		
		this.refreshHTMLIndexes();
		//viewItemRenderZone.css("display", "none");
		return aViewItem;
    },
    
    removeViewItemAt: function(index) {
    },

    removeViewItemByCid: function(cid) {
    	var that = this;
    	
    	var htmlBlock = $("[viewItemRenderZoneCidModel=" + cid + "]");
    	if (htmlBlock.length > 0) {
    		var viewItem = edManager.getViewByID("viewItem_" + cid);
    		viewItem.hide(function() {
    			htmlBlock.remove();
    			that.refreshHTMLIndexes();
    		});
    	}
    },

    getFirstView : function() {
    	if (!this.model) return undefined;
    	if (this.model.models.length == 0) return undefined;
    	var aModelCid = this.model.models[0].cid;
    	return this.getViewByModelCid(aModelCid); 	
    },
    
    getLastView : function() {
    	if (!this.model) return undefined;
    	if (this.model.models.length == 0) return undefined;
    	var aModelCid = this.model.models[this.model.models.length - 1].cid;
    	return this.getViewByModelCid(aModelCid);
    },
    
    getViewByModelCid: function(cid) {
    	return edManager.getViewByID("viewItem_" + cid);
    },
    
    refreshHTMLIndexes: function() {
    	$("[viewItemRenderZoneParentViewId=" + this.id + "]").each(function(index) {
    		$(this).attr("viewItemRenderZoneIndexModel", index);
    	});
    },
        
    createViewItemFromModel: function(id, model, viewType) {
    	if (!viewType) {
    		viewType = "viewItem";
    	}

    	var attr = {id: id,
    			parentel: $(this.el),
    			parentview:this,
    			group:this.options.group + "_" + id,
    			model: model,
    			isrequired: this.options.isrequired,
    			isreadonly: this.options.isreadonly,
    			possiblevalues: this.options.possiblevalues,
    			tooltip: this.options.tooltip,
    			actions: this.options.actions,
    			usetemplate: this.options.usetemplate//,*/
    			//placeholder: "<Ajouter une valeur>"
    	};
    	
    	attr.specifiedEvents = {};
    	for (var i=0; i<this.delegatedEvents.length; i++) {
    		if (this.options.specifiedEvents[this.delegatedEvents[i]]) {
    			attr.specifiedEvents[this.delegatedEvents[i]] = this.options.specifiedEvents[this.delegatedEvents[i]];
    		}
    	}
    	
    	for (var attrname in this.options.specifiedAttributes) {
    		var theattrname = this.options.specifiedAttributes[attrname];
    		if (theattrname != "id" &&
    				theattrname != "ismultivalued" &&
    				theattrname != "actions") {
    			attr[theattrname] = this.options[theattrname];
    		}
    	}
    	
    	attr.compatibilitymode = false;
    	
		var aView = new this.options.descriptor[viewType]["view"](attr);
		
        return aView;
    },

    manageActions: function() {
    	var that = this;

    	this.options.actions = Utils.completeWithDefaultValues(this.options.actions, this.DEFAULT_ACTIONS);
    	this.manageAddActionForView();
    	$("[viewItemRenderZoneParentViewId=" + this.id + "]").each(function(index) {
    		var viewItemEl = $(this);
    		that.manageRemoveActionForView(viewItemEl);
    		that.manageSortActionForView(viewItemEl);
    	});
    },
    
    manageAddActionForView: function() {
		var addAction = this.options.actions.add;
		if (addAction.active) {
			var addView = addAction.view;
			
			if (!addView) {
				var authorizedouble = addAction.authorizedouble;
				
		    	//var viewAddItemRenderZone = $("#viewAddItemRenderZone_" + this.id);//, this.$el);
				var viewAddItemRenderZone = this.options.renderAddItemZone;
		    	//viewAddItemRenderZone.css("display", "");
		    	
				//clone it and insert the clone juste before the render zone
				var clonedViewAddItemRenderZone = viewAddItemRenderZone.clone();
				clonedViewAddItemRenderZone.attr("id", "viewAddItemRenderZone_" + this.id);
				clonedViewAddItemRenderZone.attr("viewAddItemRenderZoneCidModel", this.model.cid);
				//clonedViewAddItemRenderZone.attr("viewAddItemRenderZoneIndexModel", index);
				//clonedViewAddItemRenderZone.attr("viewAddItemRenderZoneParentViewId", this.id);
				
				clonedViewAddItemRenderZone.css("display", "");
				clonedViewAddItemRenderZone.insertBefore(viewAddItemRenderZone);
				
				var aModel = new this.options.descriptor.addView["model"]({"value": ""});
				addView = this.createViewItemFromModel("viewItem_" + aModel.cid, aModel, "addView");
				//addView.options.isrequired = false;
				//addView.options.possiblevalues.add(aModel, {at:0});
	
				var viewAddItemRender = $("#viewAddItem_" + this.id, clonedViewAddItemRenderZone);
				//var newView = this.createViewItemFromModel("viewItem_" + aModel.cid, aModel);
				
				viewAddItemRender.replaceWith(addView.render().$el);
				
				addView.triggerAddModelToCollectionOn();
				
				addView.on("onaddmodeltocollection", function(event) {
					/*console.log("onAddModelToCollection fired");
					console.log(this);*/
					var viewList = this.options.parentview;
					viewList.model.add(this.model.clone());
					//viewList.model.add(this.model);
					this.resetAddEl();
				});
				
				if (!addView.options.dontshowafterloading) {
					//addView.$el.hide(0);
					addView.show();
				}
				
				addView.options.isaddview = true;
				
				viewAddItemRenderZone.css("display", "none");
				addAction.view = addView;
				
				addView.resetAddEl();
				
				edManager.registerView(addView);
			}
		}
    },
    
    manageRemoveActionForView: function(viewItemEl) {
    	var that = this;
		if ($("#remove_" + viewItemEl.attr("viewitemrenderzonecidmodel"), viewItemEl).length == 0) {
    		var removeAction = this.options.actions.remove;
    		if (removeAction.active) {
    			var childEl = $(viewItemEl.children()[0]);
    			//childEl.addClass("edisdeletable");
    			//childEl.css(childEl.css());
    			
    			var icon = removeAction.button.icon;
    			var show = removeAction.show;
    			var hide = removeAction.hide;
    			var position = removeAction.button.position;
    			
    			var removeEl = $("<img style='position:absolute;padding:5px;' src='" + icon + "' id='remove_" + viewItemEl.attr("viewitemrenderzonecidmodel") + "'>");

   				removeEl.hide();
   				
    			viewItemEl.append(removeEl);
    			viewItemEl.on(
    					show.event,
    					{positionOf: viewItemEl},
    					function(event) {
    						removeEl.isvisible = true;
    						position.of = event.data.positionOf;
    						setTimeout(function() {
    							removeEl.show();
    							removeEl.css("top", "");
    							removeEl.css("left", "");
    							removeEl.position(position);
    						}, 
    						show.delay);
    					});

    			viewItemEl.on(hide.event, function() {
    				removeEl.isvisible = false;
    				setTimeout(function() {
    						if (!removeEl.isvisible) {
    							removeEl.hide();
    						}
    					}, hide.delay);
    			});

    			var viewToRemove = edManager.getViewByID("viewItem_" + viewItemEl.attr("viewitemrenderzonecidmodel"));
    			viewToRemove.$el.on("keyup", function(event) {
    				if (event.ctrlKey && event.keyCode == 46) {
    					//CTRL + SUPPR
    					removeEl.trigger("click");
    				}
    				
    			});
    			
    			removeEl.on("click", function() {
    				var viewToRemove = edManager.getViewByID("viewItem_" + viewItemEl.attr("viewitemrenderzonecidmodel"));
    				var modelToRemove = viewToRemove.model; 
    				that.model.remove(modelToRemove);
    				viewToRemove.hide(function(){
    					$("#viewItemRenderZone_" + modelToRemove.cid).remove();
    					var firstView = that.getFirstView(); 
    					if (firstView) {
    						firstView.$el.focus();
    					} else {
    						var addAction = that.options.actions.add;
    						if (addAction.active) {
    							var addView = addAction.view;
    							if (addView) {
    								addView.$el.focus();
    							}
    						}
    					}
    				});
    			});
    			//removeEl.position(position);    			
    		}
		}
    },
    
    manageSortActionForView: function(viewItemEl) {
    	var that = this;
		if (($("#moveup_" + viewItemEl.attr("viewitemrenderzonecidmodel"), viewItemEl).length == 0) || ($("#movedown_" + viewItemEl.attr("viewitemrenderzonecidmodel"), viewItemEl).length == 0)) {
    		var sortAction = this.options.actions.sort;
    		if (sortAction.active) {
    			var childEl = $(viewItemEl.children()[0]);
    			//childEl.addClass("edissortable");
    			if (sortAction.draggable.active) {
	    			this.$el.sortable({
	    	            placeholder: sortAction.draggable.placeholder,
	    	            axis: sortAction.draggable.axis,
	    	            start: function( event, ui ) {
	    	            	$("." + sortAction.draggable.placeholder).height(ui.item.height());
	    	            	ui.item.trigger("mouseleave");
	    	            },
			            stop: function( event, ui ) {
			            	ui.item.trigger("mouseenter");
			            	ui.item.blink("#d0eff7", 700);
			            	that.refreshHTMLIndexes();
			            }
	    	        });
    			}
    			
    			
    			var moveUpEl = $("<img group=" + childEl.attr("group") + " style='position:absolute;padding:5px;' src='" + sortAction.moveupbutton.icon + "' id='moveup_" + viewItemEl.attr("viewitemrenderzonecidmodel") + "'>");
				moveUpEl.myposition = sortAction.moveupbutton.position;
    			moveUpEl.hide();
    			viewItemEl.append(moveUpEl);

    			var moveDownEl = $("<img group=" + childEl.attr("group") + " style='position:absolute;padding:5px;' src='" + sortAction.movedownbutton.icon + "' id='movedown_" + viewItemEl.attr("viewitemrenderzonecidmodel") + "'>");
    			moveDownEl.myposition = sortAction.movedownbutton.position;
    			moveDownEl.hide();
    			viewItemEl.append(moveDownEl);

    			var show = sortAction.show;
    			var hide = sortAction.hide;
    			
    			viewItemEl.on(
    					show.event, 
    					{positionOf: viewItemEl, model: that.model},
    					function(event) {
    						if (event.data.positionOf.attr("viewitemrenderzoneindexmodel") > 0) {
    							moveUpEl.isvisible = true;
	    						moveUpEl.myposition.of = event.data.positionOf;
	        					setTimeout(function() {
	        						moveUpEl.show();
	        						moveUpEl.css("left", "");
	        						moveUpEl.css("top", "");
	        						moveUpEl.position(moveUpEl.myposition);
	        					}, 
	        					show.delay);
    						}
    					});
    			viewItemEl.on(hide.event, function() {
    				moveUpEl.isvisible = false;
    				setTimeout(function() {
						if (!moveUpEl.isvisible) {
							moveUpEl.hide();
						}
   					}, hide.delay);
    			});

    			viewItemEl.on(
    					show.event, 
    					{positionOf: viewItemEl, model: that.model},
    					function(event) {
    						if (event.data.positionOf.attr("viewitemrenderzoneindexmodel") < event.data.model.length - 1) {
    							moveDownEl.isvisible = true;
    							moveDownEl.myposition.of = event.data.positionOf;
	        					setTimeout(function() {
	        						moveDownEl.show();
	        						moveDownEl.css("left", "");
	        						moveDownEl.css("top", "");
	        						moveDownEl.position(moveDownEl.myposition);
	        					}, 
	        					show.delay);
    						}
    					});
    			viewItemEl.on(hide.event, function() {
    				moveDownEl.isvisible = false;
    				setTimeout(function() {
    						if (!moveDownEl.isvisible) {
    							moveDownEl.hide();
    						}
    					}, hide.delay);
    			});
    			
    			moveUpEl.on("click", function() {
    				var view = edManager.getViewByID("viewItem_" + viewItemEl.attr("viewitemrenderzonecidmodel"));
    				var modelToMoveUp = view.model;

    				var newIndex = (viewItemEl.attr("viewitemrenderzoneindexmodel") / 1);
    				if (newIndex > 0) {
    					view.options.parentview.moveModelToIndex(modelToMoveUp, newIndex - 1);
    					view.options.parentview.moveViewItemFromIndexToIndex(newIndex, newIndex - 1);
    				}
    			});
    			moveDownEl.on("click", function() {
    				var view = edManager.getViewByID("viewItem_" + viewItemEl.attr("viewitemrenderzonecidmodel"));
    				var modelToMoveDown = view.model;

    				var newIndex = (viewItemEl.attr("viewitemrenderzoneindexmodel") / 1);
    				if (newIndex < view.options.parentview.model.length - 1) {
    					view.options.parentview.moveModelToIndex(modelToMoveDown, newIndex + 1);
    					view.options.parentview.moveViewItemFromIndexToIndex(newIndex, newIndex + 1);
    				}
    			});
    		}
		}
    },
    
    moveModelToIndex: function(aModel, newIndex) {
    	this.model.remove(aModel, {silent:true});
    	this.model.add(aModel, {at: newIndex, silent: true});
    },
    
    moveViewItemFromIndexToIndex: function(oldIndex, newIndex) {
    	//get the newIndex viewItemEl
    	var oldEl = $("[viewItemRenderZoneIndexModel=" + oldIndex + "][viewItemRenderZoneParentViewId=" + this.id + "]");
    	var newEl = $("[viewItemRenderZoneIndexModel=" + newIndex + "][viewItemRenderZoneParentViewId=" + this.id + "]");
    	oldEl.trigger("mouseleave");
    	
    	var oldIndexView = edManager.getViewByID("viewItem_" + oldEl.attr("viewitemrenderzonecidmodel")); 
    	var newIndexView = edManager.getViewByID("viewItem_" + newEl.attr("viewitemrenderzonecidmodel"));
    	
    	var that = this;
    	if (oldIndex > newIndex) {
    		oldIndexView.hide(function() {
    			oldEl.insertBefore(newEl);
    			oldIndexView.show(function() {
    					that.refreshHTMLIndexes();
    					oldIndexView.blink();
    					oldEl.trigger("mouseenter");
    			});
    		});
    	} else {
        	if (oldIndex < newIndex) {
        		oldIndexView.hide(function() {
        			oldEl.insertAfter(newEl);
        			oldIndexView.show(function() {
        					that.refreshHTMLIndexes();
        					oldIndexView.blink();
        					oldEl.trigger("mouseenter");
        			});
        		});
        	}	
    	}
    },
    
    /*
     * This methods generates a JSON String to give to the template
     * */
    getJSONForTemplates: function() {
    	var properties = {
    		//view properties
    		labels: edApplication().labels, 
    		rootPath: edApplication().path, 
    		myActorId: edContext().actorId,
    		id: this.id, 
    		name: this.options.name,
    		toolTip: this.options.tooltip,
    		placeholder: this.options.placeholder,
    		rows: this._rows,
    		group: this.options.group,
    		isReadOnly: this.options.isreadonly,
    		isRequired: this.options.isrequired,
    		label: this.model.get("label")
    	};

    	if (this._extendedProperties) {
    		this._extendedProperties.each(function(anExtendedProperty) {
				properties[anExtendedProperty.get("propertyName")] = anExtendedProperty.get("propertyModel").getJSONObject();
			});
    	}
    	
    	var modelProperties = this.model.getJSONObject();
    	if (modelProperties) {
	    	for (var attrname in modelProperties) {
	    		properties[attrname] = modelProperties[attrname]; 
	    	}
    	}
    	
    	return properties;
    }
});

/*
 * Static functions
 * */

Views.addButtonDefinitionTo = function(oButtonToAdd, arrayButtons) {
	//search if the button to add is not already in the button array
	var founded = false;
	
	for (var i=0; i<arrayButtons.length;i++) {
		if (arrayButtons[i].id == oButtonToAdd.id) {
			//merge oButtonToAdd and button founded in array, without 
			arrayButtons[i] = $.extend(true, {}, oButtonToAdd, arrayButtons[i]);
			founded = true;
			break;
		}
	}
	
	if (!founded) {
		arrayButtons.push(oButtonToAdd);
	}
};