if (!Clip) var Clip = {};

Clip.Home = {
    rects: $H(),
    clips: $H(),
    pages: $H(),

    loadhash: function() {
        var snippets = document.location.hash.split(/\//);
        var keys     = $H();
        var changes  = $A();

        if (snippets) {
            snippets[0] = snippets[0].replace(/^#/, '');

            for (var i = 0; i < snippets.length; i++) {
                var match = snippets[i].match(/(.*):(.*)/);
                if ( match ) {
                    if (match[1] && match[2]) {
                        if ( this.pages[match[1]] && (this.pages[match[1]] != match[2]) ) {
                            changes.push(match[1]);
                        }
                        keys[ match[1] ] = true;
                        this.pages[match[1]] = match[2];
                    }
                }
            }
        }

        for (var i in this.pages) {
            if (!keys[i]) {
                this.pages[i] = 1;
                changes.push(i);
            }
        }

        return changes;
    },

    updatehash: function() {
        var hash = $A();
        for (var id in this.pages) {
            if (typeof(this.pages[id]) == 'function') continue;

            hash.push(id + ':' + this.pages[id]);
        }

        bbb.change( hash.join('/') );
    },

    updatecallback: function() {
        var changes = this.loadhash();
        for (var id in changes) {
            if (typeof(changes[id]) == 'function') continue;
            this.renderBody( changes[id], this.pages[changes[id]] || 1 );
        }
    },

    render: function() {
        var url = '/rest/topclip?format=json&t='+(new Date().getTime());

        new Ajax.Request(
            url, {
                method: 'get',
                onSuccess: Clip.Home.rendered.bind(this)
            }
        );
    },

    renderBody: function(id, page) {
        var clip = Clip.Home.clips[id];

        var url = clip.query;

        this.pages[id] = page;

        var query = $H();
        var m = url.match(/^(.*?)\?(.*)$/);
        if (m) {
            url = m[1];
            query = $H( m[2].toQueryParams() );
        }

        Clip.Home.rects[clip.id] = {
            width: clip.width,
            height: clip.height
        };

        query['id'] = clip.id;
        query['page'] = page;
        query['perpage'] = clip.width * clip.height;

        url += '?format=json&t=' + new Date().getTime();

        new Ajax.Request(
            url, {
                method: 'post',
                parameters: query.toQueryString(),
                onSuccess: Clip.Home.bodyRendered.bind(this)
            }
        );
    },

    rendered: function(request) {
        var json = eval("("+request.responseText+")");
        var myclip = json.myclip;
        myclip.clips_html = [];

        myclip.clips.each( (function( clip, index ) {
            if (!clip) return;

            var data = clip;
            {
                // position
                var pos    = parseInt(clip.position);
                var pos_y  = parseInt( pos / 6) + 1;
                var pos_x  = (pos+1) % 6 || 6;

                data.loc = pos_x+'_'+pos_y;
            }

            var template;
            try {
                template = data['class'].match(/\w+_tt/)[0].replace(/_.*?/, '.');
            }
            catch (e) {
                template = 'clip.tt';
            }
            data['class'] = data['class'].split(/\s+/).slice(2).join(' ');
            myclip.clips_html.push( Jemplate.process(template, data) );

            Clip.Home.clips[ clip.id ] = clip;

            Clip.Home.renderBody( clip.id, this.pages[clip.id] || 1 );
        }).bind(this));

        $('clip_wrapper').className = 'wH'+myclip.rows;
        Jemplate.process('clips.tt', myclip, '#clip_wrapper');
    },

    bodyRendered: function(request) {
        var json = eval("("+request.responseText+")");
        json.width = Clip.Home.rects[json.id].width;
        json.clip = Clip.Home.clips[json.id];

        var body = Jemplate.process('clip_body.tt', json);

        $('clipBODY_'+json.id).update(body);
    },

    rerender: function() {
        $('clip_wrapper').update('');
        Clip.Home.render();
    },

    pointerX: 0,
    pointerY: 0,

    showSelecter: function(e) {
        Clip.Home.pointerX = Event.pointerX(e);
        Clip.Home.pointerY = Event.pointerY(e);

        var url = '/rest/topclips?format=json&t='+(new Date().getTime());

        new Ajax.Request(
            url, {
                method: 'get',
                onSuccess: Clip.Home.showSelecterCallback
            }
        );
    },

    hideSelecter: function(e) {
        var selecter = $('clip_selecter');
        if (selecter) selecter.style.display = 'none';
    },

    showSelecterCallback: function(request) {
        var container = $('clip_selecter');
        if (!container) {
            container = document.createElement('div');
            container.id = 'clip_selecter';
            document.body.appendChild(container);
        }
        Jemplate.process( 'clip_selecter.tt', eval("("+request.responseText+")"), '#clip_selecter' );

        container.style.top = Clip.Home.pointerY + 'px';
        container.style.left = Clip.Home.pointerX + 'px';
        container.style.display = '';
    },

    change: function(id) {
        var url = '/rest/topclip/select/'+id+'?format=json&t='+(new Date().getTime());

        new Ajax.Request(
            url, {
                method: 'get',
                onSuccess: function() {
                    Clip.Home.rerender();
                }
            }
        );
        Clip.Home.hideSelecter();
    },

    dummy: null
};

/*
Event.observe( document, 'dblclick', Clip.Home.showSelecter );
Event.observe( window, 'load', function() {
  Clip.Home.loadhash();
  bbb = new BBB({ callback: Clip.Home.updatecallback.bind(Clip.Home) });
  Clip.Home.render();
});
*/