document.pathToImages = '[src_dir]/images/cal_images/';	// Relative to your HTML file
var weekday = new Array(7); weekday[0]="Sun";weekday[1]="Mon";weekday[2]="Tue";weekday[3]="Wed";weekday[4]="Thu";weekday[5]="Fri";weekday[6]="Sat";
var month = new Array(12); month[0]="Jan";month[1]="Feb";month[2]="Mar";month[3]="Apr";month[4]="May";month[5]="Jun";month[6]="Jul";month[7]="Aug";month[8]="Sept";month[9]="Oct";month[10]="Nov";month[11]="Dec";
function SetDateTime( displayId ) {
	var d = new Date();

	if( d.getHours() > 12 ) {
		hour = d.getHours() - 12;
		ampm = 'pm';
	} else {
		if( d.getHours() < 10 ) {
			hour = "0" + d.getHours();
		} else {
			hour = d.getHours();
		}
		ampm = 'am';
	}
	if( d.getSeconds() < 10 ) {
		seconds = "0" + d.getSeconds();
	} else {
		seconds = d.getSeconds();
	}
	document.getElementById(displayId).innerHTML = "<b>" + weekday[d.getDay()]
													+ ', ' + month[d.getMonth()]
													+ ' ' + d.getDate()
													+ ', ' + hour
													+ ':' + d.getMinutes()
													+ ':' + seconds
													+ ' ' + ampm
													+ "</b>";
	setTimeout('SetDateTime(\''+ displayId +'\')', 100);
}


function SearchBar( outputId, fields )
{	
	this.outputId = outputId;
	this.fields = fields;	
	this.criteriaNum = 0;
}

SearchBar.prototype.RemoveCriteria = function( criteriaId )
{
	if( (obj = document.getElementById( this.outputId ) ) )
	{
		obj.removeChild( document.getElementById( 'criteria-container-' + criteriaId ) );
	}	
}

SearchBar.prototype.AddCriteria = function()
{
	var name = arguments[0];
	
	if( !(outputObj = document.getElementById( this.outputId ) ) )
	{
		return false;
	}
	this.criteriaNum++;	
	
	var date = new Date();
	var criteriaId = (new Date()).getHours() + "" + (new Date()).getMinutes() + "" + (new Date()).getSeconds() + "" + (new Date()).getMilliseconds() + "" + ( Math.random() * 5 );
	var type = this.GetFieldTypeById( name );
	var select = this.GenerateFieldSelect( 'criteria-' + criteriaId + '-by', name );
	
	var prefix = document.createElement( 'span' );
	if( this.criteriaNum == 1 )
	{
		prefix.appendChild( document.createTextNode( "Search " ) );
	}
	else
	{
		imgObj = document.createElement( 'img' );
		imgObj.id = 'criteria-remove-' + criteriaId;
		imgObj.src = 'lib/skins/latitude/images/delete.png';
		imgObj.alt = 'Remove Criteria';
		imgObj.style.cursor = 'pointer';
		prefix.appendChild( imgObj );
		prefix.appendChild( document.createTextNode( " And " ) );
	}
	
	divObj = document.createElement('div');
	divObj.id 			= 'criteria-container-' + criteriaId;
	divObj.className 	= 'search-bar-criteria';
	
	divObj.appendChild( prefix );
	divObj.appendChild( select );	
	divObj.innerHTML += " ";
	
	divFieldObj = document.createElement( 'div' );
	divFieldObj.id = 'criteria-field-' + criteriaId;
	divFieldObj.style.display = 'inline';
	
	if( type == "text" )
	{
		var value = ( arguments[1] ) ? arguments[1] : "";
		divFieldObj.innerHTML = SearchFieldText( criteriaId, value );
	}
	else if( type == "date" )
	{
		var dateStart = ( arguments[1] ) ? arguments[1] : "";
		var dateEnd = ( arguments[2] ) ? arguments[2] : "";
		divFieldObj.innerHTML = SearchFieldDate( criteriaId, dateStart, dateEnd );
	}
	else if( type == "select" )
	{
		var itemList = this.GetFieldItemsById( name );
		var value = ( arguments[1] ) ? arguments[1] : "";
		divFieldObj.innerHTML = SearchFieldSelect( criteriaId, value, itemList );
	}
	
	divObj.appendChild( divFieldObj );
				
	outputObj.appendChild( divObj );
	
	var selObj = document.getElementById( 'criteria-' + criteriaId + '-by' );
	selObj.name = 'search_by[' + criteriaId + ']';
	selObj.instance = this;
	selObj.criteriaId = criteriaId;
	
	selObj.onchange = function()
	{
		var type = this.instance.GetFieldTypeById( this.value );
		var fieldId = 'criteria-field-' + this.criteriaId;
		var divObj = document.getElementById( fieldId );
		
		if( type == "text" )
		{
			divObj.innerHTML = SearchFieldText( this.criteriaId, '' );
		}
		else if( type == "date" )
		{
			divObj.innerHTML = SearchFieldDate( this.criteriaId, '', '' );
		}
		else if( type == "select" )
		{			
			var itemList = this.instance.GetFieldItemsById( this.value );
			divObj.innerHTML = SearchFieldSelect( this.criteriaId, '', itemList );
		}
	}
	

	if( ( imgObj = document.getElementById( 'criteria-remove-' + criteriaId ) ) )
	{
		imgObj.instance = this;
		imgObj.criteriaId = criteriaId;
		imgObj.onclick = function()
		{
			this.instance.RemoveCriteria( this.criteriaId );
		}
	}
}

SearchBar.prototype.GetFieldTypeById = function( fieldId )
{
	if( !this.fields ) return false;
	
	for( i in this.fields )
	{
		if( fieldId == this.fields[i][1] )
		{
			return this.fields[i][2];
		}
	}
}

SearchBar.prototype.GetFieldItemsById = function( fieldId )
{
	if( !this.fields ) return false;
	
	for( i in this.fields )
	{
		if( fieldId == this.fields[i][1] )
		{
			return this.fields[i][3];
		}
	}
}

SearchBar.prototype.GenerateFieldSelect = function( id, defaultValue )
{
	if( !this.fields ) return false;
	
	var select = document.createElement("select");
	select.id = id;
	
	var n = 0;
	
	select.options[ n++ ] = new Option( "Select Criteria", "0" );
	select.options[ n++ ] = new Option( "---------------", "0" );
	
	var selectedIndex = 0;
	
	for( i in this.fields )
	{
		if( this.fields[i][0] != undefined )
		{
			var fieldName = this.fields[i][0];
			var fieldValue = this.fields[i][1];
			var selected = defaultValue == fieldValue ? true : false;
			
			if( selected )
			{	
				selectedIndex = n;
			}
			
			select.options[ n++ ] = new Option( fieldName, fieldValue );
		}
	}
		
	select.selectedIndex = selectedIndex;
	select.options[ selectedIndex ].defaultSelected = true;
	
	return select;
}

function SearchFieldText( id, defaultValue )
{	
	return "for <input id=\"criteria-" + id + "-for\" name=\"search_for[" + id + "]\" value=\"" + defaultValue + "\" />";
}

function SearchFieldDate( id, startDate, endDate )
{	
	var html = 'between ';
	html += '<input type="text" id="criteria-' + id + '-start-date" name="start_date[' + id + ']" value="' + startDate + '" size="12" />';
	html += '<input type="button" value="..." onclick="displayCalendar( document.getElementById(\'criteria-' + id + '-start-date\') , \'mm/dd/yyyy\' , this )" />';
	html += ' and ';
	html += '<input type="text" id="criteria-' + id + '-end-date" name="end_date[' + id + ']"  value="' + endDate + '" size="12" />';
	html += '<input type="button" value="..." onclick="displayCalendar( document.getElementById(\'criteria-' + id + '-end-date\') , \'mm/dd/yyyy\' , this )" />';											
	return html;
}

function SearchFieldSelect( id, defaultValue, itemList )
{	
	var select = "is <select id=\"criteria-" + id + "-for\" name=\"search_for[" + id + "]\">";
	
	for( i in itemList )
	{		
		if( itemList[i][0] != undefined )
		{
			var fieldValue = itemList[i][0];
			var fieldName = itemList[i][1];
			var selected = defaultValue == fieldValue ? true : false;	
			
			select += "<option value=\"" + fieldValue + "\" " + ( ( selected ) ? "selected=\"true\"" : "" ) + ">" + fieldName + "</option>";			
		}
	}
	
	select += "</select>";
	
	return select;
}