// 外部からのクリックに対応
Ajax.InPlaceEditor.prototype.__initialize = Ajax.InPlaceEditor.prototype.initialize;
Ajax.InPlaceEditor.prototype = Object.extend(Ajax.InPlaceEditor.prototype, {
    initialize: function(element, url, options){
        this.__initialize(element,url,options);
        this.setOptions(options);
        this._checkEmpty();
        var self = this;
        this.element.click_from_outer_content = function(){
            self.enterEditMode(window.event);
        };
    },
    _checkEmpty: function(){
        if(this.element.innerHTML.length == 0){
            this.element.appendChild(
                Builder.node('span',{className:this.options.emptyClassName},[ Builder.node('img',{ src:"/images/partial/edit.gif" }), this.options.emptyText]));
            this._oldInnerHTML = this.element.innerHTML;
        }
    },
    setOptions: function(options){
        this.options = Object.extend(Object.extend(this.options,{
            emptyText: 'クリックして編集',
            emptyClassName: 'inplaceeditor-empty'
        }),options||{});
        // 以下は拡張前に初期化されちゃうので、再度やる感じ
        if (this.options.externalControl)
            this.options.externalControl = $(this.options.externalControl);
        if (!this.options.externalControl)
            this.options.externalControlOnly = false;
        this._boundComplete = (this.options.onComplete || Prototype.emptyFunction).bind(this);
    }
});

RecipeSelector = Class.create({
    ID: 0,
    TITLE: 1,
    PHOTO_URL: 2,
    initialize: function(id, textfield, container, wrapper, ajax_url, recipes_json){
        var self = this;
        this.id = id; // コンテストのID
        this.recipes = eval(recipes_json); // [[recipe_id, title, photo_url],[,,],]
        this.textfield = $(textfield);     // 検索テキストフィールド
        this.container = $(container);     // 検索結果の表示場所
        this.wrapper = $(wrapper);         // AJAXで更新される全体
        this.ajax_url = ajax_url;
        this.textfield.onkeypress = function(e){
            if(e.keyCode == Event.KEY_RETURN)
                return false;
        };
        this.textfield.observe('keyup', function(e){
            self.select_recipe()
        });
    },

    select_recipe: function(){
        var self = this;
        var value = this.textfield.value;

        if(value.length < 2){
            this.container.innerHTML = '';
            return;
        }
        var hit_recipes = this.recipes.findAll(
            function(recipe,i){
                return (recipe[self.TITLE].indexOf(value) != -1);
            }
        );
        if(hit_recipes.length >= 1){
            var html = '';
            html += '<ul>';
            hit_recipes.each(
                function(recipe,i){
                    if(i == 0){
                        html += '<li style="float:left;">';
                    }else if(i % 2 == 0){
                        html += '<li style="float:left;clear:both;">';
                    }else{
                        html += '<li style="float:right;">';
                    }
                    html += '<div style="width:260px;padding:10px;">';
                    html += '<img align="right" src="' + recipe[self.PHOTO_URL] + '" />';
                    html += '<a class="recipe-title font16" href="#">';
                    html +=  recipe[self.TITLE];
                    html += '</a><br />'
                    html += '<input type="button" value="このレシピを選択"'
                    html += 'id="recipe_selection_'+ recipe[self.ID] +'">';
                    html += '</div>';
                    html += '</li>';
                }
            );
            html += '<li style="clear:both;"></li>';
            html += '</ul>';
            this.container.innerHTML = html;

            hit_recipes.each(
                function(recipe,i){
                    var selection = $('recipe_selection_' + recipe[self.ID]);
                    selection.observe('click',function(){
                        new Ajax.Updater(self.container,
                                         self.ajax_url,
                                         {parameters: "recipe_id=" + recipe[self.ID] + "&id=" + self.id,
                                          onComplete: function(){new Effect.Highlight(self.container);}}
                                        );
                        return false;
                    })
                }
            );


        }else{
            this.container.innerHTML = '';
        }
    }
});

function update_counter(fld, counter_fld, max_count){
    var rest_count = max_count - fld.value.length;
    counter_fld.innerHTML = rest_count;
    counter_fld.style.color = (rest_count < 0) ? 'red' : 'black';
}

Event.observe(window, 'load', function(){
    var fld = $('comment');
    if(!fld)
        return;
    var counter_fld = $(fld.id + '_counts');
    if(!counter_fld)
        return;

    var max_count = 35;
    var rest_count = max_count - fld.value.length;
    update_counter(fld, counter_fld, max_count);
    Event.observe(fld, 'keyup', function(){update_counter(fld, counter_fld, max_count);});
});