function UsePluginViewModel(id, name, nickName) {

	this.id = id;
	this.name = name;
	this.nickName = nickName;
	this.behaviors = new Array();
}
function UsePlugin(behaviorListContainerId) {
	var containerId = "usePluginList";
	//	var usePlugin = this;
	var behavior = new Behavior(this,"useBehaviorList");
	var paramDataCollector = new DataCollector();
	var containerFactory = new ContainerFactory();
	var index = 1;
	var usePluginEditorMap = new HashMap();
	var map = new HashMap();
	//init plugin list
	getPluginList();
	//init tree
	jstreeCreate(containerId);

	$("#addPlugin").click(function() {
		$("#addPlugin").addClass("clicked");
		$("#selectUsePlugin").modal('show');
	});

	$("#selectUsePlugin #ok").click(
			function() {
				var pluginName = $(
						"#pluginList div input[name='plugins']:checked").val();
				if (pluginName == undefined) {
					return;
				}
				var pluginModel = new UsePluginViewModel(index, pluginName, pluginName+"_"+index);
				//create plugin node
				jstreeCreateNode(containerId, pluginModel.name,
						pluginModel.nickName, pluginModel.id, "after");

				map.put(pluginModel.id, pluginModel);

				updateUsePlugin();
				createEditor(pluginModel,pluginModel.id);
				index++;
				$("#selectUsePlugin").modal('hide');
			});

	$("#selectUsePlugin #cancel").click(function() {
		$("#selectUsePlugin").modal('hide');
	});

	$("#removePlugin").click(function() {
		$.confirm("Are you sure to delete this plugin and those behaviors which use this plugin?",function(b){
			if(b){
				var pluginNodes = jstreeSelectedNodes(containerId);
				if (!pluginNodes.length) {
					return;
				}
				var currNodeId = pluginNodes[0].id;
				var behaviors = map.get(currNodeId).behaviors;
				
				jstreeDeleteNode(containerId,currNodeId);
				//delete behavior
				for(var i=0;i<behaviors.length;i++)
				{
					behavior.deleteBehaviorNode(behaviors[i].id);
				}	
				map.remove(currNodeId);
				usePluginEditorMap.remove(currNodeId);
				$("#pluginEditor").attr("usePlugin", "");
				$("#pluginEditor").html("");
			}
		});
	});
	$("#clearPlugin").click(function() {
		$.confirm("Are you sure to delete this plugin and those behaviors which use this plugin?",function(b){
			if(b){
				map.clear();
				usePluginEditorMap.clear();
				jstreeClearNode(containerId);
				behavior.clearBehaviorNode();
				index = 1;
				$("#pluginEditor").attr("usePlugin", "");
				$("#pluginEditor").html("");
			}
		});
	
	});
	function getPluginList() {
		var usePlugin = this;
		$.post("loadPluginName", {}, function(data) {
			if (data.success) {
				createRadioGroup(data.pluginNames, "plugins", "pluginList");
			} else {
				return;
			}
		});

	}
	function createEditor(pluginModel, selectedId, parameters) {
		
		$.post("getPlugin" + "/" + pluginModel.name, {}, function(data) {
			if (data.success) {
				var pluginData = dataTransfer(data.plugin,parameters);
				createEditorByData(pluginModel,pluginData);
//				var generator = containerFactory.createEditorContainer(
//						pluginModel.name, "generator", pluginData);
//				$(generator).attr("pluginName", pluginModel.nickName);
//				$(generator).addClass("generator");
//				usePluginEditorMap.put(pluginModel.id, generator);
				//select this new node
				if(selectedId == pluginModel.id)
					jstreeSelectNode(containerId, pluginModel.id);

			} else {
				return;
			}

		});

	}
	
	function updateUsePlugin() {
		if ($("#pluginEditor").attr("usePlugin") == undefined
				|| $("#pluginEditor").attr("usePlugin") == "") {
			return;
		}
		usePluginEditorMap.put($("#pluginEditor").attr("usePlugin"), $(
				"#pluginEditor div:first").clone());
		$("#pluginEditor").attr("usePlugin", "");
		$("#pluginEditor").html("");

	}
	$("#usePluginList").on(
			"click",
			"div[name='usePlugin']",
			function() {
				var usePluginId = $(
						"#usePluginList input[name='usePlugin']:checked").attr(
						"id");
				if (usePluginId == undefined) {
					return;
				}
				updateUsePlugin();
				$("#pluginEditor").append(usePluginEditorMap.get(usePluginId));
				$("#pluginEditor").attr("usePlugin", usePluginId);
			});

	$("#usePluginList").bind("select_node.jstree",
			function(node, selected, event) {
				var usePluginId = selected.node.id;
				if (usePluginId == undefined) {
					return;
				}
				updateUsePlugin();
				$("#pluginEditor").append(usePluginEditorMap.get(usePluginId));
				$("#pluginEditor").attr("usePlugin", usePluginId);

			});
	//listen usePlugin rename
	$("#usePluginList").bind("rename_node.jstree", function(event, data) {
		var pluginModel = map.get(data.node.id);
		pluginModel.nickName = data.text;
		//change behavior name which use this plugin
		for (var i=0;i<pluginModel.behaviors.length;i++) {  
			var behaviorView = pluginModel.behaviors[i];
			jstreeRenameNode(behaviorListContainerId, behaviorView.id, behaviorView.getBehaviorName());
		}
	});
	
	//this is for behavior
	this.getUsePluginMap = function() {
		return map;
	}
	this.getContainerId = function(){
		return containerId;
	}
	//this is for submit
	this.getPlugins = function() {
		updateUsePlugin();
		var keys = map.getKeys();
		var usePlugins = new Array();
		for ( var i = 0; i < keys.length; i++) {
			var id = keys[i];
			var usePluginViewModel = map.get(id);
			var usePluginContainer = usePluginEditorMap.get(id);
			var params = paramDataCollector.getUnitParams($(
					usePluginContainer).find(".editor"));
			usePlugins.push(new UsePluginModel(usePluginViewModel.id, usePluginViewModel.name,usePluginViewModel.nickName, params));
		}
		return usePlugins;
	}
	this.getPages = function(){
		return behavior.getPages();
	}
	
	this.initPluginAndPages = function(scriptObj){
		initPluginList(scriptObj.usePlugins);
		behavior.initBehaviorList(scriptObj.pages);
	}
	function initPluginList(usePlugins){
		//init plugin
		var selectedId = usePlugins[0].id;
		for(var i=0;i < usePlugins.length;i++){
			var usePlugin = usePlugins[i];
			createUsePlugin(usePlugin,selectedId);
			var pluginId = parseInt( usePlugin.id);
			if(!isNaN(pluginId) && index < pluginId){
				index = pluginId;
			}
		}
		index +=1;//this is new id
	}
	function createUsePlugin(usePlugin,selectedId){
		//add to map
		var pluginModel = new UsePluginViewModel(usePlugin.id, usePlugin.name, usePlugin.nickName);
		map.put(pluginModel.id, pluginModel);
		
		//add to editor map
		createEditor(pluginModel,selectedId, usePlugin.parameters);
		//add to tree
		jstreeCreateNode("usePluginList",usePlugin.name,usePlugin.nickName,usePlugin.id,"after");
	}
	
	function createEditorByData(pluginModel,pluginData){

		var generator = containerFactory.createEditorContainer(
				pluginModel.name, "generator", pluginData);
		$(generator).attr("pluginName", pluginModel.nickName);
		$(generator).addClass("generator");
		usePluginEditorMap.put(pluginModel.id, generator);
	}
}
