var Notice = {
	template_html:['<div id="notifications"><div></div></div>'],
	init:function(){
		$$('body')[0].insert({top:this.template_html.join('\n')});
	},
	
	
	//if you set this to true then infinite notices can pile up on the screen
	//if false, then only one notice will show up (the last one set)
	enable_multiple_notices:false,
	last_notice:null,
	pulsate:function(id){
		new Effect.Pulsate(id, {pulses:1, duration:0.25});
	},
	pulsate2x:function(id){
		new Effect.Pulsate(id, {duration:1.0, pulses:2});
	},
	shake:function(id){
		new Effect.Shake(id, {duration:0.25});
	},
	flash_ok:function(id){
		new Effect.Highlight($(id), {startcolor:'#91e852', keepBackgroundImage:true, duration:0.5});
	},
	flash_text_ok:function(id){
		var end_color = $(id).style.color;
		
		//if the sender element does not have a specific color set we assume black othwise the second morph breaks
		if(end_color==null || end_color == undefined || end_color=='') end_color = '#000';
		
		new Effect.Morph(id, {style:{color:'#6bff00'}, duration:0.1});
		setTimeout(function(){
			new Effect.Morph(id, {style:{color:end_color}, duration:0.25});
		},200);
	},
	flash_error:function(id){
		new Effect.Highlight($(id), {startcolor:'#ec0000', keepBackgroundImage:true, duration:0.5});
	},
	flash_text_error:function(id){
		var end_color = $(id).style.color;
		
		//if the sender element does not have a specific color set we assume black othwise the second morph breaks
		if(end_color==null || end_color == undefined || end_color=='') end_color = '#000';
		
		new Effect.Morph(id, {style:{color:'#ff0000'}, duration:0.1});
		setTimeout(function(){
			new Effect.Morph(id, {style:{color:end_color}, duration:0.25});
		},200);
	},
	clear_all:function(){
		$$('a_bar_any').each(function(t){if(!t.hasClassName('a_bar_prototype')){t.remove()}});
	},
	/*responds to a server request's return object with a positive or negative UI feedback*/
	respond:function(r){
		if(r.success){
			Notice.success_text(r.msg);
		}else if(r.ok){
			Notice.text(r.msg);
		}else{
			Notice.warn_text(r.msg);
		}
	},
	//syntactic sugar is Warn(m)
	warn_text:function(m){
		//pulse the screen red?
		if(m==undefined || m==null || m.length==0) return;
		Notice.create({text:m, is_error:true});
	},
	success_text:function(m){
		//pulse the screen red?
		if(m==undefined || m==null || m.length==0) return;
		Notice.create({text:m, is_success:true});
	},
	//calling from outer wrapper so you don't have to click on the colored portion of the bar to kill
	//the notice
	dismiss_outer:function(o){
		try{
			Notice.dismiss($(o).childElements()[1]);
		}catch(ex){}
	},
	dismiss:function(o){
		//IE will not recognize when the user clicks on the info bar, and when it recognizes
		//a click on the close X it does things oddly. so we process IE separately.
		if(BrowserDetect.ie7 || BrowserDetect.ie8){
			//in case the element is deleted already
			try{
				if(o.nodeName.toLowerCase()=='a'){
					$(o).up().up().remove();
				}else{
					$(o).remove();
				}
			}catch(ex){}
		}else{
			try{
				o=$(o);
				try{
					if(!o.hasClassName('a_bar_any')){
						o = o.up('div')[0].up();
					}
				}catch(ex){}//who cares--thrown if they click the x, not the bar.
				//new Effect.Fade(o, {duration:0.5});
				//setTimeout(function(){o.remove();},500);
				o.remove();
			}catch(ex){}//in case the element was deleted
		}
	},
	//syntactic sugar is Say(m)
	text:function(m){
		//do not show blank messages, this makes no sense to show nothing (regardless of the debug value...)
		if(m==undefined || m==null || m.length==0) return;
		Notice.create({text:m});
	},
	//does a text notify that does not auto-hide for 5 min
	warn_permanent:function(text){
		if(m==undefined || m==null || m.length==0) return;
		Notice.create({text:m,period:300000});
	},
	create:function(args){
		
		if(!this.enable_multiple_notices && this.last_notice != null){
			this.dismiss(this.last_notice);
			this.last_notice = null;
		}
		
		var style = 'a_bar_notification';
		var period=7000;
		
		if(args.is_error===true) style = 'a_bar_error';
		if(args.is_success===true) style = 'a_bar_success';
		if(args.period>0) period = args.period;
		
		var back_img_override = '';
		
		//allow the icon to the left of the message to be changed
		if(args.back_img_override != null){
			back_img_override = ' style="background-image:url(images/ui/' + args.back_img_override + '.png);" ';
		}
		
		var html = '<div class="not_content" ' + back_img_override + '>' + args.text + '</div>';
		
		
		
		var a = new Element('div', { 'class': 'a_bar_any', onclick: 'Notice.dismiss(this);' }).update(html);
		a.addClassName(style);
		
		this.last_notice = a;
		
		setTimeout(function(){
			Notice.dismiss(a);
			this.last_notice = null;
		}, period);
		
		
		$('notifications').childElements()[$('notifications').childElements().length-1].insert({after:a});
		
	}
}

//syntactic sugar
function Say(m){
	Notice.text(m);
}

//syntactic sugar
function Warn(m){
	Notice.warn_text(m);
}



//Sheet.show('yo');
//ONLY use these methods for temporary sheets--they delete the sheet div on close, so will mess up persisting sheets
var Sheet = {
	zindexbase:1001,
	count:0,
	
	// the main entry/exit points
	open:function(name){
		Sheet.show_this_one('sheet_static_'+name);
	},
	close:function(name){
		Sheet.hide_this_one('sheet_static_'+name);
	},
	
	show_this_one:function(id){
		Sheet.show_blur_check();
		$(id).style.zIndex = Sheet.zindexbase;//important--allows for seamless stacking
		$(id).show();
	},
	hide_this_one:function(id){
		$(id).hide();
		Sheet.hide_blur_check();
	},
	show:function(html){
		// $('infobox_html').update(html);
		Sheet.show_box(html);
	},
	show_box:function(msg){
		this.show_blur_check();
		
		var html = '<div class="infobox_hide"><a href="#" onclick="Sheet.hide(this);return false;"><img src="/images/ui/blank.gif" width="32" height="32"/></a></div><div id="infobox_html">'+msg+'</div>';
		
		var a = new Element('div', { 'class': 'infobox_sheet'}).update(html);
		a.style.zIndex = Sheet.zindexbase;
		
		$('infoboxes').childElements()[$('infoboxes').childElements().length-1].insert({after:a});
	},
	hide:function(o){
		o=$(o);
		o.up().up().remove();
		
		this.hide_blur_check();
	},
	//handles logic to keep page dimmer & zindices working
	show_blur_check:function(){
		Page.blur();
		Sheet.zindexbase += 1;
		Sheet.count += 1;
	},
	//handles logic to keep page dimmer & zindices working
	hide_blur_check:function(){
		Sheet.count -= 1;
		if(Sheet.count==0) Page.focus();
	}
}

//only for ok/cancel dialogues
//hmm this looks like it only supports a single ok/cancel at a time. should be
//ok though since you cannot spawn an action from these. or you could, but you
//shouldn't, logically
//however these should actually be queued up, because when you chain them together it sort of breaks in that
//you need to use setTimeout to keep from hiding the second sheet you just asked for.
var Dialogue = {
	text:function(m){
		Dialogue.show({html:m});
	},
	//if an array turns into nice html, otherwise returns as-is
	turn_array_into_html:function(a){
		if(a.constructor.toString().indexOf("Array") == -1){
			return a;
		}else{
			var h = '';
			if(a.length>0){
				h = '<h1>' + a[0] + '</h1>';
				for(i=1;i<a.length;i++){
					h += '<p>' + a[i] + '</p>';
				}
			}
			return h;
		}
	},
	//show:function(img,html,on_ok,on_cancel,ok_label,cancel_label){
	show:function(args){
		//check for empty callbacks
		if(args.on_ok==null) args.on_ok = function(){};
		if(args.on_cancel==null) args.on_cancel = function(){};
		
		//check for no labels
		if(args.ok_label==null) args.ok_label = "Ok";
		if(args.cancel_label==null) args.cancel_label = "Cancel";
		
		//update html
		var the_html = Dialogue.turn_array_into_html(args.html);
		$('vh_dialogue_content_holder').update(the_html);
		
		//assign generic or custom icon
		if(args.img!=null){
			$('vh_dialogue_content_holder').style.backgroundImage = 'url('+args.img+')';
		}else{
			$('vh_dialogue_content_holder').style.backgroundImage = 'url(images/ui/info.png)';
		}
		
		//wire up cancel and ok buttons
		if(args.suppress_cancel_button){
		  $('dialogue_button_cancel').hide();
		}else{
		  $('dialogue_button_cancel').show();
		}
		
		if(BrowserDetect.ie6){
			$('dialogue_button_cancel').value = args.cancel_label;
		}else{
			$('dialogue_button_cancel').down().down().update(args.cancel_label);
		}
		
		$('dialogue_button_cancel').onclick = function(){
			try{
				args.on_cancel();
			}catch(ex){
				Notice.text(ex);
			}
			Dialogue.hide_dialogue();
		};
		
		if(BrowserDetect.ie6){
			$('dialogue_button_ok').value = args.ok_label;
		}else{
			$('dialogue_button_ok').down().down().update(args.ok_label);
		}
		
		$('dialogue_button_ok').onclick = function(){
			try{
				args.on_ok();
			}catch(ex){
				Notice.text(ex);
			}
			Dialogue.hide_dialogue();
		};
		
		//show the completed UI
		Dialogue.show_diaglogue();
	},
	resize_dialogue:function(){
		var d = $('dialogues');
		var inner = d.select('.vh_dialogue_content')[0];
		var h = inner.getHeight();
		
		var middle = d.select('.vh_dialogue_middle')[0];
		
		var middle_height = h - 131;
		if(middle_height < 1) middle_height = 1;	//keep a min height
		
		
		middle.style.height = middle_height.toString() + 'px';
		
		d.style.top = '50%';
		d.style.marginTop = '-' + (d.getHeight()/2).toString() + 'px';
	},
	hide:function(){
		Dialogue.hide_dialogue();
	},
	show_diaglogue:function(){
		Page.blur();
		
		if(BrowserDetect.ie6){
			$$('.content select').each(function(t){
				if($(t).visible()){
					t.addClassName('ie_only_hide');
				}
			});
		}
		
		$('dialogues').show();
		//resize to fit content
		Dialogue.resize_dialogue();
	},
	hide_dialogue:function(){
		$('dialogues').hide();
		if(Sheet.count==0){
			Page.focus();
		}
		if(BrowserDetect.ie6){
			$$('.ie_only_hide').each(function(t){t.removeClassName('ie_only_hide');});
		}
	},
	make_red:function(name){
		$(name).removeClassName('green_528_box');
		$(name).addClassName('red_528_box');
	},
	make_green:function(name){
		$(name).removeClassName('red_528_box');
		$(name).addClassName('green_528_box');
	},
	make_normal:function(name){
		$(name).removeClassName('red_528_box');
		$(name).removeClassName('green_528_box');
	}
}

//todo--track how many open items there are that require the page to be blurred, and only un-blur when that number is zero.
var Page = {
	template_html:[
	'<div id="dialogues" class="vh_dialogue_sheet" style="display:none;">                                                                                            ',
	'	<div class="vh_dialogue_content" id="vh_dialogue_content">                                                                                                   ',
	'		<div class="vh_dialogue_content_holder" id="vh_dialogue_content_holder">                                                                                 ',
	'			                                                                                                                                                     ',
	'		</div>                                                                                                                                                   ',
	'		<div class="vh_dialogue_buttons" id="d_buttons">                                                                                                         ',
	'			<button type="button" id="dialogue_button_cancel" class="custom_button" onclick="return false;"><span><span>Cancel</span></span></button>            ',
	'			<button type="button" id="dialogue_button_ok" class="custom_button primary_button" onclick="return false;"><span><span>Ok</span></span></button>     ',
	'		</div>                                                                                                                                                   ',
	'	</div>                                                                                                                                                       ',
	'	<div class="vh_dialogue_top">                                                                                                                                ',
	'	</div>                                                                                                                                                       ',
	'	<div class="vh_dialogue_middle">                                                                                                                             ',
	'	</div>                                                                                                                                                       ',
	'	<div class="vh_dialogue_bottom">                                                                                                                             ',
	'	</div>                                                                                                                                                       ',
	'</div>                                                                                                                                                          ',
	'<div id="page_dim" style="display:none;"></div>'
	],
	init:function(){
		$$('body')[0].insert({top:this.template_html.join('\n')});
	},
	
	
	
  spinny_timers:{},
  //under 200ms response time is instant
  start_spinning:function(o){
    Page.start_spinning_actual(o,Page.spinny_html);
  },
  start_spinning_small:function(o){
    Page.start_spinning_actual(o,Page.spinny_small_img);
  },
  //separated out because we have a few different spinners depending on where on the page the element is
  start_spinning_actual:function(o,spin_html){
    if(Page.spinny_timers[o] != null){
      clearTimeout(Page.spinny_timers[o]);
    }
    Page.spinny_timers[o] = setTimeout(function(){
      //not sure why but ff throws errors sometimes on this
			try{
				if($(o).innerHTML.strip()==''){
					$(o).update(spin_html);
				}else{
					$(o).setOpacity(0.2);
				}
			}catch(e){}
    }, 250);
  },
  stop_spinning:function(o){
    if(Page.spinny_timers[o] != null){
      clearTimeout(Page.spinny_timers[o]);
    }
		$(o).setOpacity(1);
  },
	spinny_html:'<div class="spinny_for_dialogues"></div>',
	black_spinny_html:'<div class="black_spinny_for_dialogues"></div>',
	spinny_small_img:'<img src="/images/ui/spinny_small.gif" />',
	blur:function(){
		$('page_dim').show();
	},
	focus:function(){
		$('page_dim').hide();
	}
}





var Tooltip = {
	template_html:['<div id="tooltip" style="display:none;"></div>'],
	init:function(){
		$$('body')[0].insert({top:this.template_html.join('\n')});
		
		$$('[tooltip]').reject(function(t){return t.readAttribute('tooltip')===true}).each(function(t){
			if(t.hasAttribute('onmouseover')){
				var mover = t.readAttribute('onmouseover');
			}else{
				var mover = '';
			}
			if(t.hasAttribute('onmouseout')){
				var mout = t.readAttribute('onmouseout');
			}else{
				var mout = '';
			}
			
			t.writeAttribute('onmouseover',mover+';'+"Tooltip.show('"+t.readAttribute('tooltip').gsub("'","\\'")+"');");
			t.writeAttribute('onmouseout',mout+';'+'Tooltip.hide();');
			
			t.writeAttribute('tooltip', true);
		});
		
	},
	change_color:function(color){
		$('tooltip').removeClassName('tooltip_blue');
		$('tooltip').removeClassName('tooltip_black');
		$('tooltip').addClassName('tooltip_'+color);
	},
	
	x:0,
	y:0,
	x_incr:10,
	y_incr:10,
	visible:false,
	show:function(m){
		Tooltip.y_incr = 10;
		Tooltip.visible=true;
		$('tooltip').update(m);
		$('tooltip').show();
	},
	show_up:function(m){
		Tooltip.y_incr = -20;
		Tooltip.visible=true;
		$('tooltip').update(m);
		$('tooltip').show();
	},
	hide:function(){
		Tooltip.visible=false;
		$('tooltip').hide();
	},
	mousemove:function(evt){
		if(Tooltip.visible){
			Tooltip.x=evt.pointerX();
			Tooltip.y=evt.pointerY();
			$('tooltip').style.left = Tooltip.x+Tooltip.x_incr+'px';
			$('tooltip').style.top = Tooltip.y+Tooltip.y_incr+'px';
		}
	}
}











var Tab = {
	template_html:[
	'<div class="tab_top">#{tabs}<div class="cd"></div></div>',
	'#{content}'
	],
	create:function(id,tabs){
		var tmpl = new Template(this.template_html.join('\n'));
		
		var tab_top=[];
		var content=[];
		
		if(tabs.select(function(t){return t.selected==true}).length==0){
			tabs[0].selected = true;
		}
		
		tabs.each(function(t){
			var tooltip = '';
			if(t.tooltip != undefined && t.tooltip != null){
				tooltip = " tooltip=\"" + t.tooltip.gsub('"','\\"') + "\" ";
			}
			
			if(t.selected===true){
				var sel_cl = ' selected ';
				var ta_st = 'display:block;';
			}else{
				var sel_cl = '';
				var ta_st = 'display:none;';
			}
			
			tab_top.push('<div class="tab_tab'+sel_cl+'"><a href="#" onclick="Tab.show(this,\'#{container}\',\''+t.name+'\');return false"'+tooltip+'>'+t.title+'</a></div>');
			
			var html = t.html;
			
			if($(id+'_'+t.name) != null){
				var dh = $(id+'_'+t.name);
				dh.addClassName('tab_content');
				if(t.selected===true){
					dh.style.display = 'block';
				}else{
					dh.style.display = 'none';
				}
				dh.id = 'tab_'+dh.id;
			}else{
				content.push('<div class="tab_content" id="tab_#{container}_'+t.name+'" style="'+ta_st+'">'+html+'</div>');
			}
			
		});
		
		var tmpl_tabs = new Template(tab_top.join('\n'));
		var tmpl_content = new Template(content.join('\n'));
		
		args = {id:id,content:tmpl_content.evaluate({container:id}),tabs:tmpl_tabs.evaluate({container:id})};
		
		$(id).insert({top:tmpl.evaluate(args)});
		$(id).addClassName('tab_outer');
		
		Tooltip.init();
	},
	
	
	
	
	show:function(o, container, tab){
		if(o.nodeName.toLowerCase()=='a'){
			o=o.up();
		}
		$(container).select('.tab_content').each(function(t){t.hide();})
		$(container).select('.tab_tab').each(function(t){t.removeClassName('selected');});
		o.addClassName('selected');
		$('tab_'+container+'_'+tab).show();
	}
}









// variable height sheet
var Poster = {
	posters:$A([]),
	
	template_html:[
	'<div id="poster_#{name}" class="poster_sheet" style="display:none;">      ',
	'		<img src="images/paste_128.png" class="poster_chrome_icon" />        ',
	'		<div class="poster_content">                                         ',
	'			<div class="poster_closer" onclick="Poster.hide(this);"><img src="images/ui/blank.gif"></div>',
	'			<div class="poster_content_holder poster_chrome_body_offset"     ',
	'				style="">                                                    ',
	'				<h1 id="arrange_y_title">#{title}</h1>                          ',
	'			<div>                                                            ',
	'			<p>                                                              ',
	'				...                                                          ',
	'			</p>                                                             ',
	'			                                                                 ',
	'			                                                                 ',
	'		</div>                                                               ',
	'		                                                                     ',
	'	</div>                                                                   ',
	'		<div class="poster_buttons" style="">                                ',
	'			<div class="buttons">                                            ',
	'				<button type="button" class="custom_button" onclick="Poster.hide(this);"><span><span>Cancel</span></span></button>',
	'				<button type="button" class="custom_button primary_button" onclick="Foo.bar();"><span><span>Save</span></span></button>',
	'			</div>                                                           ',
	'		</div>                                                               ',
	'		                                                                     ',
	'</div>                                                                      ',
	'<div class="poster_top">                                                    ',
	'</div>                                                                      ',
	'<div class="poster_middle">                                                 ',
	'</div>                                                                      ',
	'<div class="poster_bottom">                                                 ',
	'</div>                                                                      ',
	'</div>                                                                      '
	],
	
	
	create:function(args){
		if(this.posters.select(function(t){return t.name==args.name}).length==0){
			this.posters.push(args);
			
			var tmpl = new Template(this.template_html.join('\n'));
			var sargs = args;
			
			$('posters').insert({after:tmpl.evaluate(sargs)});
		}
	},
	destroy:function(){
		
	},
	
	//if there is a javascript function in the div with class on_open then this
	//will spin the dialogue, hide the buttons in .poster_buttons and call that function. after it calls that function, it
	//will resize the dialogue appropriately and show the buttons in .poster_buttons
	//the function passed via the div MUST take two parameters, the callback that resizes
	//the div, passed first, and the object where content may be placed.
	//it is up to that function to draw html or whatever on the screen.
	//all this is async friendly, so you can load html from the server or whatever.
	show:function(name){
		
		var pname = 'poster_'+name;
		var js_open = $(pname).select('.on_open');
		
		Sheet.show_this_one(pname);
		
		if(js_open.length>0){
			//we open through a callback
			//first spin the content
			var target_area = Poster.find(name).select('.poster_content_holder')[0];
			Page.start_spinning(target_area);
			//fit to spinner to center on screen
			
			Poster.fit_poster_to_content(pname);
			
			//hide buttons
			var buttons = Poster.find(name).select('.poster_buttons')[0];
			
			if(buttons != null){
				buttons.hide();
			}
			
			var load_and_show = function(callback, target_area){
				eval(js_open[0].innerHTML);
			};
			
			load_and_show.apply(this, [function(ok, inspect_r, final_callback){
				if(final_callback != null){//never null for use from PosterController
					final_callback.apply(this, [inspect_r, function(){
						Poster.fit_poster_to_content(pname);
						if(buttons != null){
							buttons.show();
						}
						if(!ok) Poster.flash_error(target_area);
					}]);
				}else{
					Poster.fit_poster_to_content(pname);
					if(buttons != null){
						buttons.show();
					}
					if(!ok) Poster.flash_error(target_area);
				}
			}.bind(this), target_area]);
			
		}else{
			Poster.fit_poster_to_content(pname);
		}
	},
	//a sample function that you could place in the .on_open div that would
	//work.
	sample_on_open_called_function:function(callback, target_area){
		//do async here
		setTimeout(function(){
			$(target_area).update('<p>loaded via async</p><p>loaded via async</p>');
			Page.stop_spinning(target_area);
			callback();
		}.bind(this), 500);
	},
	hide:function(o){
		var pstr = this.find(o);
		
		//hide it
		Sheet.hide_this_one(pstr.id);
		
		//hide any open tooltips
		Tooltip.hide();
		
		if(BrowserDetect.ie6){
			$$('.ie_only_hide').each(function(t){t.removeClassName('ie_only_hide');});
		}
	},
	flash_ok:function(o){
		var pstr = this.find(o).select('.poster_content')[0];
		Notice.flash_ok(pstr);
	},
	flash_error:function(o){
		var pstr = this.find(o).select('.poster_content')[0];
		Notice.flash_error(pstr);
	},
	find:function(o){
		if(typeof o == 'string'){
			//a string name passed in
			return $('poster_'+o);
		}else{
			//an object reference passed in
			o=$(o);
			return o.up('.poster_sheet');
		}
	},
	fit_poster_to_content:function(o){
		
		if(typeof(o)=='string' && o.indexOf('poster_')==-1){
			o = 'poster_'+o;
		}
		var d = $(o);
		var inner = d.select('.poster_content')[0];
		var middle = d.select('.poster_middle')[0];
		var content_area = d.select('.poster_content_holder')[0];
		
		//since we set this later here we need to reset it first otherwise we get
		//an infinite loop of smaller and smaller ones
		content_area.style.height = 'auto';
		
		var h = inner.getHeight();
		
		//min height is 50 so that we have enough room for buttons, should they be there
		var middle_height = h - 90;
		if(middle_height < 50) middle_height = 50;	//keep a min height
		
		//defined by the screen
		var max_middle_height = document.viewport.getHeight() - 250;
		
		if(middle_height > max_middle_height) middle_height = max_middle_height
		
		middle.style.height = middle_height.toString() + 'px';
		content_area.style.height = (middle_height + 50).toString() + 'px';
		
		d.style.top = '50%';
		d.style.marginTop = '-' + (d.getHeight()/2).toString() + 'px';
		
		
		if(BrowserDetect.ie6){
			$$('.content select').each(function(t){
				t.addClassName('ie_only_hide');
			});
		}
	}
}




/* START applesearch object */
		
if (!applesearch)	var applesearch = {};

applesearch.init = function ()
{
	// add applesearch css for non-safari, dom-capable browsers
	if ( navigator.userAgent.toLowerCase().indexOf('safari') < 0  && document.getElementById )
	{
		this.clearBtn = false;
		
		// add style sheet if not safari
		var dummy = document.getElementById("dummy_css");
		if (dummy)	dummy.href = "applesearch.css";
	}
}

// called when on user input - toggles clear fld btn
applesearch.onChange = function (fldID, btnID)
{
	// check whether to show delete button
	var fld = document.getElementById( fldID );
	var btn = document.getElementById( btnID );
	if (fld.value.length > 0 && !this.clearBtn)
	{
		btn.style.background = "white url('srch_r_f2.gif') no-repeat top left";
		btn.fldID = fldID; // btn remembers it's field
		btn.onclick = this.clearBtnClick;
		this.clearBtn = true;
	} else if (fld.value.length == 0 && this.clearBtn)
	{
		btn.style.background = "white url('srch_r.gif') no-repeat top left";
		btn.onclick = null;
		this.clearBtn = false;
	}
}