{template block/header}
<div id="bodywrap">
    <table class="layout">
        <tr>
            <td class="left">
                <div class="mainbody">
                    <div class="col titbg">
                        <h1 class="f_left">{lang view_photo}</h1>
                        <h4 class="f_left">{lang photo_nav_title|$current_photo|`$album_info['photos_num']`}</h4>
                        {$photo_col_ctl}
                    </div>
                    <div class="innercol grid">
                        <div id="pic_block" class="tbmu">
                            <span class="f_left"><a href="{link ctl=photos act=index aid=$info['album_id']}">{lang back_to_photo_list}</a></span>
                            <div class="f_right">
                                {$view_nav}
                            </div>
                        </div>
                        
                        <div id="photo_body">
                            {$photo_body_append}
                            <img class="photo" alt="{$info['name']}" src="{img $info['path']}" />
                            <div class="ctl"><div class="prev"><span>{lang prev_photo}</span></div><div class="next"><span>{lang next_photo}</span></div></div>
                        </div>
                        <div id="photo_infos">
                            <div class="photo_others">
                                <p>{lang in_upload_time}: {echo date('Y-m-d',$info['create_time'])}</p>
                                <!--{if $info['taken_time']}-->
                                <p>{lang in_taken_time}: {echo date('Y-m-d',$info['taken_time'])}</p>
                                <!--{/if}-->
                                <p>{lang image_size}: {$info['width']}×{$info['height']}</p>
                                <!--{if $info['exif']}--><p><!--{if isset($info['exif']['Model'])}-->{lang taken_width|`$info['exif']['Model']`} <!--{/if}--><a href="{link ctl=photos act=meta id=$info['id']}">{lang more_exif}</a></p><!--{/if}-->
                                <p>{lang viewed_nums|`$info['hits']`}</p>
                                <p><a href="{img $info['path']}" target="_blank">{lang view_orgi_photo}</a></p>
                            </div>
                            <div class="photo_main">
                                <h1>
                                    <!--{if $loggedin}-->
                                    <div class="inline_edit" title="{lang click_editable}" onclick="Madmin.inline_edit(this,'{link ctl=photos act=modify_name_inline id=$info['id']}')">{$info['name']} <span class="i_editinfo sprite"></span>
                                    </div>
                                    <!--{else}-->
                                    <div class="inline">
                                        {$info['name']}
                                    </div>
                                    <!--{/if}-->
                                </h1>
                                <div class="desc">
                                    <!--{if $loggedin}-->
                                    <div class="inline_edit" title="{lang click_editable}" onclick="Madmin.inline_edit(this,'{link ctl=photos act=modify_desc_inline id=$info['id']}')"><!--{if !$info['desc']}-->
                                        {lang no_photo_desc}
                                        <!--{else}-->
                                        {$info['desc']}
                                        <!--{/if}--> <span class="i_editinfo sprite"></span>
                                    </div>
                                    <!--{else}-->
                                    <div class="inline">
                                        {$info['desc']}
                                    </div>
                                    <!--{/if}-->
                                </div>
                                <div class="tags">
                                    <!--{if $loggedin}-->
                                    <div class="inline_edit" title="{lang click_editable}" onclick="Madmin.inline_edit(this,'{link ctl=photos act=modify_tags_inline id=$info['id']}')"> {lang tags}: <!--{if !$info['tags']}-->{lang no_photo_tags}<!--{else}-->{$info['tags']}<!--{/if}--> <span class="i_editinfo sprite"></span>
                                    </div>
                                    <!--{else}-->
                                    <div class="inline">
                                        <!--{if $info['tags']}-->
                                            {lang tags}: <!--{loop $info['tags_list'] $v}-->
                                            <a href="{link ctl=photos act=search tag=$v}">{$v}</a>
                                            <!--{/loop}-->
                                        <!--{/if}-->
                                    </div>
                                    <!--{/if}-->
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>
<script>
   function detect_resize_img(){
       var max_width = $('body').width()-350;
       var img_width = orgi_width = parseInt('{$info['width']}');
       var img_height = parseInt('{$info['height']}');
       if(isNaN(img_width) || img_width == 0){
           img_width = 600;
       }
       if(img_width > max_width){
           img_width = max_width;
       }
       if(orgi_width){
           img_height = img_width/orgi_width*img_height;
           $('#photo_body img.photo').attr('height',img_height)
       }
       $('#photo_body img.photo').attr('width',img_width);
   }
   function show_pic_ctl(){
       var photo_obj = $('#photo_body img.photo');
       var pos = photo_obj.offset();
       var i_height = photo_obj.outerHeight();
       var i_width = photo_obj.outerWidth();
       var w = i_width/2;
       var ctl_obj = $('#photo_body div.ctl');
       ctl_obj.css({ left:pos.left,top:pos.top, width:i_width, height:i_height });
       {if $picture['previous']}
       ctl_obj.find('div.prev').css({ height:i_height,width:w }).show().hover(function(){
           $(this).find('span').css('display','block');
       },function(){
           $(this).find('span').css('display','none');
       }).click(function(){
           window.location.href = $('#pic_block a.btnprev').attr('href');
       });
       {/if}
       {if $picture['next']}
       ctl_obj.find('div.next').css({ height:i_height,width:w }).show().hover(function(){
          $(this).find('span').css('display','block');
       },function(){
          $(this).find('span').css('display','none');
       }).click(function(){
           window.location.href = $('#pic_block a.btnnext').attr('href');
       });
       {/if}
   }
   
   detect_resize_img();
   
   $('#photo_body img').load(function(){
       show_pic_ctl();
   });
   $(window).resize(function() {
       detect_resize_img();
       show_pic_ctl();
   });
   $(document).bind('keydown',
       function(e){
           if (e.altKey) return true;
           var target = e.target;
           if (target && target.type) return true;
           switch(e.keyCode) {
               case 63235: case 39: 
               if ($("#pic_block").find("a.btnnext").length > 0){
                    window.location=$('#pic_block a.btnnext').attr('href');
                    return false; 
               } break;
               case 63234: case 37:
               if ($("#pic_block").find("a.btnprev").length > 0){
                   window.location=$('#pic_block a.btnprev').attr('href');
                   return false; 
               } break;
           }
       }
   );
</script>
                    {if $enable_comment}
                        <div class="col titbg">
                            <h1 class="f_left">{lang all_photo_comments}</h1>
                            <h4 class="f_left">{lang comments_num|`$info['comments_num']`}</h4>
                        </div>
                        <div class="innetcol">
                            <div class="comment_form">
                                <form id="photo_comment_form" action="{link ctl=comments act=post}" method="post" onsubmit="return false;">
                                    <input type="hidden" name="ref_id" value="{$ref_id}" />
                                    <input type="hidden" name="type" value="{$comments_type}" />
                                    {if $loggedin}
                                    <div class="field">
                                        {lang loginwith|<span class="title_c">`$u_info['user_nicename']`</span>}<a href="{link ctl=users act=logout}"  onclick="Mui.box.show(this.href);return false;">{lang logout}</a> ?
                                        <input type="hidden" name="email" value="{if isset($u_extrainfo['email'])}{$u_extrainfo['email']}{/if}" />
                                        <input type="hidden" name="author" value="{$u_info['user_nicename']}" />
                                    </div>
                                    {else}
                                    <div class="field">
                                        <div class="label">{lang email}</div>
                                        <div class="ipts"><input type="text" class="inputstyle iptw2" name="email" /></div>
                                        <div class="clear"></div>
                                    </div>
                                    <div class="field">
                                        <div class="label">{lang comment_user} *</div>
                                        <div class="ipts"><input type="text" class="inputstyle iptw2" name="author" /></div>
                                        <div class="clear"></div>
                                    </div>
                                    {/if}
                                    <div class="field">
                                        <div class="label">{lang comment_content} *</div>
                                        <div class="ipts"><textarea class="inputstyle ipttextarea" name="content"></textarea></div>
                                        <div class="clear"></div>
                                    </div>
                                    <div class="field">
                                        <div class="label"> &nbsp;</div>
                                        <div class="ipts"><input type="submit" name="submit" class="ylbtn f_left" value="{lang post_comments}" onclick="Mui.box.callback=function(){ reload_comments('{link ctl=comments act=more ref_id=$ref_id type=$comments_type}');$('#photo_comment_form').get(0).reset(); };Mui.form.sendAuto('photo_comment_form');" /></div>
                                        <div class="clear"></div>
                                    </div>
                                </form>
                            </div>
                            <a name="comments"></a>
                            <div class="comment_list">
                                {template comments/more}
                            </div>
                            <div class="clear"></div>
                        </div>
                    {/if}
                    
                    </div>
                </div>
            </td>
            <td class="right">
                <div class="sidebar">
                    <div class="pic_nav">
                        <div class="title"><a href="{link ctl=photos act=index aid=$info['album_id']}">{$album_info['name']}</a></div>
                        <div class="body">
                            <div>
                                <a href="{if $picture['previous']}{link ctl=photos act=view id=$picture['previous']['id']}#pic_block{else}javascript:void(0){/if}" class="turn_page_up">{lang prev_photo}</a>
                            </div>
                            <div class="navlist">
                            <ul>
                                {if $picture['previous']}
                                <li id="pic_{echo $current_rank-1}" class="navitem"><a href="{link ctl=photos act=view id=$picture['previous']['id']}#pic_block" style="background:url('{img $picture['previous']['thumb']}') center no-repeat;"></a></li>
                                {else}
                                <li id="pic_first" class="navitem"><a href="javascript:void(0);">{lang this_first_photo}</a></li>
                                {/if}
                                <li id="pic_{$current_rank}" class="current navitem"><a href="{link ctl=photos act=view id=$info['id']}#pic_block" style="background:url('{img $info['thumb']}') center no-repeat;"></a></li>
                                {if $picture['next']}
                                <li id="pic_{echo $current_rank+1}" class="navitem"><a href="{link ctl=photos act=view id=$picture['next']['id']}#pic_block" style="background:url('{img $picture['next']['thumb']}') center no-repeat;"></a></li>
                                {else}
                                <li id="pic_last" class="navitem"><a href="javascript:void(0);">{lang this_last_photo}</a></li>
                                {/if}
                            </ul>
                            </div>
                            <div>
                                <a href="{if $picture['next']}{link ctl=photos act=view id=$picture['next']['id']}#pic_block{else}javascript:void(0){/if}" class="turn_page_down">{lang next_photo}</a>
                            </div>
                        </div>
                    </div>
                    {$photo_view_sidebar}
                </div>
            </td>
        </tr>
    </table>
</div>
{template block/footer}