var Binder = function (element, options)
{
    this.$element = $(element);
    this.options = $.extend({}, $.fn.binder.default, options);
    this._init();
};

Binder.prototype = {
    constructor:Binder,
    _init      :function ()
    {
        if (!$('#binder').length)
        {
            $('<div id="binder"/>').hide().appendTo('body');
        }
    },
    /**
     * オーバーレイを生成
     *
     * @return {*|jQuery|HTMLElement}
     */
    overlay    :function ()
    {
        var overlay = $('#overlay');
        if (!overlay.length)
        {
            overlay = $('<div id="overlay"/>');
            overlay.on({
                click:$.proxy(this.click, this)
            })
                .css({
                    display  :'none',
                    minHeight:'100%'
                });

            overlay.appendTo('body');
        }
        return overlay;
    },

    show  :function ()
    {
        var self = this
            , $binder
            ;


        $binder = $('#binder').css({
//            height: $(window).height() *.8 + '%'
            height:'90%'
        });

        $('<div id="confirm" class="plate"><div id="confirm-back"><a id="overlay-close" class="btn" href="#">◀ キャンセル</a></div><div id="confirm-plate"><img src="../person/'+self.$element.data('person-id')+'-poster.jpg"></div><div id="confirm-forward"><a class="btn" href="step6.html">投票する ▶</a></div></div>').appendTo($binder);


        $binder.show();

        if (self.options.blur)
        {
            $('body').css({
                position:'relative'
//                height: 'auto'
            });
            $(self.options.blurSelector).css({
                '-webkit-filter':'blur(3px)'
            });
        }
        self.overlay().fadeIn(function ()
        {
            $.proxy(self.onshow, self);
        });

        // escape で hide
        $(document).on('keydown.data-api.overlay', function (e)
        {
            if (e.keyCode == 27)
            {
                self.hide();
            }
        });
        $(document).on('click.data-api.overlay', '#overlay-close', function(e){
            e.preventDefault();
            self.hide();
        });


    },
    onshow:function ()
    {
        console.log('show');
    },
    hide  :function ()
    {
        var self = this;

        $('#binder').empty().hide();

        if (this.options.blur)
        {
            $(this.options.blurSelector).css({
                '-webkit-filter':'blur(0px)'
            });
        }

        this.overlay().fadeOut(function ()
        {
            $.proxy(self.onhide, self);
        });

        // escape で hide
        $(document).off('keydown.data-api.overlay');
    },
    onhide:function (e)
    {
        console.log('hide');
    },
    click :function (e)
    {
        e.stopPropagation();
        e.preventDefault();

        this.hide();
    }
};

$.fn.binder = function (options)
{
    return this.each(function ()
    {
        var $this = $(this), data = $this.data('binder');
        if (!data)
        {
            $this.data('binder', (data = new Binder(this, options)));
        }
        if (typeof options == 'string')
        {
            data[options]();
        }
    });
};

$.fn.binder.default = {
    blur:false
};

$.fn.binder.Constructor = Binder;


$(document).on('click', '[data-toggle="binder"]', function (e)
{
    e.preventDefault();
    var $this = $(this)
        , href = $this.attr('href')
        ;

    $this
        .binder({
            show:true,
            blur:true,
            blurSelector: '#dialog',
            src :href
        })
        .one('hide', function ()
        {
            $this.focus()
        });

    $this.binder('show');
});
