class Yu_banner extends WP_Widget { //繼承了 WP_Widget 這個類來建立新的小工具(Widget)  
    function Yu_banner() {  
        // 主要內容方法 
        $widget_ops = array(
              'description' => '新增幻燈片'
          );
        $control_ops = array(
          'width' =>400,
          'height' =>300
        );
       parent::WP_Widget(false,$name='Yu幻燈片',$widget_ops,$control_ops);
        //parent::直接使用父類中的方法  
        //$name 這個小工具的名稱,  
        //$widget_ops 可以給小工具進行描述等等。  
        //$control_ops 可以對小工具進行簡單的樣式定義等等。  
    }  
    function form($instance) {  
         // 給小工具(widget) 新增表單內容
         $nav1_link = $instance['nav1_link'];
         $nav1_title = $instance['nav1_title'];

         $nav2_link = $instance['nav2_link'];
         $nav2_title = $instance['nav2_title'];

         $nav3_link = $instance['nav3_link'];
         $nav3_title = $instance['nav3_title'];

         $nav4_link = $instance['nav4_link'];
         $nav4_title = $instance['nav4_title'];

         ?>
          <label>
            <h4>幻燈片1</h4>
            <input type="text" id="<?php echo $this->get_field_id('nav1_link'); ?>" name="<?php echo $this->get_field_name('nav1_link'); ?>"
            value="<?php echo esc_attr($nav1_link); ?>"/>
          
            <span>*幻燈片連結</span>

            <input type="text" id="<?php echo $this->get_field_id('nav1_title'); ?>" name="<?php echo $this->get_field_name('nav1_title'); ?>"
            value="<?php echo esc_attr($nav1_title); ?>"/>
            <span>*幻燈片標題</span>
          </label>

          <label>
            <h4>幻燈片2</h4>
            <input type="text" id="<?php echo $this->get_field_id('nav2_link'); ?>" name="<?php echo $this->get_field_name('nav2_link'); ?>"
            value="<?php echo esc_attr($nav2_link); ?>"/>
       
            <span>*幻燈片連結</span>

            <input type="text" id="<?php echo $this->get_field_id('nav2_title'); ?>" name="<?php echo $this->get_field_name('nav2_title'); ?>"
            value="<?php echo esc_attr($nav2_title); ?>"/>
            <span>*幻燈片標題</span>
          </label>

          <label>
            <h4>幻燈片3</h4>
            <input type="text" id="<?php echo $this->get_field_id('nav3_link'); ?>" name="<?php echo $this->get_field_name('nav3_link'); ?>"
            value="<?php echo esc_attr($nav3_link); ?>"/>
           
            <span>*幻燈片連結</span>

            <input type="text" id="<?php echo $this->get_field_id('nav3_title'); ?>" name="<?php echo $this->get_field_name('nav3_title'); ?>"
            value="<?php echo esc_attr($nav3_title); ?>"/>
          
            <span>*幻燈片標題</span>
          </label>

          <label>
            <h4>幻燈片4</h4>
            <input type="text" id="<?php echo $this->get_field_id('nav4_link'); ?>" name="<?php echo $this->get_field_name('nav4_link'); ?>"
            value="<?php echo esc_attr($nav4_link); ?>"/>
            <span>*幻燈片連結</span>

            <input type="text" id="<?php echo $this->get_field_id('nav4_title'); ?>" name="<?php echo $this->get_field_name('nav4_title'); ?>"
            value="<?php echo esc_attr($nav4_title); ?>"/>
            <span>*幻燈片標題</span>
          </label>

          <?php wp_enqueue_media(); ?>
          <script>   
          jQuery(document).ready(function(){   
          var ashu_upload_frame;   
          var value_id;   
          jQuery('.ashu_upload_button').live('click',function(event){   
              value_id =jQuery( this ).attr('id');       
              event.preventDefault();   
              if( ashu_upload_frame ){   
                  ashu_upload_frame.open();   
                  return;   
              }   
              ashu_upload_frame = wp.media({   
                  title: 'Insert image',   
                  button: {   
                      text: 'Insert',   
                  },   
                  multiple: false   
              });   
              ashu_upload_frame.on('select',function(){   
                  attachment = ashu_upload_frame.state().get('selection').first().toJSON();   
                  //jQuery('#'+value_id+'_input').val(attachment.url).trigger('change');   
                  jQuery('input[name='+value_id+']').val(attachment.url).trigger('change');   
              });   
                 
              ashu_upload_frame.open();   
          });   
          });   
    </script>

         <?php


    }  
    function update($new_instance, $old_instance) {  
         // 進行更新儲存  
        $instance = $old_instance;
        $instance[ 'nav1_link' ] = strip_tags( $new_instance[ 'nav1_link' ] );
        $instance[ 'nav1_title' ] = strip_tags( $new_instance[ 'nav1_title' ] );

        $instance[ 'nav2_link' ] = strip_tags( $new_instance[ 'nav2_link' ] );
        $instance[ 'nav2_title' ] = strip_tags( $new_instance[ 'nav2_title' ] );

        $instance[ 'nav3_link' ] = strip_tags( $new_instance[ 'nav3_link' ] );
        $instance[ 'nav3_title' ] = strip_tags( $new_instance[ 'nav3_title' ] );

        $instance[ 'nav4_link' ] = strip_tags( $new_instance[ 'nav4_link' ] );
        $instance[ 'nav4_title' ] = strip_tags( $new_instance[ 'nav4_title' ] );
        return $instance;  
    }

    function widget($args, $instance) {  
        // 輸出顯示在頁面上  
         $nav1_link = $instance['nav1_link'];
         $nav1_title = $instance['nav1_title'];

         $nav2_link = $instance['nav2_link'];
         $nav2_title = $instance['nav2_title'];

         $nav3_link = $instance['nav3_link'];
         $nav3_title = $instance['nav3_title'];

         $nav4_link = $instance['nav4_link'];
         $nav4_title = $instance['nav4_title'];

        ?>
          <div id="zSlider" >
            <div id="picshow">
    <div id="picshow_img">
        <ul>
<li style="display: list-item;"><a href="/life/361.html" target="_blank">
                <img src="<?php echo $nav1_link;?>" alt="<?php echo $nav1_title;?>"></a></li>
<li style="display: list-item;"><a href="/life/394.html" target="_blank">
                <img src="<?php echo $nav2_link;?>" alt="<?php echo $nav2_title;?>"></a></li>
<li style="display: list-item;"><a href="/life/364.html" target="_blank">
                <img src="<?php echo $nav3_link;?>" alt="<?php echo $nav3_title;?>"></a></li>
<li style="display: list-item;"><a href="/gear/rs/320.html" target="_blank">
                <img src="<?php echo $nav4_link;?>" alt="<?php echo $nav4_title;?>"></a></li>



        </ul>
    </div>
</div>
<div id="select_btn">
    <ul>
        <li class="current"></li><li class=""></li><li class=""></li><li class=""></li>
    </ul>
</div>
            <div class="focus-bg-title"><div id="focus-left" class="arrow-left" onmouseover="IFocuse(this,true)" onmouseout="IFocuse(this,false)"></div>
            <div id="focus-center" class="focus-title">
            <div style="float:left;width:580px;padding-left:10px;font-size:18px;" id="focus-tl-s"></div>
            <div style="float:right;width:200px;"></div>
            </div>
            <div id="focus-right" class="arrow-right"></div></div>
            </div>
        <?php
    }  
}