var url = "/php/widgetAjax.php";

/**
* Disable "Enter" key in Form script- By Nurul Fadilah(nurul@REMOVETHISvolmedia.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
*/
                
function handleEnter (field, event) {
		var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
		if (keyCode == 13) {
			var i;
			for (i = 0; i < field.form.elements.length; i++)
				if (field == field.form.elements[i])
					break;
			i = (i + 1) % field.form.elements.length;
			field.form.elements[i].focus();
			return false;
		} 
		else
		return true;
	}      



/**
* selectWidget - fires off ajax calls when the initial select menu is called
*
*/
function selectWidget() {
	
	var widgetId = $('selectWidgetMenu').value;
	$('widgetId').innerHTML = widgetId;

	if(widgetId != 0) {
		updateWidgetPreview();
		
		var queryString = 'widgetId=' + widgetId + '&widgetControlMode=displayOption'; 
		new Ajax(url, {
			method: 'post',
			data: queryString,
			update: $('widget_step2')
		}).request();
	} else {
		$('widget_step2').innerHTML = '';
		updateWidgetPreview('reset');
	}

}


/**
*
* selectOption - updates substep of step2 (step2a) 
*
*/
function selectOption(controlMode, previewMode, loadSearch) {
	
	// load search tells widgetAjax.php to build list of potential widgets to show, given the widgetId
	if(loadSearch) loadSearch = '&loadSearch=' + loadSearch;
	
	if($('selectWidgetMenu')) {
		var widgetId = $('selectWidgetMenu').value;	
	} else {
		if($('widgetId')) {
			var widgetId = $('widgetId').innerHTML;
		}
	}
	
	var queryString = 'widgetId=' + widgetId + '&widgetControlMode=' + controlMode + loadSearch;
	new Ajax(url, {
			method: 'post',
			data: queryString,
			evalScripts: true,
			update: $('widget_step2a')
		}).request();
	
	// some buttons need the widget preview to be updated
	if(previewMode) updateWidgetPreview(previewMode);
}

function updateWidgetControl(updateDiv, controlMode) {
	var widgetId = $('widgetId').innerHTML;
	var queryString = 'widgetId=' + widgetId + '&widgetControlMode=' + controlMode;
	new Ajax(url, {
			method: 'post',
			data: queryString,
			evalScripts: true,
			update: $(updateDiv)
		}).request();	
}


function selectWidgetColor(color) {
	updateWidgetPreview('',color,'');
}

function selectWidgetShape(shape) {
	updateWidgetPreview('','',shape);
}


function showWidgetCode(divId) {
	var contentDiv = 'widgetCode';
	
	// divId passed from moodal box code, used when multiple bits of widget code are on the same page
	if(divId != null) {
		var contentDiv = divId;
	}
	var widgetCode = document.getElementById(contentDiv).innerHTML;
	return widgetCode.replace(/&amp;/g,"&");
}

// controlMode - determines which stage of options we are at
// previewMode - determines what shows in the preview pane
// update the widget preview area
function updateWidgetPreview(previewMode, color, shape) {
	var colorString = '';
	var segmentId = '';
	var widgetId = $('widgetId').innerHTML;
	if($('segmentId')) {
		// segment id used for custom widgets
		var segmentId = $('segmentId').innerHTML;
		var segmentId = '&segmentId=' + segmentId;
	}
	
	// determine current color if none given
	if(!color && $('widgetColor').innerHTML) color = $('widgetColor').innerHTML;
	if(color) var colorString = '&color=' + color;
	else colorString = '';
	
	// determine current shape if none given
	if(!shape && $('widgetShape').innerHTML) shape = $('widgetShape').innerHTML;
	if(shape) var shapeString = '&shape=' + shape;
	else shapeString = '';
	
	
	// determine current preview mode.  #displayWidgetMode is generated in the widgetClass.php
	if(previewMode == 'reset') widgetId = 0;
	if(!previewMode && $('displayWidgetMode').innerHTML) previewMode = $('displayWidgetMode').innerHTML;
	if(!previewMode) previewMode = 'initialize';
	
	
	
	var queryString = 'widgetId=' + widgetId + '&updatePreviewMode=' + previewMode + colorString + shapeString + segmentId;	
		new Ajax(url, {
			method: 'post',
			data: queryString,
			update: $('widgetPreview')
		}).request();

	clearCode();
	
}

/**
 *
 * customSearch interfaces with the autocompleter.js add-on to mootools.  Search list is generated server side,
 * then searched through client side, to keep things speedy.
 *
 * 'tokens' is array to search through, format: [['text','id'],['text2','id2']],...
 *
 * onSelectChoice updates the preview area and control area once a selection is made. 
 *
 */
function customSearch(){

   var completer1 = new Autocompleter.Local('customSearch', tokens, {
	   'delay': 0,
	   'filterTokens': function() {
		   var regex = new RegExp('^' + this.queryValue.escapeRegExp(), 'i');
		   return this.tokens.filter(function(token){
			   return (regex.test(unescape(token[0])) || regex.test(token[1]));
		   });
	   },
	   'injectChoice': function(choice) {
		   var el = new Element('li')
			   .setHTML(this.markQueryValue(unescape(choice[0])))
			   
		   el.inputValue = unescape(choice[0]);
		   el.inputId = choice[1];
		  
		   this.addChoiceEvents(el).injectInside(this.choices);
	   },
		'onSelectChoice': function(el) {
			$('segmentId').innerHTML = el.inputId;
			updateWidgetPreview('custom','');
			updateWidgetControl('widget_step2b','secondary');
		}
   });

}


function clearCode() {
	$('codeTextArea').style.display='none';
}

function clearStep(updateDiv) {
	if($(updateDiv)) {
		$(updateDiv).innerHTML = '';
	}
	
}

/**
 * highlight text field with one click
 *
 */
function highlight(field) {
  field.focus();
  field.select();
}