<%@page import="org.mynonglam.dao.AccountDAO"%>
<%@page import="org.mynonglam.entitys.Account"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Nong Lam</title>
<link rel="stylesheet" type="text/css" href="css/basic_index.css"/>
<link rel="stylesheet" type="text/css" href="css/messi.css">
<link rel="stylesheet" type="text/css" href="css/messi.css">
<link rel="stylesheet" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/reveal.css"/>
<link rel="stylesheet" type="text/css" href="css/css-album.css"/>
<link rel="stylesheet" type="text/css" href="css/mycrollbar.css">
<!-- luan -->
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- luan -->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.reveal.js"></script>
<script type="text/javascript" src="js/messi.js"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/messi.js"></script>
<script type="text/javascript" src="js/infoaccountup.js"></script>
<script type="text/javascript" src="js/lightbox-image.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!-- luan -->
<script type="text/javascript" language="javascript" src="js/notification.js"></script>
<script type="text/javascript" language="javascript" src="js/chat-ui.js"></script>
<script type="text/javascript" language="javascript" src="js/chat-process.js"></script>
<script type="text/javascript" language="javascript" src="js/textarea.caret.js"></script>
<script type="text/javascript" language="javascript" src="js/search-friend.js"></script>
<script type="text/javascript" language="javascript" src="js/addfriend.js"></script>
<script type="text/javascript" language="javascript" src="js/view-message.js"></script>
<script type="text/javascript" language="javascript" src="js/upload.js"></script>
<!-- luan -->
<script type="text/javascript" src="js/json2.js"></script>

</head>
<style>
.delete {
	background: url(images/delete.jpg) no-repeat scroll 0 0 transparent;
	background-size: 50% auto;
	display: block;
	height: 34px;
	position: relative;
	left: 155px;
	top: -30px;
	width: 34px;
}
</style>
<body>
<%
String accountlogin = (String) session.getAttribute("accountinfo");
if(accountlogin == null) {
	response.sendRedirect("login.jsp");
	return;
}
String idacc = (String) request.getParameter("acc");
if(idacc == null) {
	idacc = accountlogin;
}
if(idacc != null) {
	%>
	<div style="display: none;">
		<div id="info-id-account-name"><%=idacc %></div>
        <div id="info-id-accountlogin-name"><%=accountlogin %></div>
	</div>
	<%
}
Account acclogin = new AccountDAO().getAccountInfoByComment(accountlogin);
Account accfriend;
if(accountlogin.equals(idacc)) {
	accfriend = acclogin;
} else {
	accfriend = new AccountDAO().getAccountInfoByComment(idacc);
}

%>
	<div id="header">
    	<div id="header-content">
        	<div id="header-left">
            	<div id="header-logo" style="background: url('images/logo.png') no-repeat;"><a href="index.jsp"></a></div>
            	<div id="header-content-main">
                	<div id="user-function">
                    	<ul class="notif-icon">
                          <li class="first">
                                <a id="btn-show-friendrequestx" class="wink open-tipsy" title="Thêm bạn" original-title="Wink" rel="wink-notif"></a>
                           </li>
                          <li>
                                <a id="btn-show-msgofflinex" class="message open-tipsy" title="Tin nhắn" rel="message-notif" original-title="Message"></a>
                           </li>
<!--
                          <li>
                                <a class="kiss open-tipsy" rel="kiss-notif" original-title="Kiss"><span>2</span></a>
                            </li>
                          <li class="last">
                                <a class="gift open-tipsy"  rel="gift-notif" original-title="Gift"><span>2</span></a>
                            </li>
-->
                        </ul>
                        <div class="notification wink-notif" style="display:none;">
                            <div class="n-wrapper">
                                <div class="muiten"></div>
                                <div class="n-title">Yêu cầu kết bạn</div>
                                <div class="loading">
                                    <img src="images/loading-small.gif"/>
                                </div>
                                <!-- 
						        <div class="searchingx-result-line">
									<div class="searchingx-result-user-avatar"><img class="bdrad2" src="images/f-avatar.jpg"/></div>
									<div class="searchingx-result-user-info-noti-friend"><b>Đào Lê Duy Nam Nam Nam Nam</b><br><span class="otrif">Biên H</span></div>
									<div title="Từ chối" class="btn-friendrequestx-cancel">Từ chối</div>
									<div title="Thêm bạn" class="btn-friendrequestx-accept">Thêm bạn</div>
								</div>
								 -->
                                                        </div>
                                                    </div>
                        <div class="notification message-notif" style="display:none;">
                            <div class="n-wrapper">
                                <div class="muiten"></div>
                                <div class="n-title">Tin nhắn</div>
                                <div class="loading">
                                    <img src="images/loading-small.gif"/>
                                </div>
                                                    </div>
                                                    </div>
<!--
                        <div class="notification kiss-notif" style="display:none;">
                            <div class="n-wrapper">
                                <div class="muiten"></div>
                                <div class="n-title">
                                    <a class="t-h" href="#">Kiss</a>
                                    <a class="see-more" href="#">Show All</a>
                                </div>
                                <div class="loading">
                                    <img src="image/ajax-load.gif"/>
                                </div>
                                <div class="scrolling-list" style="overflow:hidden; padding: 0px; width: 200px;">
                                    <div class="jspContainer" style="width: 200px; height: 100px;">
                                        <div class="jspPane" style="padding: 0px; top: 0px; width: 200px;">
                                            <ul></ul>
                                        </div>
                                    </div>
                                </div> 
                            </div>
                        </div>
                      	<div class="notification gift-notif" style="display:none;">
                            <div class="n-wrapper">
                                <div class="muiten"></div>
                                <div class="n-title">
                                    <a class="t-h" href="#">Gift</a>
                                    <a class="see-more" href="#">Show All</a>
                                </div>
                                <div class="loading">
                                    <img src="images/ajax-load.gif"/>
                                </div>
                                <div class="scrolling-list" style="overflow:hidden; padding: 0px; width: 200px;">
                                    <div class="jspContainer" style="width: 200px; height: 100px;">
                                        <div class="jspPane" style="padding: 0px; top: 0px; width: 200px;">
                                            <ul></ul>
                                        </div>
                                    </div>
                                </div> 
                            </div>
                        </div>
						-->
                    </div>
                    <div id="header-search">
                    	<input id="txt-quick-searchx-friend" placeholder="Tìm kiếm bạn bè" />
                    	<div class="searchingx-result-box">
                    		<!-- 
                    		<div class="searchingx-result-line">
								<div class="searchingx-result-user-avatar"><img class="bdrad2" src="images/f-avatar.jpg"/></div>
								<div class="searchingx-result-user-info"><b>Luân Nguyễn</b><br><span class="otrif">Biên Hòa</span></div>
                    </div>
							<div class="searchingx-result-line">
								<div class="searchingx-result-other">Xem thêm ▼</div>
							</div>
							 -->
                    	</div>
                    </div>
                </div>
            </div>
            <div id="header-right">
            	<ul class="right-menu-account">
                	<li class="first"><a href="logoutacc"><span class="headerTinymanName">Thoát</span></a></li>
                    <li><a href="index.jsp"><span class="headerTinymanName">Trang Chủ</span></a></li>
                    <li class="last"><a href="index.jsp"><img src="<%=acclogin.getAvatar() %>" class="headerTinymanPhoto" /><span class="headerTinymanName" id="name-account-loadinfo"><%=acclogin.getFullname() %></span></a></li>
                </ul>
            </div>
    	</div>
	</div>
    <div id="content-mynonglam">
    	<div id="content">
    		<div class="view-profile box-shadown box-radius box-border box-bg-color-w">
                <div class="cnt">
                    <div id="my-coverX-x" class="cover" style="background: url(<%=accfriend.getCoverphoto() %>); background-position: center; background-size: 100% auto;">
                    	<!-- <img class="image-cover" src="<%=accfriend.getCoverphoto() %>" style="display:none;" />  -->
                        <%  if(accountlogin.equals(idacc)) { %>
                        <a style="z-index: 1;" class="edit-avatar open-tipsy" style="right:15px;" original-title="Change Cover Picture" title="Đổi ảnh bìa" id="updataCoverX"></a>
                        <%} %>
                        <div class="shadown top"></div>
                        <!-- <div class="shadown bottom"></div> -->
                        <div class="avatar-wrapper">
                          <div class="avatar-big">
                            	<img id="my-avatarX-x" class="strech" src="<%=accfriend.getAvatar() %>"/>
                            	<%  if(accountlogin.equals(idacc)) { %>
                                <a class="edit-avatar open-tipsy" original-title="Change Cover Picture" title="Đổi ảnh đại diện" id="updataAvatarX"></a>
                                <%} %>
                                <div class="avatar-shadown"></div>
                          </div>
                        </div>
                    </div>
                    
                    <div class="connect-function">
                      <h2 style="color:#000; font-size: 24px; padding-top:20px; float:left; padding-left:290px;"><%=accfriend.getFullname() %></h2>
                           	<div com="add" class="addfriendx-directx">Thêm bạn</div>
                    </div>
                    <div class="main-menu">
                    	<ul>
                        	<li id="nam-intros-link" class="selected">Giới Thiệu</li>
                            <li id="nam-newinfo-link">Bài Đăng</li>
                            <li id="nam-friends-link">Bạn Bè</li>
							<li id="nam-albums-link">Ảnh</li>
                        </ul>
                    </div>
                  <div class="sl-shadown"></div>
                </div>
                
             </div>
             <div class="main-content">
            <!-- doan code can copy -->
            <%
           	String content = (String) request.getParameter("cont");
            if(content == null) {
            	content = "gioi_thieu.jsp";
            } 
            /* else {
            	if(content.equals("gioi_thieu")) content = "gioi_thieu.jsp";
            	else if(content.equals("album")) content = "album.jsp";
            } */
            %>
                <jsp:include page="<%=content %>"></jsp:include>
            <!--  -->
            </div>
        </div>
        
    </div>
    
    
    <!-- Notification ring -->
    <div id="announce-ring-notification"></div>
    

    
    <!-- chat -->
    <div id="chat-ring-notification"></div>
	<div class="chatbox-friend-list-window">
		<div class="chatbox-friend-list-title">
			<div class="chatbox-friend-list-label">Danh Sách Bạn Bè</div>
		</div>
		<div class="chatbox-friend-list-content">
<!--
			<div user="hahaha" class="chatbox-friend-list-friend">
				<div class="chatbox-friend-list-friend-avatar">
					<img class="bdrad" src="images/f-avatar.jpg"/>
				</div>
				<div class="chatbox-friend-list-friend-name">Há Há há</div>
				<div class="chatbox-friend-list-friend-status-icon">
				</div>
			</div>
			
			<div user="luanxt2" class="chatbox-friend-list-friend">
				<div class="chatbox-friend-list-friend-avatar">
					<img class="bdrad" src="images/no-avartar.jpg"/>
				</div>
				<div class="chatbox-friend-list-friend-name">
					Luân Nguyễn5
				</div>
				<div class="chatbox-friend-list-friend-status-icon">
				</div>
			</div>
			
			<div user="luanxt3" class="chatbox-friend-list-friend">
				<div class="chatbox-friend-list-friend-avatar">
					<img class="bdrad" src="images/f-avatar.jpg"/>
				</div>
				<div class="chatbox-friend-list-friend-name">
					Luân Nguyễn6
				</div>
				<div class="chatbox-friend-list-friend-status-icon">
				</div>
			</div>
			-->
		</div>
	</div>
    <!-- end chat -->
</body>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/component_header.js"></script>

<script type="text/javascript">
	$(document).ready(function(e) {
        /* var coverheight = $(".image-cover").height();
		var coverwidth = $(".image-cover").width();
		if(coverwidth >= 997) {
			$(".cover").css({"height": 250, "width": 997});
		} else if(coverwidth < 997 && coverheight >= 250) {
			$(".cover").css({"height": 250, "width": coverwidth, "background-color": "#000"});
		} else if(coverwidth < 997 && coverheight < 250) {
			$(".cover").css({"height": 250, "width": coverwidth, "background-color": "#000"});
		}*/	
		$(".cover").css({"height": 250, "width": 997, "background-repeat": "no-repeat", "background-position": "center"});
		
		// Avatar
		$("#updataAvatarX").click(function(){
			$.post("changeavatar.jsp", function(data){
				$("body").append(data);
			});
		});
		
		// Cover
		$("#updataCoverX").click(function(){
			$.post("changecover.jsp", function(data){
				$("body").append(data);
			});
		});
    });
		
</script>
</html>
