(function($) {
    $.fn.facebook = function(optionOut) {
        var option = {
            time: 500,
            height: 320,
            width: 292
        }
        $.extend(option, optionOut)
        this.each(function () {
            var base = $(this)
            if ($(window).width() < 1024) base.hide()
            $('a', base).bind({
            	mouseover: function () {
            		$(this).css({
            			'width': '31px',
            			'left' : '0'
            		})	
            	},
            	mouseout: function () {
            		$(this).css({
            			'width': '29px',
            			'left' : '2px'
            		})	
            	},
                click: function (e) {
                	e.preventDefault()
                    base
                        .css({
                            'height' : option.height
                        })
                        .animate({
                            right: 0
                        }, option.time)
                    $('a', base).animate({
                        'left' : '31'
                    }, option.time)
                }
            })
            $('iframe', base).bind({
                mouseout: function () {
                    base
                        .css({
                            'height' : '101'
                        })
                        .animate({
                            right: '-' + option.width
                        }, option.time)
                    $('a', base).animate({
                        'left' : '2px',
                        'width' : '29px'
                    }, option.time)
                }
            })
        })
    }
})(jQuery)

jQuery(function () {
    $('#facebook').facebook()
})