motifRanking Ver.2｜Mash up the Linked Open Data

Play
JavaScript
CSS
HTML
ReadMe
Snapshots

MotifRanking= function(containerId, options) {
	var app = new Application.motifRanking(containerId, options);
};

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

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

Application.motifRanking.prototype = {
	
	_containerId : null,
	_baseSequence : null,
	_options : null,
	_tooltip : null,
	_motifProperty : null,
	_heptamer : null,
	_octamer : null,
	_appSequence : null,
	//_motifConflict : null,
	_motifViewDialogId : null,
	_addAnotherMotifDialogId : null,
	_motifConflictConfirmDialogId : null,
	_geneInfoContainerId : null,
	_motifView : null,
	_fixedSequence : null,
	_rankingOrder : null,
	
	_default : {
		appName : "MotifRanking",
		selectPropertyCaption : "Select Property",
		selectPropertyAreaClass : "selectPropertyArea",
		selectPropertyClass : "selectProperty",

// 発現ランキング関係の定数
		selectRankingCaption : "Expression Ranking",
		selectRankingAreaClass : "selecRankingArea",
		selectRankingClass : "selectRanking",
		rankingRange : 10,
		
		// 順序選択関係の定数
		selectOrderCaption : "Order",
		selectOrderAreaClass : "selectOrderArea",
		selectOrderName : "selectOrder",
		topValue : "top",
		bottomValue : "bottom",
		topLabel : "Top",
		bottomLabel : "Bottom",
		
		resultAreaClass : "resultArea",
		replaceButtonAreaClass : "replaceButtonArea",
		replaceButtonClass : "replaceButton",
		nextButtonAreaClass : "nextButtonArea",
		replaceSequenceClass : "replaceSequence",
		fixedSequenceShowClass : "fixedSequenceMotif",
		wrappedMotifSequenceShowClass : "wrappedSequenceMotif",
		errorMessageAreaClass : "errorMessage",
		dialogErrorMessageClass : "dialogErrorMessage",
		dialogOutRangeValueMessage : "Please input a value between {0} and {1}",
		databaseInfoClass : "databaseInfo",
		addAnotherMotifButtonClass : "addAnotherMotifButton",
		geneLabelClass : "geneUrl",
		dbInfoLinkClass : "dbInfoLink",
		geneInfoLinkClass : "geneInfoLink",
		geneInfoAttedLinkClass : "geneInfoAttedLink",
		geneInfoPpdbLinkClass : "geneInfoPpdbLink",
		geneInfoEfpLinkClass : "geneInfoEfpLink",
		geneInfoHannaDbLinkClass : "geneInfoHannaDbLink",
		motifSequenceProperty : "motif sequence",
		motifPositionProperty : "motif position",
		typeProperty : "type",
		validType : "REG",
		motifViewDialogId : "motifViewDialog",
		motifViewDialogClass : "motifViewDialog",
		motifViewDialogTitle : "Motif View",
		conflictionDialogTitle : "Confliction",
		minSequenceClass : "minSeq",
		maxSequenceClass : "maxSeq",
		websiteNameAtted : "ATTED",
		websiteNamePpdb : "PPDB",
		geneTypeAtted : "ATTED",
		geneTypePpdb : "PPDB",
		baseSequenceMinLength : 50,
		dialogImageUrl : "http://app.linkdata.org/asset/a06f4de4.png",
		callback : function() {},
		loadingImageContainer : "loadingImageContainer",
		loadingImageUrl : "http://app.linkdata.org/asset/67556085.gif",
		loadingMessageClass : "loadingMessage",
		loadingMessage : "Loading linked data...",
		loadingMessageError : "There was an error with loading Linked data. Please refresh the browser",
		serverUrl : "http://linkdata.org/",
		resultAreaUserMessage : "Scroll Left/Right to inspect motifs from this promoter. click on motif sequence to enter advanced view",
		resultAreaUserMessageClass : "resultAreaUserMessageClass"

},
	
	_tag : {
		topResult : "result_top",
		bottomResult : "result_bottom"
	},
	
	_tooltipName : {
		selectProperty : "Select Property",
		atted2 : "atted-ii",
		hanaDb : "HanaDB",
		efp : "eFP",
		ppdb : "ppdb",
		replace : "replace",
		manuallyInputMotif : "userinputmotif",
		motifRanking : "motifranking",
		motifCircatian : "motifcircadian",
		addMotifs : "Add Motifs",
		ranking : "ranking",
		topOrBottom : "top/bottom"
	},
	
	_init : function(containerId, options) {
		this._containerId = containerId;
		this._options = $.extend({}, this._default, options);
		this._baseSequence = this._options.baseSequence;
		this._fixedSequence = this._options.fixedSequence;
		//this._motifConflict = new Application.MotifConflication(this._containerId);
		//this._motifConflict._setHtmlSetFunction(this._doReplaceWithHtml);
		//this._motifConflict._setHtmlSetFunctionOwner(this);
		var date = new Date();
		this._geneInfoContainerId = "gene_info_containerId_" + date.getTime();
		this._initToolTip();
		this._initMotifProperty(this._options);
		this._initAppSequence(this._options);
		this._initMotifView(this._options);
		this._initHeptamer();
		this._initOctamer();
		this._initView();
		this._initDialog();
		this._initAppOption();
	},

_initAppOption : function() {
		var sb =[];
		sb[sb.length] = "";
	},
	
	_initToolTip : function() {
		var self = this;
		self._tooltip = self._options.tooltip || new Application.tooltip();
	},
	
	_initMotifProperty : function(opts) {
		var obj = {
			workId : opts.workId,
			fileName : opts.fileName
		};
		this._motifProperty = new Application.motifProperty(obj);
	},
	
	_initMotifView : function(opts) {
		var self = this;
		var obj = {
			baseSequenceMinLength : opts.baseSequenceMinLength,
			baseSequence : opts.baseSequence,
			replaceSequenceClass : opts.replaceSequenceClass,
			callerObj : self,
			geneLabelClass : opts.geneLabelClass,
			motifMethod : opts.motifMethod
		};
		this._motifView = new Application.MotifView(this._containerId,obj);
	},
	
	_initAppSequence : function(opts) {
		var self = this;
		var timer = new Application.timer();
		var init = function() {
			var seqProperty = self._motifProperty.getPropertyByLabel(self._options.motifSequenceProperty);
			var posProperty = self._motifProperty.getPropertyByLabel(self._options.motifPositionProperty);
			if (seqProperty && posProperty) {
				var obj = {
					workId : opts.workId,
					fileName : opts.fileName,
					baseSequence : self._baseSequence,
					motifSequenceProperty : seqProperty,
					motifPositionProperty : posProperty,
					containerId : self._containerId,
					errorMessageClass : self._options.errorMessageAreaClass,
					baseSequenceMinLength : self._options.baseSequenceMinLength,
					fixedSequence : self._options.fixedSequence
				};
				self._appSequence = new Application.sequence(obj);
				//self._motifConflict._setAppSequnce(self._appSequence);
			} else {
				timer.call(init);
			}
		};
		init();
	},
	
	_initHeptamer : function() {
		this._heptamer = new Application.heptamer();
	},
	
	_initOctamer : function() {
		this._octamer = new Application.octamer();
	},
	
	_initView : function() {
		this._initMainView();
		//this._initDialogView();
		this._initAddAnotherMotifDialogView();
		this._initConflictConfirmDialogView();
	},
	
	_initDialog : function() {
		//this._initMotifViewDialog();
		this._initAddAnotherMotifDialog();
		//this._initMotifConflictConfirmDialog();
		this._initMotifConflictConfirmDialog();
	},
	
	_initMainView : function() {
		var self = this;
		var timer = new Application.timer();
		var fillOptionMethod = function() {
			var optionArray = self._motifProperty.getOptionArray();
			if (optionArray) {
				var sb = [];

sb[sb.length] = "<div class='" + self._options.selectPropertyAreaClass + " row'>";
				sb[sb.length] = "<div class='label left' title='" + self._tooltip.getByKey(self._tooltipName.selectProperty) + "'>" + self._options.selectPropertyCaption + "</div>";
				sb[sb.length] = "<div class='left'>";
				sb[sb.length] = "<select class='" + self._options.selectPropertyClass + "' title='" + self._tooltip.getByKey(self._tooltipName.selectProperty) + "'>";
				sb[sb.length] = "<option value='" + -1 + "' title='" + self._tooltip.getByKey(self._tooltipName.selectProperty) + "'>-- Select Property --</option>";
				$.each(optionArray, function(key, obj) {
					sb[sb.length] = "<option value='" + obj.key + "' title='" + self._tooltip.getByKey(obj.value) + "'>" + obj.value + "</option>";
				});
				sb[sb.length] = "</select>";
				sb[sb.length] = "</div>";
				sb[sb.length] = "</div>";
				
				// 順序の選択のためのエリア
				sb[ sb.length ] = "<div class='" + self._options.selectOrderAreaClass + " row hidden'>";
				sb[ sb.length ] = " <div class='label left'>" + self._options.selectOrderCaption + "</div>";
				sb[ sb.length ] = " <div class='left' title='" + self._tooltip.getByKey(self._tooltipName.topOrBottom) + "'>";
				sb[ sb.length ] = "  <lable><input name='" + self._options.selectOrderName + "' type='radio' value='" + self._options.topValue +"'>";
				sb[ sb.length ] = self._options.topLabel + self._options.rankingRange + "</label>";
				sb[ sb.length ] = "  <label><input name='" + self._options.selectOrderName + "' type='radio' value='"+ self._options.bottomValue +"'>";
				sb[ sb.length ] = self._options.bottomLabel + self._options.rankingRange + "</label>";
				sb[ sb.length ] = " </div>";
				sb[ sb.length ] = "</div>";
				
				//発現ランキングのエリア
				sb[ sb.length ] = "<div class='" + self._options.selectRankingAreaClass + " row hidden'>";
				sb[ sb.length ] = " <div class='label left'>" + self._options.selectRankingCaption + "</div>";
				sb[ sb.length ] = " <div class='left'>";
				sb[ sb.length ] = "  <select class='" + self._options.selectRankingClass + "' ";
				sb[ sb.length ] = "title='" + self._tooltip.getByKey(self._tooltipName.ranking) + "'>";
				sb[ sb.length ] = "   <option value='" + -1 + "'>-- Select Gene --</option>";
				sb[ sb.length ] = "  </select>";
				sb[ sb.length ] = " </div>";
				sb[ sb.length ] = "</div>";
				
				sb[sb.length] = "<div class='" + self._options.databaseInfoClass + " hidden'></div>";
				sb[sb.length] = "<div id='" + self._geneInfoContainerId + "'></div>";
				sb[sb.length] = "<div class='" + self._options.errorMessageAreaClass + " hidden'>error</div>";
				sb[sb.length] = "<div class='" + self._options.resultAreaClass + " hidden'></div>";
				sb[sb.length] = "<div class='" + self._options.resultAreaUserMessageClass + " hidden'>"+ self._options.resultAreaUserMessage +"</div>";
				sb[sb.length] = "<div class='" + self._options.replaceButtonAreaClass + " hidden'>";
				sb[sb.length] = "<a title='" + self._tooltip.getByKey(self._tooltipName.addMotifs) + "' class='" + self._options.replaceButtonClass + " btn btn-lightblue'>Add Motifs</a>&nbsp;";
				//sb[sb.length] = "<a title='" + self._tooltip.getByKey(self._tooltipName.manuallyInputMotif) + "' class='" + self._options.addAnotherMotifButtonClass + " btn btn-lightblue'>Manually Input Motif</a>";
				sb[sb.length] = "</div>";
				sb[sb.length] = "<div class='" + self._options.replaceSequenceClass + " hidden'></div>";
				sb[sb.length] = "<div class='" + self._options.wrappedMotifSequenceShowClass + " hidden'></div>";
				sb[sb.length] = "<span class='" + self._options.fixedSequenceShowClass + " hidden'></span>";
				sb[sb.length] = "<div class='" + self._options.loadingImageContainer + " hidden' align='center'>";
				sb[sb.length] = "<div class='" + self._options.loadingMessageClass + "'>" + self._options.loadingMessage + "</div>";
				sb[sb.length] = "<div>";
				sb[sb.length] = "<img src='" + self._options.loadingImageUrl + "'/>";
				sb[sb.length] = "</div>";
				sb[sb.length] = "</div>";
				$("#" + self._containerId).html(sb.join(""));
				self._initListener();
			} else {
				timer.call(fillOptionMethod);
			}
		};
		fillOptionMethod();
	},
	/*
	_initDialogView : function() {
		var sb = [], self = this, date = new Date(); 
		this._motifViewDialogId = "motifViewDialog_id_" + self._containerId + "_" + date.getTime();
		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] = "<a class='moreInfo'>here</a> to see the additional information about motif";
		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(""));
	},*/
	
	/*
	getMotifViewHtml : function(sequnce) {
		var sb = [], self = this, date = new Date(); 
		this._motifViewDialogId = "motifViewDialog_id_" + self._containerId + "_" + date.getTime();
		sb[sb.length] = "<fieldset class='motifViewDialog'>";
		sb[sb.length] = "<legend>Motif view: edit the position and copy number of a motif</legend>";
		sb[sb.length] = "<div id='" + this._motifViewDialogId + "' class='hidden "+ sequnce +"'>";
		sb[sb.length] = "<input type='hidden' class='sequence'>";
		sb[sb.length] = "<div class='row'>";
		sb[sb.length] = "<span class='label left'>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 class='row'>";
		sb[sb.length] = "<span class='label left'>Number of extra copies</span>";
		sb[sb.length] = "<input type='text' class='extraCopies' value='0'/>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div class='row'>";
		sb[sb.length] = "<span class='label left'>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] = "<a class='moreInfo'>here</a> to see the additional information about motif";
		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>";
		sb[sb.length] = "<a id='motifview_placeMotif' class='btn btn-lightblue'>Place Motif</a>";
		sb[sb.length] = "&nbsp;";
		sb[sb.length] = "<a id='motifview_cancel' class='btn btn-lightblue'>Cancel</a>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<fieldset class='motifviewinfo'>";
		sb[sb.length] = "<span class='motifsequence' /></br>";
		sb[sb.length] = "<span class='motifmethod' /></br>";
		sb[sb.length] = "<span class='motifrecpos' />";
		sb[sb.length] = "</fieldset>";
		sb[sb.length] = "</fieldset>";
		sb[sb.length] = "</div>";
		return sb.join("");
	},*/
	
	_initAddAnotherMotifDialogView : function() {
		var sb = [], self = this, date = new Date(); 
		this._addAnotherMotifDialogId = "addAnotherMotifDialog_id_" + self._containerId + "_" + date.getTime();
		sb[sb.length] = "<div id='" + this._addAnotherMotifDialogId + "' class='hidden'>";
		sb[sb.length] = "<div class='row'>";
		sb[sb.length] = "<div class='left'>Motif Sequence</div>";
		sb[sb.length] = "<div class='left'>";
		sb[sb.length] = "<input type='text' class='anotherSequence'/>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div class='row'>";
		sb[sb.length] = "<div class='left'>Position(-550 to -50)</div>";
		sb[sb.length] = "<div class='left'>";
		sb[sb.length] = "<input type='text' class='anotherPosition'/>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "</div>";
		$("#" + this._containerId).append(sb.join(""));
	},
	
	
	_initConflictConfirmDialogView : function() {
		var sb = [], self = this, date = new Date(); 
		self._motifConflictConfirmDialogId = "motifConflictConfirmDialog_id_" + self._containerId + "_" + date.getTime();
		sb[sb.length] = "<div id='" + self._motifConflictConfirmDialogId + "' class='hidden'>";
		sb[sb.length] = "<div>New motif overlaps with old one. Which one should be kept in overalp regions?</div>";
		sb[sb.length] = "<div class='option'>";
		sb[sb.length] = "<div><label><input type='radio' name='motifReplaceOption' value='new'/>&nbsp;New</label></div>";
		sb[sb.length] = "<div><label><input type='radio' name='motifReplaceOption' value='old'/>&nbsp;Old</label></div>";
		sb[sb.length] = "<div><label><input type='radio' name='motifReplaceOption' value='discard'/>&nbsp;Discard new motif</label></div>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div>";
		sb[sb.length] = "<label><input type='checkbox' checked=checked class='motifReplaceApplyToAll' value='applytoall'/>&nbsp;Apply to all</label>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "</div>";
		$("#" + this._containerId).append(sb.join(""));
	},
	
	_initListener : function() {
		var self = this;
		self._initSelectPropertyListener();
		self._initAddAnotherMotifButtonListener();
		self._initRankingListener();
		self._initSelectOrderListener();
	},
	
	/* プロパティ選択時 */
	_initSelectPropertyListener : function() {
		var self = this, workId = self._options.workId, fileName = self._options.fileName;
		var timer = new Application.timer();
		var setSelectListener = function() {
			if ($("#" + self._containerId + " ." + self._options.selectPropertyClass).length !== 0) {
					$("#" + self._containerId + " ." + self._options.selectPropertyClass).change(function() {
						// すでに後続の部品がすでに表示されている場合に備え、それらを一旦隠す。
						self._appSequence.hideError();
						
						$("#" + self._containerId + " ." + self._options.selectRankingAreaClass ).hide();
						$("#" + self._containerId + " ." + self._options.resultAreaClass).hide();
						$("#" + self._containerId + " ." + self._options.replaceButtonAreaClass).hide();
						$("#" + self._containerId + " ." + self._options.resultAreaUserMessageClass).hide();
						$("#" + self._containerId + " ." + self._options.replaceSequenceClass).html("");
						$("#" + self._containerId + " ." + self._options.replaceSequenceClass).hide();
						$("#" + self._containerId + " ." + self._options.databaseInfoClass).hide();
						$("#" + self._containerId + " #" + self._geneInfoContainerId).hide();
						
						$( "#" + self._containerId + " [name=" + self._options.selectOrderName + "]" ).attr( "checked", false );

// 選択されたのが「-- Select Property --」でなければ
						if( $( this ).val() !== "-1" )
						{
							$( "#" + self._containerId + " ." + self._options.selectOrderAreaClass ).show();
						}
					} );
			} else {
				timer.call(setSelectListener);
			}
		};
		setSelectListener();
	},
	
	_initAddAnotherMotifButtonListener : function() {
		var self = this;
		$("#" + self._containerId + " ." + self._options.addAnotherMotifButtonClass).click(function() {
			self._appSequence.hideError();
			$("#" + self._addAnotherMotifDialogId + " .anotherSequence").val("");
			$("#" + self._addAnotherMotifDialogId + " .anotherPosition").val("");
			$("#" + self._addAnotherMotifDialogId).dialog("open");
		});
	},
	
	_showGenePlot : function(subject, property) {
		var self = this;
		$("#" + self._containerId + " #" + self._geneInfoContainerId).show();
		var options = {
			workId : self._options.workId,
			fileName : self._options.fileName,
			subject : subject,
			property : property
		};
		var app = new Application.geneChart(self._geneInfoContainerId, options);
	},
	
	_showDataBaseInformationList : function() {
		var self = this, seqVal = [];
		$("#" + self._containerId + " .userSequence .hdnSequence").each(function() {
			var tmpPos = $(this).siblings(".hdnCorPosition").val();
			seqVal.push($(this).val() + "[" + tmpPos + "]");
		});
		self._showDatabaseInfo(seqVal.join(", "));
	},
	
	_initReplaceButtonLitener : function() {
		var self = this, workId = self._options.workId, fileName = self._options.fileName;
		$("#" + self._containerId + " ." + self._options.replaceButtonClass).unbind("click");
		$("#" + self._containerId + " ." + self._options.replaceButtonClass).click(function() {
			var seqs = [], nonConflictSeqs = [], seqArray = [], posArray = [], conflictArray = [];
			$("#" + self._containerId + " .userSequence").each(function() {
				seqs.push($(this).text());
				var seq = $(this).find(".hdnSequence").val();
				var pos = $(this).find(".hdnPosition").val();
				seqArray.push(seq);
				posArray.push(pos);
				if (self._hasConfliction(seq, pos)) {
					conflictArray.push(seq + "|" + pos);
				} else {
					nonConflictSeqs.push($(this).text());
				}
			});
			$("#" + self._containerId + " ." + self._options.replaceSequenceClass).html("");
			$("#" + self._containerId + " ." + self._options.replaceSequenceClass).hide();
			if (conflictArray.length > 0) {
				self._doReplace(nonConflictSeqs, seqArray, posArray);
				self._handleConfliction(conflictArray);
			} else {
				self._doReplace(seqs, seqArray, posArray);
			}
		});
	},

_initRankingListener : function() {
		var self = this, workId = self._options.workId, fileName = self._options.fileName;
		var timer = new Application.timer();
		var setSelectListener = function() {
			if($( "#" + self._containerId + " ." + self._options.selectRankingClass ).length !== 0 ) {
				$( "#" + self._containerId + " ." + self._options.selectRankingClass ).change( function() {
					$( "#" + self._containerId + " ." + self._options.loadingImageContainer ).show();
					// すでに後続の部品がすでに表示されている場合に備え、それらを一旦隠す。
					self._appSequence.hideError();
					$( "#" + self._containerId + " ." + self._options.resultAreaClass ).hide();
					$( "#" + self._containerId + " ." + self._options.replaceButtonAreaClass ).hide();
					$( "#" + self._containerId + " ." + self._options.resultAreaUserMessageClass).hide();
					$( "#" + self._containerId + " ." + self._options.replaceSequenceClass ).hide();
					$( "#" + self._containerId + " ." + self._options.replaceSequenceClass).html("");
					$( "#" + self._containerId + " ." + self._options.replaceSequenceClass).hide();
					$( "#" + self._containerId + " ." + self._options.databaseInfoClass ).hide();
					$( "#" + self._containerId + " #" + self._geneInfoContainerId ).hide();
					// 選択されたのが「-- Select Gene --」でなければ
					if( $( this ).val() !== "-1" )
					{
						$( "#" + self._containerId + " ." + self._options.loadingImageContainer ).show();
						var subject = $( "option:selected", this ).val();
						var propLabel = $( "#" + self._containerId + " ." + self._options.selectPropertyClass + " option:selected" ).val();
						self._motifSequence( workId, fileName, subject, propLabel );
					}
				} );
			}
			else
			{
				timer.call( setSelectListener );
			}
		};
		setSelectListener();
	},
	
	/*
	_initMotifSequenceListener : function() {
		var self = this;
		$("#" + self._containerId + " .motifSequence").click(function() {
			//$("." + self._options.motifViewDialogClass).hide();
			var parent = $(this).closest('.userSequence');
			var container = $(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;
			if (self.isMotifViewExists(seq) == false) {
				self.drawMotifView(seq,appropriatePos);
				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).show();
			}
			//$("#" + self._motifViewDialogId).dialog({title: self._default.motifViewDialogTitle + " - " + seq});
			//$("#" + self._motifViewDialogId).dialog("open");
			//$("#" + self._motifViewDialogId).closest('.' + self._options.motifViewDialogClass).show();
		});
	},*/
	
	_initSelectOrderListener : function() {
		var self = this, workId = self._options.workId, fileName = self._options.fileName;
		var timer = new Application.timer();
		var $select = $( "#" + self._containerId + " [name=" + self._options.selectOrderName + "]" );

_getMotifTriple : function(workId, fileName, property) {
		var self = this;
		// まずは8000件を読み込む
		var index = new Application.index(1, 8000);
		var totalList = [];
		var getTriplesByProperty = function( tripleList ) {
			// 新たに読み込んだtripleの配列を連結
			totalList = totalList.concat( tripleList );
			// まだ続きがあれば次の8000件を読み込む
			if( tripleList && tripleList.length === index.getItemCount() ) {
				//再帰的に繰り返し。
				LinkData.getTriplesByProperty( workId, fileName, property, getTriplesByProperty, index.increment() );
			}
			else
			{
				var i;
				var subjects = [];
				var len = totalList.length;
				var cnt = 0;
				// 順序を切り替えるための係数
				var sign = ( self._rankingOrder === self._options.topValue ) ? 1 : -1;
				// 発現量でソート
				totalList.sort( function( a, b ) { return (b.object - a.object) * sign; } );
				// 所定の個数のsubjectが集まるか、全subjectを読み切るまでループ
				for( i = 0; i < len && cnt < self._options.rankingRange; i++ )
				{
					// 重複のチェック
					var j;
					for( j = 0; j < cnt; j++ )
					{
						if( totalList[ i ].subject === subjects[ j ] )
						{
							break;
						}
					}
					// 重複がなければランキングに追加
					if( j === cnt )
					{
						subjects[ cnt++ ] = totalList[ i ].subject;
					}
				}
				self._showRanking( subjects );
			}
		};
		
		//データベースからtriplesを読み込み、getTriplesByPropertyにそれを渡す。
		LinkData.getTriplesByProperty( workId, fileName, property, getTriplesByProperty, index.getIndex() );
	},

_monitorAppDataLoading : function() {
		var self = this;
		var maxRetry = 8; // 8 seconds
		var timer = new Application.timer(); 
		timer.setMaxRetryCount(maxRetry);
		var checkLoadingArea = function() {
			if (maxRetry === 0) {
				$("#" + self._containerId + " ." + self._options.loadingMessageClass).html(self._options.loadingMessageError);
				$("#" + self._containerId + " ." + self._options.loadingImageContainer + " img").hide();
				//alert("App loading error. please refresh");
				return;
			}
			//var dbInfoArea = $("#" + self._containerId + " ." + self._options.databaseInfoClass);
			var dbRankingArea = $("#" + self._containerId + " ." + self._options.selectRankingAreaClass );
			//if (!$(dbInfoArea).is(":visible")) {
			if (!$(dbRankingArea).is(":visible")) {
				timer.call(checkLoadingArea);
			} else {
				return;
			}
			maxRetry--;
		};
		checkLoadingArea();
	},
	
	/* ランキング生成処理の入り口 */
	_showMotifSequence : function(workId, fileName, propLabel ) {
		var self = this, foundAbstFile = false;
		var getFilesByTag = function(resultList) {
			$.each(resultList, function(wId, fileList) {
				$.each(fileList, function(fileKey, fName) {
					var tmpName;
					if( self._rankingOrder === self._options.topValue )
					{
						tmpName = fName.split("_top");
					}
					else
					{
						tmpName = fName.split("_bottom");
					}
					if (fileName.indexOf(tmpName[0]) > -1) {
						self._getAbstFilePropertyList(workId, fileName, wId, fName, propLabel );
						foundAbstFile = true;
						return false;
					}
				});
			});
			if (!foundAbstFile) {
				var property = self._motifProperty.getPropertyByLabel(propLabel);
				self._getMotifTriple(workId, fileName, property);
			}
		};
		self._monitorAppDataLoading();
		if( self._rankingOrder === self._options.topValue )
		{
			LinkData.getFilesByTag(null, self._tag.topResult, getFilesByTag);
		}
		else
		{
			LinkData.getFilesByTag(null, self._tag.bottomResult, getFilesByTag);
		}
	},

_getAbstFilePropertyList : function(workId, fileName, abstWorkId, abstFileName, propLabel) {
		var self = this;
		var getProperties = function(propList) {
			$.each(propList, function(propKey, propValue) {
				var tmpProperty = self._motifProperty._getLabel(propValue);
				if (tmpProperty.indexOf(propLabel) > -1) {
					var property = self._motifProperty.getPropertyByLabel(propLabel);
					self._showMotif(workId, fileName, property, abstWorkId,abstFileName, propValue);
				}
			});
		};
		LinkData.getProperties(abstWorkId, abstFileName, getProperties);
	},
	
	_showMotif : function(workId, fileName, property, abstWorkId, abstFileName, abstProperty) {
		var self = this;
		var index = new Application.index(1, 1000);
		var getTriplesByProperty = function(tripleList) {
			self._showMotifByTripleList(workId, fileName, property, tripleList);
		};
		LinkData.getTriplesByProperty( abstWorkId, abstFileName, abstProperty, getTriplesByProperty, index.getIndex());
	},
	
	_showMotifByTripleList : function( workId, fileName, property, tripleList ) {
		var self = this, i = 0, subject = tripleList [ i ].object;
		var cnt = 0;
		var subjects = [];
		var posProperty = self._motifProperty.getPropertyByLabel( self._options.motifPositionProperty );
		var showMotif = function( posTripleList ) {
			var found = false;
			i++;
			$.each( posTripleList, function( pKey, pValue ) {
				var tmpPos = parseInt( pValue, 10 );
				// モチーフの位置がベース配列の範囲内に収まっていれば
				if( self._options.baseSequenceMinLength < tmpPos && self._options.baseSequence.length >= tmpPos )
				{
					// 発見のフラグを立てる。
					found = true;
					return false;
				}
			} );
			if( found )
			{
				var j;
				// 適合するモチーフをランキングのための配列に追加
				for( j = 0; j < cnt; j++ )
				{
					if( subject === subjects[ j ] )
					{
						break;
					}
				}
				if( j === cnt )
				{
					subjects[ cnt++ ] = subject;
				}
			}
			
			if( cnt < self._options.rankingRange )
			{
				// 次のtripleへ。
				subject = tripleList[ i ].object;
				LinkData.getObjects( workId, fileName, subject, posProperty, showMotif );
			}
			else
			{
				// 規定数の遺伝子が集まった場合はランキング生成へ
				self._showRanking( subjects );
			}
		};
		LinkData.getObjects( workId, fileName, subject, posProperty, showMotif );
	},
	
	//発現ランキングの生成
	_showRanking : function( subjects ) {
		var self = this;
		var $select = $( "#" + self._containerId + " ." + self._options.selectRankingClass );
		$( "option", $select ).remove();
		$select.append( "<option value='-1'>-- Select Gene --</option>" );
		$.each( subjects, function( tKey, tValue ) {
			var gene = self._motifProperty.getGeneBySubject( tValue );
			$select.append( "<option value='" + tValue + "'>" + ( tKey + 1 ) + ":" + gene + "</option>" );
		} );
		$( "#" + self._containerId + " ." + self._options.loadingImageContainer ).hide();
		$( "#" + self._containerId + " ." + self._options.selectRankingAreaClass ).show();
	},
	
	_getDataBaseWebsiteName : function() {
		var self = this;
		var fileName = self._options.fileName;
		var rtn;
		if (fileName.indexOf(self._options.websiteNameAtted) > -1) {
			rtn = self._options.websiteNameAtted;
		} else if (fileName.indexOf(self._options.websiteNamePpdb) > -1) {
			rtn = self._options.websiteNamePpdb;
		} else {
			rtn = "UNKNOWN";
		}
		return rtn;
	},
	
	_getGeneType : function() {
		var self = this, fileName = self._options.fileName;
		var rtn;
		if (fileName.indexOf(self._options.geneTypeAtted) > -1) {
			rtn = self._options.geneTypeAtted;
		} else if (fileName.indexOf(self._options.geneTypePpdb) > -1) {
			rtn = self._options.geneTypePpdb;
		} else {
			rtn = "UNKNOWN";
		}
		return rtn;
	},
	
	_motifSequence : function(workId, fileName, subject, property) {
		var self = this;
		var drawSequence = function(seqHtml) {
			var sb = [];
			sb[sb.length] = "<input type='hidden' class='" + self._default.geneLabelClass + "' value='" + subject + "'/>";
			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();
			}
			self._motifView._initMotifSequenceListener();
			self._initReplaceButtonLitener();
			self._showDataBaseInformationList();
			self._showGenePlot(subject, property);
			$("#" + self._containerId + " ." + self._options.resultAreaClass).show();
			$("#" + self._containerId + " ." + self._options.resultAreaClass).scrollLeft(10000);
			$("#" + self._containerId + " ." + self._options.replaceButtonAreaClass).show();
			$("#" + self._containerId + " ." + self._options.resultAreaUserMessageClass).show();
			$("#" + self._containerId + " ." + self._options.loadingImageContainer).hide();
		};
		self._appSequence.getSequenceHtml(subject, drawSequence);
	},
	/*
	_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) {
		var rtn;
		if (seq && seq.trim().length === 7) {
			rtn = this._heptamer.getBySequence(seq);
		} else if (seq && seq.trim().length === 8) {
			rtn = this._octamer.getBySequence(seq);
		}
		return rtn;
	},
	
	_showDatabaseInfo : function(seqVal) {
		var self = this, workId = self._options.workId, fileName = self._options.fileName, appName = self._options.appName;
		var propLabel = $("option:selected", "#" + self._containerId + " ." + self._options.selectPropertyClass).val();
		var subject = $("#" + self._containerId + " ." + self._options.geneLabelClass).val();
		var label = self._motifProperty._getDisplayLabel(propLabel);
		label = (label && label.trim().length !== 0) ? label : propLabel;
		var usedMotif = (seqVal.length !== 0) ? seqVal : "-";
		var dbInfoHtml = self._getDatabaseInfo(workId, fileName, appName, subject, label, usedMotif);
		$("#" + self._containerId + " ." + self._options.databaseInfoClass).html(dbInfoHtml);
		$("#" + self._containerId + " ." + self._options.databaseInfoClass).show();
		self._previewListener(subject);
	},
	
	_previewListener : function(subject) {
		var self = this;
		var gene = self._motifProperty.getGeneBySubject(subject);
		self._dbPreviewListener();
		self._genePreviewListener(subject);
		self._attedPreviewListener(subject);
		self._ppdbPreviewListener(gene);
		self._efpPreviewListener(gene);
		self._hannaDbPreviewListener(gene);
	},
	
	_dbPreviewListener : function() {
		var self = this;
		var workId = self._options.workId, fileName = self._options.fileName;
		var url = self._options.serverUrl + "work/" + workId + "/" + fileName + ".html#work_information";
		$("#" + self._containerId + " ." + self._options.dbInfoLinkClass).click(function() {
			self._showPopupWindow(url);
		});
	},
	
	_genePreviewListener : function(subject) {
		var self = this;
		$("#" + self._containerId + " ." + self._options.geneInfoLinkClass).click(function() {
			self._showPopupWindow(subject);
		});
	},
	
	_attedPreviewListener : function(subject) {
		var self = this;
		$("#" + self._containerId + " ." + self._options.geneInfoAttedLinkClass).click(function() {
			self._showPopupWindow(subject);
		});
	},
	
	_ppdbPreviewListener : function(gene) {
		var self = this;
		var url = "http://ppdb.agr.gifu-u.ac.jp/ppdb/cgi-bin/display.cgi?organism=At&gene=" + gene.toString().toUpperCase();
		$("#" + self._containerId + " ." + self._options.geneInfoPpdbLinkClass).click(function() {
			self._showPopupWindow(url);
		});
	},
	
	_efpPreviewListener : function(gene) {
		var self = this;
		var url = "http://bbc.botany.utoronto.ca/efp/cgi-bin/efpWeb.cgi?dataSource=Developmental_Map&modeInput=Absolute&primaryGene=" + gene;
		$("#" + self._containerId + " ." + self._options.geneInfoEfpLinkClass).click(function() {
			self._showPopupWindow(url);
		});
	},
	
	_hannaDbPreviewListener : function(gene) {
		var self = this;
		var url = "http://evolver.psc.riken.jp/seiken/GENE/" + gene.toUpperCase() + ".html";
		$("#" + self._containerId + " ." + self._options.geneInfoHannaDbLinkClass).click(function() {
			self._showPopupWindow(url);
		});
	},
	
	_getDatabaseInfo : function(workId, fileName, method, subject, property, motif) {
		var self = this;
		var gene = self._motifProperty.getGeneBySubject(subject);
		var sb = [];
		sb[sb.length] = "<div class='row'>";
		sb[sb.length] = "<div class='label left'>Database</div>";
		sb[sb.length] = "<div class='left'>";
		sb[sb.length] = "<span title='" + self._tooltip.getByKey(fileName) + "'>" + fileName + "</span>";
		sb[sb.length] = "<a href='javascript:void(0);' class='externalLink " + self._options.dbInfoLinkClass + "'>LinkData</a>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div class='row'>";
		sb[sb.length] = "<div class='label left'>Tool</div>";
		sb[sb.length] = "<div class='left' title='" + self._tooltip.getByKey(self._tooltipName.motifRanking) + "'>" + method + "</div>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div class='row'>";
		sb[sb.length] = "<div class='label left'>Gene Locus</div>";
		sb[sb.length] = "<div class='left'>";
		//sb[sb.length] = "<a href='javascript:void(0);' class='externalLink " + self._options.geneInfoLinkClass + "'>" + gene + "</a>";
		sb[sb.length] = "<span>" + gene + "</span>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div class='row'>";
		sb[sb.length] = "<div class='label left'>Motif Analysis Links</div>";
		sb[sb.length] = "<div class='left'>";
		sb[sb.length] = "<a title='" + self._tooltip.getByKey(self._tooltipName.atted2) + "' href='javascript:void(0);' class='externalLink " + self._options.geneInfoAttedLinkClass + "'>ATTED-II</a>";
		sb[sb.length] = "<a title='" + self._tooltip.getByKey(self._tooltipName.ppdb) + "' href='javascript:void(0);' class='externalLink " + self._options.geneInfoPpdbLinkClass + "'>PPDB</a>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div class='row'>";
		sb[sb.length] = "<div class='label left'>Gene Expression Visualization Links</div>";
		sb[sb.length] = "<div class='left'>";
		sb[sb.length] = "<a title='" + self._tooltip.getByKey(self._tooltipName.efp) + "' href='javascript:void(0);' class='externalLink " + self._options.geneInfoEfpLinkClass + "'>eFP</a>";
		sb[sb.length] = "<a title='" + self._tooltip.getByKey(self._tooltipName.hanaDb) + "' href='javascript:void(0);' class='externalLink " + self._options.geneInfoHannaDbLinkClass + "'>HanaDB</a>";
		sb[sb.length] = "</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' title='" + self._tooltip.getByKey(property) + "'>" + 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'>" + motif + "</div>";
		sb[sb.length] = "</div>";
		return sb.join("");
	}
	
	/*
	_replaceWithSequence : function(seq, pos, extraCopies, basePairs) {
		var self = this, sb = [];
		//var html = self._appSequence.replaceWith(seq, pos, extraCopies, basePairs);
		self._placeMotifViewSequnce(seq, pos, extraCopies, basePairs);
		var html = self._appSequence.getReColoredMotifViewSequnce(seq, pos, extraCopies, basePairs, self._options.replaceSequenceClass);
		var subject = $("#" + self._containerId + " ." + self._options.geneLabelClass).val();
		var gene = self._motifProperty.getGeneBySubject(subject);
		var geneType = self._getGeneType();
		sb[sb.length] = html;
		sb[sb.length] = "<input type='hidden' class='gene' value='" + gene + "'/>";
		sb[sb.length] = "<input type='hidden' class='geneType' value='" + geneType + "'/>";
		$("#" + self._containerId + " ." + self._options.replaceSequenceClass).html(sb.join(""));
		$("#" + self._containerId + " ." + self._options.replaceSequenceClass).show();
		$("#" + self._containerId + " ." + self._options.replaceSequenceClass).scrollLeft(10000);
		var seqLabel = seq + "[" + pos + "]";
		self._showDatabaseInfo(seqLabel);
		self._options.callback();
	},*/
	/*
	_placeMotifViewSequnce : function(seq, pos, extraCopies, basePairs) {
		var self =this,conflictArray = [];
		var corPos;
		//replaceSequenceByOption 
		var oldSequence = $("#" + self._containerId + " ." + self._options.replaceSequenceClass).text();
		if (!oldSequence) {
			oldSequence = $("#" + self._containerId + " ." + self._options.resultAreaClass + " .baseSequence").html();
		}
		for (var j = 0; j < extraCopies + 1; j++) {
			if (j == 0) {
				corPos = pos;
			} else {
				corPos = corPos + (basePairs) + (seq.length);
			}
			if (self._hasConfliction(seq, corPos, oldSequence)) {
				conflictArray.push(seq + "|" + corPos);
			} else {
				self._replaceSequenceByOption("new", seq, corPos);
			}	
			self._handleConfliction(conflictArray);
		}
		//return out.join(""); 
	}*/
};

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

Application.Util.prototype = {
	
	_containerId : null,
	_errTextClass : null,
	_manualMotifErrorDialogId : null,
	_baseSequenceMinLength : null,
	_baseSequenceLength : null,
	
	_init : function(args) {
		this._containerId = args.containerId;
		this._errTextClass = args.errTextClass;
		this._baseSequenceMinLength = args.baseSequenceMinLength;
		this._baseSequenceLength = args.baseSequenceLength;
		
		this._motifErrorDialogId = "_manulaMotifMotif_Err_Dialog_" + this._containerId;
		this._initMotifInitErrDialogView();
		this._initMotifErrorDialog();
	},
	
	_initMotifInitErrDialogView : function() {
		var sb = [];
		sb[sb.length] = "<div id='"+ this._motifErrorDialogId +"' class='hidden'>";
		sb[sb.length] = "<div>Following error(s) found while trying to add the add/place the motif</div>";
		sb[sb.length] = "<ul class='motiferror'></ul>";
		sb[sb.length] = "</br>";
		sb[sb.length] = "<div>Would you like to correct it automatically ?</div>";
		sb[sb.length] = "</div>";
		$("#" + this._containerId).append(sb.join(""));
	},

_initMotifErrorDialog : function() {
		var self = this;
		$("#" + self._motifErrorDialogId).dialog({
			autoOpen: false,
			width: 600,
			model: true
		});
	},
	
	_validateManulMotifCenterPosition : function(sequnceLength,position) {
		if (sequnceLength > 0) {
			$("#" + this._motifErrorDialogId + " .motiferror").html("");
			var corProsition = this.getCalculatedMotifInsertRange(sequnceLength);
			position = Math.abs(position);
			if ((position < corProsition.startPoint) || (position > corProsition.endPoint)) {
				position = corProsition.startPoint;
				this._putManulMotifError("Defined position is out of range. So assigned the default postion as -" + position);
			}	
			var val = sequnceLength % 2;
			position = Math.abs(position);
			var havingDecimalEntry = (position.toString().indexOf(".") !== -1) ? true : false;
			if (val > 0) {
				// odd length case
				if (havingDecimalEntry === true) {
					position = position.toString().split(".")[0];
					this._putManulMotifError("The sequnce lenght is an odd no. For odd lengths, the correct postion should be - " + position);
				}
			} else {
				//even length case
				if (havingDecimalEntry === false) {
					position = position + 0.5;
					this._putManulMotifError("The sequnce lenght is an even no. For  even lengths, the correct postion should be - " + position);
				} else {
					var decPart = position.toString().split(".")[1];
					if (decPart !== "5") {
						position = position.toString().split(".")[0] + ".5";
						this._putManulMotifError("The sequnce lenght is an odd no. For odd lengths, the correct postion should be - " + position);
					}
				}
			}
		}
		return position;
	},
	
	_putManulMotifError : function(errInfo) {
		var errText = $("#" + this._motifErrorDialogId + " .motiferror");
		var content = errText.html();
		errText.html(content + "</br>" + "<li><span class='"+ this._errTextClass +"'>" + errInfo + "</span></li>");
	},
	
	getCalculatedMotifInsertRange : function(sequnceLength) {
		var centerPos = Math.floor(sequnceLength / 2);
		var corStartPoint = this._baseSequenceMinLength + centerPos;
		var corEndPoint = this._baseSequenceLength - centerPos;
		if (this.isValueEven(sequnceLength) === false) {
			corStartPoint = corStartPoint + 1;
		} else {
			corStartPoint = corStartPoint + 0.5;
			corEndPoint = corEndPoint + 0.5;
		}
		var obj = {
			startPoint : corStartPoint,
			endPoint : corEndPoint
		};
		return obj;
	},
	
	isValueEven : function(val) {
		var rtn;
		val = val % 2;
		if (val > 0) {
			rtn = false;	
		} else {
			rtn = true;
		}
		return rtn;
	},
	
	_getMotifEntryErrButtonArray : function(correctPos,textEleRef) {
		var self = this;
		return [
				{
					text: "Yes",
					click : function() {
						$(textEleRef).val("-" + Math.abs(correctPos));
						$(this).dialog("close");
					}
				},
				{
					text: "No",
					click : function() {
						$(this).dialog("close");
					}
				}
			];
	},
	
	_showMotifErrorDialog : function(corectedPos,textEleRef) {
		var bArray = this._getMotifEntryErrButtonArray(corectedPos,textEleRef);
		var dialogTitle =  "Motif Insert/Place Errors";
		$("#" + this._motifErrorDialogId).dialog({title : dialogTitle});
		$("#" + this._motifErrorDialogId).dialog({buttons : bArray});
		$("#" + this._motifErrorDialogId).dialog("open");
	}
};

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

Application.MotifView.prototype = {
	
	_containerId : null,
	_motifViewAreaId : null,	
	_baseSequenceMinLength : null,
	_baseSequence : null,
	_replaceSequenceClass : null,
	_callerObj : null,
	_geneLabelClass : null,
	_motifViewErrDlgId : null,
	_appUtil : null,
	_motifMethod : null,
	
	_init : function(containerId,args) {
		date = new Date(); 
		this._containerId = containerId;
		this._baseSequenceMinLength = args.baseSequenceMinLength;
		this._baseSequence = args.baseSequence;
		this._replaceSequenceClass = args.replaceSequenceClass;
		this._callerObj = args.callerObj;
		this._geneLabelClass = args.geneLabelClass;
		this._motifMethod = args.motifMethod;
		this._motifViewAreaId = "motifViewDialog_id_" + this._containerId + "_" + date.getTime();
		this._motifViewErrDlgId = "motifViewErrDlg_Id_" + this._containerId + "_" + date.getTime();
		//this._initMotivViewErrDialogView();
		//this._initMotivViewErrDialog();
		this._initAppUtil();
	},
	
	defaults : {
		dialogErrorMessageClass : 'dialogErrorMessage',
		dialogOutRangeValueMessage : "Please input a value between {0} and {1}",
		geneLabelClass : "geneUrl"
	},
	/*
	_initMotivViewErrDialogView : function() {
		$("#" + this._motifViewErrDlgId).dialog({
			resizable: false,
			modal: true,
			autoOpen: false,
			title: 'Invalid Motif Position'
		});	
		var buttons = [
				{
					text: "Ok",
					click : function() {
						$(this).dialog("close");
					}
				}
		];
		$("#" + this._motifViewErrDlgId).dialog({buttons:buttons});
	},
	
	_initMotivViewErrDialog : function() {
		$("#" + this._motifViewErrDlgId).dialog({
			resizable: false,
			modal: true,
			autoOpen: false
		});	
	},*/
	
	_initAppUtil : function() {
		var self = this;
		var obj = {
			containerId : self._containerId,
			errTextClass : 'errorText',
			baseSequenceMinLength : self._baseSequenceMinLength,
			baseSequenceLength : self._baseSequence.length
		};
		self._appUtil = new Application.Util(obj);
	},
	
	getMotifViewHtml : function(sequnce) {
		var sb = [], self = this, date = new Date(); 
		sb[sb.length] = "<fieldset class='motifViewDialog'>";
		sb[sb.length] = "<legend>Motif view: edit the position and copy number of a motif</legend>";
		sb[sb.length] = "<div id='" + this._motifViewAreaId + "' class='hidden "+ sequnce +"'>";
		sb[sb.length] = "<input type='hidden' class='sequence'>";
		sb[sb.length] = "<div class='row'>";
		sb[sb.length] = "<span class='label left'>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 class='row'>";
		sb[sb.length] = "<span class='label left'>Number of extra copies</span>";
		sb[sb.length] = "<input type='text' class='extraCopies' value='0'/>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div class='row'>";
		sb[sb.length] = "<span class='label left'>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 explink'>Click ";
		//sb[sb.length] = "<a class='moreInfo'>here</a> to see the additional information about motif from " + self._getDataBaseWebsiteName() + " website";
		sb[sb.length] = "<a class='moreInfo'>here</a> to see the additional information about motif";
		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>";
		sb[sb.length] = "<a id='motifview_placeMotif' class='btn btn-lightblue'>Place Motif</a>";
		sb[sb.length] = "&nbsp;";
		//sb[sb.length] = "<a id='motifview_cancel' class='btn btn-lightblue'>Cancel</a>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<fieldset class='motifviewinfo'>";
		sb[sb.length] = "<div style='float:left'>Motif Sequence:</div>";
		sb[sb.length] = "<div class='motifviewsequence'></div>";
		sb[sb.length] = "<div style='width=100%;float:left'>";
		//sb[sb.length] = "<span class='motifsequence' /></br>";
		sb[sb.length] = "<span class='motifmethod' /></br>";
		sb[sb.length] = "<span class='motifrecpos' />";
		sb[sb.length] = "</div>";
		sb[sb.length] = "</fieldset>";
		sb[sb.length] = "</fieldset>";
		sb[sb.length] = "</div>";
		return sb.join("");
	},
		
	drawMotifView : function(sequence,appropriatePos) {
		var self = this;
		var htmlContent = this.getMotifViewHtml(sequence);
		var dialogSelector = "#" + self._motifViewAreaId + "." + sequence;
		//$("#" + this._containerId).append(htmlContent);
		$("#" + this._containerId + " ." + self._replaceSequenceClass).before(htmlContent);
		$(dialogSelector).find(".motifviewsequence").html(sequence);
		$(dialogSelector).find(".motifmethod").html("User Input: " + this._motifMethod);
		$(dialogSelector).find(".motifrecpos").html("Motif Recommended Position: -" + Math.abs(appropriatePos));
		$(dialogSelector).show();
		
		$(dialogSelector).find("#motifview_placeMotif").click(function() {
			var seq = $(dialogSelector).find(".sequence").val();
			var pos = Math.abs($(dialogSelector).find(".position").val());
			var extraCopies = parseInt($(dialogSelector).find(".extraCopies").val(), 10);
			var basePairs = parseInt($(dialogSelector).find(".basePairs").val(), 10);
			var minPos = parseFloat($(dialogSelector).find(".minSeq").html());
			var maxPos = parseFloat($(dialogSelector).find(".maxSeq").html());
			//if (minPos > pos || maxPos < pos) {
				//$("#" + self._motifViewErrDlgId + " .errinfo").html(self.defaults.dialogOutRangeValueMessage.replace("{0}", minPos).replace("{1}", maxPos));
				//$dialogError = $("#" + self._motifViewAreaId + " ." + self.defaults.dialogErrorMessageClass);
				//$dialogError.html(self.defaults.dialogOutRangeValueMessage.replace("{0}", minPos).replace("{1}", maxPos));
				//$dialogError.show();
				//$("#" + self._motifViewErrDlgId).dialog('open');
				//return;
			//}
			var position = self._appUtil._validateManulMotifCenterPosition(seq.length,pos);
			if (Math.abs(pos) !== position) {
				self._appUtil._showMotifErrorDialog(position,$(dialogSelector).find(".position"));
			} else {
				$(dialogSelector).find(".position").val("-" + Math.abs(pos));
				self._replaceWithSequence(seq, pos, extraCopies, basePairs);
			}
			//self.hideError();
			//$(this).dialog("close");
		});
		/*
		$("#" + this._containerId).find("#motifview_cancel").click(function() {
			$("#" + self._motifViewDialogId).remove();
		});*/
	},
	
	_replaceWithSequence : function(seq, pos, extraCopies, basePairs) {
		var self = this, sb = [];
		self._placeMotifViewSequnce(seq, pos, extraCopies, basePairs);
		var html = self._callerObj._appSequence.getReColoredMotifViewSequnce(seq, pos, extraCopies, basePairs, self._replaceSequenceClass);
		
		self._callerObj._doReplaceWithHtml(html);
		/*
		var subject = $("#" + self._containerId + " ." + self._geneLabelClass).val();
		var gene = self._callerObj._motifProperty.getGeneBySubject(subject);
		var geneType = "";
		if (self._callerObj._getGeneType) {
			geneType = self._callerObj._getGeneType();
		}
		sb[sb.length] = html;
		sb[sb.length] = "<input type='hidden' class='gene' value='" + gene + "'/>";
		sb[sb.length] = "<input type='hidden' class='geneType' value='" + geneType + "'/>";
		$("#" + self._containerId + " ." + self._replaceSequenceClass).html(sb.join(""));
		$("#" + self._containerId + " ." + self._replaceSequenceClass).show();
		$("#" + self._containerId + " ." + self._replaceSequenceClass).scrollLeft(10000);
		var seqLabel = seq + "[" + pos + "]";
		self._callerObj._showDatabaseInfo(seqLabel);
		self._callerObj._options.callback();*/
	},
	
	_placeMotifViewSequnce : function(seq, pos, extraCopies, basePairs) {
		var self =this,conflictArray = [];
		var corPos;
		var j;
		//replaceSequenceByOption 
		var oldSequence = $("#" + self._containerId + " ." + self._replaceSequenceClass).text();
		if (!oldSequence) {
			oldSequence = $("#" + self._containerId + " ." + self.defaults.resultAreaClass + " .baseSequence").html();
		}
		for ( j = 0; j < extraCopies + 1; j++) {
			if (j === 0) {
				corPos = pos;
			} else {
				corPos = corPos + (basePairs) + (seq.length);
			}
			if (self._callerObj._hasConfliction(seq, corPos, oldSequence)) {
				conflictArray.push(seq + "|" + corPos);
			} else {
				self._callerObj._replaceSequenceByOption("new", seq, corPos);
			}	
			self._callerObj._handleConfliction(conflictArray);
		}
		//return out.join(""); 
	},
	
	isMotifViewExists : function(sequnce) {
		var rtn;
		if ($("#" + this._motifViewAreaId + "."+ sequnce).length > 0) {
			rtn = true;	
		} else {
			rtn = false;	
		}
		return rtn;
	},
	
	_getMinPosition : function(seq) {
		var self = this;
		var mod = seq.length % 2;
		var tHold = (mod === 1) ? 1 : 0.5;
		return self._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;
	},
		
	_initPositionInsert : function(seq, pos) {
		return;
		/*
		var self = this;
		var mod = seq.length % 2;
		$("#" + self._motifViewAreaId + " .position").unbind("keyup");
		$("#" + self._motifViewAreaId + " .position").keyup(function() {
			var val = $(this).val();
			if (isNaN(val)) {
				$(this).val(pos);
				return;
			}
			var tmpVal = new String(Math.abs(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]);
				}
			}
		});
		*/
	},
	
	_initMotifSequenceListener : function() {
		var self = this;
		$("#" + self._containerId + " .motifSequence").click(function() {
			//$("." + self._options.motifViewDialogClass).hide();
			var parent = $(this).closest('.userSequence');
			var container = $(this).closest('.userSequence');
			var seq = $(parent).find(".hdnSequence").val();
			//var pos = $(parent).find(".hdnPosition").val();
			var pos = $(parent).find(".hdnCorPosition").val();
			var appropriatePos = 0;
			var seqEl = null;
			if (self._callerObj._getSeqElBySeq) {
				seqEl = self._callerObj._getSeqElBySeq(seq);
				appropriatePos = (seqEl && seqEl.getAppropriatePos()) ? seqEl.getAppropriatePos() : pos;
			} else {
				appropriatePos = pos;
			}
			if (self.isMotifViewExists(seq) === false) {
				self.drawMotifView(seq,appropriatePos);
				self._initSequencePopup(seqEl,seq);
				var dialogSelector = "#" + self._motifViewAreaId + "." + seq;
				$(dialogSelector + " ." + self.defaults.dialogErrorMessageClass).hide();
				$(dialogSelector + " .sequence").val(seq);
				$(dialogSelector + " .position").val("-" + Math.abs(appropriatePos));
				$(dialogSelector + " .extraCopies").val(0);
				$(dialogSelector + " .basePairs").val(0);
				$(dialogSelector + " .minSeq").html(self._getMinPosition(seq));
				$(dialogSelector + " .maxSeq").html(self._getMaxPosition(seq));
				self._initPositionInsert(seq, appropriatePos);
				$(dialogSelector).show();
			}
			//$("#" + self._motifViewDialogId).dialog({title: self._default.motifViewDialogTitle + " - " + seq});
			//$("#" + self._motifViewDialogId).dialog("open");
			//$("#" + self._motifViewDialogId).closest('.' + self._options.motifViewDialogClass).show();
		});
	},
	
	_initSequencePopup : function(seqEl,sequence) {
		var self = this;
		var dialogSelector = "#" + self._motifViewAreaId + "." + sequence;
		$(dialogSelector + " .moreInfo").unbind("click");
		var url = (seqEl && seqEl.getExternalUrl()) ? seqEl.getExternalUrl() : "#";
		if (url === "#") {
			$(dialogSelector + " .explink").html("&nbsp");
		} else {
			$(dialogSelector + " .explink").show();
		}
		$(dialogSelector + " .moreInfo").click(function() {
			self._callerObj._showPopupWindow(url);
		});
	}
};

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

Application.geneChart.prototype = {
	
	_containerId : null,
	_options : null,
	_workId : null,
	_fileName : null,
	_subject : null,
	_property : null,
	_highChartContainerId : null,
	_appProperty : null,
	
	_default : {
		filterNamespace : "http://linkdata.org/",
		acceptPropLabelPrefix : "label:",
		yAxisLabel : "Gene Expression Level"
	},
	
	_init : function(containerId, options) {
		this._containerId = containerId;
		this._options = $.extend({}, this._default, options);
		this._workId = this._options.workId;
		this._fileName = this._options.fileName;
		this._subject = this._options.subject;
		this._property = this._options.property;
		var date = new Date();
		this._highChartContainerId = "gene_chart_" + date.getTime();
		this._initAppProperty(this._options);
		this._initView();
		this._drawHighChart(this._subject, this._property);
	},
	
	_initAppProperty : function(opts) {
		var obj = {
			workId : opts.workId,
			fileName : opts.fileName
		};
		this._appProperty = new Application.motifProperty(obj);
	},
	
	_initView : function() {
		var self = this;
		var sb = [];
		sb[sb.length] = "<div id='" + self._highChartContainerId + "'></div>";
		$("#" + self._containerId).html(sb.join(""));
	},
	
	_ignore : function(label) {
		var self = this;
		if (label.indexOf(self._default.acceptPropLabelPrefix) > -1) {
			return false;
		}
		return true;
	},
	
	_getDisplayLabel : function(value) {
		var self = this;
		var propLabel = value;
		var arr = value.split(self._default.acceptPropLabelPrefix);
		if (arr.length > 1) {
			propLabel = decodeURIComponent(arr[1]);
		}
		return propLabel;
	},
	
	_drawHighChart : function(subject, highlightProperty) {
		var self = this;
		var getDataArray = function(tripleList) {
			var dataArray = [];
			var dataObject = {};
			var array = [];
			var duplicateProperty = [];
			$.each (tripleList, function(tKey, tValue) {
				var property = tValue.property;
				if (property.indexOf(self._options.filterNamespace) === -1) {
					return;
				}
				if ($.inArray(property, duplicateProperty) > -1) {
					return;
				}
				var label = self._getLabelAfterHash(property);
				if (!self._ignore(label)) {
					var val = parseFloat(tValue.object);
					if (highlightProperty === property) {
						val = self._getHighLightColumn(parseFloat(tValue.object));
					}
					array.push(val);
					duplicateProperty.push(property);
				}
			});
			dataObject.name = self._getLabel(subject);
			dataObject.data = array;
			dataArray.push(dataObject);
			self._getXCategory(tripleList, dataArray, highlightProperty);
		};
		LinkData.getTriplesBySubject(self._workId, self._fileName, subject, getDataArray);
	},
	
	_getXCategory : function(tripleList, dataArray, highlightProperty) {
		var self = this;
		var array = [];
		var duplicateProperty = [];
		var hLabel = self._getLabelAfterHash(highlightProperty);
		$.each (tripleList, function(tKey, tValue) {
			var property = tValue.property;
			if (property.indexOf(self._options.filterNamespace) === -1) {
				return;
			}
			if ($.inArray(property, duplicateProperty) > -1) {
				return;
			}
			var label = self._getLabelAfterHash(property);
			if (!self._ignore(label)) {
				var displayLabel = self._getDisplayLabel(label);
				var hDisplayLabel = self._getDisplayLabel(hLabel);
				if (displayLabel === hDisplayLabel) {
					displayLabel = "<span style=\"color:#FB3B44\">" + hDisplayLabel + "</span>";
				}
				array.push(displayLabel);
				duplicateProperty.push(property);
			}
		});
		self._drawChart(self._highChartContainerId, dataArray, array);
	},
	
	_getHighLightColumn : function(val) {
		var obj = {};
		obj.y = val;
		obj.marker = {
			lineWidth: 3,
			lineColor: "#FB3B44",
			fillColor: "#FB3B44"
		};
		return obj;
	},
	
	_drawChart : function(containerId, dataArray, xCategory) {
		var self = this;
		var chart = new Highcharts.Chart({
			chart: {
				renderTo: containerId,
				type: 'line',
				marginRight: 130,
				marginBottom: 125
			},
			title: {
				text: self._fileName
			},
			xAxis: {
				categories: xCategory,
				labels : {
					rotation: 315
				}
			},
			yAxis: {
				title: {
					text: self._default.yAxisLabel
				}
			},
			tooltip: {
				formatter: function() {
					return '<b>'+ this.series.name + '</b><br/>' + this.x + ' [' + this.y + ']';
				}
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'top',
				x: -10,
				y: 100,
				borderWidth: 0
			},
			series: dataArray
		});
	},
	
	_getLabel : function(value) {
		var self = this, label;
		if (value.indexOf("#") > -1) {
			label = self._getLabelAfterHash(value);
		} else {
			label = self._appProperty.getGeneBySubject(value);
		}
		if (!label) {
			label = value;
		}
		return label;
	},
	
	_getPropertyLabel : function(value) {
		var propLabel = value;
		var arr = value.split("#");
		if (arr.length > 1) {
			propLabel = decodeURIComponent(arr[1]);
			propLabel = this._appProperty.getPropertyNameByLabel(propLabel);
		}
		return propLabel;
	},
	
	_getLabelAfterHash : function(value) {
		var propLabel = value;
		var arr = value.split("#");
		if (arr.length > 1) {
			propLabel = decodeURIComponent(arr[1]);
		}
		return propLabel;
	}
	
};

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

Application.motifProperty.prototype = {

_options : null,
	_propMap : null,
	_nameMap : null,
	_optionArray : null,
	
	_default : {
		acceptPropLabelPrefix : "label:",
		subjectATTEDUriPhrase : "http://atted.jp/data/locus/",
		subjectPPDBUriPhrase : "http://ppdb.agr.gifu-u.ac.jp/ppdb/cgi-bin/display.cgi?organism=At&gene="
	},
	
	_init : function(options) {
		this._options = $.extend({}, this._default, options);
		this._propMap = [];
		this._nameMap = [];
		this._initPropMap(this._options);
	},
	
	_initPropMap : function(opts) {
		var self = this, workId = opts.workId, fileName = opts.fileName;
		var method = function(properties) {
			self._fillPropMap(self, properties);
			self._initOptionArray(properties);
		};
		LinkData.getProperties(workId, fileName, method);
	},
	
	_fillPropMap : function(self, properties) {
		$.each(properties, function(key, value) {
			var label = self._getLabel(value);
			if (!self._propMap[label]) {
				self._propMap[label] = value;
			}
		});
	},
	
	_initOptionArray : function(propertyList) {
		var self = this, list = {};
		var workId = self._options.workId, fileName = self._options.fileName;
		self._optionArray = [];
		$.each(propertyList, function(key, value) {
			var propLabel = self._getLabel(value);
			if (!self._ignore(propLabel)) {
				var obj = {};
				obj.key = propLabel;
				obj.value = self._getDisplayLabel(propLabel);
				self._optionArray.push(obj);
			}
		});
	},
	
	_ignore : function(label) {
		var self = this;
		if (label.indexOf(self._default.acceptPropLabelPrefix) > -1) {
			return false;
		}
		return true;
	},
	
	_getDisplayLabel : function(value) {
		var self = this;
		var propLabel = value;
		var arr = value.split(self._default.acceptPropLabelPrefix);
		if (arr.length > 1) {
			propLabel = decodeURIComponent(arr[1]);
		}
		return propLabel;
	},
	
	_getLabel : function(value) {
		var propLabel = value;
		var arr = value.split("#");
		if (arr.length > 1) {
			propLabel = decodeURIComponent(arr[1]);
		}
		return propLabel;
	},

getOptionArray : function() {
		return this._optionArray;
	},
	
	getPropertyByLabel : function(label) {
		return this._propMap[label];
	},
	
	getGeneBySubject : function(subject) {
		var self = this, htmlExt = ".html", geneLabel;
		if (subject.indexOf(self._default.subjectATTEDUriPhrase) > -1) {
			geneLabel = subject.replace(self._default.subjectATTEDUriPhrase, "");
		} else if (subject.indexOf(self._default.subjectPPDBUriPhrase) > -1) {
			geneLabel = subject.replace(self._default.subjectPPDBUriPhrase, "");
		}
		if (geneLabel && geneLabel.indexOf(htmlExt) > -1) {
			geneLabel = geneLabel.replace(htmlExt, "");
		}
		return geneLabel;
	}
	
};

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: "Some motifs overlap the protected (minimal promoter) region : {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);
		var pos = parseInt(position, 10);
		var baseSeqLen = baseSequence.length;
		var suffixLen = baseSeqLen - (tHold + pos);
		var motifCorectedStartingPoint = position - (seqLen / 2);
		
		var sb = [];
		if (motifCorectedStartingPoint >= this._options.baseSequenceMinLength && suffixLen >= 0) {
			var i;
			for ( 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 + "'/>");
			sb.push("<input type='hidden' class='hdnCorPosition' value='-" + position + "'/>");
		} else {
			//_showError($appContainer, opts.msgOutOfRangeSequence.replace("{0}", sequence));
			this._outOfRangeArray.push(sequence + "[-" + position + "]");
			this._showError(this._default.msgOutOfRangeSequence.replace("{0}", this._outOfRangeArray.join(", ")));
		}
		return sb.join("");
	},
	
	_isValidSequenceList : function(seqs) {
		var count = seqs.length;
		var maxlength = 0;
		var i;
		for ( i = 0; i < count; i++) {
			if (seqs[i].length > maxlength) {
				maxlength = seqs[i].length;
			}
		}
		var result = true;
		for ( i = 0; i < maxlength; i++) {
			var chars = [];
			var j;
			for ( j = 0; j < count; j++) {
				chars.push(seqs[j].charAt(i));
			}
			if (! this._isValidChars(chars.join(""))) {
				result = false;
				break;
			}
		}
		return result;
	},
	
	_isValidBaseReplacementMotif : function(baseSequence, seqs) {
		var self = this;
		var mergeSequence = this._getMergeCharSequence(seqs);
		var length = baseSequence.length;
		var i;
		for ( i = 0; i < length; i++) {
			var bChar = baseSequence.charAt(i);
			var mChar = mergeSequence.charAt(i);
			if (mChar !== this.CHAR_SEQ_EMPTY && bChar !== this.CHAR_SEQ_EMPTY && mChar !== bChar) {
				return false;
			}
		}
		return true;
	},
	
	_isValidChars : function(charString) {
		var charLen = charString.length;
		var result = true;
		var first = null;
		var i;
		for ( i = 0; i < charLen; i++) {
			if (charString.charAt(i) !== this.CHAR_SEQ_EMPTY)
			{
				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 = [];
		var i;
		for ( 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 = [];
		var i;
		for ( i = 0; i < maxlength; i++) {
			var chars = [];
			var j;
			for (j = 0; j < count; j++) {
				chars.push( 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;
		var i;
		for (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 self = this, sb = [];
		var mergeSequence = this._getMergeCharSequence(seqs);
		var length = this._baseSequence.length;
		var i;
		for (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("");
	},
	
	/*
	_getSequenceAndPositionHiddenHtml : function(seqArray, posArray) {
		var self = this, sb = [];
		if (!seqArray || !posArray) {
			return sb.join("");
		}
		for (var i = 0; i < seqArray.length; i++) {
			sb[sb.length] = "<input type='hidden' class='hdnReplacedMotif' value='" + seqArray[i] + "|" + posArray[i] + "'/>";
		}
		return sb.join("");
	},
*/
	
	_showError : function(message) {
		$errorMessageContainer = $("#" + this._containerId + " ." + this._errorContainerClass);
		$errorMessageContainer.html(message);
		$errorMessageContainer.show();
	},
	
	getHtmlByReplacingOldSequence : function(oldSequence, newSequence) {
		var self = this, sb = [];
		var i;
		for (i = 0; i < oldSequence.length; i++) {
			var oChar = oldSequence.charAt(i);
			var nChar = newSequence.charAt(i);
			var seqChar = (oChar !== nChar) ? "<span class='replace'>" + oChar + "</span>" : oChar;
			if (nChar !== self.CHAR_SEQ_EMPTY) {
				if (oChar !== self.CHAR_SEQ_EMPTY) {
					sb.push("<span class='highlight-sequence'>" + seqChar + "</span>");
				} else {
					sb.push(nChar);
				}
			} else {
				sb.push(oChar);
			}
		}
		return sb.join("");
	},
	
	getHtmlByReplacingNewSequence : function(oldSequence, newSequence) {
		var self = this, sb = [];
		var i;
		for ( i = 0; i < oldSequence.length; i++) {
			var oChar = oldSequence.charAt(i);
			var nChar = newSequence.charAt(i);
			var seqChar = (oChar !== nChar) ? "<span class='replace'>" + nChar + "</span>" : nChar;
			if (nChar !== self.CHAR_SEQ_EMPTY) {
				sb.push("<span class='highlight-sequence'>" + seqChar + "</span>");
			} else {
				sb.push(oChar);
			}
		}
		return sb.join("");
	},
	
	getSequenceHtml : function(subject, drawSequence) {
		var self = this;
		self._outOfRangeArray = [];
		var sb = [], baseSequence = self._baseSequence;
		var getTriplesBySequenceProperty = function(sequenceList) {
			self._getTriplesBySequenceProperty(subject, drawSequence, sequenceList);
		};
		LinkData.getObjects(self._workId, self._fileName, subject, self._seqProperty, getTriplesBySequenceProperty);
	},
	
	_getTriplesBySequenceProperty : function(subject, drawSequence, sequenceList) {
		var self = this;
		var getTriplesByPositionProperty = function(positionList) {
			self._drawSequenceList(drawSequence, sequenceList, positionList);
		};
		LinkData.getObjects(self._workId, self._fileName, subject, self._posProperty, getTriplesByPositionProperty);
	},
	
	_drawSequenceList : function(drawSequence, sequenceList, positionList) {
		var self = this, sb = [];
		var i;
		if (!sequenceList || sequenceList.length === 0) {
			return;
		}
		for (i = 0; i < sequenceList.length; i++) {
			var customSeqString = self._getCustomSequenceHtml(self._baseSequence, sequenceList[i], positionList[i]);
			if (customSeqString.length > 0) {
				sb.push("<div>");
				sb.push("<div class='userSequence'>" + customSeqString + "</div>");
				sb.push("&nbsp;<span class='deletelink "+ sequenceList[i] +"' onclick='self._deleteUserSequence("+ "&quot;" + sequenceList[i] + "&quot;" +","+ "&quot;" + self._containerId + "&quot;" +");'>");
				sb.push("<img src='http://app.linkdata.org/asset/c6bf2a0f.png' title='Delete' /></span>");
				//sb.push("<div>&nbsp;</div>");
				sb.push("</div>");
			}
		}
		sb.push("<div>&nbsp;</div>");
		drawSequence(sb.join("\n"));
	},
	
	_deleteUserSequence : function(sequence) {
		alert(sequence);
		//$("#" + this._containerId + " .resultArea .userSequence").each(function() {
		///	var seq = $(this).find(".hdnSequence");
			
		//});
	},
	
	getFormattedSequence : function(baseSeqLen, seq, pos) {
		var self = this, sb = [];
		var seqLen = seq.length;
		var tHold = Math.floor(seqLen / 2);
		pos = parseInt(pos, 10);
		var len = baseSeqLen - (tHold + pos);
		var i;
		for ( i = 0; i < len; i++) {
			sb[sb.length] = self.CHAR_SEQ_EMPTY;
		}
		sb[sb.length] = seq;
		return sb.join("");
	},
	
	replace : function(seqs, seqArray, posArray) {
		var self = this, isValid = self._isValidSequenceList(seqs);
		if (isValid) {
			if (seqs.length > 0) {
				var sb = [];
				var replaceSeq = self._getReplacedCustomSequence(seqs);
				sb[sb.length] = self._wrappedReplacedSequenceHtml(replaceSeq, seqs);
				//sb[sb.length] = self._getSequenceAndPositionHiddenHtml(seqArray, posArray);
				return sb.join("");
			}
		} else {
			this._showError(self._default.msgInvalidSequence);
		}
	},
	
	replaceWith : function(seq, pos, extraCopies, basePairs) {
		var main = [], seqArray = [], posArray = [], conflictArray = [];
		var seqLen = seq.length;
		var tHold = Math.floor(seqLen / 2);
		pos = parseInt(pos, 10);
		var baseSeqLen = this._baseSequence.length;
		var len = baseSeqLen - (tHold + pos);
		var corPos;
		var j;
		seqArray.push(seq);
		posArray.push(pos);
		
		for (j = 0; j < extraCopies + 1; j++) {
			var i;
			var array = [];
				for ( 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, seqArray, posArray);
		return main;
	},
		
	getReplacingSeq : function(seq,pos) {
		var sb = [], out = [];	
		var seqLen = seq.length;
		var tHold = Math.floor(seqLen / 2);
		pos = parseInt(pos, 10);
		var baseSeqLen = this._baseSequence.length;
		var len = baseSeqLen - (tHold + pos);
		var i;
		
		for ( i = 0; i < len; i++) {
			sb.push(this.CHAR_SEQ_EMPTY);
		} 
		
		sb.push(seq);
		return sb.join("");
	},
	
	getReColoredMotifViewSequnce : function(seq, pos, extraCopies, basePairs, replaceDivClass) {
		
		var self = this;
		var sb = [];
		
		var seqs = self.replaceWith(seq, pos, extraCopies, basePairs);
		var replaceSeq = self._getReplacedCustomSequence(seqs);
		var existingSequence = $("#" + self._containerId + " ." + replaceDivClass).text();
		var repSeqLen = replaceSeq.length;
		var index;
		
		for ( index = 0 ; index < repSeqLen ; index++) {
			var oChar = existingSequence.charAt(index);
			var nChar = replaceSeq.charAt(index);
			//var seqChar = (oChar !== nChar) ? "<span class='replace'>" + nChar + "</span>" : nChar;
			if (index < (repSeqLen - 50)) {
				if (nChar === oChar && nChar !== self.CHAR_SEQ_EMPTY) {
					sb.push("<span class='highlight-sequence replace'>" + nChar + "</span>");
				} else {
					sb.push(oChar);
				} 
			} else {
				sb.push(oChar);
			}
		}
		//self._doReplaceWithHtml(sb.join(""));
		return sb.join("");
	},
	
	/*
	hideError : function() {Seq.charAt(index);
			//var seqChar = (oChar !== nChar) ? "<span class='replace'>" + nChar + "</span>" : nChar;
			if (index < (exisSeqLen - 50)) {
				if (nChar == oChar && nChar !== self.CHAR_SEQ_EMPTY) {
					sb.push("<span class='highlight-sequence replace'>" + nChar + "</span>");
				} else {
					sb.push(oChar);
				} 
			} else {
				sb.push(oChar);
			}
		}
		//self._doReplaceWithHtml(sb.join(""));
		return sb,join("");
	},*/
	
	hideError : function() {
		$errorMessageContainer = $("#" + this._containerId + " ." + this._errorContainerClass).hide();
	}
	
};

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

Application.heptamer.prototype = {
	
	_heptamerMap : null,
	_motifSequenceProperty : null,
	_appropriatePositionProperty : null,
	
	_default : {
		heptamerTag : "heptamer",
		filterSequencePropertyPhrase : "motif_sequence",
		filterMaxCEGPropertyPhrase : "maxCEG",
		filterAppropriatePosition : "Appropriateposition(%C2%B1%2040%20bp)"
	},
	
	_init : function() {
		this._heptamerMap = [];
		this._initHeptamerList();
	},
	
	_initHeptamerList : function() {
		var self = this;
		var getFilesByTag = function(result) {
			$.each(result, function(workId, fileList) {
				$.each(fileList, function(fileKey, fileName) {
					self._initHeptamer(workId, fileName);
					return false;
				});
			});
		};
		LinkData.getFilesByTag(null, self._default.heptamerTag, getFilesByTag);
	},
	
	_initHeptamer : function(workId, fileName) {
		var self = this;
		var getPropertyList = function(propertyList) {
			self._initProperty(propertyList);
			self._getSequenceTriple(workId, fileName);
		};
		LinkData.getProperties(workId, fileName, getPropertyList);
	},
	
	_initProperty : function(propertyList) {
		var self = this;
		$.each(propertyList, function(propKey, propValue) {
			if (propValue.indexOf(self._default.filterSequencePropertyPhrase) > -1) {
				self._motifSequenceProperty = propValue;
			} else if (propValue.indexOf(self._default.filterAppropriatePosition) > -1) {
				self._appropriatePositionProperty = propValue;
			}
		});
	},
	
	_getSequenceTriple : function(workId, fileName) {
		var self = this;
		var getSequenceTripleList = function(sequenceTripleList) {
			self._fillHeptamerMap(workId, fileName, sequenceTripleList);
		};
		LinkData.getTriplesByProperty(workId, fileName, self._motifSequenceProperty, getSequenceTripleList);
	},
	
	_fillHeptamerMap : function(workId, fileName, sequenceTripleList) {
		var self = this;
		var getPositionTripleList = function(positionTripleList) {
			var i;
			for (i = 0; i < sequenceTripleList.length; i++) {
				var seqTriple = sequenceTripleList[i];
				var posTriple = positionTripleList[i];
				var seqEl = new Application.seqElement();
				seqEl.setExternalUrl(seqTriple.subject);
				seqEl.setSequence(seqTriple.object);
				seqEl.setAppropriatePos(posTriple.object);
				self._heptamerMap[seqTriple.object] = seqEl;
			}
		};
		LinkData.getTriplesByProperty(workId, fileName, self._appropriatePositionProperty, getPositionTripleList);
	},
	
	getBySequence : function(sequence) {
		return this._heptamerMap[sequence];
	}
	
};

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

Application.octamer.prototype = {
	
	_octamerMap : null,
	_motifSequenceProperty : null,
	_appropriatePositionProperty : null,
	
	_default : {
		octamerTag : "octamer",
		filterSequencePropertyPhrase : "sequence",
		filterAppropriatePosition : "Appropriate%20position"
	},
	
	_init : function() {
		this._octamerMap = [];
		this._initOctamerList();
	},
	
	_initOctamerList : function() {
		var self = this;
		var getFilesByTag = function(result) {
			$.each(result, function(workId, fileList) {
				$.each(fileList, function(fileKey, fileName) {
					self._initOctamer(workId, fileName);
					return false;
				});
			});
		};
		LinkData.getFilesByTag(null, self._default.octamerTag, getFilesByTag);
	},
	
	_initOctamer : function(workId, fileName) {
		var self = this;
		var getProperties = function(propertyList) {
			self._initProperty(propertyList);
			self._getSequenceTriple(workId, fileName);
		};
		LinkData.getProperties(workId, fileName, getProperties);
	},
	
	_initProperty : function(propertyList) {
		var self = this;
		$.each(propertyList, function(propKey, propValue) {
			if (propValue.indexOf(self._default.filterSequencePropertyPhrase) > -1) {
				self._motifSequenceProperty = propValue;
			} else if (propValue.indexOf(self._default.filterAppropriatePosition) > -1) {
				self._appropriatePositionProperty = propValue;
			}
		});
	},
	
	_getSequenceTriple : function(workId, fileName) {
		var self = this;
		var getSequenceTripleList = function(sequenceTripleList) {
			self._fillOctamerMap(workId, fileName, sequenceTripleList);
		};
		LinkData.getTriplesByProperty(workId, fileName, self._motifSequenceProperty, getSequenceTripleList);
	},
	
	_fillOctamerMap : function(workId, fileName, sequenceTripleList) {
		var self = this;
		var getPositionTripleList = function(positionTripleList) {
			var i;
			for ( i = 0; i < sequenceTripleList.length; i++) {
				var j = Math.floor(i / 2);
				var seqTriple = sequenceTripleList[i];
				var posTriple = positionTripleList[j];
				var seqEl = new Application.seqElement();
				seqEl.setExternalUrl(seqTriple.subject);
				seqEl.setSequence(seqTriple.object);
				seqEl.setAppropriatePos(posTriple.object);
				self._octamerMap[seqTriple.object] = seqEl;
			}
		};
		LinkData.getTriplesByProperty(workId, fileName, self._appropriatePositionProperty, getPositionTripleList);
	},
	
	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;
	}
	
};

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

Application.timer.prototype = {
	
	_delay : null,
	_retry : null,
	_maxRetry : null,
	
	_init : function() {
		this._delay = 1000;
		this._retry = 0;
		this._maxRetry = 100;
	},
	
	call : function(func) {
		if (this._retry < this._maxRetry) {
			setTimeout(func, this._delay);
		}
		this._retry++;
	},
	
	setMaxRetryCount : function(no) {
		this._maxRetry = no;
	}
};

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

Application.index.prototype = {
	
	_start : null,
	_end : null,
	
	_init : function(start, end) {
		this._start = start;
		this._end = end;
	},
	
	getIndex : function() {
		return {start : this._start, end : this._end};
	},
	
	getItemCount : function() {
		return (this._end - this._start + 1);
	},
	
	increment : function() {
		var itemCount = this.getItemCount();
		this._start = this._start + itemCount;
		this._end = this._end + itemCount;
		return {start : this._start, end : this._end};
	},
	
	getStartIndex : function() {
		return this._start;
	},
	
	getEndIndex : function() {
		return this._end;
	}
	
};

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

Application.tooltip.prototype = {
	
	_toolTipList : null,
	
	_default : {
		explanationProperty : "explanation"
	},
	
	_init : function() {
		this._toolTipList = [];
		this._initToolTip();
	},
	
	_initToolTip : function() {
		var self = this;
		var getFilesByTag = function(resultList) {
			$.each(resultList, function(workId, fileList) {
				$.each(fileList, function(fileKey, fileName) {
					self._getFilePropertyList(workId, fileName);
					return false;
				});
			});
		};
		LinkData.getFilesByTag(null, "tooltip", getFilesByTag);
	},
	
	_getFilePropertyList : function(workId, fileName) {
		var self = this;
		var index = new Application.index(1, 10000);
		var getProperties = function(propertyList) {
			$.each(propertyList, function(pKey, pValue) {
				if (pValue.indexOf(self._default.explanationProperty) > -1) {
					self._getSubjectList(workId, fileName, pValue, index);
					return false;
				}
			});
		};
		LinkData.getProperties(workId, fileName, getProperties);
	},
	
	_getSubjectList : function(workId, fileName, property, index) {
		var self = this;
		var getSubjects = function(subjectList) {
			self._getPropertyList(subjectList, workId, fileName, property, index);
		};
		LinkData.getSubjects(workId, fileName, getSubjects, index);
	},
	
	_getPropertyList : function(subjectList, workId, fileName, property, index) {
		var self = this;
		var getTriplesByProperty = function(tripleList) {
			self._addToolTipToList(subjectList, tripleList, workId, fileName, property, index);
		};
		LinkData.getTriplesByProperty(workId, fileName, property, getTriplesByProperty, index);
	},
	
	_addToolTipToList : function(subjectList, tripleList, workId, fileName, property, index) {
		var self = this;
		var i;
		for ( i = 0; i < subjectList.length; i++) {
			var key = self._getLabelAfterHash(subjectList[i]);
			if (tripleList[i]) {
				var value = tripleList[i].object;
				self._addToolTip(key, value);
			}
		}
		if (subjectList && subjectList.length === index.getItemCount()) {
			self._getSubjectList(workId, fileName, property, index.increment());
		}
	},
	
	_addToolTip : function(key, tooltip) {
		var obj = {};
		obj.key = key;
		obj.tooltip = tooltip;
		this._toolTipList.push(obj);
	},
	
	getByKey : function(key) {
		var self = this, tooltip;
		$.each(self._toolTipList, function(objKey, obj) {
			if (obj.key.toString().toLowerCase() === key.toString().toLowerCase()) {
				tooltip = obj.tooltip;
				return false;
			}
		});
		return tooltip || "";
	},
	
	_getLabelAfterHash : function(value) {
		var propLabel = value;
		var arr = value.split("#");
		if (arr.length > 1) {
			propLabel = decodeURIComponent(arr[1]);
		}
		return propLabel;
	}
	
};

$(document).ready(function() {
	var fillDatabase = function(resultList) {
		$(".motifMaxDatabase").append("<option value='-1' selected='selected'>-- Select Database --</option>");
		$.each(resultList, function(workId, fileList) {
			$.each(fileList, function(fileKey, fileName) {
				$(".motifMaxDatabase").append("<option value='" + workId + "|" + fileName + "'>" + fileName + "</option>");
			});
		});
		var execute = function(dbKey) {
			if (dbKey === -1) {
				$("#container").html("");
				return;
			}
			var array = dbKey.split("|");
			var containerId = "container";
			var options = {
				workId : array[0],
				fileName : array[1],
				//replaceMotifArray : ["ATGGCAC|74", "GGGATGG|77"],
				baseSequence : "GAAAAAAGACGTTCCAACCACGTCTTCAAAGCAAGTGATTGGATTAAGGTTCTTCCACACGGTAAGGGATGGCACTAACACCTACCATCCTTCGCAAGACCCTTCCTCTATATAAGGAAGTTCATTTCATTTGGAGAGGACCTCGAC"
				//baseSequence : "------------------------------------------------------------------GGGATGGCAC---------------------GACCCTTCCTCTATATAAGGAAGTTCATTTCATTTGGAGAGGACCTCGAC"
				//baseSequence : "--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------GACCCTTCCTCTATATAAGGAAGTTCATTTCATTTGGAGAGGACCTCGAC"
			};
			var app = new Application.motifRanking(containerId, options);
		};
		
		$(".motifMaxDatabase").change(function() {
			var dbKey = $("option:selected", $(this)).val();
			execute(dbKey);
		});
		/*
		$(".motifMaxDatabase").change(function() {
			var dbKey = $("option:selected", $(this)).val();
			var applicationOption = $('input[name=option]:checked').val();
			execute(dbKey, applicationOption);
		});
		$('input[name=option]').click(function() {
			$("#container").html("");
			var dbKey = $("option:selected", $(".motifMaxDatabase")).val();
			execute(dbKey, $(this).val());
		});*/
	};
	LinkData.getFilesByTag(null, "database", fillDatabase);
});

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;
}

.row .externalLink {
	margin: 0 5px;
}

.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;
	white-space: nowrap;
}
.replaceSequence {
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    margin: 10px 0 0;
	font-family: "Courier New","Lucida Console";
	width: 100%;
	overflow: auto;
	white-space: nowrap;
}

.wrappedSequenceMotif {
	background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    margin: 10px 0 0;
	font-family: "Courier New","Lucida Console";
	overflow: auto;
	word-wrap: break-word;
	/*white-space: nowrap;*/
	width:100%;
	height:90px;
	word-break: break-all;
}

.replace {
    color: #E80010;
}

.errorMessage {
	/*color: #FF0000;*/
	/*text-align: center;*/
	margin-bottom: -10px;
    margin-top: 10px;
}

.databaseInfo .motif {
	width: 70%;
}

/**
 * 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;
	margin-left : 200px;
}

.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;
}

.loadingImageContainer .loadingMessage {
	color: #FF0000;
}

.motifConflictionDialog .option {
	margin: 10px;
}

.motifViewDialog {
	margin-top: 10px;	
}

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

.motifViewDialog .motifviewinfo {
	float: right;
    margin-top: -150px;
    position: relative;
    width: 350px;	
}

.deletelink {
	cursor: pointer;	
}

.deletelink img {
	margin-bottom: -3px;	
}

.fixedSequenceMotif {
	display: inline;
    float: right;
    font-family: "Courier New","Lucida Console";
    margin-top: -15px;
}

.resultAreaUserMessageClass {
	 color: #0A5DA6;
    font: bold 1.1em "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
    font-size: 12px;
    font-weight: bold;
    margin-top: -6px;
	margin-bottom: 4px;
}

.motifviewsequence {
	float: right;
    height: 40px;
    overflow: auto;
    width: 240px;
	margin-bottom: 5px;
}

MotifRankingを新バージョンのCAD Appに移植。