var fc_search;
FastInit.addOnLoad(function() {
fc_search = new searchwidget( $('searchwidget') );
});
var searchwidget = Class.create({
active:false,
mode:0, // 0: inactive, 1: input in focus, 2: resultbox visible
results:null,
container: null,
input: null,
placeholder: '',
resultBox: null,
options: {
opacity: 0.5,
effectDuration: 0.3,
offset: {}
},
initialize: function(container) {
this.container = container;
this.input = container.select('input').first();
this.placeholder = this.input.getValue();
this.container.setOpacity(this.options.opacity);
this.options.offset = this.container.cumulativeOffset();
this.renderSearchbox();
this.listen();
},
listen: function() {
var context = this;
/* */
document.observe('click',function(event){
if (!context.resultBox || !context.resultBox.visible()) return;
var el = event.element();
if (el == context.resultBox || el.descendantOf(context.resultBox) || el.descendantOf(context.container))
return;
context.resultBox.hide();
context.mode = 0;
context.input_onBlur(event);
});
/* */
this.container.observe('mouseenter', this.input_onMouseEnter.bind(this));
this.container.observe('mouseleave', this.input_onMouseLeave.bind(this));
this.input.observe('focus', this.input_onFocus.bind(this));
this.input.observe('blur', this.input_onBlur.bind(this));
/* */
new Form.Element.Observer(this.input, 0.5, this.engine.bind(this));
},
engine: function(input) {
if (this.mode == 0)
return;
if (this.hasResults()) {
this.resultBox.show();
this.mode = 2;
}
var searchstring = input.getValue();
var context = this;
var resultlist = this.resultBox.select('ul').first();
new Ajax.Request('/',{
method: 'get',
parameters: {s: searchstring},
onCreate: function() {
},
onSuccess: function(transport) {
var data = transport.responseJSON.searchresults;
/*
data.each(function(item,key){
var li = resultlist.select('li')[key];
li.select('a').first().update(
'' + item.title + '
' + item.summary
).writeAttribute('href', item.url);
item.selected ? li.addClassName('hover') : null;
});
*/
context.results = data;
context.updateList();
}
});
if (this.hasResults()) {
this.resultBox.show();
this.mode = 2;
}
},
hasResults: function() {
return (this.results != undefined && this.results.size() > 0);
},
updateList: function() {
var resultlist = this.resultBox.select('ul').first();
resultlist.select('li').each(function(item) {
item.select('a').first().update("").writeAttribute('href', 'javascript:;');
});
this.results.each(function(item,key){
var li = resultlist.select('li')[key];
var a = li.select('a').first();
a.update(
'' + item.title + '
' + item.summary
).writeAttribute('href', item.url);
item.selected ? a.addClassName('hover') : null;
});
},
leave: function() {
this.listNav('away');
},
listNav: function(dir) {
var resultlist = this.resultBox.select('ul').first();
var selectedKey = -1;
var selectedLi;
var gotoKey = 0;
resultlist.select('li').each(function(item, key){
if (item.hasClassName('hover')) {
selectedKey = key;
selectedLi = item;
$break;
}
});
if (dir == 'away') {
document.location.href = selectedLi.select('a').first().readAttribute('href');
return;
}
gotoKey = (dir=='up' ? selectedKey-1 : selectedKey+1);
if (gotoKey < 0)
gotoKey = 0;
if (gotoKey > 4)
gotoKey = 4;
resultlist.select('li a').invoke('removeClassName', 'hover');
resultlist.select('li a')[gotoKey].addClassName('hover');
},
renderSearchbox: function() {
var div = new Element('div', {id: 'search'});
var pagDiv = new Element('div', {className: 'pagination'});
var ul = new Element('ul');
var li,a;
for(var i=0;i<=4;i++) {
li = new Element('li');
a = new Element('a', {href: 'javascript:;', title: ''});
li.insert(a);
a.observe('mouseenter', function(e) {
this.addClassName('hover');
});
a.observe('mouseout', function(e){
this.removeClassName('hover');
});
ul.insert(li);
}
div.insert(ul);
a = new Element('a', {href: 'javascript:;', className: 'buttonsmall'}).setStyle({float: 'right', marginRight: '7px'}).update('Neste');
pagDiv.insert(a);
div.insert(pagDiv);
pagDiv.hide();
div.clonePosition(this.container, {
setWidth: false,
setHeight: false,
offsetLeft: -5,
offsetTop: 20
});
document.body.insert(div);
this.resultBox = div;
div.hide();
var context = this;
this.input.observe('keypress', function(event){
var key = event.which || event.keyCode;
switch(key) {
case Event.KEY_UP:
// case Event.KEY_LEFT:
context.listNav('up');
if (event && event.preventDefault)
event.preventDefault();
break;
case Event.KEY_DOWN:
// case Event.KEY_RIGHT:
context.listNav('down');
if (event && event.preventDefault)
event.preventDefault();
break;
case Event.KEY_RETURN:
context.resultBox.show();
context.engine( context.input );
break;
}
return false;
});
return div;
},
input_onMouseEnter: function(event) {
if (this.mode != 0) return;
var el = this.container
var context = this;
new Effect.Opacity(el, {
from: el.getOpacity(),
to: 1,
duration: context.options.effectDuration
});
},
input_onMouseLeave: function(event) {
if (this.mode != 0) return;
var el = this.container
var context = this;
new Effect.Opacity(el, {
from: el.getOpacity(),
to: context.options.opacity,
duration: context.options.effectDuration
});
},
input_onFocus: function(event) {
this.mode = 1;
var el = this.input;
el.setOpacity(1);
if (el.getValue() == this.placeholder)
el.value = '';
},
input_onBlur: function(event) {
if (this.mode == 2) return;
this.mode = 0;
var el = this.input;
var context = this;
new Effect.Opacity(this.container, {
from: el.getOpacity(),
to: context.options.opacity,
duration: context.options.effectDuration
});
if (el.getValue() == "")
el.value = this.placeholder;
}
});
/*
* Neste
*/