if (!Clip) var Clip = {};

Clip.Favorite = Class.create();
Clip.Favorite.prototype = {
    id: 'edit_1',
    page: $H(),
    favorite_id: null,

    labels: null,
    change: true,

    loader: null,
    history: $A(),
    beforeloading: null,

    initialize: function(args) {
        this.page = $H(args);
        $('profile_bot_myclip').onclick = this.openDialog.bindAsEventListener(this);

        new Ajax.Request(
            '/rest/favorite?format=json&t=' + new Date().getTime(),
            {
                method: 'get',
                parameters: this.page.toQueryString(),
                onSuccess: this.initialized.bind(this)
            }
        );

        $('message_open').update( Jemplate.process('dialog.tt') );
        $(this.id).update( Jemplate.process('loading.tt') );

        this.loader = this.element().innerHTML;

        this.hide();
    },

    initialized: function(request) {
        var json = eval("("+request.responseText+")");
        if (json.favorite) {
            this.favorite_id = json.favorite.id;
            this.switchImage();
        }
    },

    element: function() { return $(this.id) },
    show: function() {
        $('message_open').style.display = 'block';
        $('message_open').style.visibility = 'inherit';
    },
    hide: function() {
        $('message_open').hide();
        this.reset();
    },

    loading: function() {
        this.beforeloading = this.element().innerHTML;
        this.element().update( this.loader );
    },

    update: function(html) {
        var before = this.beforeloading ? this.beforeloading : this.element().innerHTML;
        this.history.push( before ); this.element().update(html);
        this.beforeloading = null;
    },
    reset: function() { this.history = []; this.element().update( this.loader ); },
    back: function() {
        var back = this.history.pop();
        if (back) {
            this.update( back );
        }
        else {
            this.hide();
            this.reset();
        }
    },

    openDialog: function(e) {
        this.show();

        new Ajax.Request(
            '/rest/favorite/labels?format=json&t=' + new Date().getTime(),
            {
                method: 'get',
                onSuccess: this.labelsLoaded.bind(this)
            }
        );

        return false;
    },

    labelsLoaded: function(request) {
        var json = eval("("+request.responseText+")");
        try {
          json.labels = json.labels.findAll( function(i) { return( i['id'] > 0 ) } );
        } catch (e) {}

        this.labels = json;
        this.change = true;

        if (json.error) { // xxx
            //this.update( Jemplate.process('need_login.tt', { back: document.location.pathname } ) );
            this.update( Jemplate.process('need_login.tt', { back: document.location.href } ) );
        }
        else {
            if (this.favorite_id) {
                this.update( Jemplate.process('remove_menu.tt', json) );
            }
            else {
                if (json.labels.length > 0) {
                    json.noback = true;
                    this.update( Jemplate.process('categories.tt', json ) );
                }
                else {
                    this.insert();
                }
            }
        }
    },

    insert: function() {
        var params = $H();
        params['type'] = this.page.schema;
        params['id'] = this.page.id;

        var form = $('labels_form');
        var query = '';
        if (form) {
            query =  Form.serialize( form );
        }

        new Ajax.Request(
            '/rest/favorite?format=json&t=' + new Date().getTime(),
            {
                method: 'post',
                parameters: params.toQueryString()+'&'+query,
                onSuccess: this.inserted.bind(this)
            }
        );
    },

    inserted: function(request) {
        var json = eval("("+request.responseText+")");

        if (json.status == 'OK') {
            this.favorite_id = json.id;
            this.update( Jemplate.process('success.tt') );
            if (this.change) this.switchImage();
        }
    },

    categorize: function() {
        this.loading();
        this.change = false;

        new Ajax.Request(
            '/rest/favorite/selected_label?format=json&t=' + new Date().getTime(),
            {
                method: 'get',
                parameters: this.page.toQueryString(),
                onSuccess: this.categorized.bind(this)
            }
        );
    },

    categorized: function(request) {
        var json = eval("("+request.responseText+")");

        var data = this.labels;
        data.selected = json.selected;

        this.update( Jemplate.process('categories.tt', data ) );
    },

    remove_confirm: function() {
        this.update( Jemplate.process('remove_confirm.tt') );
    },

    remove: function() {
        if (this.favorite_id) {
            new Ajax.Request(
                '/rest/favorite/delete/' + this.favorite_id + '?format=json&t=' + new Date().getTime(),
                {
                    method: "post",
                    onSuccess: this.removed.bind(this)
                }
            );
        }
    },

    removed: function(request) {
        var json = eval("("+request.responseText+")");
        if (json.status == 'OK') { // xxx
            this.favorite_id = null;
            this.hide(); this.reset();
            this.switchImage();
        }
    },

    image: null,
    switchImage: function() {
        var image = $('profile_bot_myclip').parentNode;

        if (!this.image) {
            this.image = document.createElement('li');
            this.image.onmouseover = function() { $('profile_bot_myclip').src = '/image/profile/profile_bot_myclip_f2.gif' };
            this.image.onmouseout = function() { $('profile_bot_myclip').src = '/image/profile/profile_bot_myclip.gif' };
            this.image.innerHTML = image.innerHTML;

            image.onmouseover = null;
            image.onmouseout = null;
            image.innerHTML = '<img src="/image/profile/profile_bot_myclip_in.gif" alt="MYクリップに入っています" name="profile_bot_myclip" width="211" height="64" class="csrPOINT" id="profile_bot_myclip" onmouseover="MM_swapImage(\'profile_bot_myclip\',\'\',\'/image/profile/profile_bot_myclip_in_f2.gif\',1)" onmouseout="MM_swapImgRestore()" />';
        }
        else {
            image.parentNode.replaceChild( this.image, image );
            
            this.image = null;
        }

        $('profile_bot_myclip').onclick = this.openDialog.bindAsEventListener(this);
    },

    dummy: null
};