// setup the namespace
if (typeof onepica == "undefined" || !onepica) {
    var onepica = {};
}

onepica.navSearch = Class.create({
	initialize: function () {
		this.isInFocus = false;
		this.isMouseOver = false;
		this.enableSlider = true;
		this.element = $('nav-search');
		
		if (this.element) {			
			this.topStart = parseInt(this.element.getStyle('top'));
			this.topEnd = this.topStart + 35;
			this.duration = 0.5;
			
			this.element.hover(this.mouseOver.bindAsEventListener(this), this.mouseOut.bindAsEventListener(this));
			Event.observe('search', 'focus', this.hover.bindAsEventListener(this));
			Event.observe('search', 'blur', this.blur.bindAsEventListener(this));
			this.textField = $('search');
			if(this.textField.value) {
				this.show();
				this.enableSlider = false;
			}
		}
	},
	
	show: function () {
		if (this.enableSlider) {
			clearTimeout(this.timeoutHandle);
			$('nav-search-slide').show();
			new Effect.Morph('nav-search', {style: {top:this.topEnd.toString()+'px'}, duration:this.duration, queue: { position:'end', scope:'navsearch', limit:2 }});
		}
	},
	
	hide: function () {
		if (this.enableSlider) {
			if(this.isInFocus == false && this.isMouseOver == false) {
				new Effect.Morph('nav-search', {style: {top:this.topStart.toString()+'px'}, duration:this.duration, queue: { position:'end', scope:'navsearch', limit:2 }});
				this.timeoutHandle = setTimeout("if($('nav-search').getStyle('top') == '"+this.topStart+"px') $('nav-search-slide').hide();", this.duration*1000+500);
			}
		}
	},
	
	mouseOver: function() { this.isMouseOver=true; this.show(); },
	mouseOut: function() { this.isMouseOver=false; this.hide(); },
	hover: function() { this.isInFocus=true; this.show(); },
	blur: function() { this.isInFocus=false; this.hide(); }
});