MotifMinExpress｜Mash up the Linked Open Data

MotifMinExpress = function(containerId, options) {
	new Application.motifMin(containerId, options);
};

if (Application === "undefined" || !Application) {
	var Application = {};
}

Application.motifMin = function() {
	this._init.apply(this, arguments);
};

Application.motifMin.prototype = {
	
	_containerId : null,
	_baseSequence : null,
	_options : null,
	_motifProperty : null,
	_heptamer : null,
	_octamer : null,
	_appSequence : null,
	_filteredSubjectList : null,
	_motifViewDialogId : null,
	
	_default : {
		appName : "MotifMinExpress",
		selectPropertyCaption : "Select Property",
		selectPropertyAreaClass : "selectPropertyArea",
		selectPropertyClass : "selectProperty",
		resultAreaClass : "resultArea",
		replaceButtonAreaClass : "replaceButtonArea",
		replaceButtonClass : "replaceButton",
		nextButtonAreaClass : "nextButtonArea",
		replaceSequenceClass : "replaceSequence",
		errorMessageAreaClass : "errorMessage",
		dialogErrorMessageClass : "dialogErrorMessage",
		dialogOutRangeValueMessage : "Please input a value between {0} and {1}",
		databaseInfoClass : "databaseInfo",
		motifSequenceProperty : "motif sequence",
		motifPositionProperty : "motif position",
		typeProperty : "type",
		validType : "REG",
		motifViewDialogId : "motifViewDialog",
		motifViewDialogClass : "motifViewDialog",
		motifViewDialogTitle : "Motif View",
		minSequenceClass : "minSeq",
		maxSequenceClass : "maxSeq",
		websiteNameAtted : "ATTED",
		websiteNamePpdb : "PPDB",
		baseSequenceMinLength : 50,
		dialogImageUrl : "http://app.linkdata.org/asset/0aea5a0d.png",
		callback : function() {}
	},
	
	_init : function(containerId, options) {
		this._containerId = containerId;
		this._options = $.extend({}, this._default, options);
		this._baseSequence = this._options.baseSequence;
		this.filteredSubjectList = [];
		this._initMotifProperty(this._options);
		this._initAppSequence(this._options);
		this._initHeptamer();
		this._initOctamer();
		this._initFiltering(this._options);
		this._initView();
		this._initListener();
		this._initMotifViewDialog();
	},
	
	_initMotifProperty : function(opts) {
		var obj = {
			workId : opts.workId,
			fileName : opts.fileName
		};
		this._motifProperty = new Application.motifProperty(obj);
	},
	
	_initAppSequence : function(opts) {
		var seqProperty = this._motifProperty.getPropertyByLabel(this._options.motifSequenceProperty);
		var posProperty = this._motifProperty.getPropertyByLabel(this._options.motifPositionProperty);
		var obj = {
			workId : opts.workId,
			fileName : opts.fileName,
			baseSequence : this._baseSequence,
			motifSequenceProperty : seqProperty,
			motifPositionProperty : posProperty,
			containerId : this._containerId,
			errorMessageClass : this._options.errorMessageAreaClass,
			baseSequenceMinLength : this._options.baseSequenceMinLength
		};
		this._appSequence = new Application.sequence(obj);
	},
	
	_initHeptamer : function() {
		this._heptamer = new Application.heptamer();
	},
	
	_initOctamer : function() {
		this._octamer = new Application.octamer();
	},
	
	_initView : function() {
		this._initMainView();
		this._initDialogView();
	},
	
	_initMainView : function() {
		var optionArray = this._motifProperty.getOptionArray();
		var sb = [];
		sb[sb.length] = "<div class='" + this._options.selectPropertyAreaClass + " row'>";
		sb[sb.length] = "<div class='label left'>" + this._options.selectPropertyCaption + "</div>";
		sb[sb.length] = "<div class='left'>";
		sb[sb.length] = "<select class='" + this._options.selectPropertyClass + "'>";
		sb[sb.length] = "<option value='" + -1 + "'>-- Select Property --</option>";
		$.each(optionArray, function(key, value) {
			sb[sb.length] = "<option value='" + key + "'>" + value + "</option>";
		});
		sb[sb.length] = "</select>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div class='" + this._options.resultAreaClass + " hidden'></div>";
		sb[sb.length] = "<div class='" + this._options.replaceButtonAreaClass + " hidden'>";
		sb[sb.length] = "<a class='" + this._options.replaceButtonClass + " btn btn-lightblue'>Replace</a>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div class='" + this._options.databaseInfoClass + " hidden'></div>";
		sb[sb.length] = "<div class='" + this._options.replaceSequenceClass + " hidden'></div>";
		sb[sb.length] = "<div class='" + this._options.errorMessageAreaClass + " hidden'>error</div>";
		$("#" + this._containerId).append(sb.join(""));
	},
	
	_initDialogView : function() {
		var sb = [], self = this, date = new Date();
		//this._motifViewDialogId = "motifViewDialog_id_" + date.getTime();
		this._motifViewDialogId = "motifViewDialog_id_" + self._containerId;
		sb[sb.length] = "<div id='" + this._motifViewDialogId + "' class='hidden'>";
		sb[sb.length] = "<input type='hidden' class='sequence'>";
		sb[sb.length] = "<div>";
		sb[sb.length] = "<span>Place motif at position</span>";
		sb[sb.length] = "<input type='text' class='position'/>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div>";
		sb[sb.length] = "<span class='explanation'>Replace with prefer position between ";
		sb[sb.length] = "<span class='minSeq'></span> and <span class='maxSeq'>";
		sb[sb.length] = "</span>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div>";
		sb[sb.length] = "<span>Number of extra copies</span>";
		sb[sb.length] = "<input type='text' class='extraCopies' value='0'/>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div>";
		sb[sb.length] = "<span>Space between copies (Base Pairs)</span>";
		sb[sb.length] = "<input type='text' class='basePairs' value='0'/>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div class='motifImageArea'>";
		sb[sb.length] = "<img src='" + this._options.dialogImageUrl + "'/>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div>";
		sb[sb.length] = "<span class='explanation'>Click ";
		sb[sb.length] = "<a class='moreInfo'>here</a> to see the additional information about motif from " + self._getDataBaseWebsiteName() + " website";
		sb[sb.length] = "</span>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div>";
		sb[sb.length] = "<span class='dialogErrorMessage errorMessage hidden'></span>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "</div>";
		$("#" + this._containerId).append(sb.join(""));
	},
	
	_initFiltering : function(opts) {
		var self = this;
		var seqProperty = self._motifProperty.getPropertyByLabel(opts.motifSequenceProperty);
		var posProperty = self._motifProperty.getPropertyByLabel(opts.motifPositionProperty);
		var typeProperty = self._motifProperty.getPropertyByLabel(opts.typeProperty);
		var tripleList = LinkData.getTriplesByProperty(opts.workId, opts.fileName, seqProperty);
		$.each(tripleList, function(key, value) {
			var validPos = false;
			var validType = true;
			$.each(LinkData.getObjects(opts.workId, opts.fileName, value.subject, posProperty), function(posKey, posValue) {
				var tmpPos = parseInt(posValue);
				if (opts.baseSequenceMinLength < tmpPos && opts.baseSequence.length >= tmpPos) {
					validPos = true;
				}
			});
			$.each(LinkData.getObjects(opts.workId, opts.fileName, value.subject, typeProperty), function(typeKey, typeValue) {
				if (opts.validType !== typeValue) {
					validType = false;
				}
			});
			var valid = validPos && validType;
			if (valid && value.object.length > 0 && $.inArray(value.subject, self.filteredSubjectList) < 0) {
				self.filteredSubjectList.push(value.subject);
			}
		});
	},
	
	_initListener : function() {
		this._initSelectPropertyListener();
		this._initReplaceButtonLitener();
	},
	
	_initSelectPropertyListener : function() {
		var self = this, workId = self._options.workId, fileName = self._options.fileName;
		$("#" + self._containerId + " ." + self._options.selectPropertyClass).change(function() {
			self._appSequence.hideError();
			$("#" + self._containerId + " ." + self._options.resultAreaClass).show();
			$("#" + self._containerId + " ." + self._options.replaceButtonAreaClass).show();
			$("#" + self._containerId + " ." + self._options.replaceSequenceClass).hide();
			$("#" + self._containerId + " ." + self._options.databaseInfoClass).hide();
			var propLabel = $("option:selected", this).val();
			var property = self._motifProperty.getPropertyByLabel(propLabel);
			var triple = self._getMotifMinTriple(workId, fileName, property);
			self._motifMinSequence(workId, fileName, triple.subject);
			self._initMotifSequenceListener();
		});
	},
	
	_initReplaceButtonLitener : function() {
		var self = this, workId = self._options.workId, fileName = self._options.fileName;
		$("#" + self._containerId + " ." + self._options.replaceButtonClass).click(function() {
			self._appSequence.hideError();
			$("#" + self._containerId + " ." + self._options.replaceSequenceClass).show();
			var seqs = [];
			$("#" + self._containerId + " .userSequence").each(function() {
				seqs.push($(this).text());
			});
			var seqVal = [];
			$("#" + self._containerId + " .userSequence .hdnSequence").each(function() {
				seqVal.push($(this).val());
			});
			var html = self._appSequence.replace(seqs);
			$("#" + self._containerId + " ." + self._options.replaceSequenceClass).html(html);
			self._showDatabaseInfo(seqVal);
			self._options.callback();
		});
	},
	
	_initMotifSequenceListener : function() {
		var self = this;
		$("#" + self._containerId + " .motifSequence").click(function() {
			$("." + self._options.motifViewDialogClass).hide();
			var parent = $(this).closest('.userSequence');
			var seq = $(parent).find(".hdnSequence").val();
			var pos = $(parent).find(".hdnPosition").val();
			var seqEl = self._getSeqElBySeq(seq);
			var appropriatePos = (seqEl && seqEl.getAppropriatePos()) ? seqEl.getAppropriatePos() : pos;
			self._initSequencePopup(seqEl);
			$("#" + self._motifViewDialogId + " ." + self._options.dialogErrorMessageClass).hide();
			$("#" + self._motifViewDialogId + " .sequence").val(seq);
			$("#" + self._motifViewDialogId + " .position").val(appropriatePos);
			$("#" + self._motifViewDialogId + " .extraCopies").val(0);
			$("#" + self._motifViewDialogId + " .basePairs").val(0);
			$("#" + self._motifViewDialogId + " .minSeq").html(self._getMinPosition(seq));
			$("#" + self._motifViewDialogId + " .maxSeq").html(self._getMaxPosition(seq));
			self._initPositionInsert(seq, appropriatePos);
			$("#" + self._motifViewDialogId).dialog({title: self._default.motifViewDialogTitle + " - " + seq});
			$("#" + self._motifViewDialogId).dialog("open");
			$("#" + self._motifViewDialogId).closest('.' + self._options.motifViewDialogClass).show();
		});
	},
	
	_initSequencePopup : function(seqEl) {
		var self = this;
		$("#" + self._motifViewDialogId + " .moreInfo").unbind("click");
		var url = (seqEl && seqEl.getExternalUrl()) ? seqEl.getExternalUrl() : "#";
		$("#" + self._motifViewDialogId + " .moreInfo").click(function() {
			var winWidth = 800;
			var winHeight = 800;
			var winLeft = parseInt((screen.availWidth/2) - (winWidth/2));
			var winTop = parseInt((screen.availHeight/2) - (winHeight/2));
			var winStyle = "width=" + winWidth + ",height=" + winHeight + ",left=" + winLeft + ",top=" + winTop + ",screenX=" + winLeft + ",screenY=" + winTop + ",scrollbars=1";
			window.open(url, "Motif", winStyle);
		});
	},
	
	_initPositionInsert : function(seq, pos) {
		var self = this;
		var mod = seq.length % 2;
		$("#" + self._motifViewDialogId + " .position").unbind("keyup");
		$("#" + self._motifViewDialogId + " .position").keyup(function() {
			var val = $(this).val();
			if (isNaN(val)) {
				$(this).val(pos);
				return;
			}
			var tmpVal = new String(val);
			if (mod == 0) {
				if (tmpVal.indexOf(".") == -1) {
					$(this).val(tmpVal + ".5");
				} else {
					$(this).val(tmpVal.split(".")[0] + ".5");
				}
			} else {
				if (tmpVal.indexOf(".") > -1) {
					$(this).val(tmpVal.split(".")[0]);
				}
			}
		});
	},
	
	_initMotifViewDialog : function() {
		var self = this;
		$("#" + self._motifViewDialogId).dialog({
			autoOpen: false,
			title: self._default.motifViewDialogTitle,
			width: 520,
			dialogClass : self._options.motifViewDialogClass,
			buttons : [
				{
					text: "Replace",
					click : function() {
						var seq = $("#" + self._motifViewDialogId).find(".sequence").val();
						var pos = $("#" + self._motifViewDialogId).find(".position").val();
						var extraCopies = parseInt($("#" + self._motifViewDialogId).find(".extraCopies").val());
						var basePairs = parseInt($("#" + self._motifViewDialogId).find(".basePairs").val());
						var minPos = parseFloat($("#" + self._motifViewDialogId).find(".minSeq").html());
						var maxPos = parseFloat($("#" + self._motifViewDialogId).find(".maxSeq").html());
						if (minPos > pos || maxPos < pos) {
							$dialogError = $("#" + self._motifViewDialogId + " ." + self._options.dialogErrorMessageClass);
							$dialogError.html(self._options.dialogOutRangeValueMessage.replace("{0}", minPos).replace("{1}", maxPos));
							$dialogError.show();
							return;
						}
						self._replaceWithSequence(seq, pos, extraCopies, basePairs);
						$(this).dialog("close");
					}
				},
				{
					text: "Cancel",
					click : function() {
						$(this).dialog("close");
					}
				}
			]
		});
	},
	
	_getMotifMinTriple : function(workId, fileName, property) {
		var self = this;
		var triples = LinkData.getTriplesByProperty(workId, fileName, property);
		var minIndex = -1;
		var minValue = 99999;
		$.each (triples, function(tKey, tValue) {
			if ($.inArray(tValue.subject, self.filteredSubjectList) >= 0 && Math.min(tValue.object, minValue) != minValue) {
				minValue = tValue.object;
				minIndex = tKey;
			}
		});
		if (minIndex != -1) {
			return triples[minIndex];
		}
		return;
	},
	
		_getDataBaseWebsiteName : function() {
		var self = this;
		var fileName = self._options.fileName
		if (fileName.indexOf(self._options.websiteNameAtted) > -1) {
			return self._options.websiteNameAtted;
		} else if (fileName.indexOf(self._options.websiteNamePpdb) > -1) {
			return self._options.websiteNamePpdb;
		} else {
			return "UNKNOWN";
		}
	},
	
	_motifMinSequence : function(workId, fileName, subject) {
		var self = this, seqHtml = self._appSequence.getSequenceHtml(subject);
		var sb = [];
		sb[sb.length] = "<div class='baseSequence'>" + self._baseSequence + "</div>";
		sb[sb.length] = seqHtml;
		$("#" + self._containerId + " ." + self._options.resultAreaClass).html(sb.join(""));
		if (seqHtml.length == 0) {
			$("#" + self._containerId + " ." + self._options.replaceButtonAreaClass).hide();
		}
	},
	
	_getMinPosition : function(seq) {
		var self = this;
		var mod = seq.length % 2;
		var tHold = (mod == 1) ? 1 : 0.5;
		return self._default.baseSequenceMinLength + Math.floor(seq.length / 2) + tHold;
	},
	
	_getMaxPosition : function(seq) {
		var self = this;
		var mod = seq.length % 2;
		var tHold = (mod == 1) ? 0 : 0.5;
		return self._baseSequence.length - 1 - Math.floor(seq.length / 2) + tHold;
	},
	
	_getSeqElBySeq : function(seq) {
		if (seq && seq.trim().length == 7) {
			return this._heptamer.getBySequence(seq);
		} else if (seq && seq.trim().length == 8) {
			return this._octamer.getBySequence(seq);
		}
	},
	
	_showDatabaseInfo : function(seqVal) {
		var self = this, fileName = self._options.fileName, appName = self._options.appName;
		var propLabel = $("option:selected", "#" + self._containerId + " ." + self._options.selectPropertyClass).val();
		var label = self._motifProperty.getPropertyNameByLabel(propLabel);
		label = (label && label.trim().length != 0) ? label : propLabel;
		var usedMotif = (seqVal.length != 0) ? seqVal.toString() : "-";
		var dbInfoHtml = self._getDatabaseInfo(fileName, appName, label, usedMotif);
		$("#" + self._containerId + " ." + self._options.databaseInfoClass).html(dbInfoHtml);
		$("#" + self._containerId + " ." + self._options.databaseInfoClass).show();
	},
	
	_getDatabaseInfo : function(fileName, method, property, motif) {
		var sb = [];
		sb[sb.length] = "<div class='row'>";
		sb[sb.length] = "<div class='label left'>Database</div>";
		sb[sb.length] = "<div class='left'>" + fileName + "</div>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div class='row'>";
		sb[sb.length] = "<div class='label left'>Application</div>";
		sb[sb.length] = "<div class='left'>" + method + "</div>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div class='row'>";
		sb[sb.length] = "<div class='label left'>Property</div>";
		sb[sb.length] = "<div class='left'>" + property + "</div>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div class='row'>";
		sb[sb.length] = "<div class='label left'>Motif</div>";
		sb[sb.length] = "<div class='left'>" + motif + "</div>";
		sb[sb.length] = "</div>";
		return sb.join("");
	},
	
	_replaceWithSequence : function(seq, pos, extraCopies, basePairs) {
		var self = this;
		var html = self._appSequence.replaceWith(seq, pos, extraCopies, basePairs);
		$("#" + self._containerId + " ." + self._options.replaceSequenceClass).html(html);
		$("#" + self._containerId + " ." + self._options.replaceSequenceClass).show();
		self._showDatabaseInfo(seq);
		self._options.callback();
	}
	
};

Application.motifProperty = function() {
	this._init.apply(this, arguments);
};

Application.motifProperty.prototype = {

_options : null,
	_propMap : null,
	_nameMap : null,
	
	_default : {
		nameMappingNamespace : "http://atted.jp/help/slide_GeneExp_v3.shtml#",
		nameMappingProperty : "http://purl.org/dc/elements/1.1/title",
		propertyMappingExpression : "Expression",
		propertyMappingWorkUri : "http://linkdata.org/work"
	},
	
	_init : function(options) {
		this._options = $.extend({}, this._default, options);
		this._propMap = [];
		this._nameMap = [];
		this._initPropMap(this._options);
		this._initNameMap();
	},
	
	_initPropMap : function(opts) {
		var self = this, workId = opts.workId, fileName = opts.fileName;
		$.each(LinkData.getProperties(workId, fileName), function(key, value) {
			var label = self._getLabel(value);
			if (!self._propMap[label]) {
				self._propMap[label] = value;
			}
		});
	},
	
	_initNameMap : function() {
		var self = this, nameKey;
		$.each(LinkData.getWorks(), function(workKey, workId) {
			$.each(LinkData.getFiles(workId), function(fileKey, fileName) {
				$.each(LinkData.getSubjects(workId, fileName), function(subKey, subValue) {
					nameKey = self._getNameKey(subValue);
					if (nameKey) {
						var nameArray = LinkData.getObjects(workId, fileName, subValue, self._options.nameMappingProperty);
						if (nameArray && nameArray.length > 0) {
							self._nameMap[nameKey] = nameArray[0];
						}
					}
				});
			});
		});
	},
	
	_getNameKey : function(value) {
		var key;
		if (value && value.indexOf(this._options.nameMappingNamespace) >= 0) {
			key = value.split("#")[1];
		}
		return key;
	},
	
	_getLabel : function(value) {
		var propLabel = value;
		var arr = value.split("#");
		if (arr.length > 1) {
			propLabel = decodeURIComponent(arr[1]);
		}
		return propLabel;
	},
	
	getOptionArray : function() {
		var self = this, list = new Object();
		var workId = self._options.workId, fileName = self._options.fileName;
		$.each(LinkData.getProperties(workId, fileName), function(key, value) {
			if (value.indexOf(self._options.propertyMappingWorkUri) > -1 || value.indexOf(self._options.propertyMappingExpression) > -1) {
				var propLabel = self._getLabel(value);
				var name = self._nameMap[propLabel];
				list[propLabel] = (name) ? name : propLabel;
			}
		});
		return list;
	},
	
	getPropertyByLabel : function(label) {
		return this._propMap[label];
	},
	
	getPropertyNameByLabel : function(label) {
		return this._nameMap[label];
	}

};

Application.sequence = function() {
	this._init.apply(this, arguments);
};

Application.sequence.prototype = {
	
	CHAR_SEQ_EMPTY : "-",
	
	_options : null,
	_workId : null,
	_fileName : null,
	_seqProperty : null,
	_posProperty : null,
	_baseSequence : null,
	_sequenceList : null,
	_positionList : null,
	_containerId : null,
	_errorContainerClass : null,
	_outOfRangeArray : null,
	
	_default : {
		msgInvalidSequence: "invalid sequence.",
		msgOutOfRangeSequence: "out of range sequence : {0}",
	},
	
	_init : function(options) {
		this._options = options;
		this._workId = this._options.workId;
		this._fileName = this._options.fileName;
		this._seqProperty = this._options.motifSequenceProperty;
		this._posProperty = this._options.motifPositionProperty;
		this._baseSequence = this._options.baseSequence;
		this._containerId = this._options.containerId;
		this._errorContainerClass = this._options.errorMessageClass;
	},
	
	_getCustomSequenceHtml : function(baseSequence, sequence, position) {
		var seqLen = sequence.length;
		var tHold = Math.floor(seqLen / 2) + 1;
		var pos = parseInt(position);
		var baseSeqLen = baseSequence.length;
		var suffixLen = baseSeqLen - tHold - pos;
		var sb = [];
		if (pos > this._options.baseSequenceMinLength && suffixLen > 0) {
			for (var i = 0; i < suffixLen; i++) {
				sb.push(this.CHAR_SEQ_EMPTY);
			}
			sb.push("<a href='javascript:void(0)' class='motifSequence'>" + sequence + "</a>");
			sb.push("<input type='hidden' class='hdnSequence' value='" + sequence + "'/>");
			sb.push("<input type='hidden' class='hdnPosition' value='" + pos + "'/>");
		} else {
			//_showError($appContainer, opts.msgOutOfRangeSequence.replace("{0}", sequence));
			this._outOfRangeArray.push(sequence + "[" + pos + "]");
			this._showError(this._default.msgOutOfRangeSequence.replace("{0}", this._outOfRangeArray.toString()));
		}
		return sb.join("");
	},
	
	_isValidSequenceList : function(seqs) {
		var count = seqs.length;
		var maxlength = 0;
		for (var i = 0; i < count; i++) {
			if (seqs[i].length > maxlength) {
				maxlength = seqs[i].length;
			}
		}
		var result = true;
		for (var i = 0; i < maxlength; i++) {
			var chars = [];
			for (var j = 0; j < count; j++) {
				chars.push(seqs[j].charAt(i));
			}
			if (! this._isValidChars(chars.join(""))) {
				result = false;
				break;
			}
		}
		return result;
	},
	
	_isValidChars : function(charString) {
		var charLen = charString.length;
		var result = true;
		var first = null;
		for (var i = 0; i < charLen; i++) {
			if (charString.charAt(i) == this.CHAR_SEQ_EMPTY) {
				continue;
			}
			if (! first) {
				first = charString.charAt(i);
			}
			var current = charString.charAt(i);
			if (current && first != current) {
				result = false;
				break;
			}
		}
		return result;
	},
	
	_getReplacedCustomSequence : function(seqs) {
		var mergeSequence = this._getmergeCharSequence(seqs);
		var maxlength = this._baseSequence.length;
		
		var sb = [];
		for (var i = 0; i < maxlength; i++) {
			var bChar = this._baseSequence.charAt(i);
			var mChar = mergeSequence.charAt(i);
			if (mChar !== this.CHAR_SEQ_EMPTY) {
				// replaced
				sb.push(mChar);
			} else {
				sb.push(bChar);
			}
		}
		
		return sb.join("");
	},
	
	_getmergeCharSequence : function(seqs) {
		var count = seqs.length;
		var maxlength = this._baseSequence.length;
		var sb = [];
		for (var i = 0; i < maxlength; i++) {
			var chars = [];
			for (var j = 0; j < count; j++) {
				chars.push(seqs[j].charAt(i) ? seqs[j].charAt(i) : this.CHAR_SEQ_EMPTY);
			}
			sb.push(this._getMergeChar(chars.join("")));
		}
		return sb.join("");
	},
	
	_getMergeChar : function(charString) {
		var charLen = charString.length;
		var result = null;
		for (var i = 0; i < charLen; i++) {
			if (charString.charAt(i) !== this.CHAR_SEQ_EMPTY) {
				result = charString.charAt(i);
				break;
			}
		}
		if (!result) {
			result = this.CHAR_SEQ_EMPTY;
		}
		return result;
	},
	
	_wrappedReplacedSequenceHtml : function(replaceSequence, seqs) {
		var mergeSequence = this._getmergeCharSequence(seqs);
		var length = this._baseSequence.length;
		var sb = [];
		for (var i = 0; i < length; i++) {
			var bChar = this._baseSequence.charAt(i);
			var rChar = replaceSequence.charAt(i);
			var mChar = mergeSequence.charAt(i);
			var seqChar = (bChar !== rChar) ? "<span class='replace'>" + rChar + "</span>" : rChar;
			if (mChar !== this.CHAR_SEQ_EMPTY) {
				sb.push("<span class='highlight-sequence'>" + seqChar + "</span>");
			} else {
				sb.push(seqChar);
			}
		}
		return sb.join("");
	},
	
	_showError : function(message) {
		$errorMessageContainer = $("#" + this._containerId + " ." + this._errorContainerClass);
		$errorMessageContainer.html(message);
		$errorMessageContainer.show();
	},
	
	getSequenceHtml : function(subject) {
		var self = this;
		this._outOfRangeArray = [];
		var sequenceList = LinkData.getObjects(self._workId, self._fileName, subject, self._seqProperty);
		var positionList = LinkData.getObjects(self._workId, self._fileName, subject, self._posProperty);
		var sb = [], baseSequence = self._baseSequence;
		for (var i = 0; i < sequenceList.length; i++) {
			var customSeqString = this._getCustomSequenceHtml(baseSequence, sequenceList[i], positionList[i]);
			if (customSeqString.length > 0) {
				sb.push("<div class='userSequence'>" + customSeqString + "</div>");
			}
		}
		return sb.join("\n");
	},
	
	replace : function(seqs) {
		var isValid = this._isValidSequenceList(seqs);
		if (isValid) {
			if (seqs.length > 0) {
				var replaceSeq = this._getReplacedCustomSequence(seqs);
				var replaceSeqHtml = this._wrappedReplacedSequenceHtml(replaceSeq, seqs);
				return replaceSeqHtml;
			}
		} else {
			//$appContainer.find("." + opts.appReplaceResultAreaContainerClz).hide();
			//_showError($appContainer, opts.msgInvalidSequence);
			this._showError(this._default.msgInvalidSequence);
		}
	},
	
	replaceWith : function(seq, pos, extraCopies, basePairs) {
		var main = [];
		var seqLen = seq.length;
		var tHold = Math.floor(seqLen / 2) + 1;
		var pos = parseInt(pos);
		var baseSeqLen = this._baseSequence.length;
		var len = baseSeqLen - tHold - pos;
		for (var j = 0; j < extraCopies + 1; j++) {
			var array = [];
			for (var i = 0; i < len; i++) {
				array.push(this.CHAR_SEQ_EMPTY);
			}
			array.push(seq);
			main.push(array.join(""));
			len = len - seqLen - basePairs;
			if (len < 0) {
				break;
			}
		}
		return this.replace(main);
	},
	
	hideError : function() {
		$errorMessageContainer = $("#" + this._containerId + " ." + this._errorContainerClass).hide();
	}
	
};

Application.heptamer = function() {
	this._init.apply(this, arguments);
};

Application.heptamer.prototype = {
	
	_heptamerMap : null,
	
	_default : {
		filterSubjectUrlPhrase : "http://atted.jp/data/cis/",
		filterSequencePropertyPhrase : "motif%20sequence",
		filterMaxCEGPropertyPhrase : "maxCEG",
		filterAppropriatePosition : "Appropriateposition(%C2%B1%2040%20bp)"
	},
	
	_init : function() {
		this._heptamerMap = new Object();
		this._initHeptamerList();
	},
	
	_initHeptamerList : function() {
		var self = this;
		$.each(LinkData.getWorks(), function(workKey, workId) {
			$.each(LinkData.getFiles(workId), function(fileKey, fileName) {
				$.each(LinkData.getSubjects(workId, fileName), function(subKey, subValue) {
					if (self._isHeptamerSubject(subValue)) {
						var triples = LinkData.getTriplesBySubject(workId, fileName, subValue);
						//var obj = self._getObjectByTriple(triples);
						var seqEl = self._getObjectByTriple(triples);
						var seq = seqEl.getSequence();
						if (seq && seq.trim().length != 0) {
							seqEl.setExternalUrl(subValue);
							//obj.url = subValue;
							self._heptamerMap[seq] = seqEl;
						}
					}
				});
			});
		});
	},
	
	_getObjectByTriple : function(triples) {
		var self = this;
		//var obj = {};
		var seqEl = new Application.seqElement();
		$.each(triples, function(key, value) {
			var property = value.property;
			if (property.indexOf(self._default.filterSequencePropertyPhrase) >= 0) {
				seqEl.setSequence(value.object);
				//obj.sequence = value.object;
			} else if (property.indexOf(self._default.filterAppropriatePosition) >= 0) {
				seqEl.setAppropriatePos(value.object);
				//obj.appropriatePos = value.object;
			}
		});
		return seqEl;
	},
	
	_isHeptamerSubject : function(subject) {
		var self = this;
		if (!subject) {
			return false;
		}
		if (subject.indexOf(self._default.filterSubjectUrlPhrase) > -1) {
			return true;
		}
		return false;
	},
	
	getBySequence : function(sequence) {
		return this._heptamerMap[sequence];
	}
	
};

Application.octamer = function() {
	this._init.apply(this, arguments);
};

Application.octamer.prototype = {
	
	_octamerMap : null,
	
	_default : {
		filterSubjectUrlPhrase : "http://ppdb.agr.gifu-u.ac.jp/ppdb/cgi-bin/",
		filterSequencePropertyPhrase : "sequence",
		filterAppropriatePosition : "Appropriate%20position"
	},
	
	_init : function() {
		this._octamerMap = new Object();
		this._initOctamerList();
	},
	
	_initOctamerList : function() {
		var self = this;
		$.each(LinkData.getWorks(), function(workKey, workId) {
			$.each(LinkData.getFiles(workId), function(fileKey, fileName) {
				$.each(LinkData.getSubjects(workId, fileName), function(subKey, subValue) {
					if (self._isOctamerSubject(subValue)) {
						var triples = LinkData.getTriplesBySubject(workId, fileName, subValue);
						var seqEl = self._getObjectByTriple(triples);
						var seq = seqEl.getSequence();
						if (seq && seq.trim().length != 0) {
							seqEl.setExternalUrl(subValue);
							//obj.url = subValue;
							self._octamerMap[seq] = seqEl;
						}
					}
				});
			});
		});
	},
	
	_getObjectByTriple : function(triples) {
		var self = this;
		//var obj = {};
		var seqEl = new Application.seqElement();
		$.each(triples, function(key, value) {
			var property = value.property;
			if (property.indexOf(self._default.filterSequencePropertyPhrase) >= 0) {
				seqEl.setSequence(value.object);
				//obj.sequence = value.object;
			} else if (property.indexOf(self._default.filterAppropriatePosition) >= 0) {
				seqEl.setAppropriatePos(value.object);
				//obj.appropriatePos = value.object;
			}
		});
		return seqEl;
	},
	
	_isOctamerSubject : function(subject) {
		var self = this;
		if (!subject) {
			return false;
		}
		if (subject.indexOf(self._default.filterSubjectUrlPhrase) > -1) {
			return true;
		}
		return false;
	},
	
	getBySequence : function(sequence) {
		return this._octamerMap[sequence];
	}
	
};

Application.seqElement = function() {
	this._init.apply(this, arguments);
};

Application.seqElement.prototype = {
	
	_externalUrl : null,
	_sequence : null,
	_appropriatePos : null,
	
	_init : function() {},
	
	getExternalUrl : function() {
		return this._externalUrl;
	},

setExternalUrl : function(externalUrl) {
		this._externalUrl = externalUrl;
	},
	
	getSequence : function() {
		return this._sequence;
	},
	
	setSequence : function(sequence) {
		this._sequence = sequence;
	},
	
	getAppropriatePos : function() {
		return this._appropriatePos;
	},
	
	setAppropriatePos : function(appropriatePos) {
		this._appropriatePos = appropriatePos;
	}
	
};

$(document).ready(function() {
	var containerId = "container";
	var options = {
		workId : "rdf1s295i",
		fileName : "AtGenExpress_ATTED_Flowering",
		baseSequence : "GAAAAAAGACGTTCCAACCACGTCTTCAAAGCAAGTGATTGGATTAAGGTTCTTCCACACGGTAAGGGATGGCACTAACACCTACCATCCTTCGCAAGACCCTTCCTCTATATAAGGAAGTTCATTTCATTTGGAGAGGACCTCGAC"
	};
	new Application.motifMin(containerId, options);
});

body {
    font-family: sans-serif;
    font-size: 14px;
}

a {
    color: #3B5998;
    font-weight: bold;
    text-decoration: none;
}

.hidden {
	display:none;
}

.left {
    float: left;
}

.label {
	color: #E87B10;
    font: 1.1em "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
    height: 24px;
    min-width: 125px;
}

.row {
    padding: 5px 0;
}

.row:after {
    content: "";
    clear: left;
    display: block;
}

.row input[type="text"] {
    width: 200px;
}

.highlight-sequence {
	font-weight: bold;
}

.resultArea {
    font-family: "Courier New","Lucida Console";
    margin: 10px 0;
    min-width: 410px;
    overflow: auto;
    width: 100%;
	background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
}
.replaceSequence {
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    margin: 10px 0 0;
	font-family: "Courier New","Lucida Console";
}

.replace {
    color: #E80010;
}

.errorMessage {
	color: #FF0000;
	text-align: center;
}

/**
 * button css
 */
.actionBtn {
	border: 1px solid #DDDDDD;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 2px;
    text-align: center;
    width: 25px;
}

.actionBtn:hover {
	border: 1px solid #000000;
}

.btn {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */

*zoom: 1;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  font-size: 13px;
  line-height: 18px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(top, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  border: 1px solid #cccccc;
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  *margin-left: .3em;
}

.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
  background-color: #e6e6e6;
}

.btn:hover {
  color: #333333;
  text-decoration: none;
  background-color: #e6e6e6;
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
  -moz-transition: background-position 0.1s linear;
  -ms-transition: background-position 0.1s linear;
  -o-transition: background-position 0.1s linear;
  transition: background-position 0.1s linear;
}

.btn-blue,
.btn-blue:hover,
.btn-yellow,
.btn-yellow:hover,
.btn-red,
.btn-red:hover,
.btn-green,
.btn-green:hover,
.btn-lightblue,
.btn-lightblue:hover,
.btn-black,
.btn-black:hover {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  color: #ffffff;
}

.btn-blue {
  background-color: #0074cc;
  background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
  background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
  background-image: -o-linear-gradient(top, #0088cc, #0055cc);
  background-image: linear-gradient(top, #0088cc, #0055cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
  border-color: #0055cc #0055cc #003580;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}

.btn-blue:hover,
.btn-blue:active,
.btn-blue.active,
.btn-blue.disabled,
.btn-blue[disabled] {
  background-color: #0055cc;
}

.btn-green {
  background-color: #5bb75b;
  background-image: -moz-linear-gradient(top, #62c462, #51a351);
  background-image: -ms-linear-gradient(top, #62c462, #51a351);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
  background-image: -webkit-linear-gradient(top, #62c462, #51a351);
  background-image: -o-linear-gradient(top, #62c462, #51a351);
  background-image: linear-gradient(top, #62c462, #51a351);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);
  border-color: #51a351 #51a351 #387038;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-green:hover,
.btn-green:active,
.btn-green.active,
.btn-green.disabled,
.btn-green[disabled] {
  background-color: #51a351;
}
.btn-green:active,
.btn-green.active {
  background-color: #408140 ¥9;
}
.btn-lightblue {
  background-color: #49afcd;
  background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
  background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: linear-gradient(top, #5bc0de, #2f96b4);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
  border-color: #2f96b4 #2f96b4 #1f6377;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-lightblue:hover,
.btn-lightblue:active,
.btn-lightblue.active,
.btn-lightblue.disabled,
.btn-lightblue[disabled] {
  background-color: #2f96b4;
}

/* Dialog css */

.motifViewDialog .explanation {
	color: #AAAAAA;
	font-size: 12px;
}

.motifViewDialog .moreInfo {
	color: #3B5998;
	cursor: pointer;
}

.motifViewDialog .basePairs,
.motifViewDialog .extraCopies,
.motifViewDialog .position {
	width: 70px;
}

.motifViewDialog .dialogErrorMessage {
	font-size: 12px;
}

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 1px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 1px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 1px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 1px;
}

LinkData Work	Table Data
GenoCon2 Challenge A - Developmental conditions Contributor:GenoCon Update:Sep 11, 2012 5741 Downloads, 16 Applications	Flowering Fruit_Seeds Leaf Root Seedling Stem Whole_Plant
GenoCon2 Challenge A - Developmental Coexpression (AtGenExpress + ATTED-II promoter motif) Contributor:GenoCon Update:Jan 17, 2013 4470 Downloads, 12 Applications Developmental Microarray Expression Data (AtGenExpress) of plant developmental tissues, combined with CEG coexpression analysis regulatory (7mer) motif calculations (ATTED-II). We took the median of triplicate measurements from AtGenExpress, then sorted the developmental series into plant tissues, with one category for seedlings (8 days old or less) and another for whole plants (older than 8 days). <br><br> <strong>References</strong> (for ATTED-II):<br> <a href="http://www.ncbi.nlm.nih.gov/pubmed/17130150">http://www.ncbi.nlm.nih.gov/pubmed/17130150</a><br> <strong>References</strong> (for AtGenExpress)<br> <a href="http://www.ncbi.nlm.nih.gov/pubmed/15806101">http://www.ncbi.nlm.nih.gov/pubmed/15806101</a>	AtGenExpress_ATTED_Flowering AtGenExpress_ATTED_Fruit_Seeds AtGenExpress_ATTED_Leaf AtGenExpress_ATTED_Root AtGenExpress_ATTED_Seedling AtGenExpress_ATTED_Stem AtGenExpress_ATTED_Whole_Plant Heptamer_elements