<repo_name>NovelBioCloud/JsLibrary<file_sep>/web-library/taskParam/taskParamPlugin.js
/**
 * task前台页面参数转为页面控件．
 */
var taskParamPlugin = function(optsIn) {
	var optsDefault = {
		parentDiv: null,
		taskId : null,
		taskType : null,
		readOnly : false,
		isPipeline : false
	}
	var opts = $.extend(optsDefault, optsIn);
	
	var lsTaskModuleParam;
	var mapTaskData;
	
	/**
	 * 初始化页面.
	 */
	this.init = function() {
		$.when(getTaskValues(), getTaskModuleParam())
		 .done(function(res1, res2) {
			initPage();
		 });
	}
	
	/*
	 * 获取task类型的参数名和相关属性
	 */
	function getTaskModuleParam() {
		var dfd = $.Deferred();
		$.ajax({
			url : 'taskModuleParamMap_getPageParam',
			dataType : 'json',
			type : 'post',
			data : {
				taskType : opts.taskType
			},
			success : function(data) {
				if (data.state) {
					lsTaskModuleParam = data.result;
				} else {
					toastr.error("数据初始化异常.");
				}
				dfd.resolve('111');
			}
		});
		return dfd.promise();
	}
	
	/*
	 * 获取当前task设置的参数值.
	 */
	function getTaskValues() {
		var dfd = $.Deferred();
		var url = opts.isPipeline ? "pipeline_getTaskParams" : "task_getTaskParams";
		$.ajax({
			url : url,
			dataType : 'json',
			type : 'post',
			data : {
				taskId : opts.taskId
			},
			success : function(data) {
				if (data.state) {
					mapTaskData = data.result;
				} else {
					toastr.error("数据初始化异常.");
				}
				dfd.resolve('222');
			}
		});
		return dfd.promise();
	}
	
	/*
	 * 初始化页面
	 */
	function initPage(){
		initSpecies();
		
		//先循环加控件
		var value;
		for (var i = 0; i < lsTaskModuleParam.length; i++) {
			var taskModuleParam = lsTaskModuleParam[i];
			if(!_.isEmpty(taskModuleParam.widgetType)){
				if(_.isEmpty(mapTaskData[taskModuleParam.name])) {
					value = '';
				} else {
					value = mapTaskData[taskModuleParam.name].length == 1 ? mapTaskData[taskModuleParam.name][0] : mapTaskData[taskModuleParam.name];
				}
				
				var $content = $(_.template($("#" + taskModuleParam.widgetType).html())({
					data : taskModuleParam,
					value : value
				}));
				opts.parentDiv.append($content);
			}
		}
		
		if(opts.taskType === 'DifGene'){
			initDifGeneTable();
		}
		
		initNormalTable();
		
		//初始化控件,因为有些控件根据选择的值会被隐藏,所以上一步先循环把所有的控件都加上.
		for (var i = 0; i < lsTaskModuleParam.length; i++) {
			var taskModuleParam = lsTaskModuleParam[i];
			if(_.isEmpty(mapTaskData[taskModuleParam.name])) {
				value = null;
			} else {
				value = mapTaskData[taskModuleParam.name].length == 1 ? mapTaskData[taskModuleParam.name][0] : mapTaskData[taskModuleParam.name];
			}
			
			if(!_.isEmpty(taskModuleParam.widgetType)){
				var fn = eval(taskModuleParam.widgetType);
		        fn.call(this, opts.parentDiv, taskModuleParam, value);
			}
		}
	}
	
	/*
	 * 初始化物种选择页面.
	 */
	function initSpecies() {
		var species,speciesVersion,dbType;
		var count = 0;
		var isContainMappingTo = false;
		var mappingToValue,mappingToLabelName;
		for (var i = 0; i < lsTaskModuleParam.length; ) {
			var taskModuleParam = lsTaskModuleParam[i];
			if (taskModuleParam.name === "species") {
				count++;
				species = _.isEmpty(mapTaskData[taskModuleParam.name]) ? '' : mapTaskData[taskModuleParam.name][0];
				_.remove(lsTaskModuleParam, taskModuleParam);
				continue;
			} else if (taskModuleParam.name === "speciesVersion") {
				count++;
				speciesVersion = _.isEmpty(mapTaskData[taskModuleParam.name]) ? '' : mapTaskData[taskModuleParam.name][0];
				_.remove(lsTaskModuleParam, taskModuleParam);
				continue;
			} else if (taskModuleParam.name === "dbType") {
				count++;
				dbType = _.isEmpty(mapTaskData[taskModuleParam.name]) ? '' : mapTaskData[taskModuleParam.name][0];
				_.remove(lsTaskModuleParam, taskModuleParam);
				continue;
			} else if (taskModuleParam.name === "mappingTo") {
				isContainMappingTo = true;
				mappingToValue = _.isEmpty(mapTaskData[taskModuleParam.name]) ? '' : mapTaskData[taskModuleParam.name][0];
				mappingToLabelName = taskModuleParam.displayName;
				_.remove(lsTaskModuleParam, taskModuleParam);
				continue;
			}
			i++;
		}
		if(count === 0)　{
			//说明该task没有物种相关参数
			return;
		}
		
		var optsIn = {
			speciesId : species,
			speciesVersion : speciesVersion,
			dbType : dbType,
			speciesName : "species",
			speciesVersionName : "speciesVersion",
			getSpeciesUrl : "base_getSeqSpecies",
			isreadonly : opts.readOnly,
			isSimple : true,
			perHeight: 60,
			isContainMappingTo: isContainMappingTo,
			mappingTo: mappingToValue,
			mappingToName: mappingToLabelName
		}

		var nbcSpecies = new NBC.BootstrapeNBCSpecies(optsIn);
		nbcSpecies.init();
		opts.parentDiv.append(nbcSpecies.getHtml());
		
		if(count === 1){
			 nbcSpecies.hideVersionAndDbType();
		}else if(count === 2){
		    nbcSpecies.hideDbType();
		}
	}
	
	/*
	 * 下拉框
	 */
	function nbcCombobox(content, taskModuleParam, value) {
		var url = taskModuleParam.valueUrl;

		$.ajax({
			url : url,
			dataType : 'json',
			type : 'post',
			success : function(data) {
				var datahtml = "";
				for (var i = 0; i < data.length; i++) {
					datahtml = datahtml + "<option value='" + data[i].id + "'>" + data[i].text + "</option>";
				}
				content.find("#" + taskModuleParam.name).empty().append(datahtml);

				content.find("#" + taskModuleParam.name).selectpicker({
					title : 'Nothing selected',
					liveSearch : false,
					maxOptions : 1
				}).on('changed.bs.select',
					function(e) {
						var newValue = content.find("#" + taskModuleParam.name).selectpicker('val');
						if (newValue != null && newValue != '') {
							// TODO 考虑加入滑动特效
							$("." + taskModuleParam.name).fadeOut("slow");
							// 同时含有name和newvalue的才会删除
							$("." + taskModuleParam.name + "." + newValue.replace(/[^\w\/]/ig, '')).fadeIn("slow");
						}
					});
				if (!_.isEmpty(value)) {
					content.find("#" + taskModuleParam.name).selectpicker('val', value);
					$("." + taskModuleParam.name).hide();
					// 同时含有name和value的才会删除
					$("." + taskModuleParam.name + "."　+ value.replace(/[^\w\/]/ig, '')).show();
				}

				if (opts.readOnly) {
					$('#' + taskModuleParam.name).prop('disabled', true);
				}
			}
		});
	}
	
	/*
	 * 输入框
	 */
	function validationInput(content, taskModuleParam, value) {
		if (_.isEmpty(taskModuleParam.dataOption)) {
			return;
		}
		
		//添加验证.
		var name = taskModuleParam.name;
		var options = eval("({" + taskModuleParam.dataOption + "})");
		var rule = {};
		rule[name] = options;
		
		$("#taskInfoForm").validate({
			onsubmit: false,
		    rules: rule,
			errorPlacement: function(error, element) {
				var errHtml = error.html();
				if(!_.isEmpty(errHtml)) {
					$("[name='" + name + "']").tooltip({title: error.html(), placement:"left"}).tooltip("show");
					toastr.error(error.html());
				}
			},
			success: function() {
				$("[name='" + name + "']").tooltip("destroy");
			}
		});
	}
	
	/*
	 * 单选框
	 */
	function nbcChkbox(content, taskModuleParam, value) {
		if(!_.isEmpty(value)) {
			$("#" + taskModuleParam.name).attr("checked", true);
			//显示元素
			$("." + taskModuleParam.name).fadeIn("slow");
		} else {
			$("#" + taskModuleParam.name).attr("checked", false);
			//隐藏元素
			$("." + taskModuleParam.name).fadeOut("slow");
		}
		
		$("#" + taskModuleParam.name).iCheck({
			checkboxClass : 'icheckbox_square-blue',
			radioClass : 'iradio_minimal-blue',
			increaseArea : '50%' // optional
		}).on('ifChecked ifUnchecked', function(event) {
			if ("ifUnchecked" === event.type) {
				//隐藏元素
				$("." + taskModuleParam.name).fadeOut("slow");
			} else {
				//显示元素
				$("." + taskModuleParam.name).fadeIn("slow");
			}
		});
		
		if(opts.readOnly){
			$("#" + taskModuleParam.name).iCheck('disable');
		}
	}
	
	/*
	 * 下拉多选
	 */
	function multiCombobox(content, taskModuleParam, value) {
		$('#' + taskModuleParam.name).magicSuggest({
 	       name : taskModuleParam.name,
 	       maxSelectionRenderer : function(v) {
 	          return '';
          },
 		  data : taskModuleParam.valueUrl,
 		  valueField : "id",
 		  displayField : "text",
 		  value : value,
 		  onSelect : function() {
 			  var newValue = $('#' + taskModuleParam.name).magicSuggest().getValue();
 			  if(newValue != null && newValue[0] != '') {
					$("." + taskModuleParam.name).fadeOut("slow");
					$("." + newValue[0].replace(/[^\w\/]/ig,'')).fadeIn("slow");
 			  }
 		  },
 		  disabled : opts.readOnly,
 	      resultAsString: true
      });
	}
	
	/*
	 * 单选框初始化.
	 */
//	function radio(content, taskModuleParam, value) {
//		if(value === taskModuleParam.radioValue1) {
//			$("#" + taskModuleParam.radioValue1).attr("checked","checked");
//			$("#" + taskModuleParam.radioValue2).removeAttr("checked");
//		} else {
//			$("#" + taskModuleParam.radioValue2).attr("checked","checked");
//			$("#" + taskModuleParam.radioValue1).removeAttr("checked");
//		}
//		
//		//选择值后,隐藏相关class的处理.
//		$("." + taskModuleParam.name).click(function() {
//	  		if ($(this).attr("value") === taskModuleParam.radioValue1) {
//	  			$("." + taskModuleParam.radioValue1).fadeIn("slow");
//				$("." + taskModuleParam.radioValue2).fadeOut("slow");
//	  		} else if($(this).attr("value") === taskModuleParam.radioValue2) {
//				$("." + taskModuleParam.radioValue1).fadeOut("slow");
//				$("." + taskModuleParam.radioValue2).fadeIn("slow");
//	  		}
//	    })
//	}
	
	/*
	 * 滑动器
	 */
	function slider(content, taskModuleParam, value) {
		var options = "({" + taskModuleParam.dataOption + "})";
		var obj = eval(options);  
	   $("#" + taskModuleParam.name).ionRangeSlider({
	         type: "single",
	         min: obj.min,
	         max: obj.max,
	         step: 1,
	         from: value,	
	         grid: true,
	         grid_snap: true
	     });
	}
	
	/*
	 * 初始化difGene的两个表格.
	 */
	function initDifGeneTable() {
		var hiddenTable1 = _.isEmpty(mapTaskData.inFileName) ? true : false;
		var optsDefault = {
				colSampleArray : mapTaskData.colSampleArray,
				sampleNameArray : mapTaskData.sampleNameArray, 
				groupNameArray : mapTaskData.groupNameArray,
				group1Array : mapTaskData.group1Array,
				group2Array : mapTaskData.group2Array,
				outFileArray : mapTaskData.outFileArray,
				hiddenTable1 : hiddenTable1,
				readOnly : opts.readOnly
		}
	    var geneTable = new NBC.GeneTable(optsDefault);
	    geneTable.init();
	    opts.parentDiv.append(geneTable.getTable1());
	    opts.parentDiv.append(geneTable.getTable2());
	    $("#loadDefault").click(function(){
	   	   geneTable.loadDefaultData();
	    });
	    
	    var difGeneTableParam = ["colSampleArray", "sampleNameArray", "groupNameArray", "group1Array", "group2Array", "outFileArray"];
	    for (var i = 0; i < lsTaskModuleParam.length; ) {
			var taskModuleParam = lsTaskModuleParam[i];
			if (_.indexOf(difGeneTableParam, taskModuleParam.name) >= 0) {
				_.remove(lsTaskModuleParam, taskModuleParam);
				continue;
			}
			i++;
		}
	}
	
	/*
	 * 初始化普通表格.
	 * 普通表格的setParamType字段所用的属性是Compare和OutPrefix．通过prefixAssociated字段关联．
	 */
	function initNormalTable() {
		var needTable = false;
		var params = {};
		var value,groupName,outFileArray;
		for (var i = 0; i < lsTaskModuleParam.length; i++) {
			var taskModuleParam = lsTaskModuleParam[i];
			if (_.indexOf(taskModuleParam.paramType, "Compare") >= 0) {
				value = _.isEmpty(mapTaskData[taskModuleParam.name]) ? '' : mapTaskData[taskModuleParam.name];
				params[taskModuleParam.name] = value;
				needTable = true;
			} else if (_.indexOf(taskModuleParam.paramType, "Prefix") >= 0) {
				groupName = _.isEmpty(mapTaskData[taskModuleParam.name]) ? null : mapTaskData[taskModuleParam.name];
			} else if (_.indexOf(taskModuleParam.paramType, "OutPrefix") >= 0) {
				outFileArray = _.isEmpty(mapTaskData[taskModuleParam.name]) ? null : mapTaskData[taskModuleParam.name];
			}
		}
		
		if (!needTable) {
			return;
		}
		
		var optsDefault = {
			params : params,
			groupName : groupName,				//组名
			outFileArray : outFileArray, 		// 输出文件名
			readOnly : opts.readOnly	 		// 是否只读
		};
		var rnaAlterTable = new NBC.rnaAlterTable(optsDefault);
		rnaAlterTable.init();
		opts.parentDiv.append(rnaAlterTable.getHtml());
	}
}
<file_sep>/web-library/atry/atry.js
(function(window, $, _) {
	if (window.ar) {
		throw "can not bind actry to window";
	}
	var atry = {
		get : function(selector) {
			return $(selector).get(0);
		},
		find : function(selector) {
			return $(selector).get();
		},
		isBlank : function(str) {

		}
	};
	window.ar = atry;
})(window, $, _, undefined);<file_sep>/web-library/taskParam/difGeneTable.js
Namespace.register("NBC");
/**
 * difGene的第一个可编辑表格.
 * 依赖于jquery.lodash,toastr等.
 */
NBC.GeneTable = function(optsIn) {
	
	var optsDefault = {
		colSampleArray : null,				//样本列号
		sampleNameArray : null,
		groupNameArray : null,				//组名
		group1Array : null,					//组1
		group2Array : null,					//组2
		outFileArray : null,				//输出文件名
		hiddenTable1 : '',					//隐藏第一个表格,为空说明没有选择文件,需要隐藏.否则,不隐藏.
		readOnly : false,					//是否只读
		tableNum : 2
	}
	var opts = $.extend(optsDefault, optsIn);
	
	var nbcTable1Div = $(_.template($("#table1PanelTemp").html())({
		readOnly : opts.readOnly
	}));
	var nbcTable2Div = $(_.template($("#table2PanelTemp").html())({
		readOnly : opts.readOnly
	}));
	
	
	this.init = function () {
		table1.initTable();
		if(opts.tableNum != 1){
			table2.initTable();
		}
	}
	
	this.loadDefaultData = function(){
		table1.loadDefaultData();
	}
	
	/**
	 * 第一个table
	 */
	var table1 = {
			initTable : function(){
				$(nbcTable1Div).find("#addSample2GroupTable").click(function(){
					table1.addRow("", "", "");
				});
				$(nbcTable1Div).find("#delSample2GroupTable").click(function(){
					table1.delRow();
				});
				$(nbcTable1Div).find("#confirm").click(function(){
					table1.confirm();
				});
				//没有数据,按样本做初始化.
				if(_.isEmpty(opts.colSampleArray) && _.isEmpty(opts.groupNameArray)){
//					groupNameArray = table1.getGroupName();
//					opts.colSampleArray = new Array();
//					for(var i = 0;i < opts.groupNameArray.length;i++){
//						opts.colSampleArray.push("");
//					}
					table1.loadDefaultData();
				}
				
				table1.loadData();
			},
			
//			/**
//			 * 没有填写任何值时,获取项目所有样本的分组填写进去.
//			 */
//			getGroupName : function(){
//		    	$.ajax({
//					url : 'project_getGroupNameList',
//					dataType : 'json',
//					type : 'post',
//					async: false,
//					data : {
//						'projectId' : $("#projectId").val()
//					},
//					success : function(data) {
//						if (data.state) {
//							opts.groupNameArray = data.result;
//							return opts;
//						} else {
//							toastr.info('数据加载失败,请刷新重试或联系管理员!');
//						}
//					}
//		    	});
//			},
			
			/**
			 * 加载默认数据.
			 */
			loadDefaultData : function(){
				$.ajax({
					url : 'task_getDifGeneSampel',
					dataType : 'json',
					type : 'post',
					async: false,
					data : {
						'taskId' : $("#taskId").val()
					},
					success : function(data) {
						if (data.state) {
							var data = data.result;
							var groupNameArray = new Array();
							for(var i =0;i < data.length;i++){
								table1.addRow(data[i][0], data[i][1], data[i][2]);
								if(!_.isEmpty(data[i][2]) && _.indexOf(groupNameArray, data[i][2]) <= -1){
									groupNameArray.push(data[i][2]);
								}
							}
							table1.reCalculate();
							
							opts['groupNameArray'] = groupNameArray;
						} else {
							toastr.info('数据加载失败,请刷新重试或联系管理员!');
						}
					}
		    	});
			},
			
			/**
			 * 加载数据
			 */
			loadData : function(){
				for(var i = 0; !_.isEmpty(opts.colSampleArray) && i < opts.colSampleArray.length; i++){
					table1.addRow(opts.colSampleArray[i], opts.sampleNameArray[i], opts.groupNameArray[i]);
				}
			},
			
			/**
			 * 增行
			 */
			addRow : function(colSample, sampleName, groupName){
				var $content = $(_.template($("#table1RowPanelTemp").html())({
					colSample : colSample,
					sampleName : sampleName,
					groupName : groupName,
					readOnly : opts.readOnly
				}));
				$content.click(function(){
					nbcTable1Div.find(".table1Row").removeClass("active");
					$(this).addClass("active");
				});
				$content.find(".delRow").click(function(){
					$(this).parent().parent().parent().parent().remove();
					table1.reCalculate();
				});
				
				nbcTable1Div.find("#sample2GroupTable").append($content);
				table1.reCalculate();
			},
			
//			/**
//			 * 删行
//			 */
//			delRow : function(){
//				if(opts.readOnly){
//					return;
//				}
//				$(".table1Row.active").remove();
//				table1.reCalculate();
//			},
			/**
			 * 获取组名,去除重复组名
			 */
			getGroupname : function(){
				var groupNamehtmlArray = $("input[name='groupNameArray']");
				var groupNameArray = new Array();
				var groupName = null;
				for(var i = 0;i < groupNamehtmlArray.length; i++){
					groupName = $(groupNamehtmlArray[i]).val();
					if(!_.isEmpty(groupName) && _.indexOf(groupNameArray, groupName) <= -1){
						groupNameArray.push($(groupNamehtmlArray[i]).val());
					}
				}
				opts['groupNameArray'] = groupNameArray;
				return groupNameArray;
			},
			/**
			 * 确定
			 */
			confirm : function(){
				table2.updateOption();
			},
			
			/**
			 * 计算行号
			 */
			reCalculate : function(){
				var rowNos = $(".table1Row .rowNo");
				if(_.isEmpty(rowNos)){
					return;
				}
				var length = rowNos.length;
				for(var i=0; i< length;i++){
					$(rowNos[i]).empty().append(i + 1);
				}
			},
	};
	
	
	/**
	 * 第二个table
	 */
	var table2 = {
			initTable : function(){
				$(nbcTable2Div).find("#addGroupVSgroupTable").click(function(){
					table2.addRow("", "","");
				});
				$(nbcTable2Div).find("#delGroupVSgroupTable").click(function(){
					table2.delRow();
				});
				$(nbcTable2Div).find("#confirm").click(function(){
					table2.confirm();
				});
				//没有数据,按样本做初始化.
				if(!_.isEmpty(opts.group1Array) || !_.isEmpty(opts.group2Array)){
					table2.loadData();
				}
			},
			
			/**
			 * 加载数据
			 */
			loadData : function(){
				for(var i = 0; i < opts.outFileArray.length; i++){
					table2.addRow(opts.group1Array[i], opts.group2Array[i], opts.outFileArray[i]);
				}
			},
			
			/**
			 * 增行
			 */
			addRow : function(group1, group2, outFile){
				var optionhtml = "";
				if(!opts.hiddenTable1){
					table1.getGroupname();
				}
				for(var i = 0; i < opts.groupNameArray.length; i++){
					optionhtml = optionhtml + "<option value='" + opts.groupNameArray[i] + "'>" + opts.groupNameArray[i] + "</option>";
				}
				var $content = $(_.template($("#table2RowPanelTemp").html())({
					outFile : outFile,
					readOnly : opts.readOnly
				}));
				
				$content.find("select[name='group1Array']")
					.append(optionhtml)
					.selectpicker({
					  title: 'Nothing selected',
				      liveSearch: false,
				      maxOptions: 1
					})
					.on('changed.bs.select', function (e) {
						var group1 = $content.find("select[name='group1Array']").selectpicker('val');
						var group2 = $content.find("select[name='group2Array']").selectpicker('val');
						$content.find("input[name='outFileArray']").val(group1 + "VS" + group2);
					})
					.selectpicker('val', group1);
				
				$content.find("select[name='group2Array']")
					.append(optionhtml)
					.selectpicker({
						title: 'Nothing selected',
						liveSearch : false,
						maxOptions : 1
					})
					.on('changed.bs.select', function (e) {
						var group1 = $content.find("select[name='group1Array']").selectpicker('val');
						var group2 = $content.find("select[name='group2Array']").selectpicker('val');
						$content.find("input[name='outFileArray']").val(group1 + "VS" + group2);
					})
					.selectpicker('val', group2);
				$content.click(function(){
					nbcTable2Div.find(".table2Row").removeClass("active");
					$(this).addClass("active");
				});
				nbcTable2Div.find("#groupVSgroupTable").append($content);
				//去掉表格边框
				$(".tablecontentColor button").css({
					border:"none"
				});
				$(".tablecontentColor input").css({
					border:"none"
				});
			},
			
			updateOption : function(){
				var groupnameArray = table1.getGroupname();
				var optionhtml = "";
				for(var i = 0; i < groupnameArray.length; i++){
					optionhtml = optionhtml + "<option value='" + groupnameArray[i] + "'>" + groupnameArray[i] + "</option>";
				}
				var selects = nbcTable2Div.find("select");
				for(var i = 0; i < selects.length; i++){
					$(selects[i]).empty().append(optionhtml);
					$(selects[i]).selectpicker('refresh');
				}
			},
			
			/**
			 * 删行
			 */
			delRow : function(){
				if(opts.readOnly){
					return;
				}
				$(".table2Row.active").remove();
			},
			
			/**
			 * 添加所有组合
			 */
			confirm : function(){
				if(opts.readOnly){
					return;
				}
				for(var i = 0 ; i < opts.groupNameArray.length ;i++){
					var group1 = opts.groupNameArray[i];
					for(var j = opts.groupNameArray.length - 1; j > i;j--){
						var group2 = opts.groupNameArray[j];
						table2.addRow(group1, group2, group1 + "VS" + group2);
					}
				}
			},
	};
	
	this.getTable1 = function() {
		return opts.hiddenTable1 ? '' : nbcTable1Div;
	}
	this.getTable2 = function() {
		return nbcTable2Div;
	}
	
}

<file_sep>/web-library/jquerypagewalkthrough/README.md
jQuery Page Walkthrough
================================

Page Walkthrough is a flexible system for designing interactive, multimedia, educational walkthroughs.

<h2>Example:</h2>
To view jQuery Page Walkthrough example <a href="example/example.html">Click Here</a>
<h2>Install:</h2>
<pre>
&lt;!-- CSS --&gt;
&lt;link type="text/css" rel="stylesheet" href="css/jquery.pagewalkthrough.css" /&gt;

&lt;!-- JQUERY --&gt;
&lt;script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
&lt;script type="text/javascript" src="js/jquery.pagewalkthrough-1.1.0.js"></script>
</pre>
<h2>jQuery Page Walkthrough Default Options:</h2>
<pre>
steps: [

  {
        wrapper: '', //an ID of page element HTML that you want to highlight
        margin: 0, //margin for highlighted area, may use CSS syntax i,e: '10px 20px 5px 30px' or '20px 20px' and so on
        popup:
            {
              content: '', //ID content of the walkthrough
              type: 'modal', //tooltip, modal, nohighlight
              position:'top',//position for tooltip and nohighlight type only: top, right, bottom, left
              offsetHorizontal: 0, //horizontal offset for the walkthrough
              offsetVertical: 0, //vertical offset for the walkthrough
              width: '320', //default width for each step,
              draggable: false, // set true to set walkthrough draggable,
              contentRotation: 0 //content rotation : i.e: 0, 90, 180, 270 or whatever value you add. minus sign (-) will be CCW direction
           },          
        overlay: true, //use overlay or not, default: true   
        accessable: false, //if true - you can access html element such as form input field, button etc
        autoScroll: true, //is true - this will autoscroll to the arror/content every step 
        scrollSpeed: 1000, //scroll speed
        stayFocus: false, //if true - when user scroll down/up to the page, it will scroll back the position it belongs
        onLeave: null, // callback when leaving the step
        onEnter: null // callback when entering the step
  }

],
name: '',
onLoad: true, //load the walkthrough at first time page loaded
onBeforeShow: null, //callback before page walkthrough loaded
onAfterShow: null, // callback after page walkthrough loaded
onRestart: null, //callback for onRestart walkthrough
onClose: null, //callback page walkthrough closed
onCookieLoad: null //when walkthrough closed, it will set cookie and tells the walkthrough to not load automaticly
</pre>
<h2>Public Methods:</h2>
<pre>
<strong>show</strong>       :   $.pagewalkthrough('show', target)
This method allows you to open page walkthrough. Target is your walkthrough ID, i.e: #selector

<strong>next</strong>       :   $.pagewalkthrough('next', event)
This method allows you to go the NEXT step. Event is needed as a param to call next method

<strong>prev</strong>       :   $.pagewalkthrough('prev', event)
This method allows you to go the PREVIOUS step. Event is needed as a param to call prev method

<strong>restart</strong>    :   $.pagewalkthrough('restart', event)
This method allows you to go the RESTART step. Event is needed as a param to call restart method

<strong>close</strong>      :   $.pagewalkthrough('close', target)
This method allows you to go the CLOSE step. Target is optional. It could be filled with walkthrough ID or leave it blank

<strong>isPageWalkthroughActive</strong>   :   $.pagewalkthrough('isPageWalkthroughActive')
This property will return status of page walkthrough

<strong>currIndex</strong>  :   $.pagewalkthrough('currIndex')
This property will return current index of current walkthrough step
</pre>

<h2>Browser Support:</h2>
<p>IE7+, Firefox (Win &amp; Mac), Safari (Win &amp; Mac), Chrome (Win &amp; Mac)</p>
<p><strong>Note:</strong> Because chrome doesn't support running cookie in local file, if you want to test this plugin on chrome, you should run this plugin from webserver i.e: wamp, mamp, etc</p>

<h2>Theme:</h2>
<p>Will be added soon...</p>
<file_sep>/web-library/jsPictureScroll/pictureScroll.js

var ISL_Cont_1;
var List1_1;
var List2_1;

$(function(){
	$(".LeftBotton").on("mousedown",function(e){
		setVar(e);
		ISL_GoUp_1(e);
	}).on("mouseup", function(e){
		setVar(e);
		ISL_StopUp_1()
	}).on("mouseout", function(e){
		setVar(e);
		ISL_StopUp_1()
	});
	
	$(".RightBotton").on("mousedown",function(e){
		setVar(e);
		ISL_GoDown_1(e);
	}).on("mouseup", function(e){
		setVar(e);
		ISL_StopDown_1()
	}).on("mouseout", function(e){
		setVar(e);
		ISL_StopDown_1()
	});
});

var Speed_1 = 10; //速度(毫秒)
var Space_1 = 20; //每次移动(px)
var PageWidth_1 = 107 * 3; //翻页宽度
var interval_1 = 5000; //翻页间隔时间
var fill_1 = 0; //整体移位
var MoveLock_1 = false;
var MoveTimeObj_1;
var MoveWay_1 = "right";
var Comp_1 = 0;
var AutoPlayObj_1 = null;

function setVar(e){
	ISL_Cont_1 = $(e.toElement.parentElement.parentElement).find(".ISL_Cont_1")[0];
	List1_1 = $(e.toElement.parentElement.parentElement).find(".List1_1")[0];
	List2_1 = $(e.toElement.parentElement.parentElement).find(".List2_1")[0];
}

function GetObj(objName) {
    if (document.getElementById) {
        return eval('document.getElementById("' + objName + '")')
    } else {
        return eval('document.all.' + objName)
    }
}
function AutoPlay_1() {
    clearInterval(AutoPlayObj_1);
    AutoPlayObj_1 = setInterval('ISL_GoDown_1();ISL_StopDown_1();', interval_1)
}
function ISL_GoUp_1() {
    if (MoveLock_1)
        return;
    clearInterval(AutoPlayObj_1);
    MoveLock_1 = true;
    MoveWay_1 = "left";
    MoveTimeObj_1 = setInterval('ISL_ScrUp_1();', Speed_1);
}
function ISL_StopUp_1() {
    if (MoveWay_1 == "right") {
        return;
    };
    clearInterval(MoveTimeObj_1);
    if ((ISL_Cont_1.scrollLeft - fill_1) % PageWidth_1 != 0) {
        Comp_1 = fill_1 - (ISL_Cont_1.scrollLeft % PageWidth_1);
        CompScr_1();
    } else {
        MoveLock_1 = false;
    }
    AutoPlay_1();
}
function ISL_ScrUp_1() {
    if (ISL_Cont_1.scrollLeft <= 0) {
        ISL_Cont_1.scrollLeft = ISL_Cont_1.scrollLeft + List1_1.offsetWidth
    }
    ISL_Cont_1.scrollLeft -= Space_1;
}
function ISL_GoDown_1() {
    clearInterval(MoveTimeObj_1);
    if (MoveLock_1)
        return;
    clearInterval(AutoPlayObj_1);
    MoveLock_1 = true;
    MoveWay_1 = "right";
    ISL_ScrDown_1();
    MoveTimeObj_1 = setInterval('ISL_ScrDown_1()', Speed_1)
}
function ISL_StopDown_1() {
    if (MoveWay_1 == "left") {
        return;
    };
    clearInterval(MoveTimeObj_1);
    if (ISL_Cont_1.scrollLeft % PageWidth_1 - (fill_1 >= 0 ? fill_1 : fill_1 + 1) != 0) {
        Comp_1 = PageWidth_1 - ISL_Cont_1.scrollLeft % PageWidth_1 + fill_1;
        CompScr_1()
    } else {
        MoveLock_1 = false;
    };
    AutoPlay_1();
}
function ISL_ScrDown_1() {
    if (ISL_Cont_1.scrollLeft >= List1_1.scrollWidth) {
        ISL_Cont_1.scrollLeft = ISL_Cont_1.scrollLeft - List1_1.scrollWidth;
    }
    ISL_Cont_1.scrollLeft += Space_1;
}
function CompScr_1() {
    if (Comp_1 == 0) {
        MoveLock_1 = false;
        return;
    }
    var num, TempSpeed = Speed_1, TempSpace = Space_1;
    if (Math.abs(Comp_1) < PageWidth_1 / 2) {
        TempSpace = Math.round(Math.abs(Comp_1 / Space_1));
        if (TempSpace < 1) {
            TempSpace = 1;
        }
    }
    if (Comp_1 < 0) {
        if (Comp_1 < -TempSpace) {
            Comp_1 += TempSpace;
            num = TempSpace;
        } else {
            num = -Comp_1;
            Comp_1 = 0;
        }
        ISL_Cont_1.scrollLeft -= num;
        setTimeout('CompScr_1()', TempSpeed);
    } else {
        if (Comp_1 > TempSpace) {
            Comp_1 -= TempSpace;
            num = TempSpace;
        } else {
            num = Comp_1;
            Comp_1 = 0;
        }
        ISL_Cont_1.scrollLeft += num;
        setTimeout('CompScr_1()', TempSpeed);
    }
}
function picrun_ini() {
    List2_1.innerHTML = List1_1.innerHTML;
    ISL_Cont_1.scrollLeft = fill_1 >= 0 ? fill_1 : List1_1.scrollWidth - Math.abs(fill_1);
    ISL_Cont_1.onmouseover = function() {
        clearInterval(AutoPlayObj_1);
    }
    ISL_Cont_1.onmouseout = function() {
        AutoPlay_1();
    }
    AutoPlay_1();
}<file_sep>/web-library/nbcEditor/nbcEditorNew.js

/**
 * 可编辑div控件 在nbcTask.js中使用，就那个记录信息的小框
 * 
 * @param {}
 *            _option
 */
NBCEditorNew = function(_option) {
	var defaults = {
		defaultValue : "在此填写信息",// 默认值
		value : "在此填写信息",// 实际值
		div : $("<div style='width:300px;height:200px;' contenteditable='true'></div>"),// 可编辑的div
		// 最大长度
		// maxSize:30,
		initValue : true,
		readOnly : false,// 是否只读
		onStart : function() {
		},// 开始编辑时触发的事件
		need : "text", // text html 是需要div中的文本，还是其中的页面
		classEditing : "editBeautifulDiv",// 可编辑div的样式
		onEnd : function(value) {
		}// 当结束编辑的时候触发的事件
	};
	var option;
	var $div;
	// 有没有初始化过
	var _isInit = false;

	// 开始编辑
	var startEdit = function(event) {
		if (option.readOnly) {
			$div.attr("contenteditable", "false");
			return;
		}
		event.stopPropagation();
		event.preventDefault();
		$div.html(option.value);
		option.onStart && option.onStart();
		$div.attr("contenteditable", "true");
		$div.focus();
		option.classEditing && $div.addClass(option.classEditing);
	};

	// 当取消焦点的时候，触发的事件
	var blurEvent = function() {
		$div.removeAttr("contenteditable");
		var value = formatValue();
		$div.html(value);
		option.onEnd  && option.onEnd(value);
		if (option.value != value) {
			option.value = value;
		}
		option.classEditing && $div.removeClass(option.classEditing);
	};

	// 根据要求，返回格式化编辑的结果
	var formatValue = function() {
		var value = "";
		if (option.need == "html")
			value = $div.html().trim();
		else
			value = $div.text().trim();
		if (option.maxSize && option.maxSize > 0
				&& value.length > option.maxSize)
			value = value.substring(0, option.maxSize - 1);
		return value;
	};
	// 取得内容
	this.getValue = function() {
		return formatValue();
	};
	// 设置内容
	this.setValue = function(value) {
		$div.html(value);
		blurEvent();
	};
	this.setReadOnly = function(value) {
		option.readOnly = value;
	}
	var init = function(_option) {
		option = $.extend(defaults, _option);
		$div = $(option.div);
		var realValue = option.value || option.defaultValue;
		$div.html(realValue);
		blurEvent();
		$div.css("outline", "0px");
		$div.click(startEdit);
		$div.dblclick(function(event) {
			event.stopPropagation();
			event.preventDefault();
		});
		$div.blur(blurEvent);
		_isInit = true;
	};

	init(_option);
}<file_sep>/web-library/jquerypagewalkthrough/example/example.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
    <title>jQuery Page Walkthrough</title>
    <meta name="description" content="jQuery Page Walkthrough">
    <meta name="author" content="<NAME>">

<!-- Standard CSS Includes -->
<link type="text/css" rel="stylesheet" href="../plugins/css/jquery.pagewalkthrough.css" />
<link type="text/css" rel="stylesheet" href="style.css"/>

<!-- Standard Script Includes -->
<script type="text/javascript" src="../plugins/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../plugins/jquery.pagewalkthrough-1.1.0.js"></script>
<script type="text/javascript" src="page.js"></script>

</head>

<body>

<div id="container">
	<div id="header">
		<div class="wrapper clearfix">
			<div class="logo">
				<a href="#">jQuery Page Walkthrough</a>
			</div>
			<div class="main-menu">
				<ul>
					<li><a href="javascript:;" id="open-walkthrough">Walkthrough</a></li>
					<li><a href="javascript:;" id="open-callbacks">Callbacks</a></li>
					<li><a href="javascript:;" id="open-methods">Methods</a></li>
					<li class="last"><a href="javascript:;" id="open-extra">Extra</a></li>
				</ul>
			</div>
			<div class="search-box">
				<form>
					<div class="form-element clearfix">
						<div class="inputText search">
							<input type="text" value="Search..." />
						</div>				
						<input type="submit" value="search" class="btnSearch"/>
					</div>
				</form>				
			</div>
		</div>
	</div><!-- header -->

	<div id="content">
		<div class="wrapper clearfix">
			<div class="content-left">
				<div class="page-description" id="page-desc">
					<h2><img src="images/send_us_your_enquiry.gif"></h2>
					<p>Whether you're interested in working for us, engaging us to work for you, or you want to find out more about our great work for your next news story, please tweet us, call us, visit us or submit your enquiry using the form below.</p>
				</div>

				<div class="contact-form">
					<div class="mark">
        				<em>*</em> Mandatory fields
        			</div>
					<form id="contact-form">
						<div class="two-col">
							<div class="col-left">
								<div class="form-element clearfix" id="enquiry-type">
									<label>Subject of enquiry: <em>*</em></label>
									<select>
										<option value="0">please select</option>
										<option value="1">Sales Enquiry</option>
										<option value="2">Employment Enquiry</option>
										<option value="3">Media Enquiry</option>
									</select>
								</div>
								<div class="form-element clearfix" id="enquiry-email">
									<label>Email Addreess <em>*</em></label>
									<div class="inputText">
										<input type="text">
									</div>
									
								</div>
							</div>
							<div class="col-right">
								<div class="form-element clearfix" id="enquiry-name">
									<label>Name <em>*</em></label>
									<div class="inputText">
										<input type="text">
									</div>
									
								</div>
								<div class="form-element clearfix" id="enquiry-phone">
									<label>Phone <em>*</em></label>
									<div class="inputText">
										<input type="text">
									</div>
									
								</div>
							</div>
						</div>

						<textarea id="enquiry-message"></textarea>
						<input type="submit" value="Send Enquiry" class="button">
					</form>
				</div>


				<div class="divider-dotted"></div>

				<div class="social-media clearfix">
					<ul>
						<li id="email-us">
							<h3>Email us</h3>
							<span><a href="javascript:;"><EMAIL></a></span>
						</li>
						<li>
							<h3>Tweet us</h3>
							<span><a href="javascript:;" class="twitter">twitter</a></span>
						</li>
						<li>
							<h3>Facebook</h3>
							<span><a href="javascript:;" class="facebook">facebook</a></span>
						</li>
					</ul>
				</div>

			</div><!-- content left -->			

			<div class="content-right">

				<div class="addressWrapper clearfix">

					<div class="officeAddress">
			            <h3 class="titleComponent">
			                Indonesia:
			                <a target="_blank" href="javascript:;">view map</a>
			            </h3>
			            <div class="officeAddressContentWrapper">
			                <span class="address">
			                    A Nerd Street 06/12 pm</span>
			                <ul class="phoneAndFax">
			                    <li>Phone : <span>
			                        (01) 2345 6789
			                    </span></li>
			                    <li>Fax : <span>
			                        (01) 2345 6789</span></li>
			                </ul>
			            </div>
			        </div>

			        <div class="divider-dotted"></div>

			        <div class="officeAddress">
			            <h3 class="titleComponent">
			                Singapore:
			                <a target="_blank" href="javascript:;">view map</a>
			            </h3>
			            <div class="officeAddressContentWrapper">
			                <span class="address">
			                    A Geek Street 06/12 pm</span>
			                <ul class="phoneAndFax">
			                    <li>Phone : <span>
			                        (02) 2345 6789
			                    </span></li>
			                    <li>Fax : <span>
			                        (02) 2345 6789</span></li>
			                </ul>
			            </div>
			        </div>

			        <div class="divider-dotted"></div>

			        <div class="officeAddress">
			            <h3 class="titleComponent">
			                Australia
			                <a target="_blank" href="javascript:;">view map</a>
			            </h3>
			            <div class="officeAddressContentWrapper">
			                <span class="address">
			                    A Lorem ipsum Street 123x</span>
			                <ul class="phoneAndFax">
			                    <li>Phone : <span>
			                        (03) 2345 6789
			                    </span></li>
			                    <li>Fax : <span>
			                        (03) 2345 6789</span></li>
			                </ul>
			            </div>
			        </div>
			    </div><!-- address wrapper -->

			</div><!-- content right -->
		</div>
	</div><!-- content -->


	<div id="footer">
		<div class="footerWrapper">
			<div class="officeAddress">
				<div class="item" id="indonesia">
                    <h5>
                        Indonesia:
                        <span>
                            <a target="_blank" href="javascript:;">google map</a>
                        </span>
                    </h5>
                    A Nerd Street 06/12pm
                    <span class="spPhone">Phone : (01) 1234 5678</span> 
                    <span class="spPhone">Fax : (01) 1234 5678</span>

				</div>

				<div class="item" id="singapore">
                    <h5>
                        Singapore:
                        <span>
                            <a target="_blank" href="javascript:;">google map</a>
                        </span>
                    </h5>
                    A Geek Street 06/12 pm
                    <span class="spPhone">Phone : (02) 1234 5678</span> 
                    <span class="spPhone">Fax : (02) 1234 5678</span>
                </div>

                <div class="item" id="australia">
                    <h5>
                        Australia
                        <span>
                            <a target="_blank" href="javascript:;">google map</a>
                        </span>
                    </h5>
                    Lorem ipsum Street 123x
                    <span class="spPhone">Phone : (03) 1234 5678</span> 
                    <span class="spPhone">Fax : (03) 1234 5678</span>
                </div>

			</div>
			<div class="divider-dotted"></div>
			<div class="footer-menu">
	            <div id="privacyContainer">
	                <ul>
	                    
	                    <li>
	                        <a href="#" id="privacy">Privacy Policy</a></li>
	                    
	                    <li>
	                        <a href="#" id="sitemap">Site Map</a></li>
	                </ul>
	                <span class="copyRight">&copy;Copyright 2013 jQuery Page Walkthrough. All Rights Reserved.</span>
	            </div>
	            
	        </div>
		</div>
	</div><!-- footer -->	
</div><!-- container -->


<!-- walkthrough -->
<div id="walkthrough">
	<div id="type-modal" style="display:none;">
		<p class="tooltipTitle">Walkthrough Type Modal</p>
        <p>Each step has numerous configuration options to fine-tune its position and appearance.  This step demonstrates the "modal" option which doesn't highlight any part of the page.system for designing interactive, multimedia, educational walkthroughs.</p>
        <br>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="type-tooltip" style="display:none;">
		<p class="tooltipTitle">Walkthrough Type Tooltip &amp; Highlighting Area</p>
        <p>Walkthough can highlight any part of the page and link it to content.  Since the highlight is based on standard CSS selectors, they will adjust if the page changes.</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="type-tooltip-top" style="display:none;">
		<p class="tooltipTitle">Tooltip Top Position</p>
        <p>Walkthough is defined as a series of steps, each with custom content. The content can be placed above (like here)...</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="type-tooltip-right" style="display:none;">
		<p class="tooltipTitle">Tooltip Right Position</p>
        <p>...on the right...</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="type-tooltip-bottom" style="display:none;">
		<p class="tooltipTitle">Tooltip Bottom Position</p>
        <p>...on the bottom...</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="type-tooltip-left" style="display:none;">
		<p class="tooltipTitle">Tooltip Left Position</p>
        <p>...or on the left...</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="type-no-highlight" style="display:none;">
		<p class="tooltipTitle">Walkthrough Type No Highlight</p>
        <p>Walkthrough can be used without highlighting area</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="tooltip-draggable" style="display:none;">
		<p class="tooltipTitle">Tooltip Draggable</p>
        <p>Walkthrough tooltip draggable...</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="nohighlight-draggable" style="display:none;">
		<p class="tooltipTitle">NoHighlight Draggable</p>
        <p>Walkthrough no highlight drag and drop...</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="content-rotation" style="display:none;">
		<p class="tooltipTitle">Content Rotation</p>
        <p>All walkthrough type support Content Rotation Feature</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="highlight-accessable" style="display:none;">
		<p class="tooltipTitle">Tooltip Type Accessable Highlight Area</p>
        <p>You can set the highlight area to be accessable</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="auto-scroll" style="display:none;">
		<p class="tooltipTitle">Auto Scroll</p>
        <p>Auto scrolling page to the walkthrough step, this step will show you autoScroll options set FALSE which means it will not autoscroll for this step</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="stay-focus" style="display:none;">
		<p class="tooltipTitle">Stay Focus to The Walkthrough</p>
        <p>Walkthrough has option to force user stay focus on the walkthrough step, try to scroll down on this step</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="done-walkthrough" style="display:none;">
		<p class="tooltipTitle">DONE...!!!</p>
        <p>Woohoo...It's Done!, Now please click 'close' button at top right corner to close this walkthrough</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
	</div>
</div>


<!-- callback -->
<div id="callbacks">
	<div id="callback-beforeshow-aftershow" style="display:none;">
		<p class="tooltipTitle">onBeforeShow &amp; onAfterShow </p>
        <p>This callback will be executed only on before show &amp; on after show the first step</p>
        <br>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="callback-restart" style="display:none;">
		<p class="tooltipTitle">onRestart</p>
        <p>This callback will be executed when walkthrough is restarted</p>
        <br>
        <a href="javascript:;" class="restart-step" style="float:left;">Restart</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="callback-onleave" style="display:none;">
		<p class="tooltipTitle">onLeave</p>
        <p>This callback will be executed on LEAVE this step </p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="callback-onenter" style="display:none;">
		<p class="tooltipTitle">onEnter</p>
        <p>This callback will be executed on ENTER this step </p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="callback-onclose" style="display:none;">
		<p class="tooltipTitle">onClose</p>
        <p>This callback will be executed on walkthrough close. Now try to close the walkthrough now..</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="callback-oncookieload" style="display:none;">
		<p class="tooltipTitle">onCookieLoad</p>
        <p>On Cookie Load means when walkthrough has been closed it will set a cookie and tells the walkthrough to not load automaticly. Try to refresh the page to see onCookieLoad callback</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
	</div>
</div>

<!-- methods -->
<div id="methods">
	<div id="method-show" style="display:none;">
		<p class="tooltipTitle">Method show</p>
		<p>This method allows you to open page walkthrough</p>
        <p><pre>$.pagewalkthrough('show', target)</pre></p>
        <p>Target is your walkthrough ID, i.e: #selector</p>
        <br>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="method-next" style="display:none;">
		<p class="tooltipTitle">Method Next</p>
		<p>This method allows you to go the NEXT step</p>
        <p><pre>$.pagewalkthrough('next', event)</pre></p>
        <p>Note: event is needed as a param to call next method</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="method-prev" style="display:none;">
		<p class="tooltipTitle">Method Prev</p>
		<p>This method allows you to go the PREVIOUS step</p>
        <p><pre>$.pagewalkthrough('prev', event)</pre></p>
        <p>Note: event is needed as a param to call prev method</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="method-restart" style="display:none;">
		<p class="tooltipTitle">Method Restart</p>
		<p>This method allows you to RESTART walkthrough</p>
        <p><pre>$.pagewalkthrough('restart', event)</pre></p>
        <p>Note: event is needed as a param to call restart method</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="method-close" style="display:none;">
		<p class="tooltipTitle">Method Close</p>
		<p>This method allows you to CLOSE walkthrough</p>
        <p><pre>$.pagewalkthrough('close', target)</pre></p>
        <p>Target is optional. It could be filled with walkthrough ID or leave it blank</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="method-ispagewalkthroughactive" style="display:none;">
		<p class="tooltipTitle">Property: isPageWalkthroughActive</p>
		<p>This property will return status of page walkthrough</p>
        <p><pre>$.pagewalkthrough('isPageWalkthroughActive')</pre></p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="method-currindex" style="display:none;">
		<p class="tooltipTitle">Property: currIndex</p>
		<p>This property will return current index of current walkthrough step</p>
        <p><pre>$.pagewalkthrough('currIndex')</pre></p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="method-getoptions" style="display:none;">
		<p class="tooltipTitle">Property: getOptions</p>
		<p>This property will return walkthrough options whether it an active walkthrough options or all walkthrough options</p>
        <p><pre>$.pagewalkthrough('getOptions', activeWalkthrough)</pre></p>
        <p>activeWalkthrough = true / false. By default it is FALSE, if set TRUE it will return current active walkthrough object, if FALSE it will return Array of all walkthrough options
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
	</div>
</div>

<!-- example -->
<div id="extra">
	<div id="ex-image" style="display:none;">
		<p class="tooltipTitle">Image in Step Content</p>
		<p>You can add image in step content.</p>
		<img src="images/monster-inc.jpg">
        <br>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="ex-video" style="display:none;">
		<p class="tooltipTitle">Embedding Video</p>
		<p>You can embedding video too...</p>
		<iframe width="560" height="315" src="http://www.youtube.com/embed/8UVNT4wvIGY" frameborder="0" allowfullscreen></iframe>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="ex-validation" style="display:none;">
		<p class="tooltipTitle">Step Validation</p>
		<p>jQuery Page Walkthrough also supports powerful options for control-of-flow.  For example, this step won't let you proceed unless you fill in a valid phone number (numbers only)</p>
        <br>
        <a href="javascript:;" class="prev-step" style="float:left;">Prev Step</a>
        <a href="javascript:;" class="next-step" style="float:right;">Next Step</a>
	</div>
	<div id="ex-done" style="display:none;">
		<p class="tooltipTitle">Support</p>
		<p>For future feature and issue support you can contact me at <EMAIL></p>
	</div>
</div>

</body>
</html>
