{{ 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;
    }

</style>


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

<div id="all"> 

    <div class="loading-wrap" style="display:none;">
    <div class="loading">
      <span class="gif-loading"><img src="{{ domain_url }}/assets/images/loading.gif" alt=""/></span>
      <span class="loading-text">
        <span class="loading-percent">80%</span>
        <span class="loadingText">loading...</span>
        <span class="cancel-loading">ยกเลิก</span>
      </span>
    </div>
  </div>


<div class="overlay-stay" id="overlay-stay"></div>
<div class="overlay" id="overlay"></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="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 -->
            <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="submit" id="btn-crop-image" value="{{ _('btn_crop_image') }}" class="btn btn-large btn-inverse" />
                </form>
            </div>
          <span class="cancal">{{ _('btn_cancel') }}</span>
          <!-- <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" 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>
  
  <!-- แก้ไขเว็บไซต์ -->
  <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="detail-dialog-max-height mCustomScrollbar">

            {% set n = 1 %}
            {% if linkLists|length %}
                
                {% for index, info in linkLists %}
                    <div class="col-1">
                        <input type="text" value="{{ info['title'] }}" name="link_info[{{ n }}][title]" id="link_info_title_{{ n }}" class="text-field" placeholder="{{ _('lb_website_name_placeholder') }}">
                    </div>
                    <div class="col-2">
                        <input type="text" value="{{ info['url'] }}" name="link_info[{{ n }}][url]" id="link_info_url_{{ n }}" class="text-field" placeholder="URL">
                    </div>
                    {% set n = n + 1 %}
                {% endfor %}

            {% endif %}


            {% for j in n..10 %}
            <div class="col-1">
                <input type="text" name="link_info[{{ j }}][title]" id="link_info_title_{{ j }}" class="text-field" placeholder="{{ _('lb_website_name_placeholder') }}">
            </div>
            <div class="col-2">
                <input type="text" name="link_info[{{ j }}][url]" id="link_info_url_{{ j }}" class="text-field" placeholder="URL" value="">
            </div>
            {% endfor %}


        </div>
        <input type="hidden" name="edit_type" value="links">
        <div class="button-dialog have-border">
            <ul class="buttonLists-dialog">
              <li><span class="accept" onclick="onFormSave('frmLink');">{{ _('btn_save') }}</span></li>
              <li><span class="cancel">{{ _('btn_cancel') }}</span></li>
            </ul>
        </div>
        <input type="hidden" name="edit_type" value="links">
        {{ end_form() }}
      </form>

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

  <div class="cover-profile-wrap">
    <div class="edit-cover-profile-button">
      <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">
      <div class="remove-cover-profile-wrap">
          <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" 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" /> -->
      <img src="{{ avatar }}" class="avatar-blogger" id="avatar-blogger" />
      <div class="change-profile-image">
        <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"><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"><i class="fa fa-pencil"></i></span>
        </div>
        <div class="profile-link-box">

          <div class="profile-link-box-in" style="width:350px;">
            <div class="button-edit-web"></div>

            <div class="profile-link-title">{{ _('lb_personal_website_show') }}<span class="edit-website"><i class="fa fa-pencil"></i></span></div>
            <div id="show-profile-link-lists">
            
            <ul class="profile-link-list" id="profile-link-list">
                {% set n = 11 %}
                {% if linkLists != "" %}
                {% for index, info in linkLists %}
                    {% if n <= 13 %}
                    <li id="{{ n }}"><a href="{{ info['url'] }}" target="_blank">{{ info['title'] }}</a></li>
                    {% endif %}
                    
                    {% if n > 13 %}
                    <li class="link-more" id="{{ n }}"><a href="{{ info['url'] }}" target="_blank">{{ info['title'] }}</a></li>
                    {% endif %}
                    {% set n = n + 1 %}
                {% endfor %}
                {% endif %}
            </ul>

            </div>

            {% set ln = linkLists|length %}
            {% if ln > 3 %}
            <div id="show-link-more"><div class="profile-link-more"><i class="fa fa-ellipsis-h"></i></div></div>
            {% endif %}

            <div class="profile-link-add"><input type="text" class="field-add-link" placeholder="+ เพิ่มเว็บไซต์(สูงสุด 10 เว็บไซต์)" /></div>
          </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>

<script type="text/javascript">
    var pathUpload = "{{ url.getStaticBaseUri() }}profileedit/uploadcover";

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

        //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();
                alert(obj.msg);
            } else{
                loadingHide();
                alert(obj.msg);
            }
            
        }

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


        /*var formData = new FormData($('form#frmAvatar')[0]);
        $.ajax({
            type : "POST",
            url : "{{ url.get() }}dashboard/ajaxupdateavatar",
            dataType : "json",
            data : formData,
            async: false,
            cache: false,
            contentType: false,
            enctype: 'multipart/form-data',
            processData: false,
            success: function (data) {
                if (data.success) {
                    alert(data.msg);
                } else {
                    alert(data.msg);
                }
            }
        });

        return false;*/
    }

    function loadingShow() 
    {// overlay
        $(".loading-wrap").show();
        $("#overlay-stay").css("display", "inline-block");
        return false;
    }

    function loadingHide() 
    {// overlay
        $(".loading-wrap").hide();
        $("#overlay-stay").removeAttr("style");
        return false;
    }
    
    $("#frmImageCrop").submit(function()
    {
        var formObj = $("#frmImageCrop");
        var formUrl = formObj.attr("action");
        var formMethod = formObj.attr("method");
        var formData = new FormData($("#frmImageCrop")[0]);

        $.ajax({
            type : formMethod,
            url : formUrl,
            dataType : "json",
            data : formData,
            async: false,
            cache: false,
            contentType: false,
            enctype: 'multipart/form-data',
            processData: false,
            success: function (data) {
                if (data.success) {
                    $('#frmImage')[0].reset();
                    $('#frmImageCrop')[0].reset();
                    $("#show-image-crop").html('');
                    $(".modal-box-upload").show();
                    $("#dialog-upload, .status-bar-red, .status-bar-green, .modal-box-crop").hide();
                    $('.cover-profile').css({'background':'url(' + data.option.path_image + ') center no-repeat','background-size':'cover'});
                } else {
                    alert(data.msg);
                }
            },
            error: function(data){
                console.log(data);
            }
        });

        return false;
    });

    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 uploadImageFile(resultImage, fileName) 
    {  
        var server_endpoint = "{{ url.get() }}dashboard/ajaxuploadimage",
            server_var_name = 'fileupload',
            filename = 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) {
                $("#path_url_image").val(obj.option.source_path);

                loadingHide();


                $("#show-image-crop").html('<img src="' + resultImage.src + '" id="cropbox" width="100%" />');
                $(".modal-box-crop").show();
                $(".modal-box-upload").hide();
                $("#show-form-crop").show();

                $('#cropbox').Jcrop({
                    onSelect: updateCoords,
                    onChange: updateCoords,
                    onRelease: updateCoords,
                    trueSize: [resultImage.width, resultImage.height],
                    bgFade: true, // use fade effect
                    bgOpacity: .3,
                    aspectRatio: 16/3,
                    setSelect: [0,0,250,250]
                }); // aspectRatio: 16 / 9

                /*var div_msg = '<div class="status-bar-green"><i class="fa fa-exclamation-triangle"></i> ' + obj.msg + '</div>';
                $("#div-show-msg-box").html(div_msg);
                $(".status-bar-green").fadeOut(2500);*/
            } else{
                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);
            }
            
        }
        //Here goes the magic
        jic.upload(resultImage, server_endpoint, server_var_name, filename, callback);
        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;
    } 

    $("#confirm-remove").on("click", function(){
        $.post("{{ url.get() }}dashboard/removecover", {"save":"save"}, function(data){}, "json") ;
        return false;
    });

</script>

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

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