<?php add_action('widgets_init', 'serpentsoft_gplusbox_widget_init');

function serpentsoft_gplusbox_widget_init() {
    register_widget('serpentsoft_gplusbox_widget');
}

class serpentsoft_gplusbox_widget extends WP_Widget {

    function serpentsoft_gplusbox_widget() {
        $widget_ops = array('classname' => 'widget-gplus', 'description' => '');
        $control_ops = array('width' => 250, 'height' => 350, 'id_base' => 'id-widget-gplus');
        $this->WP_Widget('id-widget-gplus', theme_name . ' - Google+ Page Box', $widget_ops, $control_ops);
    }

    function widget($args, $instance) {
        extract($args);
        $title = apply_filters('widget_title', $instance['title']);
        $gplus_url = $instance['gplusurl'];
        $gplus_box_width = $instance['width'];
        if( !is_numeric($gplus_box_width) || $gplus_box_width < 0 ) { $gplus_box_width = 270; }
        
        echo $before_widget;
        if ($title) :
            echo $before_title;
            echo $title;
            echo $after_title;
        endif;

        if ($gplus_url) { ?>

        <style type="text/css">
            .g-plus-box-overflow{
                overflow: hidden;
            }
        </style>
        <div class="g-plus-box-overflow">
            <div class="g-page" data-width="<?php echo $gplus_box_width; ?>" data-href="<?php echo $gplus_url; ?>" data-layout="landscape" data-rel="publisher"></div>

            <!-- Place this tag after the last widget tag. -->
            <script type="text/javascript">
                //<![CDATA[
                (function() {
                    "use strict";
                    var po = document.createElement('script');
                    po.type = 'text/javascript';
                    po.async = true;
                    po.src = 'https://apis.google.com/js/plusone.js';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(po, s);
                })();
                //]]>
            </script>
        </div>
        <?php } ?>

        <?php echo $after_widget;
    }

    function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['gplusurl'] = strip_tags($new_instance['gplusurl']);
        $instance['width'] = strip_tags($new_instance['width']);

        return $instance;
    }

    function form($instance) {
        $defaults = array('title' => 'G+ Page Box', 'gplusurl' => '', 'width' => '270');
        $instance = wp_parse_args((array) $instance, $defaults); ?>
        
        <style type="text/css">
            .widg_gplus_box_alert{
                color: red;
                display: block;
            }
        </style>
        
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title', 'serpentsoft'); ?>: </label>
            <input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $instance['title']; ?>" class="widefat" type="text" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id('gplusurl'); ?>"><?php _e('G+ Page URL', 'serpentsoft'); ?>: </label>
            <small class="widg_gplus_box_alert">https://plus.google.com/u/1/b/<b>xxxxx/xxxxx</b></small>
            <input id="<?php echo $this->get_field_id('gplusurl'); ?>" name="<?php echo $this->get_field_name('gplusurl'); ?>" value="<?php echo $instance['gplusurl']; ?>" class="widefat" type="text" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id('width'); ?>"><?php _e('Box Width', 'serpentsoft'); ?>: </label>
            <small class="widg_gplus_box_alert"><?php _e('Default: 270 - You can customize depending on sidebar width', 'serpentsoft'); ?></small>
            <input id="<?php echo $this->get_field_id('width'); ?>" name="<?php echo $this->get_field_name('width'); ?>" value="<?php echo $instance['width']; ?>" class="widefat" type="text" />
        </p>
        
<?php } } ?>