var gtapHeader = true;

function resetOpacity(element) {
    if (Prototype.Browser.IE) {
        var filter = element.getStyle('filter');
        element.style.filter = filter.replace(/alpha\([^\)]*\)/gi,'') + 'alpha(opacity=' + (1 * 100) + ')';
    } else element.setOpacity(1);
}

var effects = {
    ac: {
        duration: 0.3,
        transition: Effect.Transitions.sinoidal
    }
};

var AC = {
    COLLAPSED: 'collapsed',
    EXPANDED : 'expanded',
    LUMINOUS : 'luminous'
};

Autocompleter = Class.create({
    initialize: function(){
        this.input = $('autocompleteGames');
        this.expand = $('headerAutocompleteExpand');
        this.form = $('searchForm');
        this.defClass = 'defaultText';
        if (!this.input || !this.form || !this.expand)
            return;
        this.cancel = this.form.down('a');
        this.moreInfo = $('acMoreInfo');
        this.searchArea = this.form.down('div.box_search_field');
        this.value = '';
        this.type = null;
        this.timeout = 500;
        this.hide = 3000;
        this.autohide = null;
        this.size = 3;
        this.selected = 0;
        this.count = 0;
        this.state = AC.COLLAPSED;
        this.area = null;
        this.init();
    },
    init: function(){
        this.cancel.observe('click', this.clearInput.bind(this));
        this.input.observe('focus',  this.activeInput.bind(this));
        this.input.observe('blur',   this.unactivateInput.bind(this));
        this.input.observe('keypress', this.inputKeyPress.bind(this));
        this.input.observe('keyup',    this.inputKeyUp.bind(this));
        this.expand.observe('mouseover', this.clearTimeout.bind(this));
        this.expand.observe('mouseout',  this.setHideTimeout.bind(this));
        this.moreInfo.observe('click',   this.goSearch.bind(this));
        this.searchArea.observe('click', this.activeInput.bind(this));
    },
    goSearch: function() {
        if (this.selected != 0 && AC.EXPANDED) {
            var item = $('autocompleteContent').down('a.row_cnt_box', this.selected - 1);
            window.location = item.href;
        } else {
            this.form.submit();
        }
    },
    setFocusState: function() {
        clearTimeout(this.area);
    },
    clearInput: function() {
        if (this.input.hasClassName(this.defClass)) return ;
        this.input.value = '';
        this.input.focus();
        this.hideResults();
    },
    activeInput: function() {
        clearTimeout(this.area);
        if (this.input.hasClassName(this.defClass)) {
            this.input.removeClassName(this.defClass).value = '';
            this.input.next().addClassName('cancelSearch');
        }
        this.setIcon();
        this.input.focus();
    },
    unactivateInput: function(event){
        this.area = setTimeout(function() {
            if (this.input.value.empty()) {
                this.input.addClassName(this.defClass).value = i18n('search_box_default_text');
                this.input.next().removeClassName('cancelSearch');
                this.cancel.focus();
                this.cancel.show();
            }
        }.bind(this), 500);
    },
    setIcon: function() {
        if (this.input.value.length == 0) this.cancel.hide();
        else this.cancel.show();
    },
    opacityResults: function(callback) {
        if (this.state == AC.LUMINOUS) return;
        this.state = AC.LUMINOUS;
        new Effect.Opacity(this.expand, Object.extend({
            from: 1,
            to: 0.2,
            afterFinish: callback
        }, effects.ac));
    },
    unopacityResults: function() {
        if (this.state != AC.LUMINOUS) return;
        this.state = AC.EXPANDED;
        new Effect.Opacity(this.expand, Object.extend({
            from: 0.2,
            to: 1,
            afterFinish: this.setHideTimeout.bind(this)
        }, effects.ac));
    },
    showResults: function() {
        if (this.state == AC.EXPANDED) return;
        this.state = AC.EXPANDED;
        this.expand.setOpacity(1);
        new Effect.SlideDown(this.expand, Object.extend({
            queue: 'end',
            afterFinish: this.setHideTimeout.bind(this)
        }, effects.ac));
    },
    hideResults: function() {
        if (this.state == AC.COLLAPSED) return;
        this.state = AC.COLLAPSED;
        new Effect.Parallel([new Effect.SlideUp(this.expand, {
            sync: true
        }), new Effect.Opacity(this.expand, {
            sync: true,
            from: 1,
            to: 0.8
        })], Object.extend({
            queue: 'end',
            afterFinish: this.clearTimeout.bind(this)
        }, effects.ac));
    },
    clearTimeout: function() {
        clearTimeout(this.autohide);
    },
    setHideTimeout: function() {
        this.clearTimeout();
        this.autohide = setTimeout(this.hideResults.bind(this), this.hide);
    },
    selectItem: function(id) {
        this.setHideTimeout();
        $$('.header_ac_expand .row_cnt_box').invoke('removeClassName', 'hover_now');
        var item = $('autocompleteContent').down('a.row_cnt_box', id - 1);
        if (item) item.addClassName('hover_now');
    },
    inputKeyPress: function(event){
        var key = event.keyCode || event.wich;
        switch (key) {
            case Event.KEY_RETURN:
                Event.stop(event);
                this.goSearch();
                break;
            case Event.KEY_TAB:
                Event.stop(event);
                break;
            case Event.KEY_ESC:
                Event.stop(event);
                this.clearInput();
                break;
        }
        return true;
    },
    inputKeyUp: function(event){
        var key = event.keyCode || event.wich;
        if (key == Event.KEY_DOWN) {
            if (this.selected < this.count) this.selectItem(++this.selected);
        } else if (key == Event.KEY_UP) {
            if (this.selected > 1) this.selectItem(--this.selected);
        }
        else {
            clearTimeout(this.type);
            this.type = setTimeout(this.beforeShow.bind(this), this.timeout);
            this.setIcon();
        }
        Event.stop(event);
    },
    beforeShow: function() {
        if (this.input.value.length < this.size) return;
        this.clearTimeout();
        this.value = this.input.value;
        if (this.state == AC.EXPANDED) this.opacityResults(this.load.bind(this));
        else this.load();
    },
    afterShow: function(transport) {
        var obj = transport.responseText.evalJSON();
        if (obj.content.empty()) {
            this.hideResults();
            return;
        }
        this.count = $('autocompleteContent').update(obj.content).select('a.row_cnt_box').size();
        this.moreInfo.down('span').update(obj.more);
        $('autocompleteContent').select('span.game_name_container').each(function(el) {
            var name = el.innerHTML;
            var re = new RegExp('(' + this.value + ')', 'i');
            el.innerHTML = name.replace(re, '<em class="colorH">$1</em>');
        }.bind(this));
        this.selected = 0;
        if (this.state == AC.LUMINOUS) this.unopacityResults();
        else if (this.state == AC.COLLAPSED) this.showResults();
    },
    load: function() {
        var url = new UrlConstructor('search/autocomplete');
        url.addVar('v', 2);
        url.addVar('q', this.value);
        new Ajax.Request(url.construct(), {
            method: 'get',
            onSuccess: this.afterShow.bind(this)
        });
    }
});

CatalogExpand = Class.create({
    initialize: function(){
        this.btn = $('headerCatalogExpandBtn');
        this.menu = $('headerCatalogExpand');
        if (!this.btn || !this.menu) return;
        this.timer = null;
        this.expanded = false;
        this.switchOn = false;
        this.btn.observe('mouseover', this.buttonOver.bind(this));
        this.btn.observe('mouseout', this.startHideTimer.bind(this));
        this.menu.observe('mouseover', this.clearHideTimer.bind(this));
        this.menu.observe('mouseout', this.startHideTimer.bind(this));
    },
    showMenu: function(){
        resetOpacity(this.menu);
        this.btn.addClassName('hover_now');
        if (this.btn.hasClassName('switch_on')) {
            this.btn.removeClassName('switch_on');
            this.switchOn = true;
        }
        this.menu.show();
    },
    hideMenu: function(callback){
        this.menu.hide();
        callback();
    },
    hide: function() {
        if (!this.expanded)
            return;
        this.hideMenu(function(){
            this.expanded = false;
            this.btn.removeClassName('hover_now');
            if (this.switchOn)
                this.btn.addClassName('switch_on');
        }.bind(this));
    },
    buttonOver: function(){
        this.clearHideTimer();
        if (this.expanded)
            return;
        this.expanded = true;
        this.showMenu();
    },
    clearHideTimer: function(){
        clearTimeout(this.timer);
    },
    startHideTimer: function(){
        this.timer = setTimeout(this.hide.bind(this), 200);
    }
});