ToggledSearchbox = new JS.Class('Searchbox', {
    extend: {
        PLACEHOLDER_SUPPORTED: (function() {
            var input = document.createElement('input');
            return 'placeholder' in input && input.placeholder.length > 0;
        })(),
        TOGGLE_FADE_TIME:       0.1,
        FORM_FADE_TIME:         0.3
    },
    
    initialize: function(form, field, options) {
        this._form  = Ojay(form);
        this._input = Ojay(field);
        this._label = Ojay.Forms.getLabel(field).hide();
        this._text  = this._input.node.placeholder || this._label.node.innerHTML.stripTags();
        
        if (options.toggle) {
            this._toggle = Ojay(Ojay.HTML.div({className: 'search-toggle'}, 'Search',
				Ojay.HTML.img({src: '/static/site/graphics/transparent.gif', alt: ''})));
            this._toggle.on('click')._(this).show();
            this._form.hide().setStyle({opacity: 0}).insert(this._toggle, 'after');
            this._hidden = true;
        }
        
        if (!this.klass.PLACEHOLDER_SUPPORTED) {
            this._input.on('focus')._(this).focus();
            this._input.on('blur')._(this).blur();
            this.blur();
        }
    },
    
    focus: function() {
        var input = this._input;
        
        input.removeClass('empty');
        
        if (input.node.value === this._text) {
            input.set({value: ''});
        }
    },
    
    blur: function() {
        var input = this._input,
            val   = input.node.value,
            text  = this._text;
        
        input.addClass('empty');
        
        if (val === '' || val !== text) {
            input.set({value: text});
        }
    },
    
    toggle: function() {
        this[this._hidden ? 'show' : 'hide']();
        this._hidden = !this._hidden;
    },
    
    show: function() {
        this._toggle.animate({
            opacity: {
                from: 1,
                to:   0
            }
        }, this.klass.TOGGLE_FADE_TIME).hide()
        ._(this._form).show().animate({
            opacity: {
                from: 0,
                to:   1
            }
        }, this.klass.FORM_FADE_TIME);
    },
    
    hide: function() {
        this._form.animate({
            opacity: {
                from: 1,
                to:   0
            }
        }, this.klass.FADE_TIME).hide()
        ._(this._toggle).show().animate({
            opacity: {
                from: 0,
                to:   1
            }
        }, this.klass.TOGGLE_FADE_TIME);
    }
});