
<?php
require_once 'lib/facebook.php';
$appapikey = '21661a89b9d8e4687c9bc1f11c370a52';
$appsecret = '76f375435a06cef00265790f5426dcec';
$facebook = new Facebook($appapikey, $appsecret);
$user_id = $facebook->require_login();

$friends = $facebook->api_client->friends_get();
$userid = isset($_REQUEST['userid']) ? intval($_REQUEST['userid']) : $friends[0];
$user_name =  $facebook->api_client->users_getInfo($userid,'last_name, first_name');
$user_name =  $user_name[0]['first_name'] . ' ' . $user_name[0]['last_name'];
$photos = $facebook->api_client->photos_get($userid, null, null);
$photos = array_slice($photos, 0, 25);
foreach ($photos as $photo)
{
    $r =  $facebook->api_client->users_getInfo($photo['owner'],'last_name, first_name');
    $photo['username'] = $r[0]['first_name'] . ' ' . $r[0]['last_name'];
}
$friends  =  $facebook->api_client->users_getInfo($friends,'last_name, first_name');
asort($friends);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-tw">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>在 Facebook 上跟 <?php echo $user_name; ?> 有相關的照片</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/button/assets/skins/sam/button.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/container/assets/skins/sam/container.css">
<style type="text/css">
.clearfix {zoom:1;}
.clearfix:after {content:'';display:block;clear:both;}
.mod {width:75em;*width:72em;margin:0 auto;}
.mod .hd h1 {font-weight:bold;font-size:123.1%;padding:10px;float:left;}
.mod .hd form {float:right;margin-top:8px;}
.mod .hd form * {vertical-align:middle;}
.mod .hd button, .mod .hd label {font-weight:bold;}
.mod .bd .grid {display:table;background:#000;-moz-border-radius:5px;margin:0 auto;width:100%;padding:15px;}
.mod .bd .row {display:table-row;*display:block;}
.mod .bd .cell {display:table-cell;*float:left;text-align:center;vertical-align:top;*width:160px;*height:200px;}
.mod .bd .cell a {padding:10px;display:inline-block;}
.mod .bd .cell a img {border:solid 1px #fff;}
.mod .bd .cell a:hover img {border:solid 1px #ff0;}
.mod .bd .cell .caption {color:#fff;font-weight:bold;font-size:93%;font-family:Georgia;}
.mod .bd .cell cite {display:none;}
</style>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/container/container-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/button/button-min.js"></script>
<script type="text/javascript">
(function() {
    var YUE = YAHOO.util.Event;
    var YUD = YAHOO.util.Dom;
    YUE.onDOMReady(function() {
        var dModule = YUD.get('photo'); 
        var dForm = document.forms[0];
        var dButton = dForm.elements[dForm.elements.length - 1];
        new YAHOO.widget.Button(dButton);
        var dPanel = document.createElement('div');
        dPanel.innerHTML = [
            '<div class="hd"></div>',
            '<div class="bd"></div>'
        ].join('');
        document.body.appendChild(dPanel);
        var oPanel = new YAHOO.widget.Panel(dPanel, {
            close: true, 
            fixedcenter: true, 
            modal: true,
            underlay:'shadow', 
            visible: false,
            width:'650px',
            height:'500px',
            effect:{effect:YAHOO.widget.ContainerEffect.FADE, duration: 1}
        });
        oPanel.render();
        YUE.on(dModule.getElementsByTagName('a'), 'click', function (oEvent) {
            YUE.stopEvent(oEvent);
            var dTarget = YUE.getTarget(oEvent);
            if (dTarget.nodeName.toLowerCase() == 'img') {
                dTarget = dTarget.parentNode;    
            }
            if (dTarget.nodeName.toLowerCase() !== 'a') {
                return;
            }
            oPanel.setHeader('Larger Photo');
            var oData = YAHOO.lang.JSON.parse(dTarget.getElementsByTagName('cite')[0].innerHTML);
            oPanel.setBody('<img src="' + oData['src_big'] + '" width="' + oData['src_big_width'] + '" height="' + oData['src_big_height'] + '">');
            oPanel.show();
        });
    });
})(); 
</script>
</head>
<body class="yui-skin-sam">
    <div id="photo" class="mod">
        <div class="mod-content">
            <div class="hd">
                <div class="title clearfix">
                    <h1>在 Facebook 上跟 <?php echo $user_name; ?> 有相關的照片</h1>
                    <form method="get">
                        <label>User: </label> 
                        <select name="userid">
                            <?php foreach ($friends as $friend) : ?><option value="<?php echo $friend['uid']; ?>" <?php echo ($friend['uid'] == $userid) ? ' selected="selected"' : ''; ?>><?php echo $friend['first_name']; ?> <?php echo $friend['last_name']; ?></option>
                            <?php endforeach; ?>

                        </select>
                        <input type="submit" value="Change User">
                    </form>
                </div>
            </div>
            <div class="bd">
                <div class="grid">
                    <?php 
                        if (count($photos) !== 0) :
                        
                            $i = 0;
                            $s = 5;
                            $r = count($photos) / $s;
                            if ($photos % $s) :
                                $r++;
                            endif;
                            for ($q = 0;  $q < $r; $q++):
                    ?><div class="row">
                        <?php for ($j = count($photos); $i < $j; $i++) : 
                            $caption = $photos[$i]['caption'];
                            $caption = strip_tags($caption);
                            $caption = mb_strimwidth($caption, 0, 40, '...', 'UTF-8');
                        ?><span class="cell">
                            <a href="<?php echo $photos[$i]['link']; ?>" target="_blank">
                                <img src="<?php echo $photos[$i]['src']; ?>" width="<?php echo $photos[$i]['src_width']; ?>" height="<?php echo $photos[$i]['src_height']; ?>">
                                <cite>{"src_big" : "<?php echo $photos[$i]["src_big"]; ?>", "src_big_width" : "<?php echo $photos[$i]["src_big_width"]; ?>", "src_big_height" : "<?php echo $photos[$i]["src_big_height"]; ?>"}</cite>
                            </a><br>
                            <span class="caption"><?php echo $caption; ?></span>
                        </span>
                        <?php 
                            if ($i > $q*$s + $s - 1) break;
                            endfor; 
                        ?>

                    </div>
                    <?php endfor; endif; ?>

                </div>   
            </div>
        </div>
    </div>
</body>
</html>