/* results_v2.js, polarrose.com, johanb@polarrose.com */

Event.addBehavior({
    '.link_add_more:click': function(){
        results.shield.disable(this)
        results.add(this);
        return false;
    },
    '#button_new_search:click': function(){
        if($$(".mugshot").length > results.config.limit){
            Effect.ScrollTo("header",{
                duration: 1,
                afterFinish: function(){ $("input_search").select(); }
            });
        } else {
            $("input_search").select();
        }
        return false;
    },
    '.mugshot:mouseover': function(){
        this.addClassName('hover');
    },
    '.mugshot:mouseout': function(){
        this.removeClassName('hover');
    }
});

var results = { // global results object
    config: {
        target: "results",
        limit: 20
    },
    init: function(json){
        this.json = json;
    },
    hash: function(str){
        return str.split("#")[1];
    },
    total: function(n){
        $("count").update(n);
    },
    urls: function(el){
        this.params = "";
        if(this.json){
            this.json.faces.each(function(result,i){
                if(i==this.config.limit){ throw $break; }
                this.params += "&uuids="+result.faceUuid;                
            }, this);
            new Ajax.Request("/details",{
                method: 'get',
                parameters: this.params,
                onSuccess: function(xhr){
                    this.update_json(xhr.responseJSON);
                    this.shield.add(el);
                }.bind(this)
            });
        }
    },
    shield: {
        add: function(el){
            var target = $(results.config.target);
            var shield = new Template('<div class="shield"><h2>#{totals}</h2>confirmed<br />results shown<br /><a href="##{amount}" class="button green large link_add_more" accesskey="m">Load #{amount} more</a></div>');
            var no_more = new Template('<div class="shield"><h2 class="no_more">#{totals}</h2><p>confirmed<br/>results shown</p><a href="#input_search" id="button_new_search" class="button blue large">New search</a></div>');
            var remaining = results.json.faces.length;
            var data = {
                amount: (remaining > 20 ? "20" : remaining),
                totals: $$(".mugshot").length
            }
            remaining == 0 ? target.insert(no_more.evaluate(data)) : target.insert(shield.evaluate(data));
            
            if(el){
                this.disable(el);
                this.scroll($$(".shield.disabled").last().next());
            }
            
            Event.addBehavior.reload(); // reload events
        },
        disable: function(el){
            var el = $(el);
            el.removeClassName("link_add_more");
            el.removeAttribute("href");
            el.up().addClassName("disabled");
        },
        scroll: function(el){
            $$("body").first().removeClassName("height100"); // remove 100% height before we scroll
            window.opera ? Element.scrollTo(el,{
                duration: 1,
                offset: -10
            }) : Effect.ScrollTo(el,{
                duration: 1,
                offset: -10
            });
        }
    },
    update_json: function(obj){
        this.json.faces.each(function(result,i){
            if(i==this.config.limit){ throw $break; }
            this.json.faces[i].imageSourceUrl = obj[result.faceUuid]; // insert urls into json object
        }, this);
    },
    add: function(el){
        var amount = parseInt(this.hash(el.href));
        var mugshot = new Template('<div class="mugshot"><div class="functions"><a href="/duplicates/#{dupeid}" class="duplicates" title="There is #{dupes} of this image">#{dupes}</a></div><a href="/photo/#{uuid}" class="photo"><img src="#{img}" alt="#{justname}" title="#{justname}"/></a><div class="data">#{name}<br/><a href="http://#{url}" class="meta">#{url}</a></div></div>');
        var target = $(this.config.target);
        
        this.json.faces.each(function(result,i){
            if(i==this.config.limit){ throw $break; }
            
            var data = {
                uuid    : result.faceUuid,
                img     : result.faceUrl,
                dupeid  : result.duplicateGroupId,
                dupes   : (result.duplicateGroupSize > 1 ? result.duplicateGroupSize + " duplicates" : ""),
                name    : (result.name == '' ? "<span class=\"unknown\">Unknown Person</span>" : "<a href=\"/found/" + result.name.replace(/"/g,"").replace(/ /g,"+") + "\" class=\"name\">" + result.name.escapeHTML().truncate(39, '&hellip;') + "</a>"),
                justname    : (result.name == '' ? "Unknown Person" : result.name.escapeHTML().truncate(39, '&hellip;')),
                nameurl : result.name.replace(/"/g,"").replace(/ /g,"+"),
                url     : result.imageSourceUrl.truncate(22)
            }
            
            target.insert(mugshot.evaluate(data)); // insert result into target
            this.json.faces = this.json.faces.without(result); // remove inserted result from json object
        }, this);
        
        this.total($$(".mugshot").length); // update totals
        this.urls(el); // pre fetch next 20 urls
    }
}

/* dom ready */
document.observe("dom:loaded", function(){
    results.urls();
    results_width.change();
    Event.observe(document.onresize ? document : window, "resize", results_width.change.bind(results));
});