{{ javascript_include("assets/classes/jcrop/js/jquery.Jcrop.js") }}
{{ stylesheet_link("assets/classes/jcrop/css/jquery.Jcrop.css") }}

<style type="text/css">

    #target {
        background-color: #ccc;
        width: 2000px;
        height: 1050px;
        font-size: 24px;
        display: block;
    }
    .jcrop-keymgr {
        opacity: 0;
    }
{% if is_view %}
    .display-view {
        display: none;
    }
{% endif %}

</style>


<?php $this->partial("dashboard/side_nav"); ?>

<div id="all"> 

<div class="overlay-stay" id="overlay-stay"></div>
<div class="overlay" id="overlay"></div>

{% if is_view == false %}

<div class="loading-wrap" style="display:none;">
    <div class="loading">
      <span class="gif-loading">{{ image('assets/images/loading.gif', 'alt':"") }}</span>
      <span class="loading-text">
        <span class="loading-percent" id="loading-progress">0%</span>
        <span class="loadingText">loading...</span>
        <span class="cancel-loading" onclick="stopProcess()">ยกเลิก</span>
      </span>
    </div>
</div>

<div class="fade-dialog" id="confirm-removee-cover" style="display:none;">
<div class="dialog">
    <div class="title-dialog">{{ _('confirm_del_cover_image') }}</div>
  <div class="detail-dialog-max-height mCustomScrollbar">
    {{ _('confirm_del_cover_image_msg') }}
  </div>
  <div class="button-dialog">
    <ul class="buttonLists-dialog">
      <li><span class="accept" id="confirm-remove">{{ _('btn_confirm') }}</span></li>
      <li><span class="cancel">{{ _('btn_cancel') }}</span></li>
    </ul>
    </div>
</div>
</div>


<div class="fade-dialog" id="confirm-change-upload-profile" style="display:none;">
    <div class="dialog">
        <div class="title-dialog">แจ้งเตือน</div>
        <div class="detail-dialog-max-height mCustomScrollbar">
        บันทึกข้อมูลเรียบร้อย ค่ะ!
        </div>
        <div class="button-dialog">
            <ul class="buttonLists-dialog">
              <li><span class="cancel">ปิดหน้าต่างนี้</span></li>
            </ul>
        </div>
    </div>
</div>

  
<div class="fade-dialog" id="dialog-upload" style="display: none;">
    <div class="modal-manage-picture">
        <div class="modal-manage-picture-content">
        <div class="modal-manage-picture-head">
          <ul class="tab-gallery">
            <li class="selected">{{ _('lb_tab_upload') }}</li>
            <li>{{ _('lb_tab_gallery') }}</li>
          </ul>
        </div> 
        <div class="modal-manage-picture-wrap"> 
          <div class="modal-box">
                
                <div id="div-show-msg-box"></div>
                <!-- <div class="status-bar-red" style="display:none"><i class="fa fa-exclamation-triangle"></i> </div> -->
                <!-- <div class="status-bar-green" style="display:none"><i class="fa fa-check-circle"></i> แจ้งเตือน อัพโหลดรูปภาพสำเร็จ ค่ะ  </div> -->
              
                <!-- กล่องอัพโหลด -->
            <div class="modal-box-upload">
                {{ form('dashboard/ajaxupload', 'name': 'frmImage', 'id': 'frmImage', 'method': 'post', 'enctype': 'multipart/form-data') }}
                <div class="upload-drag-img">
                  {{ image('assets/images/drag.png', 'alt': '', 'width': 112, 'height': 94, 'class': 'drag-img') }} 
                  <div class="drag-txt">{{ _('lb_drag_image') }}</div>
                  <div class="drag-txt">{{ _('lb_or') }}</div> 
                  <img id="source_image" class="img_container" style="display:none;">
                  <img id="result_image" class="img_container" style="display:none;">
                </div>
                <div class="drag-txt input-form"><!-- onchange="uploaded();" -->
                    <input type="file" class="upload fileToUpload" name="fileupload" id="upload" style="position: fixed; left: -500px; opacity: 0;" >
                </div>
                {{ end_form() }}
            </div>
              
              
            <div class="modal-box-crop" style="display: none;">
                <div id="show-image-crop"></div>
            </div>
              
          </div>
          
          <div class="modal-box" style="display: none;">
            <div class="model-box-gallery">
                <ul class="box-gallery">
                <li>{{ image('assets/images/cover-profile.jpg', 'alt': '') }}</li>
                <li>{{ image('assets/images/cover.jpg', 'alt': '') }}</li>
                <li>{{ image('assets/images/cover_blog_index.jpg', 'alt': '') }}</li>
                <li>{{ image('assets/images/default_picture.jpg', 'alt': '') }}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="modal-manage-picture-button"><!-- ajaxuploadcrop -->
            <span class="cancal cancel-left">{{ _('btn_cancel') }}</span>
            <span class="changeImage">เปลี่ยนรูป</span>
            <div id="show-form-crop" style="display:none;">
                <form action="{{ url.get() }}dashboard/ajaxuploadcrop" method="post" name="frmImageCrop" id="frmImageCrop" enctype="multipart/form-data">
                    <input type="hidden" name="path_url_image" id="path_url_image" value="">
                    <input type="hidden" id="x" name="x" />
                    <input type="hidden" id="y" name="y" />
                    <input type="hidden" id="w" name="w" />
                    <input type="hidden" id="h" name="h" />
                    <input type="hidden" id="result_filename" name="result_filename" />
                    <input type="submit" id="btn-crop-image" style="display:none"; value="{{ _('btn_crop_image') }}" class="btn btn-large btn-inverse" />
                </form>
            </div>
          
          <!-- <span class="choose">เลือก</span> -->
          <!-- <span class="choose">เลือก</span> -->
        </div>
        </div>
    </div>
  <!-- End fade-dialog -->  
</div>

<!-- แก้ไขชื่อโปรไฟล์ -->
<div class="fade-dialog" id="edit-title" style="display:none;">
    <div class="dialog-medium">
    {{ form('dashboard/editprofilesave', 'name': 'frmName', 'id': 'frmName', 'method': 'post') }}
        <div class="title-dialog">{{ _('lb_profile_name') }}</div>
        <div class="detail-dialog-max-height mCustomScrollbar">
            <input type="text" name="edit_profile_name" id="edit_profile_name" class="text-field" value="{{ profileName }}">
        </div>
        <div class="button-dialog have-border">
            <ul class="buttonLists-dialog">
                <li><span class="accept" onclick="onFormSave('frmName');">{{ _('btn_save') }}</span></li>
                <li><span class="cancel">{{ _('btn_cancel') }}</span></li>
            </ul>
            <input type="hidden" name="edit_type" value="name">
        </div>
    {{ end_form() }}
    </div>
</div>
  
<!-- แก้ไขข้อความแนะนำตัว -->
<div class="fade-dialog" id="edit-about" style="display: none;">
<div class="dialog-medium">
{{ form('dashboard/editprofilesave', 'name': 'frmAbout', 'id': 'frmAbout', 'method': 'post') }}
    <div class="title-dialog">{{ _('lb_profile_about') }}</div>
    <div class="detail-dialog-max-height mCustomScrollbar">
        <textarea name="edit_profile_about" maxlength="200" id="content-about" placeholder="{{ _('lb_profile_about_placeholder') }}">{{ profileAbout }}</textarea>
    </div>
    <div class="button-dialog have-border">
        <ul class="buttonLists-dialog">
            <li><span class="accept" onclick="onFormSave('frmAbout');">{{ _('btn_save') }}</span></li>
            <li><span class="cancel">{{ _('btn_cancel') }}</span></li>
        </ul>
    </div>
    <input type="hidden" name="edit_type" value="about">
{{ end_form() }}
</div>
</div>
  
<!-- personal site Thanakorn -->
<div class="fade-dialog" id="edit-website" style="display: none;">
    <div class="dialog-large">
        <div class="title-dialog">{{ _('lb_personal_website') }}</div>
        
        {{ form('dashboard/editprofilesave', 'name': 'frmLink', 'id': 'frmLink', 'method': 'post') }}   

        <div class="box-site mCustomScrollbar">
            <div class="box-site-list">
                {% set n = 1 %}

                    {% for index, info in linkLists %}

                        <div class="wrap-input-website have-bg" id="Site{{n}}">
                            <input type="hidden" name="urls[]" value="{{info['url']}}">
                            <input type="hidden" name="site-names[]" value="{{info['title']}}">

                            <div class="col-1-45">{{info['url']}}</div>
                            <div class="col-2-45">{{info['title']}}</div>
                            <div class="col-add-10"><span class="remove-web"><i class="fa fa-trash"></i></span><span class="edit-web"><i class="fa fa-pencil"></i></span> </div>
                        </div>

                        {% set n = n + 1 %}

                    {% endfor %}
            </div>
        </div>

        <div class="detail-dialog-max-height">
            <div class="wrap-input-website" id="wrap-input-website">

                <!-- Add new personal site -->
                <div class="col-1">
                    <input type="text" id="edit-url-field" class="text-field" placeholder="URL">
                    <span id="url-error-message" class="text-error"></span>
                </div>

                <div class="col-2">
                    <input type="text" id="edit-title-field" class="text-field" placeholder="ชื่อเว็บไซต์">
                    <span id="url-title-error-message" class="text-error"></span>
                </div>

              <div class="col-add"><span class="add-web"><i class="fa fa-plus"></i></span></div>

            </div>       
        </div>

        <input type="hidden" name="edit_type" value="links">

        <div class="button-dialog have-border">
            <ul class="buttonLists-dialog">
                <li><input type="submit" name="btn_save" class="accept" style="border:0px; background:#fff;" value="{{ _('btn_save') }}"></li><!-- onclick="onFormSave('frmLink');" -->
                <li><span class="cancel">{{ _('btn_cancel') }}</span></li>
            </ul>
        </div>

    </div>
</div>
  
<div class="fade-dialog" id="confirmDeleteSite" style="display:none;">
    <div class="dialog">
    <div class="title-dialog">ยืนยันการลบลิงก์</div>
    <div class="detail-dialog-max-height mCustomScrollbar">
    แน่ใจหรือว่าต้องการลบลิงก์นี้??
    </div>
    <div class="button-dialog">
        <ul class="buttonLists-dialog">
          <li><span class="accept" id="confirmDeleteSiteButton">ยืนยัน</span></li>
          <li><span class="cancel-this" id="cancelDeleteSiteButton">ยกเลิก</span></li>
        </ul>
    </div>
    </div>
</div>

{% endif %}

  <!-- end personal site Thanakorn -->

<?php $this->partial("dashboard/main-header"); ?> 

<div class="cover-profile-wrap">
    <div class="edit-cover-profile-button display-view">
      <div class="upload-cover-profile-wrap">
          <div class="edit-cover-profile">
            <i class="fa fa-camera"></i>
            <div class="edit-cover-profile-txt edit-cover-page">{{ _('lb_change_image') }}</div>
          </div>
      </div>
    </div>
    
    <div class="remove-cover-profile-button" {% if cover == "" %} style="display:none"; {% endif %}>
      <div class="remove-cover-profile-wrap display-view">
          <div class="remove-cover-profile">
            <i class="fa fa-times"></i>
            <div class="edit-cover-profile-txt">เอาออก</div>
          </div>
      </div>
    </div>


        <input type="hidden" id="tmp_source_image" >
        
        <img id="source_image" class='img_container' style="display:none;" />
        <img id="result_image" class='img_container' style="display:none;"/>
    <div class="overlay-cover-profile"><div class="overlay-cover-profile-in"></div></div>
    <!-- <div class="cover-profile" style="background:url(//static.notegang.me/assets/images/cover-profile.jpg) center no-repeat; background-size:cover;"></div> -->
    <div class="cover-profile" id="cover-profile-show" style="background:url({{ cover }}) center no-repeat; background-size:cover;"></div>
</div>
  



  <div class="profile-info-wrap">



    <div class="profile-image" id="profile-image">
      <div class="profile-image-upload">
        <img src="{{ url.getStaticBaseUri() }}assets/images/camera.png" class="uppic-profile-img" width="40" height="30" />
        <img id="source_image-profile" class='img_container' style="display:none;" />
        <img id="result_image-profile" class='img_container' style="display:none;"/>
        <form enctype="multipart/form-data" name="frmAvatar" id="frmAvatar" method="post">
        <input type="file" id="uppic-profile" name="uppic-profile" /><!-- onchange="avatarUploaded();" -->
        </form>
      </div>
      <!-- <img src="//static.notegang.me/assets/images/blogger.jpg" class="avatar-blogger" id="avatar-blogger" /> -->
      
      {% if avatar != "" %}

      {{ image(avatar, 'id': 'avatar-blogger', 'class': 'avatar-blogger') }}
      <input type="hidden" id="avatar-thumb" value="{{ avatar }}">
      <input type="hidden" id="avatar-original" value="{{ avatarOriginal }}">

      {% elseif  avatar == "" %}

      {{ image('themes/frontend/images/default_avatar.jpg', 'id': 'avatar-blogger', 'class': 'avatar-blogger') }}
      <input type="hidden" id="avatar-thumb" value="{{ url.get() }}themes/frontend/images/default_avatar.jpg">
      <input type="hidden" id="avatar-original" value="{{ url.get() }}themes/frontend/images/default_avatar.jpg">

      {% endif  %}
      
      
      <div class="change-profile-image display-view">
        <div class="change-profile-image-button"><i class="fa fa-camera"></i> {{ _('lb_change_image') }}</div>
      </div>
    </div>


    
    <!-- ถ้าไม่มีปุ่มเปลี่ยนรูปแสดง ให้เอา class edit-now ออก -->
    <div class="about-profile-wrap edit-now">
      <div class="about-profile-wrap-in">
        <div class="profile-name">
            <!--div class="button-edit-title"></div-->
            <h3 class="profile-name-data"><label id="show-profile-name">{{ profileName }}</label><span class="edit-title display-view"><i class="fa fa-pencil"></i></span></h3>
        </div>
        <div class="edit-profile-about">
                    <div class="profile-about"><label id="show-profile-about">{{ profileAbout }}</label></div>
          <span class="edit-about display-view"><i class="fa fa-pencil"></i></span>
        </div>
        
        <div class="profile-link-box">
          <div class="profile-link-box-in">
            <div class="button-edit-web"></div>
            <div class="profile-link-title">เว็บไซต์ส่วนตัว<span class="edit-website display-view"><i class="fa fa-pencil"></i></span></div>
            <ul class="profile-link-list" id="profile-link-list">
              <li id="l1"><a href="http://www.bloggang.com/mainblog.php?id=rinsayoyolive" target="_blank">Bloggang</a></li>
              <li id="l2"><a href="https://www.facebook.com/RinsaYoyoliveTravelBlogger" target="_blank">Facebook</a></li>
              <li id="l3"><a href="https://instagram.com/rinsa_yoyolive" target="_blank">Instagram</a></li>
              <li id="l4"><a href="http://pantip.com/profile/558074" target="_blank">Pantip</a></li>
              <li id="l5"><a href="https://plus.google.com/115415170146949603798/posts" target="_blank">Google+</a></li>
              <li id="l6"><a href="http://chillblog.chillpainai.com/index.php?c=home&a=fans&uid=40" target="_blank">Chillblog</a></li>
              <li id="l7"><a href="https://www.plearnwan.com/search/result/latest/Rinsa%20Yoyolive" target="_blank">108...1009 ภารกิจเที่ยว</a></li>
              <li id="l8"><a href="http://thethailandbloggernetwork.com/bloggers/detail/RinSa%20YoyoLive" target="_blank">The Thailand Bloger Network</a></li>
              <li id="l9"><a href="https://th.readme.me/u/55518394534808ba400e4a7f" target="_blank">Readme</a></li>
              <li id="l10"><a href="http://www.painaidii.com/diary/diary-detail/001071/lang/th/" target="_blank">painaidii</a></li>
            </ul>

          </div>
        <!-- End profile-link-box -->  
        </div> 
      </div>
    <!-- End about-profile-wrap -->  
    </div>
  <!-- End profile-info-wrap -->  
  </div>
  
  <div class="profile-post-list">
    <div class="profile-post-list-content">
            <div class="orderList latest">
                <div class="ListPost">
                    <ul class="ListPost-list">
                        <li>
                            <a href="#">
                                <span>
                                    <ul>
                                        <li class="ListPost-image"><div class="ListPost-image_item" style="background-image:url(images/cover.jpg);"></div></li>
                                        <li class="ListPost-details">
                                            <div class="title">The Verona Hua Hin รีสอร์ทน้องใหม่สไตล์อิตาลี</div>
                                            <div class="excerpt">สวัสดีค่าาาาา รีวิวฉบับนี้ ยังอยู่ที่หัวหินนะจ๊ะ อิอิ ที่นี่ The Verona Hua Hin เป็นรีสอร์ทแห่งที่สองที่เราได้ไปพักมาค่ะจาก 4 ที่ เผื่อมีใครสงสัยว่า ห๊า..ยังอยู่ที่หัวหินอีกเรอะ อิอิ The Verona Hua Hin เป็นรีสอร์ทน้องใหม่ ที่เพิ่งเปิดบริการในเดือนธันวาคม 57 ที่ผ่านมานี่เอง นั่นก็แสดงว่า ยังไม่มีรีวิวจากที่ไหนเล้ยยย</div>
                                        </li>
                                    </ul>
                                </span>
                            </a>
                            <div class="info-writer">
                                <div class="info-writer-left">
                                    <div class="blogger-avatar"><a href="#"><img src="images/blogger.jpg" width="100%" alt=""/></a></div>
                                    <div class="date">
                                        <div><a href="#">เขียนโดย : Rinsa Yoyolive</a></div>
                                        <div>9 กุมภาพันธ์ 2558</div>
                                    </div>
                                </div>
                                <div class="info-writer-right">
                                    <a href="#" class="link-readmore">
                                        <span>
                                            <div class="readmore">อ่านโพสต์ต่อ <i class="fa fa-chevron-circle-right"></i></div>
                                            <div class="views">ดูแล้ว 22.3k ครั้ง</div>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="no-cover">
                            <a href="#">
                                <span>
                                    <ul>
                                        <li class="ListPost-details">
                                            <div class="title">ดินแดนแห่งโลกผจญภัย . . บรุคไซด์ วัลเลย์ รีสอร์ท ระยอง</div>
                                            <div class="excerpt">หากเอ่ยถึงจังหวัดระยองขึ้นมา สิ่งแรกที่เราจะนึกถึงนั้นก็คือทะเลและทุเรียนค่ะ อิอิ เพราะระยองเป็นจังหวัดที่ติดทะเลไม่มีสิ่งอื่นใดที่เราจะคิดถึงสองสิ่งนี้ จริงๆนะ แต่ ... เมื่อไม่นานมานี้เรามีโอกาสได้เข้าไปพักที่ บรุคไซด์ วัลเลย์ รีสอร์ท จังหวัดระยอง ทำให้ได้เปิดโลกแห่งความคิดที่กว้างๆ ขึ้นไปอีกที่จะทำให้ได้รู้ว่าระยอง ไม่ได้มีดีแค่ทะเล!! บรุคไซด์ วัลเลย์ รีสอร์ท ระยอง เป็นรีสอร์ทที่โอบล้อมด้วยขุนเขาและธรรมชาติเสมือนที่จะทำให้เรารู้สึกว่าหลุดเข้าไปอีกโลกหนึ่งยังไงอย่างนั้นเลยนะคะ เมื่อรู้ว่าจะได้ไปพักที่นี่เรารีบเปิดค้นหาข้อมูลของสถานที่แห่งนี้ก่อนเลยว่ามีอะไรที่น่าสนใจบ้าง และสิ่งที่เราจะได้รู้ ได้เห็น และได้สัมผัสมากยิ่งขึ้นนั่นคือคำว่า "แห่งเดียวในไทย"  ถูกบรรจุลงในรีสอร์ทแห่งนี้ด้วยนะเออ</div>
                                        </li>
                                    </ul>
                                </span>
                            </a>
                            <div class="info-writer">
                                <div class="info-writer-left">
                                    <div class="blogger-avatar"><a href="#"><img src="images/blogger.jpg" width="100%" alt=""/></a></div>
                                    <div class="date">
                                        <div><a href="#">เขียนโดย : Rinsa Yoyolive</a></div>
                                        <div>8 กุมภาพันธ์ 2558</div>
                                    </div>
                                </div>
                                <div class="info-writer-right">
                                    <a href="#" class="link-readmore">
                                        <span>
                                            <div class="readmore">อ่านโพสต์ต่อ <i class="fa fa-chevron-circle-right"></i></div>
                                            <div class="views">ดูแล้ว 22.3k ครั้ง</div>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <span>
                                    <ul>
                                        <li class="ListPost-image"><div class="ListPost-image_item" style="background-image:url(images/post3.jpg);"></div></li>
                                        <li class="ListPost-details">
                                            <div class="title">ไปมาแล้ว Victoria Gardens คอมมูนิตี้มอลล์แห่งแรกบนถนนเพชรเกษม</div>
                                            <div class="excerpt">ยอมรับว่า เดี๋ยวนี้ห้างใหม่ๆ ในกรุงเปิดกันเยอะมากๆ เลยนะคะ ที่เรารู้จักบ้างไม่รู้จักบ้าง บาทีขับรถผ่านไปผ่านมา ก็งงว่า เอ้า !! ตรงนี้กำลังก่อสร้างอะไร ตรงนี้คือห้าง หรืออะไรกันแน่  แต่ที่แน่ๆ คอมมูนิตี้มอลล์ ในกรุงมีเกิน 10 ที่แล้วด้วยนะคะ คอมมูนิตี้ มอลล์ (Community Mall) คือรูปแบบธุรกิจด้านการพัฒนาและบริหารศูนย์การค้า</div>
                                        </li>
                                    </ul>
                                </span>
                            </a>
                            <div class="info-writer">
                                <div class="info-writer-left">
                                    <div class="blogger-avatar"><a href="#"><img src="images/blogger.jpg" width="100%" alt=""/></a></div>
                                    <div class="date">
                                        <div><a href="#">เขียนโดย : Rinsa Yoyolive</a></div>
                                        <div>7 กุมภาพันธ์ 2558</div>
                                    </div>
                                </div>
                                <div class="info-writer-right">
                                    <a href="#" class="link-readmore">
                                        <span>
                                            <div class="readmore">อ่านโพสต์ต่อ <i class="fa fa-chevron-circle-right"></i></div>
                                            <div class="views">ดูแล้ว 22.3k ครั้ง</div>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="no-excerpt">
                            <a href="#">
                                <span>
                                    <ul>
                                        <li class="ListPost-image"><div class="ListPost-image_item" style="background-image:url(images/relate1.jpg);"></div></li>
                                        <li class="ListPost-details">
                                            <div class="title">The Sea-Cret Garden Hua hin ความสุข....ที่เราเลือกได้</div>
                                        </li>
                                    </ul>
                                </span>
                            </a>
                            <div class="info-writer">
                                <div class="info-writer-left">
                                    <div class="blogger-avatar"><a href="#"><img src="images/blogger.jpg" width="100%" alt=""/></a></div>
                                    <div class="date">
                                        <div><a href="#">เขียนโดย : Rinsa Yoyolive</a></div>
                                        <div>6 กุมภาพันธ์ 2558</div>
                                    </div>
                                </div>
                                <div class="info-writer-right">
                  <a href="#" class="link-readmore">
                    <span>
                      <div class="readmore">อ่านโพสต์ต่อ <i class="fa fa-chevron-circle-right"></i></div>
                      <div class="views">ดูแล้ว 22.3k ครั้ง</div>
                    </span>
                  </a>
                                </div>
                            </div>
                        </li>
                        <li class="no-cover">
                            <a href="#">
                                <span>
                                    <ul>
                                        <li class="ListPost-details">
                                            <div class="title">พัก The Jounery และชิมอาหารร้านบรรยากาศดี ณ The Glass House</div>
                                            <div class="excerpt">RinSa YoyoLive ฉบับนี้พาเที่ยว ที่พัก พาชิมร้าน ชิลๆ กันค่า วันนี้ เราจะพามารู้จักรีสอร์ทเปิดใหม่ค่ะ The Jounery Beach Resort หลายคนอาจจะยังไม่รู้จัก เท่าไหร่ รวมทั้งเราด้วยที่ค้นหาข้อมูลของรีสอร์ทนี้ทางโชเซียลก็ยังไม่ค่อยมี หรือมีน้อยมากๆ แต่ถ้าหากเราจะพูดถึงร้านอาหารบรรยากาศดีที่ชื่อว่า The Glass House Pattaya หลายคนอาจร้องอ๋อ เพราะชื่อนี้เป็นที่คุ้นเคยกันมานานพอสมควรของนักเดินทาง และนักท่องเที่ยวเป็นอย่างดีอยู่แล้ว</div>
                                        </li>
                                    </ul>
                                </span>
                            </a>
                            <div class="info-writer">
                                <div class="info-writer-left">
                                    <div class="blogger-avatar"><a href="#"><img src="images/blogger.jpg" width="100%" alt=""/></a></div>
                                    <div class="date">
                                        <div><a href="#">เขียนโดย : Rinsa Yoyolive</a></div>
                                        <div>22 กรกฎาคม 2557</div>
                                    </div>
                                </div>
                                <div class="info-writer-right">
                                    <a href="#" class="link-readmore">
                                        <span>
                                            <div class="readmore">อ่านโพสต์ต่อ <i class="fa fa-chevron-circle-right"></i></div>
                                            <div class="views">ดูแล้ว 22.3k ครั้ง</div>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <span>
                                    <ul>
                                        <li class="ListPost-image"><div class="ListPost-image_item" style="background-image:url(images/raya_resort.jpg);"></div></li>
                                        <li class="ListPost-details">
                                            <div class="title">Raya Resort (รายา รีสอร์ท ชะอำ) อีกหนึ่งความทรงจำของเรา</div>
                                            <div class="excerpt">ภาพเปิด เป็นล็อบบี้ ของ Raya Resort กันนะคะ ซึ่งสังเกตว่า ช่วงนี้ รายา รีสอร์ท ได้ทำการโปรโมท และโฆษณาออกสื่อเยอะมาก ไม่ว่าจะเป็นทาง Facebook สื่อที่มีคนไทยใช้กันอย่างแพร่หลาย เราเองก็รู้จักรายา รีสอร์ท ชะอำ จากสื่อนี้ด้วยเช่นกัน เมื่อพูดถึงรีวิว ของที่นี่ ยังถือว่า มีรีวิวออกทางโซเชียลน้อยค่ะ หากเทียบกับอายุของรีสอร์ทที่เปิดบริการมา 3 ปีแล้ว แต่ยังไงก็ไม่ใช่ปัญหาสำหรับเราในการค้นหารีวิวก่อนเดินทางค่ะ</div>
                                        </li>
                                    </ul>
                                </span>
                            </a>
                            <div class="info-writer">
                                <div class="info-writer-left">
                                    <div class="blogger-avatar"><a href="#"><img src="images/blogger.jpg" width="100%" alt=""/></a></div>
                                    <div class="date">
                                        <div><a href="#">เขียนโดย : Rinsa Yoyolive</a></div>
                                        <div>26 พฤษภาคม 2557</div>
                                    </div>
                                </div>
                                <div class="info-writer-right">
                                    <a href="#" class="link-readmore">
                                        <span class="no-views">
                                            <div class="readmore">อ่านโพสต์ต่อ <i class="fa fa-chevron-circle-right"></i></div>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <span>
                                    <ul>
                                        <li class="ListPost-image"><div class="ListPost-image_item" style="background-image:url(images/chelona_pool_villa_hua_hin.jpg);"></div></li>
                                        <li class="ListPost-details">
                                            <div class="title">Chelona Pool Villa Hua Hin ... กับวันพักผ่อนที่แสนสบายของเรา ^^</div>
                                            <div class="excerpt">ในเมื่ออากาศตอนนี้ ร้อน ร้อน แหล่งท่องเที่ยวเราต่อไปนี้ก็คงหนีไม่พ้นทะเล คืบก็ทะเล ศอกก็ทะเล แหม เราอยากเจอแบบนั้นเหมือนกันนะ แต่เวลาพักมีแค่วันสองวัน ใกล้ๆกรุง ที่ไหนบ้างจะสามารถตอบโจทย์เราได้ จนเมื่อเราได้มีโอกาสมาเที่ยวหัวหิน และได้เข้าพักที่ Chelona Pool Villa ที่มีดีทั้งสระว่ายน้ำหลายสระ และติดหาดอีกด้วย ที่เราบอกได้เลยว่าตอบโจทย์ใครๆได้เป็นอย่างดีเช่นกัน</div>
                                        </li>
                                    </ul>
                                </span>
                            </a>
                            <div class="info-writer">
                                <div class="info-writer-left">
                                    <div class="blogger-avatar"><a href="#"><img src="images/blogger.jpg" width="100%" alt=""/></a></div>
                                    <div class="date">
                                        <div><a href="#">เขียนโดย : Rinsa Yoyolive</a></div>
                                        <div>26 พฤษภาคม 2557</div>
                                    </div>
                                </div>
                                <div class="info-writer-right">
                                    <a href="#" class="link-readmore">
                                        <span class="no-views">
                                            <div class="readmore">อ่านโพสต์ต่อ <i class="fa fa-chevron-circle-right"></i></div>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
    <!-- End profile-post-list-content -->
    </div>
  <!-- End profile-post-list -->    
    </div>  
</div>

{% if is_view == false %}

{{ javascript_include('assets/js/jquery.validate.js') }}

<script type="text/javascript">

    var pathUpload = "{{ url.getStaticBaseUri() }}profileedit/uploadcover";

    $("#confirm-remove").on("click", function(){
        $(".remove-cover-profile-button").hide();
        $.post("{{ url.get() }}dashboard/removecover", {"save":"save"}, function(data){
            if (data.success) { $(".remove-cover-profile-button").hide(); } else{ $(".remove-cover-profile-button").show(); }
        }, "json") ;
        return false;
    });

    $(".changeImage").on("click", function(){
        $(".modal-box-upload").show();
        $(".remove-cover-profile-button").show();
        $('#frmImage')[0].reset();
        $('#frmImageCrop')[0].reset();

        $("#show-image-crop").html("");
        $("#upload").val("");
        //$("#dialog-upload, .status-bar-red, .status-bar-green, .modal-box-crop").hide();
        //$("#confirm-change-upload-profile").show();

        $("#btn-crop-image").attr("disabled", false);
        $("#btn-crop-image").hide();
    });

    function avatarUploaded(resultImage, fileName)
    {
        var server_endpoint = "{{ url.get() }}dashboard/ajaxupdateavatar",
            server_var_name = 'fileupload',
            filename = fileName;

        var callback = function(data){ 
            obj = JSON.parse(data);
            if (obj.success) {
                loadingHide();
                $("#uppic-profile").val("");
                $("#confirm-change-upload-profile").show();
                $('.avatar-blogger').attr("src",obj.option.url_path);
                $('#avatar-thumb').val(obj.option.url_path);
                $('#avatar-original').val(obj.option.url_original_path);
                $("#loading-progress").html(parseInt(0) + "%");
            } else{
                loadingHide();
                alert(obj.msg);
            }
        }

        var onProcessCallback = function (numPercent) {
            //$("#loading-progress").html(parseInt(numPercent) + "%");
        };


        var errorCallback = function(response){
            alert(response);
        };


        //Here goes the magic
        jic.upload(resultImage, server_endpoint, server_var_name, filename, callback, errorCallback, onProcessCallback);
        return false;
    }

    function loadingShow() 
    {// overlay
        //$("#load-status").html( parseInt(0) + "%" );
        $(".loading-wrap").show();
        $("#overlay-stay").css("display", "inline-block");
        return false;
    }

    function loadingHide() 
    {// overlay
        $(".loading-wrap").hide();
        $("#overlay-stay").removeAttr("style");
        return false;
    } 

    var jcrop_api;

    function uploadImagePicture(resultImage, fileName) 
    {
        loadingHide();

        $(".modal-box-crop").show();
        $(".modal-box-upload").hide();
        $("#btn-crop-image").attr("disabled", false);
        $("#btn-crop-image").show();
        $("#show-image-crop").html('<img src="' + resultImage.src + '" id="cropbox" width="100%" />');
        $("#show-form-crop").show();
        $('#result_filename').val(fileName);

        function createJcropArea() {
            /*jQuery('#cropper-loading').css('display', 'none');                                      
            jQuery('#cropbox').css('display', 'block');*/
            var jcrop_api = jQuery.Jcrop('#cropbox', {
                onSelect: updateCoords,
                onChange: updateCoords,
                allowResize: false,
                allowSelect: false,
                trueSize: [resultImage.width, resultImage.height],
                bgFade: true, // use fade effect
                bgOpacity: .5,
                setSelect: [0,0,2048,350],
                aspectRatio: 2048/350
            });
            clearInterval(interval);
        }
        var interval = setInterval(createJcropArea, 500);

        return false;
    }
    

    $("#frmImageCrop").submit(function() {
        loadingShow();

        $("#btn-crop-image").attr("disabled", true);

        var val_x = $('#x').val();
        var val_y = $('#y').val();
        var val_w = $('#w').val();
        var val_h = $('#h').val();
        var val_image = document.getElementById('result_image');
        var val_filename = $('#result_filename').val();


        var str_query = "?x="+val_x+"&y="+val_y+"&w="+val_w+"&h="+val_h+"&name="+val_filename;
        var server_endpoint = "{{ url.get() }}dashboard/ajaxuploadcrop/" + str_query,
            server_var_name = 'fileupload',
            filename = val_filename;

        $("#path_url_image").val('');


        //This is the callback that will be triggered once the upload is completed
        var callback = function(data){ 

            obj = JSON.parse(data);

            if (obj.success) {
                loadingHide();
                
                $(".modal-box-upload").show();
                $(".remove-cover-profile-button").show();
                $('#frmImage')[0].reset();
                $('#frmImageCrop')[0].reset();

                $("#show-image-crop").html("");
                $("#upload").val("");
                $("#dialog-upload, .status-bar-red, .status-bar-green, .modal-box-crop").hide();
                $("#confirm-change-upload-profile").show();

                $("#btn-crop-image").attr("disabled", false);
                $("#btn-crop-image").hide();
                $("#loading-progress").html(parseInt(0) + "%");

                $('.cover-profile').css({'background':'url(' + obj.option.path_image + ') center no-repeat','background-size':'cover'});
            } else{
                loadingHide();
                
                $("#btn-crop-image").attr("disabled", true);
                $("#btn-crop-image").hide();

                var div_msg = '<div class="status-bar-red"><i class="fa fa-exclamation-triangle"></i> ' + obj.msg + '</div>';
                $("#div-show-msg-box").html(div_msg);
                $(".status-bar-red").fadeOut(2500);
            }

            
        };

        var onProcessCallback = function (numPercent) {
            //$("#loading-progress").html(parseInt(numPercent) + "%");
        };


        var errorCallback = function(response){
            alert(response);
        };

        //var customHeaders = { 'Authorization': 'Basic someBase64EncodedHash=====' };

        //Here goes the magic
        //function(compressed_img_obj, upload_url, file_input_name, filename, successCallback, errorCallback, duringCallback, customHeaders)
        jic.upload(val_image, server_endpoint, server_var_name, filename, callback, errorCallback, onProcessCallback);
        return false;
    });

    function crop_reset()
    {
        //Reset coordinates of thumbnail preview container
        $('#x').val("");
        $('#y').val("");
        $('#w').val("");
        $('#h').val("");

        //Reset src of jcrop img and copies bound to page specific full size and preview divs
        $("#cropbox, #crop_preview, .jcrop-holder img").attr("src", ""); 
    }
    

    function updateCoords(c) 
    {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
    }

    function checkCoords()
    {
        if (parseInt($('#w').val())) return true;
            alert('Please select a crop region then press submit.');
        return false;
    } 

    
    function onFormSave(formID) 
    {
        var formData = $("#"+formID).serialize();
        $.ajax({
            type : "POST",
            url : "{{ url.get() }}" + "dashboard/editprofilesave",
            dataType : "json",
            data : formData,
            success: function (data) {
                if (data.success) {
                    if (data.option.edit_type == 'name') {
                        $("#edit-title").hide();
                        $("#show-profile-name").text(data.option.name);
                    } else if (data.option.edit_type == 'about') {
                        $("#edit-about").hide();
                        $("#show-profile-about").text(data.option.about);
                    } else if (data.option.edit_type == 'link') {
                        $("#edit-website").hide();

                        $("#show-link-more").html("");
                        var li_link_lists = '<ul class="profile-link-list" id="profile-link-list">';
                        var num = data.option.links.length;

                        if (parseInt(num) > parseInt(0)) {
                            var linkData = data.option.links;
                            var n = 11;
                            $(linkData).each(function(i) { 
                                var obj = linkData[i];
                                if (n <= 13) {
                                    li_link_lists += '<li id="' + n + '"><a href="' + obj['url'] + '" target="_blank">' + obj['title'] + '</a></li>';
                                } else {
                                    li_link_lists += '<li class="link-more" id="' + n + '"><a href="' + obj['url'] + '" target="_blank">' + obj['title'] + '</a></li>';
                                }
                                n = n + 1;
                            });
                        }
                        li_link_lists += '</ul> ';
                        $("#show-profile-link-lists").html(li_link_lists);
                        $("#show-link-more").html('<div class="profile-link-more"><i class="fa fa-ellipsis-h"></i></div>');
                    }
                }
            },
            error: function(data){
                console.log(data);
                alert(data.responseText);
            }
        });
        return false;
    } 

    // Ready
    $(function(){

        $('#frmLink').validate({
            errorElement: 'div',
            errorClass: 'help-block text-error',
            focusInvalid: false,
            ignore: "",
            rules: { 
                "link_info[1][url]": {
                    required: function(){ var title_web = $("#link_info_title_1").val(); if (title_web != "") { return true; } else { return false; } },
                    url:true
                },
                "link_info[2][url]": {
                    required: function(){ var title_web = $("#link_info_title_2").val(); if (title_web != "") { return true; } else { return false; } },
                    url:true
                },
                "link_info[3][url]": {
                    required: function(){ var title_web = $("#link_info_title_3").val(); if (title_web != "") { return true; } else { return false; } },
                    url:true
                },
                "link_info[4][url]": {
                    required: function(){ var title_web = $("#link_info_title_4").val(); if (title_web != "") { return true; } else { return false; } },
                    url:true
                },
                "link_info[5][url]": {
                    required: function(){ var title_web = $("#link_info_title_5").val(); if (title_web != "") { return true; } else { return false; } },
                    url:true
                },
                "link_info[6][url]": {
                    required: function(){ var title_web = $("#link_info_title_6").val(); if (title_web != "") { return true; } else { return false; } },
                    url:true
                },
                "link_info[7][url]": {
                    required: function(){ var title_web = $("#link_info_title_7").val(); if (title_web != "") { return true; } else { return false; } },
                    url:true
                },
                "link_info[8][url]": {
                    required: function(){ var title_web = $("#link_info_title_8").val(); if (title_web != "") { return true; } else { return false; } },
                    url:true
                },
                "link_info[9][url]": {
                    required: function(){ var title_web = $("#link_info_title_9").val(); if (title_web != "") { return true; } else { return false; } },
                    url:true
                },
                "link_info[10][url]": {
                    required: function(){ var title_web = $("#link_info_title_10").val(); if (title_web != "") { return true; } else { return false; } },
                    url:true
                }
            },
            messages: {
                "link_info[1][url]": {
                    url: "URL เว็บไซต์ไม่ถูกต้อง ค่ะ!",
                    required: "กรุณาระบุ URL เว็บไซต์ด้วย ค่ะ!"
                },
                "link_info[2][url]": {
                    url: "URL เว็บไซต์ไม่ถูกต้อง ค่ะ!",
                    required: "กรุณาระบุ URL เว็บไซต์ด้วย ค่ะ!"
                },
                "link_info[3][url]": {
                    url: "URL เว็บไซต์ไม่ถูกต้อง ค่ะ!",
                    required: "กรุณาระบุ URL เว็บไซต์ด้วย ค่ะ!"
                },
                "link_info[4][url]": {
                    url: "URL เว็บไซต์ไม่ถูกต้อง ค่ะ!",
                    required: "กรุณาระบุ URL เว็บไซต์ด้วย ค่ะ!"
                },
                "link_info[5][url]": {
                    url: "URL เว็บไซต์ไม่ถูกต้อง ค่ะ!",
                    required: "กรุณาระบุ URL เว็บไซต์ด้วย ค่ะ!"
                },
                "link_info[6][url]": {
                    url: "URL เว็บไซต์ไม่ถูกต้อง ค่ะ!",
                    required: "กรุณาระบุ URL เว็บไซต์ด้วย ค่ะ!"
                },
                "link_info[7][url]": {
                    url: "URL เว็บไซต์ไม่ถูกต้อง ค่ะ!",
                    required: "กรุณาระบุ URL เว็บไซต์ด้วย ค่ะ!"
                },
                "link_info[8][url]": {
                    url: "URL เว็บไซต์ไม่ถูกต้อง ค่ะ!",
                    required: "กรุณาระบุ URL เว็บไซต์ด้วย ค่ะ!"
                },
                "link_info[9][url]": {
                    url: "URL เว็บไซต์ไม่ถูกต้อง ค่ะ!",
                    required: "กรุณาระบุ URL เว็บไซต์ด้วย ค่ะ!"
                },
                "link_info[10][url]": {
                    url: "URL เว็บไซต์ไม่ถูกต้อง ค่ะ!",
                    required: "กรุณาระบุ URL เว็บไซต์ด้วย ค่ะ!"
                }

            },
            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
            },
            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error');
                $(e).remove();
            },
            errorPlacement: function (error, element) {
                if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                    var controls = element.closest('div[class*="col-"]');
                    if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
                    else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                }
                else if(element.is('.select2')) {
                    error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                }
                else if(element.is('.chosen-select')) {
                    error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                }
                else error.insertAfter(element.parent());
            },
            submitHandler: function (form) {
                onFormSave("frmLink");
            },
            invalidHandler: function (form) {
            }
        });
    });

    function stopProcess() 
    {
        loadingHide();
        $("#btn-crop-image").attr("disabled", false);
        return true;
    }

    function maxLength(el) {    
        if (!('maxLength' in el)) {
            var max = el.attributes.maxLength.value;
            el.onkeypress = function () {
                if (this.value.length >= max) return false;
            };
        }
    }
    maxLength(document.getElementById("content-about"));

</script>

  
{% endif %}


{{ assets.outputJs('footerpage') }}

<script type="text/javascript">
    initPage.init();
</script>