/*

POST domain search request to doteasy API thru ajax
SHOW "loading" hourglasses in place of the extension selection checkboxes
GET response from ajax and SHOW availability in place of the hourglasses

author: [AC]
date:   mar 22, 2008

// REQUIRE
   /_js/dom/abbr.js
   /_js/ajax/ajax.js


// [START] EXAMPLE

<cfoutput>

<cfset nameToSearch = "yahoo">
<script type="text/javascript" src="/_js/dom/abbr.js"></script>
<script type="text/javascript" src="/_js/ajax/ajax.js"></script>
<script type="text/javascript" src="/_js/domain-search/domain-search-ajax.js"></script>

<ul id="ext-labels">
<li class="com ext">COM</li>
<li class="net ext">NET</li>
<li class="org ext">ORG</li>
</ul>

<!---
note:
  - before search: this.init() writes hourglass into <div class="message"></div>
  - after search: this.deliverResult() does:
  		for each available extension: shows checkbox, hide message
  		for each unavailable extension: hide checkbox, show 'not available' message
--->
<ul id="list-#nameToSearch#" class="list-result">
<li class="com ext"><div class="input"><input type="checkbox" name="" value=""></div><div class="message"></div></li>
<li class="net ext"><div class="input"><input type="checkbox" name="" value=""></div><div class="message"></div></li>
<li class="org ext"><div class="input"><input type="checkbox" name="" value=""></div><div class="message"></div></li>
</ul>
<input type="hidden" id="js:var:strResultHiddenInputId" value=""><!--- name 'strResultHiddenInputId' is given to this.init(), value to be set by this.deliverResult() --->

<script type="text/javascript">
var sd = new DomainSearchAjax('sd');
sd.init('#nameToSearch#', 'list-#nameToSearch_VarSafe#', 'available-ext-list-#nameToSearch_VarSafe#');
sd.submitSearch('.com');
sd.submitSearch('.uk');
sd.submitSearch('cctld-na');
sd.submitSearch('cctld-others');
</script>


</cfoutput>

// [END] EXAMPLE

*/



function DomainSearchAjax(objName) {
	
	var me = this;

	// var DOMAIN_SEARCH_API_URL = '/_lab/domainsearch/index.cfm';
	var DOMAIN_SEARCH_API_URL = '/_api/domain-search/search-same-name.cfm';

//	var MSG_AVAILABLE = 'available';
	var MSG_AVAILABLE = '';
	var MSG_NOT_AVAILABLE = 'not available';
	var MSG_MAYBE_AVAILABLE = 'maybe available';

	this.strName = '';
	this.strExtListId = '';
	this.strResultHiddenInputId = ''; // name of <input type="hidden" ... /> which will store the comma-list of available extensions after search is done.  see this.deliverResult()
//	this.defaultExtHtml = '<img src="/Images/loading.gif" />';
	this.defaultExtHtml = 'loading...<br /><img src="/Images/loading.gif" />';
	this.boolAnyExtAvailable = false;
	this.arrAvailableExt = []; // array of extensions where are available

	this.onDeliverResult = null; // function to run at the end of running this.deliverResult.  Set this before calling this.init().
	this.arrPreCheckedExt = []; // array of extension to tick when available

	this.init = function(strName, strExtListId, strResultHiddenInputId) {
		this.strName = strName;
		this.strExtListId = strExtListId;
		this.strResultHiddenInputId = strResultHiddenInputId;
		me.writeAllExtBox(me.defaultExtHtml, false);
	}
	
	// post search name thru AJAX to doteasy's API
	// ajax will then pass result to the ajax.callback function
	// strExtGroup is defined by doteasy.  To date: [''|'.com'|'.uk'|'cctld']
	this.submitSearch = function(strExtGroup) {
		var ajax = new AJAX();
		ajax.url = DOMAIN_SEARCH_API_URL;
		ajax.method = 'POST';
		ajax.params = 'DomainNameNoExt=' + me.strName + '&extGroup=' + strExtGroup;
		ajax.callback = objName + '.deliverResult';
		ajax.send();
	}

	this.submitSearchAllGroup = function() {
		me.submitSearch('.com');
		me.submitSearch('.uk');
		me.submitSearch('cctld-na');
		me.submitSearch('cctld-others');
	}

	// deliver result: from result string to GUI display
	this.deliverResult = function(str) {
		// parse result str.  e.g., '.com=0;.net=1,...'
		var arrResult = str.split(';');
		// for each result key=value pair
		for (var ii=0; ii<arrResult.length; ii++) {
			var arrPair = arrResult[ii].split('=');
			if (arrPair.length == 2) {
				var strExtWithDots = arrPair[0];
				var numAvail = parseInt(arrPair[1]);
				// convert ext to var-safe-name
				var strExt = me.formatVarSafeName(strExtWithDots);
				// write GUI!
				this.writeOneExtBox(strExt, numAvail);
				// if ext available, save to array
					// currently, also store maybe-available domain names
					// [TODO] store maybe-available domain names in another file
				if (numAvail == 1 || numAvail == 11) {
					var strExtTrimDot = strExtWithDots;
					if (strExtWithDots.substring(0,1) == '.') {
						strExtTrimDot = strExtWithDots.substring(1);
					}
					me.arrAvailableExt.push(strExtTrimDot);
					// SET when there is any ext available
					this.boolAnyExtAvailable = true;
				}
			}
		}
		// write available ext list to hidden input
		if (me.strResultHiddenInputId) {
			var elemResultHiddenInput = ge(me.strResultHiddenInputId);
			elemResultHiddenInput.value = me.arrAvailableExt.join(',');
		}
		
		// call event handler
		if (me.onDeliverResult) {
			me.onDeliverResult();
		}
	}


	// get array of <li class="%ext"> elements
	this.getAllExtBox = function() {
		var elemList = ge(me.strExtListId);
		var arrExt = gtc(elemList, 'li', 'ext');
		return arrExt;
	}

	// get one <li class="%ext"> elem, strExt has NO leading dot
	this.getOneExtBox = function(strExt) {
		var elemList = ge(me.strExtListId);
		var arrExt = gtc(elemList, 'li', strExt);
		var elemBox = arrExt[0];
		return elemBox;
	}

	// write strValue to all ext <li class="%ext"> box, AND hide/show <div class="input">
	this.writeAllExtBox = function(strValue, boolShowInput) {
		var arrExt = me.getAllExtBox();
		for (var ii=0; ii<arrExt.length; ii++) {
			var elemBox = arrExt[ii];
			var elemInputDiv = gtc(elemBox, 'div', 'input')[0];
			var elemMessageDiv = gtc(elemBox, 'div', 'message')[0];
			elemInputDiv.style.display = (boolShowInput)?'block':'none';
			elemMessageDiv.innerHTML = strValue;
			// add class to message div: 'loading'
			elemMessageDiv.className += ' loading';
		}
	}

	// write strValue to one ext box <li class="%strExt"><div class="message">, AND hide/show <div class="input">, strExt has NO leading dot
	this.writeOneExtBox = function(strExt, numAvail) {
		var elemBox = me.getOneExtBox(strExt);
		var strValue = '';
		var boolShowInput = false;
		switch (numAvail) {
			case 0:
				strValue = MSG_NOT_AVAILABLE;
				boolShowInput = false;
				className = 'not-available';
			break;
			case 1:
				strValue = MSG_AVAILABLE;
				boolShowInput = true;
				className = 'available';
			break;
			case 11:
				strValue = MSG_MAYBE_AVAILABLE;
				boolShowInput = true;
				className = 'maybe-available';
			break;
		}
		if (elemBox) {
			var elemInputDiv = gtc(elemBox, 'div', 'input')[0];
			var elemMessageDiv = gtc(elemBox, 'div', 'message')[0];
			elemInputDiv.style.display = (boolShowInput)?'block':'none';
			
			// message div: remove 'loading' class
			elemMessageDiv.className = elemMessageDiv.className.replace(/ loading/ig, '') + ' ' + className;

			// tick checkbox if asked to (only when this ext is available, otherwise uncheck)
			if (__arrayIndexOf(me.arrPreCheckedExt, strExt.replace(/_/g, '.')) > -1) {
				var elemCheckBox = gt(elemBox, 'input')[0];
				elemCheckBox.checked = (boolShowInput)?true:false;
			}
			elemMessageDiv.innerHTML = strValue;
			// if showing input (i.e., available) and 'available' string is empty string
			if (boolShowInput && numAvail == 1 && strValue == '') {
				// hide message box
				elemMessageDiv.style.display = 'none';
			}
		}
	}

	// function to format var-safe-name: trim leading dot from the given string and convert inner dot to underscore, if any.  for use of preping ext name
	this.formatVarSafeName = function(str) {
		var strResult = '';
		if (str.substring(0,1) == '.') {
			strResult = str.substring(1);
		}
		strResult = strResult.replace(/\./, '_');
		return strResult;
	}

}